/* The two home pages (grow.html, from-ale.html): the sales pages hookshift.co's A/B test
   splits visitors between (functions/_middleware.js). Fonts are the site's own files. */
@font-face { font-family: "Hammersmith One"; src: url("/fonts/HammersmithOne-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("/fonts/Poppins-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Bebas Neue"; src: url("/fonts/BebasNeue-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Lato"; src: url("/fonts/Lato-Black.woff") format("woff"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Protest Riot"; src: url("/fonts/ProtestRiot-Regular.woff") format("woff"); font-display: swap; }
@font-face { font-family: "Playfair Display"; src: url("/fonts/PlayfairDisplay-VariableFont_wght.woff") format("woff"); font-weight: 400 900; font-display: swap; }
/* Layout: one narrow sales column, bands that run edge to edge, the product shown before it is explained.
   The site's own look (hookshift.co): warm paper, orange gradient, Hammersmith One names, Poppins reads.
   Single light theme on purpose, like the live site. */
:root {
  --bg: #faf8f5;
  --surface: #ffffff;
  --ink: #16181d;
  --muted: #5f6671;
  --accent: #f5842f;
  --accent-ink: #a8540c;
  --accent-wash: #fff4e6;
  --accent-line: #f6d3a5;
  --border: #e7e5e1;
  --night: #1f2229;
  --night-ink: #f3f1ee;
  --night-muted: #a3a8b1;
  --good: #2f7d4f;
  --bad: #b3412e;
  --gradient: linear-gradient(135deg, #ffc46b 0%, #f5842f 100%);
  --display: "Hammersmith One", "Trebuchet MS", sans-serif;
  --sans: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1080px; margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
.narrow { max-width: 720px; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.08; margin: 0; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: clamp(2.1rem, 6vw, 3.6rem); }
h2 { font-size: clamp(1.65rem, 4vw, 2.4rem); }
h3 { font-size: 1.25rem; }
p { margin: 0; }
a { color: var(--accent-ink); }
.eyebrow { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-ink); }
.lede { font-size: 1.12rem; color: var(--muted); max-width: 36rem; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.stack-lg { display: flex; flex-direction: column; gap: 1.5rem; }

/* top bar: the logo only, no menu */
.bar { padding-block: 18px; }
.brand { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--display); font-size: 1.3rem; color: var(--ink); text-decoration: none; }
.brand-mark { width: 26px; height: 26px; border-radius: 8px; background: var(--gradient); box-shadow: inset 0 0 0 2px rgba(255,255,255,0.35); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 1.6rem; border-radius: 14px; background: var(--ink); color: #fff; font-family: var(--sans); font-weight: 600; font-size: 1.05rem; text-decoration: none; transition: transform 0.15s ease, box-shadow 0.15s ease; box-shadow: 0 10px 24px -12px rgba(22,24,29,0.6); }
.btn:hover { transform: translateY(-1px); box-shadow: 0 14px 28px -12px rgba(22,24,29,0.7); }
.btn:focus-visible, a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.btn .arrow { color: #ffc46b; }
.btn-wide { width: 100%; }
.cta { display: flex; flex-direction: column; gap: 0.7rem; align-items: flex-start; }
.cta-note { font-size: 0.88rem; color: var(--muted); }
.cta-note strong { color: var(--ink); font-weight: 600; }
.checks { display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; font-size: 0.86rem; color: var(--muted); padding: 0; margin: 0; list-style: none; }
.checks li::before { content: ""; display: inline-block; width: 0.5em; height: 0.85em; margin-right: 0.5em; border: solid var(--good); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) translateY(-0.12em); }

/* bands */
section { padding-block: clamp(3rem, 8vw, 5.5rem); }
.band-wash { background: var(--accent-wash); }
.band-night { background: var(--night); color: var(--night-ink); }
.band-night .lede, .band-night .muted { color: var(--night-muted); }
.band-night .eyebrow { color: #ffc46b; }
.band-night .cta-note { color: var(--night-muted); }
.band-night .cta-note strong { color: var(--night-ink); }
.band-night .btn { background: var(--gradient); color: var(--ink); box-shadow: 0 10px 30px -12px rgba(245,132,47,0.7); }
.band-night .btn .arrow { color: var(--ink); }
.rule { border-top: 1px solid var(--border); }

/* hero */
.hero { padding-block: 1rem clamp(2.5rem, 7vw, 4.5rem); background: radial-gradient(50rem 26rem at 90% -10%, var(--accent-wash) 0%, transparent 70%), var(--bg); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 2.5rem; align-items: center; }
.hero-copy { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
@media (max-width: 820px) { .hero-grid { grid-template-columns: 1fr; gap: 1.75rem; } }

/* phones (the live site's mock, unchanged) */
.phones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; align-items: center; padding: 1rem 0.5rem; max-width: 26rem; margin: 0 auto; width: 100%; }
.phone-a { transform: rotate(-6deg) translateY(1rem); }
.phone-b { transform: scale(1.08); z-index: 1; }
.phone-c { transform: rotate(6deg) translateY(1rem); }
.phone { position: relative; aspect-ratio: 9 / 16; width: 100%; max-width: 100%; border-radius: 12% / 6.75%; border: 4px solid #16181d; overflow: hidden; container-type: inline-size; box-shadow: 0 30px 50px -20px rgba(22,24,29,0.45), 0 0 0 1px rgba(22,24,29,0.06); color: #fff; }
.phone::before { content: "Trial reel"; position: absolute; top: 5%; left: 6%; z-index: 2; font-family: var(--sans); font-weight: 600; font-size: 4.6cqw; letter-spacing: 0.04em; padding: 0.35em 0.7em; border-radius: 999px; background: rgba(0,0,0,0.42); color: #fff; }
.video-gym { background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.05) 60%, rgba(0,0,0,0.55) 100%), url("/img/gym.webp") center top / cover no-repeat, #14161b; }
.video-beauty { background: linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0) 25%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.6) 100%), url("/img/beauty.webp") center top / cover no-repeat, #c98d85; }
.video-creator { background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.1) 28%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.45) 100%), url("/img/creator-ringlight.webp") center top / cover no-repeat, #101626; }
.hook { position: absolute; left: 7%; right: 7%; z-index: 1; text-align: center; line-height: 1.02; text-shadow: 0 2px 10px rgba(0,0,0,0.45), 0 0 2px rgba(0,0,0,0.6); font-size: 10.5cqw; overflow-wrap: anywhere; }
.at-39 { top: 39%; } .at-58 { top: 58%; } .at-low { bottom: 32%; } .at-top { top: 14%; } .at-mid { top: 46%; }
.hook-bebas { font-family: "Bebas Neue", Impact, sans-serif; text-transform: uppercase; letter-spacing: 0.035em; font-size: 15cqw; }
.hook-playfair { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-weight: 600; font-size: 10cqw; }
.hook-lato { font-family: "Lato", "Arial Black", sans-serif; font-weight: 900; font-size: 10.5cqw; }
.hook-riot { font-family: "Protest Riot", "Trebuchet MS", sans-serif; font-size: 12.5cqw; }
.reel-ui::before { content: ""; position: absolute; right: 5%; bottom: 13%; width: 9cqw; height: 36cqw; background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.9) 0 3.4cqw, transparent 3.7cqw), radial-gradient(circle at 50% 50%, rgba(255,255,255,0.9) 0 3.4cqw, transparent 3.7cqw), radial-gradient(circle at 50% 90%, rgba(255,255,255,0.9) 0 3.4cqw, transparent 3.7cqw); }
.reel-ui::after { content: ""; position: absolute; left: 6%; bottom: 6%; width: 60%; height: 8cqw; background: radial-gradient(circle at 3.5cqw 50%, rgba(255,255,255,0.95) 0 3.2cqw, transparent 3.5cqw), linear-gradient(rgba(255,255,255,0.85), rgba(255,255,255,0.85)) 9.5cqw 28% / 46% 1.6cqw no-repeat, linear-gradient(rgba(255,255,255,0.5), rgba(255,255,255,0.5)) 9.5cqw 78% / 32% 1.3cqw no-repeat; }
.caption { font-size: 0.86rem; color: var(--muted); text-align: center; }

/* steps: a real sequence, so numbered */
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: step; }
.steps li { counter-increment: step; background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.steps li::before { content: counter(step); width: 2rem; height: 2rem; border-radius: 50%; background: var(--gradient); color: var(--ink); font-family: var(--display); display: grid; place-items: center; font-size: 1.05rem; }
.steps p { color: var(--muted); font-size: 0.97rem; }
@media (max-width: 760px) { .steps { grid-template-columns: 1fr; } }

/* fit lists */
.fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; }
.fit > div { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1.4rem; min-width: 0; }
.fit ul { margin: 0.75rem 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 0.5rem; color: var(--muted); }
.fit .yes h3 { color: var(--good); } .fit .no h3 { color: var(--bad); }
@media (max-width: 680px) { .fit { grid-template-columns: 1fr; } }

/* price */
.price { background: var(--surface); border: 1px solid var(--accent-line); border-radius: 20px; padding: clamp(1.4rem, 4vw, 2.2rem); display: flex; flex-direction: column; gap: 1.1rem; box-shadow: 0 30px 60px -40px rgba(168,84,12,0.45); max-width: 30rem; margin: 0 auto; width: 100%; }
.price .amount { font-family: var(--display); font-size: 3rem; line-height: 1; }
.price .amount small { font-family: var(--sans); font-size: 1rem; color: var(--muted); }
.price ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; }
.price li { padding-left: 1.6rem; position: relative; }
.price li b { font-weight: 600; color: var(--ink); }
.price li .how { display: block; color: var(--muted); font-size: 0.86rem; margin-top: 0.1rem; }
.price li::before { content: ""; position: absolute; left: 0.3rem; top: 0.42em; width: 0.45em; height: 0.8em; border: solid var(--good); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.trial-line { background: var(--accent-wash); border-radius: 12px; padding: 0.75rem 1rem; font-size: 0.92rem; }

/* faq */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); padding-block: 1.05rem; }
.faq summary { cursor: pointer; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--display); font-size: 1.4rem; line-height: 1; color: var(--accent-ink); }
.faq details[open] summary::after { content: "-"; }
.faq details p { margin-top: 0.6rem; color: var(--muted); }

/* final */
.final { text-align: center; }
.final .cta { align-items: center; }
.final h2 { max-width: 22ch; margin: 0 auto; }

footer { padding-block: 2.5rem 6rem; font-size: 0.82rem; color: var(--muted); border-top: 1px solid var(--border); }
footer .wrap { display: flex; flex-direction: column; gap: 0.6rem; }
footer nav { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; }
footer a { color: var(--muted); }

/* the phone's sticky button, shown once the hero button is off screen */
.sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0.7rem max(16px, env(safe-area-inset-right, 0px)) calc(0.7rem + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: rgba(250,248,245,0.94); border-top: 1px solid var(--border); backdrop-filter: blur(8px); display: none; transform: translateY(110%); transition: transform 0.2s ease; }
.sticky.on { transform: none; }
.sticky .btn { width: 100%; padding: 0.85rem 1rem; }
.sticky small { display: block; text-align: center; font-size: 0.75rem; color: var(--muted); margin-top: 0.3rem; }
@media (max-width: 760px) { .sticky { display: block; } }

/* pieces only some versions use */
.pain { display: grid; gap: 0.9rem; }
.pain p { font-size: 1.08rem; }
.voice { font-family: var(--display); font-size: clamp(1.3rem, 3.4vw, 1.75rem); line-height: 1.25; color: var(--ink); }
.band-night .voice { color: var(--night-ink); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2.5rem; align-items: center; }
.split > * { min-width: 0; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } }
.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { font-size: 0.85rem; font-weight: 500; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--surface); border: 1px solid var(--accent-line); }

/* results card (B), the app's dark card */
.results { background: var(--night); color: var(--night-ink); border-radius: 22px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1rem; box-shadow: 0 40px 70px -40px rgba(22,24,29,0.8); max-width: 26rem; width: 100%; margin: 0 auto; }
.results header { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.results h3 { font-size: 1.35rem; }
.results .tag { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); white-space: nowrap; }
.results .group { display: flex; flex-direction: column; gap: 0.55rem; }
.results .group > span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--night-muted); }
.rrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.2rem 1rem; align-items: baseline; font-size: 0.95rem; }
.rrow b { color: #ffc46b; font-variant-numeric: tabular-nums; font-weight: 600; }
.rrow i { grid-column: 1 / -1; height: 4px; border-radius: 4px; background: var(--gradient); width: var(--w); }
.results .foot { font-size: 0.78rem; color: var(--night-muted); }

/* week (C) */
.weeks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.25rem; }
.week { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }
.week h3 { font-size: 1.1rem; }
.grid35 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.grid35 span { aspect-ratio: 1; border-radius: 5px; background: var(--accent-wash); border: 1px solid var(--accent-line); }
.grid35 span.done { background: var(--gradient); border-color: transparent; }
.grid35 span.you { background: var(--ink); border-color: var(--ink); }
.week .total { font-family: var(--display); font-size: 1.6rem; }
.week .total em { font-style: normal; color: var(--accent); }
.days { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.days li { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 1rem; padding-block: 0.9rem; border-top: 1px solid var(--border); }
.days b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.days p { color: var(--muted); }
@media (max-width: 680px) { .weeks { grid-template-columns: 1fr; } .days li { grid-template-columns: 1fr; gap: 0.2rem; } }

/* compare table (D) */
.tablewrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); }
table.compare { border-collapse: collapse; width: 100%; min-width: 520px; font-size: 0.95rem; }
.compare th, .compare td { text-align: left; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.compare thead th { font-family: var(--display); font-weight: 400; font-size: 1.05rem; background: var(--accent-wash); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { font-weight: 600; }
.compare .no { color: var(--bad); } .compare .yes { color: var(--good); font-weight: 500; }
.variants { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.8rem; }
.variants figure { margin: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.variants figcaption { font-size: 0.8rem; color: var(--muted); text-align: center; }
.variants figcaption b { color: var(--ink); display: block; font-weight: 600; }
@media (max-width: 680px) { .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hero .variants { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 24rem; margin: 0 auto; width: 100%; }
.subline { position: absolute; left: 10%; right: 10%; bottom: 28%; z-index: 1; text-align: center; font-family: "Lato", "Arial Black", sans-serif; font-weight: 900; font-size: 6cqw; line-height: 1.2; text-shadow: 0 1px 6px rgba(0,0,0,0.6); }
.subline.box { background: #fff; color: #16181d; text-shadow: none; padding: 0.2em 0.4em; border-radius: 0.3em; left: 14%; right: 14%; }
.subline.yellow { color: #ffd84d; }

/* letter (E) */
.letter { font-size: 1.12rem; line-height: 1.75; }
.letter p + p { margin-top: 1.1rem; }
.letter h2 { margin-block: 2.6rem 1rem; font-size: clamp(1.45rem, 3.4vw, 1.9rem); }
.sig { display: flex; align-items: center; gap: 0.9rem; }
.face { width: 64px; height: 64px; border-radius: 50%; background: var(--gradient); display: grid; place-items: center; font-family: var(--display); font-size: 1.6rem; color: var(--ink); flex: none; border: 3px solid var(--surface); box-shadow: 0 6px 18px -8px rgba(22,24,29,0.5); }
.face.big { width: 112px; height: 112px; font-size: 2.6rem; }
img.face { object-fit: cover; background: var(--accent-wash); }
.slot { border: 2px dashed var(--accent-line); border-radius: 16px; padding: 1.5rem; text-align: center; color: var(--accent-ink); font-size: 0.9rem; background: var(--surface); }
.pull { border-left: 4px solid var(--accent); padding-left: 1.1rem; font-family: var(--display); font-size: 1.35rem; line-height: 1.35; }
.numbers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-block: 1.6rem; }
.numbers div { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 1rem; display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.numbers b { font-family: var(--display); font-weight: 400; font-size: 1.9rem; line-height: 1.1; }
.numbers span { font-size: 0.85rem; color: var(--muted); line-height: 1.4; }
@media (max-width: 620px) { .numbers { grid-template-columns: 1fr; } }
.ps { font-size: 1rem; color: var(--muted); }
.proof { padding-block: 1.4rem; border-block: 1px solid var(--border); background: var(--surface); }
.proof .wrap { display: flex; align-items: center; gap: 1rem; }
.proof p { font-size: 0.98rem; }
.proof b { font-family: var(--display); font-weight: 400; font-size: 1.1rem; }
.proof .face { width: 52px; height: 52px; font-size: 1.3rem; }
/* round 2: time, and the first week with Ale */
.timecard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; max-width: 34rem; width: 100%; margin: 0 auto; }
.timecard > div { border-radius: 18px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.timecard .before { background: var(--surface); border: 1px solid var(--border); }
.timecard .after { background: var(--night); color: var(--night-ink); }
.timecard small { font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.timecard .after small { color: #ffc46b; }
.timecard b { font-family: var(--display); font-weight: 400; font-size: clamp(1.7rem, 5vw, 2.3rem); line-height: 1.05; }
.timecard .before b { color: var(--bad); text-decoration: line-through; text-decoration-thickness: 3px; text-decoration-color: rgba(179,65,46,0.55); }
.timecard p { font-size: 0.88rem; color: var(--muted); line-height: 1.45; }
.timecard .after p { color: var(--night-muted); }
@media (max-width: 420px) { .timecard { grid-template-columns: 1fr; } }
.emails { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; overflow: hidden; }
.emails li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); gap: 0.9rem; padding: 0.95rem 1.1rem; border-top: 1px solid var(--border); align-items: baseline; }
.emails li:first-child { border-top: 0; }
.emails .day { font-size: 0.76rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent-ink); }
.emails b { font-weight: 600; display: block; }
.emails span.what { color: var(--muted); font-size: 0.93rem; }
.from { display: flex; align-items: center; gap: 0.8rem; font-size: 0.9rem; color: var(--muted); }
.from img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.month { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; max-width: 22rem; width: 100%; margin: 0 auto; }
.month span { aspect-ratio: 1; border-radius: 6px; background: var(--gradient); display: grid; place-items: center; font-size: 0.68rem; font-weight: 600; color: rgba(22,24,29,0.75); }
.month span.you { background: var(--ink); color: #fff; }
.month-card { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.25rem; display: flex; flex-direction: column; gap: 0.9rem; max-width: 26rem; width: 100%; margin: 0 auto; box-shadow: 0 30px 60px -40px rgba(168,84,12,0.45); }
.month-card h3 { font-size: 1.1rem; }
.month-card p { font-size: 0.88rem; color: var(--muted); }
.said { display: flex; flex-direction: column; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.said li { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.8rem 1rem; font-size: 1rem; }
.band-night .said li { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); color: var(--night-ink); }
/* round 3 */
.timecard b em { font-style: normal; color: var(--accent); }
.timecard .before b { color: var(--ink); text-decoration: none; }
.timecard .bar-month { height: 10px; border-radius: 10px; background: rgba(22,24,29,0.08); overflow: hidden; margin-top: 0.4rem; }
.timecard .after .bar-month { background: rgba(255,255,255,0.12); }
.timecard .bar-month i { display: block; height: 100%; border-radius: 10px; background: var(--bad); }
.timecard .after .bar-month i { background: #ffc46b; min-width: 6px; }
.timecard .permonth { font-size: 0.8rem; font-weight: 600; color: var(--ink); }
.timecard .after .permonth { color: var(--night-ink); }
.emails li { grid-template-columns: 4.2rem minmax(0, 1fr) auto; }
.emails .thumb { position: relative; width: 112px; aspect-ratio: 1200 / 638; border-radius: 8px; overflow: hidden; box-shadow: 0 6px 14px -8px rgba(22,24,29,0.5); align-self: center; }
.emails .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.emails .thumb::after { content: ""; position: absolute; left: 50%; top: 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; background: rgba(255,255,255,0.92) url("/img/home/play.svg") center / 14px no-repeat; }
@media (max-width: 520px) { .emails li { grid-template-columns: 3.4rem minmax(0, 1fr); } .emails .thumb { grid-column: 2; width: 100%; max-width: 220px; } }
.toggle { display: inline-flex; background: var(--accent-wash); border: 1px solid var(--accent-line); border-radius: 999px; padding: 4px; gap: 4px; align-self: flex-start; }
.toggle button { font: inherit; font-size: 0.88rem; font-weight: 600; border: 0; background: transparent; color: var(--muted); padding: 0.4rem 0.9rem; border-radius: 999px; cursor: pointer; }
.toggle button[aria-pressed="true"] { background: var(--surface); color: var(--ink); box-shadow: 0 2px 8px -4px rgba(22,24,29,0.4); }
.toggle button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.toggle .save { color: var(--good); font-weight: 600; }
.niches { font-size: 1.05rem; color: var(--muted); max-width: 40rem; }
.growth { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 1.5rem; align-items: center; }
@media (max-width: 760px) { .growth { grid-template-columns: 1fr; } }
.chartcard { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: 1.1rem 1.1rem 0.8rem; display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
.chartcard h3 { font-size: 1.15rem; }
.chartcard svg { width: 100%; height: auto; display: block; }
.chartcard .note { font-size: 0.75rem; color: var(--muted); }
.deck { display: flex; justify-content: center; padding: 1rem 0 0.5rem; }
.deck figure { margin: 0 0 0 -9%; width: 30%; max-width: 132px; position: relative; transform: rotate(var(--r)) translateY(var(--y)); border-radius: 12px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 16px 30px -16px rgba(22,24,29,0.6); aspect-ratio: 9 / 16; background: #ddd; }
.deck img { width: 100%; height: 100%; object-fit: cover; display: block; }
.deck figure:first-child { margin-left: 0; }
.deck figcaption { position: absolute; left: 6%; bottom: 5%; background: rgba(22,24,29,0.82); color: #fff; font-size: 0.72rem; font-weight: 600; border-radius: 999px; padding: 0.2rem 0.4rem; text-align: center; font-variant-numeric: tabular-nums; }
.jump { background: var(--surface); border: 1px solid var(--border); border-radius: 20px; padding: clamp(1.2rem, 4vw, 1.8rem); display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.jump-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 0.75rem; }
.jump-row svg { align-self: center; }
.jump-row > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.jump-row small { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.jump-row b { font-family: var(--display); font-weight: 400; line-height: 1; }
.jump-row .was b { font-size: clamp(2.4rem, 9vw, 3.4rem); color: var(--muted); }
.jump-row .now b { font-size: clamp(3.4rem, 13vw, 5rem); background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jump-row span.f { font-size: 0.95rem; color: var(--muted); }
.jump-row svg { width: 44px; height: 24px; }
.jump p { font-size: 0.98rem; color: var(--ink); }
/* time card: option 1, red for by hand, green for Hookshift (Ale, 2026-10-28) */
.timecard .before { background: #fbebeb; border: 1px solid #f1c9c3; }
.timecard .after { background: #e5f4e4; border: 1px solid #bfe0c0; color: var(--ink); }
.timecard small { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.timecard .before small, .timecard .before b em { color: var(--bad); }
.timecard .after small, .timecard .after b em { color: var(--good); }
.timecard .before b, .timecard .after b { color: var(--ink); }
.timecard .after p { color: var(--muted); }
.timecard .permonth, .timecard .after .permonth { color: var(--ink); }
.timecard .bar-month { background: rgba(179,65,46,0.12); }
.timecard .after .bar-month { background: rgba(47,125,79,0.14); }
.timecard .bar-month i { background: var(--bad); }
.timecard .after .bar-month i { background: var(--good); min-width: 8px; }
.timecard .ic { width: 22px; height: 22px; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font-size: 13px; line-height: 1; flex: none; letter-spacing: 0; }
.timecard .ic.no { background: var(--bad); } .timecard .ic.yes { background: var(--good); }
.statchips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }

/* Was inline style: the site's CSP allows only its own stylesheets. */
.gap-sm { gap: 0.5rem; }
.center { text-align: center; }
.w-1 { width: 1%; }
.w-full { width: 100%; }
.tilt-1 { --r: -8deg; --y: 14px; }
.tilt-2 { --r: -4deg; --y: 4px; }
.tilt-3 { --r: 0deg; --y: 0px; }
.tilt-4 { --r: 4deg; --y: 4px; }
.tilt-5 { --r: 8deg; --y: 12px; }
.price .amount .was { display: block; width: fit-content; color: var(--muted); font-size: 0.42em; margin-bottom: 0.35rem; text-decoration-thickness: 2px; }