/* Powdrr links: the page behind the bio link. Powdrr Editorial (Stone canvas, Ivory cards, Espresso type, one Peach
   accent, Instrument Serif and Montserrat), built for a phone held in one hand inside Instagram's own browser.
   It stands alone, so it loads without the studio's styles. */
@font-face { font-family: 'Instrument Serif'; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts-site/instrument-serif-latin-400-italic.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts-site/montserrat-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts-site/montserrat-latin-500-normal.woff2) format('woff2'); }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts-site/montserrat-latin-600-normal.woff2) format('woff2'); }

:root {
  --stone: #C7B9AD; --ivory: #FAF8F5; --espresso: #2F2826; --peach: #E0A18A; --taupe: #8B7668;
  --ink-soft: rgba(47, 40, 38, .82); --hair: rgba(47, 40, 38, .14);
  --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
  --sans: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .61, .36, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--stone); color: var(--espresso); font: 400 16px/1.55 var(--sans); -webkit-font-smoothing: antialiased; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.lk { max-width: 1120px; margin: 0 auto; padding: max(20px, env(safe-area-inset-top)) 14px calc(36px + env(safe-area-inset-bottom)); }

/* Who Powdrr helps, in the words of the bio they just tapped. */
.lk-top { text-align: center; padding: 4px 6px 24px; }
.wordmark { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.wordmark img { height: 20px; width: auto; }
.wordmark b { font: 600 13px/1 var(--sans); letter-spacing: .3em; }
h1 { margin: 20px auto 10px; max-width: 17ch; font: italic 400 clamp(35px, 9.4vw, 66px)/1.02 var(--serif); letter-spacing: -.015em; text-wrap: balance; }
.lk-sub { margin: 0 auto; max-width: 30ch; font: 500 15px/1.5 var(--sans); color: var(--ink-soft); text-wrap: balance; }

h2 { margin: 0; font: italic 400 36px/1.02 var(--serif); letter-spacing: -.01em; }
.who { display: inline-block; margin: 0 0 12px; padding: 6px 12px; border-radius: 999px; background: rgba(224, 161, 138, .32); font: 600 12.5px/1.3 var(--sans); }
.lede { margin: 9px 0 0; font: 500 15px/1.5 var(--sans); }
/* What it does: three plain lines, ruled like a price list instead of ticked. */
.does { list-style: none; margin: 16px 0 0; padding: 0; font: 400 14.5px/1.45 var(--sans); }
.does li { padding: 10px 0; border-top: 1px solid var(--hair); }

.btn { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 15px 24px; border: 1px solid var(--espresso); border-radius: 999px; background: var(--espresso); color: var(--ivory); font: 600 15.5px/1.2 var(--sans); text-align: center; text-decoration: none; cursor: pointer; transition: transform .25s var(--ease), opacity .25s var(--ease); }
.btn:hover { transform: translateY(-1px); opacity: .92; }
.btn.peach { background: var(--peach); border-color: var(--peach); color: var(--espresso); }
.btn.ghost { background: transparent; color: var(--espresso); }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--espresso); outline-offset: 3px; }

/* Powdrr AI: the dark card, the loudest thing on the page, with a reel it made playing beside its name. */
.ai { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 16px; padding: 22px 20px 20px; border-radius: 28px; background: var(--espresso); color: var(--ivory); }
.ai .who { background: rgba(224, 161, 138, .2); color: var(--peach); }
.ai h2 { font-size: clamp(44px, 12.5vw, 76px); line-height: .95; }
.ai .lede { color: rgba(250, 248, 245, .9); }
.ai-reel { margin: 0; width: clamp(104px, 29vw, 232px); align-self: start; }
.ai-reel video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 16px; background: #1f1a19; }
.ai-reel figcaption { margin-top: 7px; font: 500 11.5px/1.2 var(--sans); text-align: center; color: rgba(250, 248, 245, .72); }
.ai .does, .ig, .ai .note { grid-column: 1 / -1; }
.ai .does li { border-color: rgba(250, 248, 245, .16); }
.ai .does li:last-child { border-bottom: 1px solid rgba(250, 248, 245, .16); }
.ig { display: grid; gap: 10px; margin-top: 18px; }
.ig-box { display: flex; align-items: center; min-height: 56px; padding: 0 22px; border-radius: 999px; background: var(--ivory); color: var(--espresso); font: 500 17px/1 var(--sans); }
.ig-box span { color: rgba(47, 40, 38, .6); margin-right: 2px; }
.ig-box input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; padding: 16px 0; font: inherit; color: inherit; }
.ig-box input::placeholder { color: rgba(47, 40, 38, .45); }
.ig-box:focus-within { box-shadow: 0 0 0 3px var(--peach); }
.ai .btn:focus-visible { outline-color: var(--ivory); }
.note { margin: 12px 0 0; font: 500 13px/1.45 var(--sans); text-align: center; color: rgba(250, 248, 245, .78); text-wrap: balance; }

/* The memberships: who each is for, what it does, one button. */
.ways { display: grid; gap: 14px; margin-top: 14px; }
.way { display: flex; flex-direction: column; overflow: hidden; border-radius: 28px; background: var(--ivory); }
.way-pic { display: block; }
.way-pic img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
#launch .way-pic img { object-position: 50% 22%; }
#training .way-pic img { object-position: 40% 40%; }
#marketing .way-pic img { object-position: 60% 25%; }
.way-body { display: flex; flex-direction: column; flex: 1; padding: 18px 20px 20px; }
.way .who { align-self: flex-start; }
.way .does { margin-bottom: 18px; }
.way .does li:last-child { border-bottom: 1px solid var(--hair); }
.way .btn { margin-top: auto; }

.unsure { padding: 40px 12px 8px; text-align: center; }
.unsure p { margin: 8px auto 18px; max-width: 30ch; font: 500 15px/1.5 var(--sans); color: var(--ink-soft); }
.unsure .btn { max-width: 340px; margin: 0 auto; }
.more { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 22px; margin-top: 26px; font: 500 14px/1.4 var(--sans); }
.more a { padding: 6px 0; text-underline-offset: 4px; }
.lk-foot { margin-top: 26px; text-align: center; font: 400 12px/1.5 var(--sans); color: var(--ink-soft); }

/* Wider screens: Powdrr AI across the top with a bigger reel, the three memberships side by side beneath it. */
@media (min-width: 700px) {
  .lk { padding: 34px 28px 56px; }
  .lk-top { padding-bottom: 34px; }
  h1 { max-width: 20ch; }
  .lk-sub { font-size: 17px; max-width: none; }
  .ai { grid-template-columns: minmax(0, 1fr) auto; gap: 0 40px; padding: 38px 40px 34px; border-radius: 36px; }
  .ai-text { grid-column: 1; align-self: end; }
  .ai .lede { max-width: 44ch; font-size: 17px; }
  .ai-reel { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
  .ai .does, .ig, .ai .note { grid-column: 1; }
  .ai .does { font-size: 15.5px; max-width: 52ch; }
  .ig { grid-template-columns: minmax(0, 1fr) auto; max-width: 560px; }
  .ai .note { text-align: left; }
}
@media (min-width: 940px) {
  .ways { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 18px; }
  .way h2 { font-size: 34px; }
  .way .who { display: flex; align-items: center; min-height: 44px; }
  .way .btn { font-size: 15px; padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .btn { transition: none; } }