/* Start here: the link-in-bio hub. Loaded after /assets/fleks-page.css; only what the shared system does not cover.
   Phone first: most visitors arrive from the Instagram and TikTok in-app browsers at about 390px wide,
   so the hero stays short and the first button sits well inside the first screen. */

/* Hero: headline left, The Rebuild card right; stacked on a phone */
.st-hero{padding:clamp(120px,11vw,168px) 0 clamp(48px,6vw,96px)}
.st-hero .page-mega{bottom:auto;top:clamp(96px,9vw,140px)}
.st-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(40px,6vw,104px);align-items:end}
.st-hero h1{max-width:6ch}
.st-hero .lead{max-width:28ch;text-wrap:pretty}

/* Cards: one anatomy for all three. Square corners, hairlines, no shadows. */
.st-card{display:flex;flex-direction:column;align-items:stretch;padding:clamp(20px,2.4vw,32px);border:1px solid var(--stone);background:var(--bone)}
.st-head{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:center}
.st-thumb{width:76px;height:96px;object-fit:cover;background:var(--charcoal)}
.st-thumb-tee{object-fit:contain;background:var(--sand)}
/* The Rebuild: a whole daily page, never cropped */
.st-thumb-page{object-fit:contain;background:#fff;border:1px solid var(--stone)}
/* The Station Method: a type tile, the same size as the other thumbnails */
.st-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ink);color:var(--bone);font-family:var(--display);text-transform:uppercase;text-align:center}
.st-tile span:first-child{font-size:52px;line-height:.8}
.st-tile span:last-child{margin-top:8px;font-size:16px;line-height:1;letter-spacing:.08em}
.st-kicker{display:flex;align-items:center;gap:10px;font:600 11px/1.3 var(--body);text-transform:uppercase;letter-spacing:.14em;color:var(--mute-light)}
.st-kicker span{display:inline-grid;place-items:center;min-width:30px;height:22px;padding:0 6px;border:1.5px solid currentColor;font:400 15px/1 var(--display);letter-spacing:.04em;color:var(--ink)}
.st-card h2{margin-top:10px;font:400 clamp(40px,3.4vw,52px)/.88 var(--display);text-transform:uppercase;letter-spacing:.01em}
.st-text{margin-top:18px;font-size:16px;line-height:1.5;color:#2b2b28;text-wrap:pretty}
.st-small{margin-top:14px;font:600 12px/1.5 var(--body);text-transform:uppercase;letter-spacing:.1em}
.st-nowrap{white-space:nowrap}
.st-card .button{width:100%;margin-top:16px}
.st-card .button>span:last-child{transition:transform .2s var(--ease)}
.st-card .button:hover>span:last-child{transform:translateX(4px)}
.st-links{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:6px}
/* 44px tall hit areas without changing the visual spacing */
.st-links .text-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px}
.st-note{margin-top:6px;font-size:13px;line-height:1.5;color:var(--mute-light);text-wrap:pretty}
.st-note a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* The Rebuild card sits on the dark hero as a bone panel, so the main button is the strongest thing on the screen. */
.st-main{border-color:var(--bone);color:var(--ink)}
.st-main .button{background:var(--ink);border-color:var(--ink);color:var(--bone)}
.st-main .text-link{color:var(--ink)}
.st-main :focus-visible{outline-color:var(--ink)}

/* The Rebuild, free: the Founders' 50 form leads the card, and the paid editions sit underneath as the alternative.
   The card is a bone panel inside the dark hero, so the fields take the light style back from .on-dark. */
.st-offer{margin-top:18px;font-size:17px;font-weight:600;line-height:1.45;color:var(--ink);text-wrap:pretty}
.st-signup{margin-top:16px}
.st-form{display:grid;grid-template-columns:minmax(130px,.8fr) minmax(0,1.6fr);gap:8px}
.st-form .form-status{grid-column:1/-1}
.st-card .st-form .button{grid-column:1/-1;margin-top:0}
.st-main .field{background-color:var(--bone-2);border-color:var(--stone);color:var(--ink);color-scheme:light}
.st-main .field::placeholder{color:var(--mute-light);opacity:1}
.st-main .field:focus{border-color:var(--ink)}
.st-main select.field{padding-right:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%230f0f0e' stroke-width='1.6'/%3E%3C/svg%3E")}
.st-main select.field:invalid{color:var(--mute-light)}
.st-main select.field:has(option[value=""]:checked){color:var(--mute-light)}
.st-main .form-status[data-state=error]{color:#8a2a2a}
.st-signup .st-note{margin-top:10px}
.st-next{margin-top:8px;font-size:14px;line-height:1.5}
.st-next a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.st-signup+.st-text{margin-top:20px}
/* Prefer to buy: the paperback and the paid PDF, with the refund promise, under a hairline */
.st-buy{margin-top:14px;padding-top:14px;border-top:1px solid var(--stone)}
.st-buy-head{font:600 12px/1.5 var(--body);text-transform:uppercase;letter-spacing:.1em}
.st-buy .st-links{margin-top:2px}
.st-buy .st-links+.st-note{margin-top:2px}

/* Tee 01 and the free plan */
.st-more{padding:clamp(40px,6vw,96px) 0}
.st-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,3vw,40px);align-items:stretch}
.st-more .st-card{background:#fbfbf7}
.st-more .st-text{margin-bottom:auto}
.st-more .st-card .button{margin-top:20px}
/* The line under each button is the same height, so the two buttons line up side by side. */
.st-more .st-card .button+.st-note{display:flex;align-items:center;min-height:44px;margin-top:6px}

/* Watch the build */
.st-follow{padding:clamp(48px,6vw,96px) 0}
.st-follow-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:24px clamp(40px,6vw,104px);align-items:end}
.st-follow h2{font-size:clamp(48px,6vw,96px);max-width:none}
.st-social{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.st-social li+li{border-left:1px solid var(--sand-line)}
.st-social a{display:flex;flex-direction:column;justify-content:center;gap:6px;min-height:104px;padding:18px 20px;text-decoration:none;position:relative}
.st-social-name{font:400 clamp(30px,2.6vw,40px)/.9 var(--display);text-transform:uppercase;letter-spacing:.01em}
.st-social-handle{font-size:14px;color:var(--mute-light)}
.st-social-go{position:absolute;top:18px;right:18px;font-size:16px;line-height:1;transition:transform .2s var(--ease)}
.st-social a:hover .st-social-go{transform:translate(3px,-3px)}
.st-social a:hover .st-social-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}

@media(max-width:1099px){
  .st-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,480px)}
}
@media(max-width:899px){
  .st-hero-grid{grid-template-columns:1fr;gap:32px}
  .st-hero h1{max-width:none}
  .st-hero .lead{max-width:34ch}
  .st-main{max-width:560px}
  .st-grid{grid-template-columns:minmax(0,560px)}
  .st-follow-grid{grid-template-columns:1fr}
}
@media(max-width:699px){
  /* Header 60px; the headline starts right under it so the PDF button is reached without scrolling. */
  .st-hero{padding:84px 0 32px}
  .st-hero .page-mega{top:64px;font-size:46vw}
  .st-hero .page-status{margin-bottom:14px}
  .st-hero h1{font-size:clamp(52px,16vw,68px)}
  .st-hero .lead{margin-top:12px;font-size:16px;line-height:1.45}
  .st-hero-grid{gap:24px}
  .st-card{padding:20px}
  .st-head{grid-template-columns:64px minmax(0,1fr);gap:16px}
  .st-thumb{width:64px;height:84px}
  .st-tile span:first-child{font-size:46px}
  .st-tile span:last-child{margin-top:6px;font-size:14px}
  .st-card h2{font-size:clamp(36px,10.5vw,44px)}
  .st-text{margin-top:16px;font-size:16px}
  .st-small{margin-top:12px}
  .st-more{padding:32px 0 40px}
  .st-grid{gap:16px}
  .st-follow{padding:40px 0 48px}
  .st-follow h2{font-size:clamp(44px,13vw,56px)}
  .st-social{grid-template-columns:1fr}
  .st-social li+li{border-left:0}
  .st-social li{border-bottom:1px solid var(--sand-line)}
  .st-social a{display:grid;grid-template-columns:minmax(0,1fr) auto 18px;align-items:center;gap:12px;min-height:64px;padding:12px 0}
  .st-social-name{font-size:30px}
  .st-social-go{position:static}
}
/* 360 to 374px: a slimmer size column and gap, so the "Email address" placeholder is not cut off. */
@media(min-width:360px) and (max-width:374px){
  .st-form{grid-template-columns:120px minmax(0,1fr);column-gap:4px}
  .st-main select.field{padding-right:30px;background-position:right 12px center}
}
/* Under 360px the longest label would push its arrow out of the button: tighter padding, and the label may wrap.
   The free PDF form stacks too, so the email field keeps its full width. */
@media(max-width:359px){
  .st-card .button{gap:12px;padding:12px 16px;white-space:normal;line-height:1.3;text-wrap:balance}
  .st-form{grid-template-columns:1fr}
}