/* Teller — creator storefronts (shared layout + per-brand themes)
   Built from the Figma frames "Storefront — … · Teller" and "PDP — StackLab · SRM-01 Sermorelin · Teller" */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--body-font); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
p, h1, h2, h3, blockquote { margin: 0; font-weight: 400; }
ul { margin: 0; padding: 0; list-style: none; }

:root {
  --gutter: clamp(20px, 4.45vw, 64px);
  --meta: #8f847c;
  --muted: #62554e;
  --line: #e1d9d0;
}
.wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Teller chrome ---------- */
.sf-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.sf-header .wrap { height: 88px; display: flex; align-items: center; justify-content: space-between; }
.sf-header .logo svg { height: 26px; width: auto; display: block; color: #12100E; }
.sf-back { font: 500 11px/1 "Public Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #62554e; transition: opacity .2s; }
.sf-back:hover { opacity: .65; }

.sf-hero-img { width: 100%; height: clamp(280px, 38.9vw, 560px); object-fit: cover; }

.sf-footer { padding: 0 0 56px; }
.sf-footer .wrap > .inner { border-top: 1px solid var(--line); padding-top: 50px; display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; align-items: flex-start; }
.sf-powered { font-family: var(--display); font-size: var(--pb-size, 28px); line-height: 1.2; color: var(--pb-color, var(--ink)); letter-spacing: var(--pb-ls, -.01em); white-space: nowrap; }
.sf-powered svg { display: inline-block; height: var(--pb-logo, 32px); width: auto; margin-left: .3em; vertical-align: calc(var(--pb-logo, 32px) * -0.107); color: currentColor; }
.sf-disclaimer { max-width: 400px; font: 400 12px/1.6 "Hanken Grotesk", sans-serif; color: #8f847c; }
.sf-copy { margin-top: clamp(80px, 14vw, 200px); font: 400 10px/1.3 "Public Sans", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #8f847c; }

/* ---------- Shared storefront layout ---------- */
.sf-eyebrow { font-family: var(--eb-font); font-weight: var(--eb-weight, 600); font-size: var(--eb-size, 12px); letter-spacing: var(--eb-ls, .16em); text-transform: uppercase; color: var(--accent); line-height: 1.3; }

.sf-intro { padding: 64px 0 0; }
.sf-intro .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); gap: 48px; }
.sf-brand { margin-top: 24px; font-family: var(--display); color: var(--brand-color, var(--ink)); line-height: 1.1; }
.sf-lede { margin-top: 11px; font-size: 17px; line-height: 1.6; color: var(--muted); }
.sf-btn { display: inline-block; margin-top: 32px; padding: 16px 32px; font-family: var(--btn-font, var(--body-font)); font-weight: var(--btn-weight, 600); font-size: var(--btn-size, 15px); line-height: 20px; letter-spacing: var(--btn-ls, 0); text-transform: var(--btn-case, none); color: var(--btn-ink, #fffcf8); background: var(--btn-bg); border-radius: var(--btn-radius, 999px); transition: filter .2s, transform .2s; }
.sf-btn:hover { filter: brightness(1.12); }

.sf-why { padding: 110px 0 0; }
.sf-why h2 { margin-top: 24px; font-family: var(--display); color: var(--why-color, var(--ink)); max-width: 820px; }
.sf-why .sf-body { margin-top: 28px; max-width: 640px; font-size: 16px; line-height: 1.68; color: var(--muted); }

.sf-program { padding: 120px 0 0; }
.sf-program-head { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; }
.sf-list { margin-top: 36px; border-top: 1px solid var(--line); }
.sf-group { border-bottom: 1px solid var(--line); padding: 22px 0 32px; }
.sf-group-label { font-family: var(--gl-font, var(--eb-font)); font-weight: var(--gl-weight, 600); font-size: var(--gl-size, 12px); letter-spacing: var(--gl-ls, .16em); text-transform: uppercase; color: var(--gl-color, var(--accent)); }
.sf-item { display: grid; grid-template-columns: minmax(0, 560px) auto; justify-content: space-between; gap: 24px; margin-top: 20px; }
.sf-group-label + .sf-item { margin-top: 18px; }
.sf-item + .sf-item { margin-top: 28px; }
.sf-item h3 { font-family: var(--item-font, var(--display)); font-weight: var(--item-weight, 400); font-size: var(--item-size, 28px); letter-spacing: var(--item-ls, -.01em); line-height: 1.25; color: var(--ink); }
.sf-item .desc { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.sf-item .tag { margin-top: 14px; font-family: var(--tag-font); font-style: var(--tag-style, normal); font-weight: var(--tag-weight, 400); font-size: var(--tag-size, 16px); letter-spacing: var(--tag-ls, 0); text-transform: var(--tag-case, none); color: var(--accent); }
.sf-item .meta { margin-top: 8px; font-family: var(--meta-font, var(--body-font)); font-size: 10px; letter-spacing: var(--meta-ls, .12em); text-transform: uppercase; color: var(--meta); }
.sf-item .price { text-align: right; white-space: nowrap; font-family: var(--price-font, var(--display)); font-weight: var(--price-weight, 400); font-size: var(--price-size, 22px); letter-spacing: var(--price-ls, 0); color: var(--price-color, var(--accent)); padding-top: 4px; }

.sf-band { margin-top: 78px; background: var(--band); padding: 80px 0; }
.sf-band .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 48px; align-items: start; }
.sf-band h2 { font-family: var(--display); color: var(--band-h, var(--accent)); line-height: 1.1; }
.sf-band .sf-body { font-size: 15px; line-height: 1.65; color: var(--muted); }
.sf-attrib { margin-top: 24px; font: 600 10px/1.4 var(--eb-font); letter-spacing: .14em; text-transform: uppercase; color: var(--meta); }

.sf-after-band { padding-top: 200px; }

/* ---------- Mind Pump ---------- */
.b-mindpump {
  --bg: #fffcf8; --ink: #271e19; --muted: #62554e; --accent: #7b4300; --line: #e1d9d0; --band: #fceedc;
  --display: "Anton", Impact, sans-serif; --body-font: "Hanken Grotesk", system-ui, sans-serif; --eb-font: "Hanken Grotesk", sans-serif;
  --btn-bg: #915c08;
  --gl-font: "Anton", sans-serif; --gl-weight: 400; --gl-size: 20px; --gl-ls: .01em; --gl-color: #915c08;
  --item-font: "Familjen Grotesk", "Hanken Grotesk", sans-serif; --item-weight: 600; --item-size: 26px;
  --tag-font: "Hanken Grotesk", sans-serif; --tag-weight: 600; --tag-size: 11px; --tag-ls: .01em; --tag-case: uppercase;
  --price-size: 22px;
  --pb-size: 28px; --pb-ls: .01em; --pb-logo: 35px;
}
.b-mindpump .sf-brand { font-size: clamp(64px, 8.3vw, 120px); letter-spacing: .01em; line-height: 1.25; margin-top: 12px; }
.b-mindpump .sf-why h2 { font-size: 40px; line-height: 1.15; letter-spacing: .01em; text-transform: uppercase; }
.b-mindpump .sf-band h2 { font-size: clamp(44px, 5vw, 72px); letter-spacing: .01em; line-height: 1.2; }

/* ---------- Womaness ---------- */
.b-womaness {
  --bg: #fdf6f1; --ink: #000; --muted: #333; --accent: #483349; --line: #e5ddd6; --band: #ebe4f1; --meta: #8a8380;
  --display: "Fraunces", Georgia, serif; --body-font: "Archivo", system-ui, sans-serif; --eb-font: "Archivo", sans-serif;
  --eb-weight: 700; --eb-size: 13px; --eb-ls: .03em;
  --brand-color: #e41326; --why-color: #e41326;
  --btn-bg: #e41326; --btn-ink: #fff; --btn-radius: 0; --btn-font: "Archivo", sans-serif; --btn-weight: 700; --btn-size: 14px; --btn-ls: .02em; --btn-case: uppercase;
  --gl-weight: 700; --gl-size: 13px; --gl-ls: .03em;
  --item-size: 28px; --tag-font: "Fraunces", serif; --tag-style: italic; --meta-ls: .02em;
  --price-font: "Archivo", sans-serif; --price-weight: 500; --price-size: 18px; --price-ls: .01em;
  --pb-size: 28px; --pb-logo: 30px; --pb-color: #000;
}
.b-womaness .sf-brand { font-weight: 300; font-size: clamp(64px, 8.3vw, 120px); letter-spacing: -.02em; line-height: 1.2; margin-top: 16px; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; }
.b-womaness .sf-brand small { font: 700 15px/1 "Archivo", sans-serif; letter-spacing: .05em; color: #483349; }
.b-womaness .sf-lede { color: #333; }
.b-womaness .pills { margin-top: 12px; display: flex; gap: 12px; flex-wrap: wrap; }
.b-womaness .pills span { border: 1px solid #e5ddd6; border-radius: 999px; padding: 8px 18px; font: 700 11px/12px "Archivo", sans-serif; letter-spacing: .02em; color: #483349; }
.b-womaness .sf-why h2 { font-weight: 300; font-size: 44px; line-height: 1.15; letter-spacing: -.01em; }
.b-womaness .sf-band .wrap { grid-template-columns: minmax(0, 1fr) auto; }
.b-womaness .sf-band blockquote { font: italic 400 48px/1.25 "Fraunces", serif; color: #483349; letter-spacing: -.01em; max-width: 560px; }
.b-womaness .sf-band .sf-body { margin-top: 38px; max-width: 420px; }
.b-womaness .provider { width: 330px; }
.b-womaness .provider img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; }
.b-womaness .provider .name { margin-top: 20px; font: 600 16px/1.1 "Archivo", sans-serif; color: #000; }
.b-womaness .provider .cred { margin-top: 8px; font: 700 10px/1.1 "Archivo", sans-serif; letter-spacing: .02em; color: #8a8380; }

/* ---------- StackLab ---------- */
.b-stacklab {
  --bg: #f4f3ee; --ink: #111214; --muted: #5f5e57; --accent: #b8341f; --red: #e5432a; --line: #e1d9d0; --band: #111214; --meta: #8c8b84;
  --display: "Martian Mono", ui-monospace, monospace; --body-font: "Archivo", system-ui, sans-serif; --eb-font: "Martian Mono", monospace;
  --eb-weight: 400; --eb-size: 11px; --eb-ls: .01em;
  --btn-bg: #111214; --btn-ink: #f4f3ee; --btn-radius: 0; --btn-font: "Martian Mono", monospace; --btn-weight: 400; --btn-size: 13px; --btn-ls: .01em;
  --gl-font: "Martian Mono", monospace; --gl-weight: 500; --gl-size: 13px; --gl-ls: .01em; --gl-color: #111214;
  --item-weight: 500; --item-size: 22px; --meta-font: "Martian Mono", monospace; --meta-ls: .005em;
  --pb-size: 18px; --pb-logo: 25px; --pb-ls: -.01em;
}
.b-stacklab .sf-brand { font-weight: 800; font-size: clamp(48px, 5vw, 72px); letter-spacing: -.02em; margin-top: 40px; }
.b-stacklab .sf-brand span, .b-stacklab .red { color: var(--red); }
.b-stacklab .sf-btn { padding: 17px 43px; }
.b-stacklab .sf-why h2 { font-weight: 500; font-size: 32px; line-height: 1.25; letter-spacing: -.02em; text-transform: uppercase; }
.b-stacklab .sf-program-head .count { font: 400 10px/1.3 "Martian Mono", monospace; letter-spacing: .01em; text-transform: uppercase; color: #5f5e57; }
.b-stacklab .sf-item .code { font: 400 10px/1.2 "Martian Mono", monospace; letter-spacing: .01em; text-transform: uppercase; color: var(--accent); white-space: pre; }
.b-stacklab .sf-item h3 { margin-top: 10px; }
.b-stacklab a.sf-item h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgba(17,18,20,.25); transition: text-decoration-color .2s; }
.b-stacklab a.sf-item:hover h3 { text-decoration-color: var(--red); }
.b-stacklab .sf-item .desc { font-size: 14px; margin-top: 8px; }
.b-stacklab .sf-item .meta { font-size: 9px; margin-top: 10px; }
.b-stacklab .sf-item + .sf-item { margin-top: 30px; }
.b-stacklab .price { font-family: "Martian Mono", monospace; text-align: right; }
.b-stacklab .price s { display: block; font-size: 12px; color: #8c8b84; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.b-stacklab .price b { display: block; margin-top: 6px; font-weight: 500; font-size: 16px; color: #111214; }
.b-stacklab .fda { margin-top: 16px; max-width: 640px; font-size: 11px; line-height: 1.5; color: #8c8b84; }
.b-stacklab .sf-band { padding: 76px 0; margin-top: 124px; }
.b-stacklab .sf-band h2 { font-weight: 500; font-size: clamp(36px, 3.9vw, 56px); letter-spacing: -.02em; color: #f4f3ee; margin-top: 20px; }
.b-stacklab .sf-band h2 s { text-decoration-color: var(--red); text-decoration-thickness: 5px; }
.b-stacklab .sf-band .sf-body { color: #b8b5ad; }
.b-stacklab .sf-band .sf-attrib { font: 400 10px/1.4 "Martian Mono", monospace; letter-spacing: .01em; color: #8c8b84; }
.b-stacklab .facts { padding-top: 45px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.b-stacklab .facts dt { font: 400 10px/1.2 "Martian Mono", monospace; letter-spacing: .01em; color: var(--accent); }
.b-stacklab .facts dd { margin: 8px 0 0; font: 400 15px/1.1 "Archivo", sans-serif; color: #111214; }
.b-stacklab .sf-after-band { padding-top: 100px; }

/* ---------- Rich Roll ---------- */
.b-richroll {
  --bg: #f3f6f2; --ink: #271e19; --muted: #62554e; --accent: #1c5434; --line: #e1d9d0; --band: #e5f5ea;
  --display: "Sorts Mill Goudy", Georgia, serif; --body-font: "Hanken Grotesk", system-ui, sans-serif; --eb-font: "Hanken Grotesk", sans-serif;
  --brand-color: #1c5434; --why-color: #1c5434;
  --btn-bg: #346b49; --btn-radius: 16px;
  --gl-color: #346b49;
  --item-size: 30px; --tag-font: "Sorts Mill Goudy", serif; --tag-style: italic; --tag-size: 17px;
  --price-size: 24px;
  --pb-size: 30px; --pb-logo: 31px;
}
.b-richroll .sf-brand { font-size: clamp(64px, 7.8vw, 112px); letter-spacing: -.01em; line-height: 1.3; margin-top: 8px; }
.b-richroll .sf-why h2 { font-size: 46px; line-height: 1.15; letter-spacing: -.01em; }
.b-richroll .sf-band h2 { font-style: italic; font-size: clamp(36px, 3.6vw, 52px); letter-spacing: -.01em; margin-top: 16px; }

/* ---------- Max Lugavere ---------- */
.b-max {
  --bg: #faf5f8; --ink: #271e19; --muted: #62554e; --accent: #642a53; --line: #e1d9d0; --band: #fcedf6;
  --display: "Gloock", Georgia, serif; --body-font: "Hanken Grotesk", system-ui, sans-serif; --eb-font: "Hanken Grotesk", sans-serif;
  --brand-color: #642a53;
  --btn-bg: #793d67;
  --item-size: 32px;
  --price-font: "Hanken Grotesk", sans-serif; --price-weight: 600; --price-size: 16px; --price-ls: .01em;
  --pb-size: 28px; --pb-logo: 30px;
}
.b-max .sf-brand { font-size: clamp(56px, 6.9vw, 100px); letter-spacing: -.01em; line-height: 1.2; margin-top: 16px; }
.b-max .sf-program { padding-top: 88px; }
.b-max .sf-item { margin: 0; padding: 30px 0 32px; border-bottom: 1px solid var(--line); grid-template-columns: minmax(0, 640px) auto; }
.b-max .sf-item + .sf-item { margin-top: 0; }
.b-max .sf-item .desc { margin-top: 10px; }
.b-max .sf-list { margin-top: 34px; }
.b-max .sf-band h2 { font-size: clamp(40px, 4.2vw, 60px); letter-spacing: -.01em; margin-top: 10px; }
.b-max .sf-after-band { padding-top: 160px; }

/* ---------- StackLab product page ---------- */
.pdp-top { padding: 40px 0 0; }
.pdp-top .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 48px; }
.pdp-crumb { font: 400 10px/1.2 "Martian Mono", monospace; letter-spacing: .01em; color: #b8341f; white-space: pre-wrap; }
.pdp-crumb a:hover { text-decoration: underline; }
.pdp-rx { margin-top: 36px; font: 400 12px/1.2 "Martian Mono", monospace; letter-spacing: .01em; color: #b8341f; }
.pdp-title { margin-top: 14px; font: 500 clamp(38px, 3.6vw, 52px)/1.12 "Martian Mono", monospace; letter-spacing: -.02em; }
.pdp-lede { margin-top: 32px; max-width: 560px; font-size: 17px; line-height: 1.62; color: #5f5e57; }
.pdp-dose { margin-top: 24px; font: 400 10px/1.2 "Martian Mono", monospace; letter-spacing: .005em; color: #8c8b84; }
.pdp-price { margin-top: 26px; display: flex; align-items: baseline; gap: 18px; font-family: "Martian Mono", monospace; }
.pdp-price s { font-size: 16px; color: #8c8b84; text-decoration-color: #e5432a; text-decoration-thickness: 2px; }
.pdp-price b { font-weight: 500; font-size: 26px; }
.pdp-then { margin-top: 10px; font: 400 10px/1.2 "Martian Mono", monospace; letter-spacing: .005em; color: #8c8b84; }
.pdp-top .sf-btn { margin-top: 30px; padding: 17px 23px; }
.pdp-assure { margin-top: 26px; font: 400 9px/1.3 "Martian Mono", monospace; letter-spacing: .005em; color: #5f5e57; }
.pdp-img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pdp-sec { margin-top: 70px; border-top: 1px solid var(--line); padding-top: 22px; }
.pdp-sec + .pdp-sec { margin-top: 44px; }
.pdp-sec h2 { font: 500 13px/1.2 "Martian Mono", monospace; letter-spacing: .01em; }
.pdp-cols { margin-top: 22px; display: grid; gap: 32px 56px; }
.pdp-cols.c2 { grid-template-columns: 1fr 1fr; }
.pdp-cols.c3 { grid-template-columns: repeat(3, 1fr); }
.pdp-cols.c4 { grid-template-columns: repeat(4, 1fr); }
.pdp-cols h3 { font: 400 11px/1.2 "Martian Mono", monospace; letter-spacing: .01em; color: #b8341f; text-transform: uppercase; }
.pdp-cols h3.ink { color: #111214; }
.pdp-cols p { margin-top: 12px; font-size: 14px; line-height: 1.6; color: #5f5e57; max-width: 620px; }
.plans { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.plan { border: 1px solid #111214; padding: 24px 28px 20px; }
.plan h3 { font: 500 12px/1.2 "Martian Mono", monospace; letter-spacing: .01em; }
.plan .pdp-price { margin-top: 22px; gap: 14px; }
.plan .pdp-price s { font-size: 14px; }
.plan .pdp-price b { font-size: 24px; }
.plan p.inc { margin-top: 24px; font-size: 13px; line-height: 1.6; color: #5f5e57; max-width: 560px; }
.plan .sf-btn { margin-top: 20px; padding: 13px 39px; font-size: 12px; }
.faq { margin-top: 22px; display: grid; gap: 28px; max-width: 900px; }
.faq h3 { font: 400 11px/1.2 "Martian Mono", monospace; letter-spacing: .01em; color: #b8341f; }
.faq p { margin-top: 10px; font-size: 14px; line-height: 1.6; color: #5f5e57; }
.notes { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px 56px; }
.notes blockquote { font-size: 15px; line-height: 1.55; color: #111214; max-width: 560px; }
.notes cite { display: block; margin-top: 16px; font: normal 400 9px/1.2 "Martian Mono", monospace; letter-spacing: .005em; color: #8c8b84; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .sf-intro .wrap, .sf-band .wrap, .b-womaness .sf-band .wrap, .pdp-top .wrap { grid-template-columns: 1fr; gap: 28px; }
  .sf-why { padding-top: 72px; } .sf-program { padding-top: 72px; }
  .sf-why h2 { font-size: 32px !important; }
  .sf-band { padding: 56px 0; }
  .b-stacklab .facts, .pdp-cols.c4 { grid-template-columns: 1fr 1fr; }
  .pdp-cols.c3, .plans, .notes { grid-template-columns: 1fr; }
  .sf-after-band, .b-stacklab .sf-after-band { padding-top: 64px; }
  .b-womaness .provider { width: auto; }
  .b-womaness .sf-band blockquote { font-size: 36px; }
}
@media (max-width: 560px) {
  .sf-item { grid-template-columns: 1fr; gap: 8px; }
  .sf-item .price { text-align: left; }
  .b-stacklab .price { text-align: left; }
  .pdp-cols.c2 { grid-template-columns: 1fr; }
  .sf-powered { white-space: normal; font-size: calc(var(--pb-size) * .8); }
  .sf-header .logo svg { height: 22px; }
}