/* ============================================================
   SWEETFRONT STUDIO — HUB · page layer
   Type, grid and components live in system.css (v4).
   Palette (VISION §3.2 Hub): ink #1C1917 · paper #FAF6EF ·
   maple #9A3412 · honey #B45309 · forest #14532D
   ============================================================ */

:root {
  --ink: #1C1917;
  --paper: #FAF6EF;
  --maple: #9A3412;
  --honey: #B45309;
  --forest: #14532D;

  --bg: var(--paper);
  --bg-2: #EEE6D7;               /* inset level: panels, plates, bands — 5.5 L* under the paper */
  --bg-3: #E4DAC8;
  --card: #FFFDF9;               /* lifted level: featured panel, inputs, open FAQ row — lighter than the paper, never #FFF */
  --fg: var(--ink);
  --night-ink: var(--ink);
  --muted: #57534E;              /* 7.05:1 on paper · 6.15:1 on bg-2 */
  --accent: var(--maple);
  --accent-text: var(--maple);   /* 6.78:1 on paper · 5.89:1 on bg-2 */
  --on-accent: var(--paper);
  --ok: var(--forest);
  --tint: #F2E6DD;               /* maple 8% on paper — static fallback for color-mix() */
  /* lightest stop keeps honey ≥3.2:1 (focus rings / large text only) */
  --dark-a: #24201E;
  --dark-b: #1C1917;
  --dark-c: #141210;
  --on-dark: var(--paper);
  --muted-dark: rgba(250, 246, 239, .78);
  --accent-on-dark: var(--honey);
  --rule-soft: rgba(28, 25, 23, .22);       /* decorative only */
  --rule: rgba(28, 25, 23, .55);            /* controls only: 3.8:1 on paper · 3.68:1 on bg-2 */
  --rule-dark-soft: rgba(250, 246, 239, .30);
  --rule-dark: rgba(250, 246, 239, .45);    /* 4.27:1 on ink */
  --focus: var(--maple);
  --focus-dark: var(--honey);
  --scroll-pad: 96px;            /* sticky header clearance for anchors */
}

/* CRAFT v8 3.1 — hairlines are mixed from the accent, so they stay warm on the paper instead of turning grey.
   Only the decorative --rule-soft; --rule keeps its measured ≥ 3:1. Inside @supports: an unsupported color-mix()
   in a custom property would be "valid" and break every border that uses it. */
@supports (color: color-mix(in oklab, red, blue)) {
  :root { --rule-soft: color-mix(in oklab, var(--accent) 26%, rgba(28, 25, 23, .26)); }
}

.chip-accent { color: var(--accent-text); }

/* ---------- HERO (split 7/5, real screenshots) ---------- */
.hero { padding: 40px 0 0; }
.hero-grid { padding-bottom: 56px; }
.hero-grid { align-items: center; }
.eyebrow { margin: 0 0 22px; max-width: none; }
.hero .lead { max-width: 40ch; margin-bottom: 28px; }
/* 80px headline on the hub (system default 84): its long first line then leaves room for a bigger pair of screenshots */
:root { --hero-max: 5rem; }
/* the headline's second beat: once the three lines have landed, the pen underlines "more" (.ink-word, 1.1s) and the
   word answers — it hops, tilts and takes the maple ink. Once, on load; still and already inked under reduced motion. */
.hero-more { display: inline-block; color: var(--accent-text); transform-origin: 30% 85%; }
.hero-more::after { bottom: -.02em; }   /* the shared offset (.07em) put the stroke on the serifs of "more": a clear gap under the baseline */
@media (prefers-reduced-motion: no-preference) {
  .hero-more { animation: more-hop .95s cubic-bezier(.4, 0, .2, 1) 1.35s backwards, more-ink .5s var(--ease) 1.35s backwards; }
  @keyframes more-hop {
    30% { transform: translateY(-.13em) rotate(-3deg) scale(1.08); }
    58% { transform: translateY(.02em) rotate(1deg) scale(.985); }
    78% { transform: translateY(-.025em) rotate(-.4deg) scale(1.01); }
  }
  @keyframes more-ink { from { color: var(--fg); } }
}
.hero-price { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 28px 0 0; }
/* the founding price hangs on a tag with its string hole, a little crooked — like a price at a farm stand */
.price-tag { position: relative; display: inline-block; padding: 7px 14px 6px 30px; background: var(--card, var(--bg)); border: 1px solid var(--rule); color: var(--muted); transform: rotate(-2deg); transform-origin: left center; }
.price-tag::before { content: ""; position: absolute; left: 11px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border: 1px solid var(--rule); border-radius: 50%; background: var(--bg); }
.price-tag .m-strong { font-size: 1rem; }
/* 404.html — "That page boiled off." */
.lost { display: grid; align-content: center; min-height: 100vh; padding: 64px 0 96px; }
.lost .lead { max-width: 46ch; }

.hero-shots { position: relative; padding: 0 17% 10% 0; }   /* the phone now covers the edge of the desktop shot, not its headline */
/* on desktop the pair reaches into the free right end of the copy column — up to the end of the headline's long
   first line (≈ 7.6 × the hero font size), never past it. At 1440 the desktop shot grows from 413 to ~490px. */
@media (min-width: 64rem) {
  .hero-shots {
    --copy-col: calc((min(100vw - 144px, 1240px) - 352px) * .5833 + 192px);
    margin-left: calc(-1 * clamp(0px, var(--copy-col) - 7.6 * var(--fs-hero) - 28px, 120px));
    padding-right: 14%;
  }
  .hero-shots .shot-mobile { width: 24%; }
}
.shot-desktop .plate-inner { --ar: 16 / 10; }
.shot-desktop figcaption { padding-right: 26%; } /* the phone plate overlaps this corner */
.shot-mobile {
  position: absolute;
  right: 0; bottom: 0;
  width: 27%;
}
/* a phone has a body: without it the screenshot floated as a bare rectangle. The body is the LINK's border, so the
   caption stands under the phone on paper — inside the dark body it was muted grey on ink (unreadable). */
.shot-mobile .plate-inner { --ar: 390 / 844; border: 5px solid var(--fg); border-radius: 20px; background: var(--fg); }
.shot-mobile figcaption { margin-top: 8px; color: var(--muted); }
/* hero entrance, visual side. The desktop shot is the LCP image: it moves but is never transparent. */
@media (prefers-reduced-motion: no-preference) {
  .shot-desktop { animation: shot-in 1.1s var(--ease-expo) backwards; }
  .shot-mobile { animation: phone-in 1s var(--ease-expo) .38s backwards; }
  @keyframes shot-in { from { transform: translate3d(36px, 10px, 0) scale(.975); } }
  @keyframes phone-in { from { opacity: 0; transform: translate3d(0, 44px, 0); } }
}
/* pointer depth: the pair leans with [data-tilt] (components.css), the phone drifts against the cursor */
@media (hover: hover) and (pointer: fine) {
  .hero-shots .shot-mobile { transition: transform var(--t-slow) var(--ease); }
  .hero-shots:hover .shot-mobile { transform: translate3d(calc(var(--tilt-x, 0) * -12px), calc(var(--tilt-y, 0) * -10px), 0); }
}
@media (min-width: 860px) { .hero { padding-top: 72px; } .hero-grid { padding-bottom: 80px; } }
/* short laptop viewports: keep H1 + lead + both CTAs above the fold */
@media (min-width: 860px) and (max-height: 820px) {
  .hero { padding-top: 32px; }
  .hero-grid { padding-bottom: 44px; }
  .eyebrow { margin-bottom: 16px; }
}

/* ---------- WORK (split 5/7, sides alternate) ---------- */
.work-row { align-items: center; }
/* live preview: the tile holds a tall capture of the real page. At rest it shows the PRODUCT section (the hub hero
   already shows the top of that page); on hover it travels on down the page. .566 = where the product section starts
   in both captures (788 / 790px of 2300, measured). */
.work-plate .plate-inner { container-type: size; }
.work-plate .plate-inner > img { height: auto; object-fit: fill; transform: translateY(calc((100cqh - 100%) * .566)); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .work-plate .plate-inner > img { transition: transform 2.6s var(--ease); }
  .work-row:hover .work-plate .plate-inner > img { transform: translateY(calc(100cqh - 100%)); }
}
.work { padding-bottom: 36px; }
.work-second { padding-top: 36px; }
.work-name {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 14, 'WONK' 1;
  font-weight: 600;
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  line-height: 1.1;
  margin: 0 0 6px;
}
.work-meta { margin: 0 0 18px; }
.work-desc { color: var(--muted); max-width: 52ch; margin: 0 0 22px; }
.cap-line { margin: 0 0 28px; padding: 12px 0; max-width: none; border-block: 1px solid var(--rule-soft); }
.work-plate .plate-inner { --ar: 16 / 10; }
/* one element per name per page — the morph target next to "Open live demo" */
.vt-maple { view-transition-name: vt-maple; }
.vt-bee { view-transition-name: vt-bee; }
@media (min-width: 860px) { .work { padding-bottom: 72px; } .work-second { padding-top: 72px; } }

/* ---------- BEFORE / AFTER (DRAMA v7 · D7) — a native range input moves the line; without JS it rests at 50 % ---------- */
.rescue-grid { align-items: center; }
/* the second screen and the page's showpiece: on desktop it fills the window like the hero (components.css), so the
   next chapter's label does not show under it. Minus the 8px paging gap: exactly one page, never "tall". */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .rescue { display: flex; flex-direction: column; justify-content: center; min-height: calc(100vh - var(--head-h) - 8px); }
}
.section-dark .ba { border-color: var(--rule-dark); }
.rescue .sec-title { font-style: italic; font-weight: 500; }   /* it is a quotation: what a customer types, and what happens next */
.rescue .note { margin-top: 18px; }
.ba { --split: 50%; position: relative; margin: 0; container-type: inline-size; aspect-ratio: 16 / 10; max-height: calc(100vh - 340px); overflow: hidden; border: 1px solid var(--rule); background: var(--card, var(--bg)); }
.ba-new, .ba-old { position: absolute; inset: 0; }
.ba-new img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
/* the reconstruction: deliberately NOT our system — Times, ivory, blue links, a hit counter */
.ba-old { padding: 3cqw 3.5cqw; clip-path: inset(0 calc(100% - var(--split)) 0 0); background: #FFFFF0; color: #111; font: 2.3cqw/1.35 "Times New Roman", Times, serif; text-align: center; }
.ba-old > * { max-width: 44cqw; }   /* a narrow left-hand column, as they were — readable at the default 50 % split */
.ba-old p { margin: 0 0 1.4cqw; }
.ba .ba-old p { color: #111; }   /* stronger than ".section-dark p" — the reconstruction keeps its own 2009 colours */
.ba .ba-old .old-title { font-size: 3.2cqw; font-weight: 700; color: #7A0000; }
.ba .ba-old .old-nav { color: #0000EE; text-decoration: underline; }
.old-cols { display: grid; grid-template-columns: 14cqw 1fr; gap: 2.4cqw; margin-top: 2cqw; text-align: left; }
.ba .ba-old .old-photo { display: grid; place-items: center; aspect-ratio: 1; border: 2px inset #999; background: #DDD; color: #555; text-align: center; }
.ba .ba-old .old-small { font-size: 1.8cqw; color: #444; }
.old-counter span { padding: 0 .6cqw; background: #000; color: #3F3; font-family: "Courier New", monospace; letter-spacing: .3cqw; }
.ba-line { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: var(--fg); pointer-events: none; }
.ba-line::after { content: "↔"; content: "↔" / ""; position: absolute; top: 50%; left: 50%; display: grid; place-items: center; width: 56px; height: 56px; margin: -28px 0 0 -28px; background: var(--fg); color: var(--bg); font-size: 1.5rem; }
.ba-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.ba:focus-within { outline: 2px solid var(--focus); outline-offset: 3px; }
/* the invitation: the first thing read on this screen, and it says what to do. When the section arrives the arrow
   nudges, the handle breathes and the line sweeps once by itself (micro.js · initCompare) — three beats, under five
   seconds, then rest; the first touch stops all of it for good. */
.rescue-stage { display: grid; gap: clamp(12px, 2vh, 22px); }
.ba-cue {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 24px);
  margin: 0;
  max-width: none;
  font-family: var(--display);
  font-variation-settings: 'WONK' 1;
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2rem, min(1.2rem + 2.6vw, 7.5vh), 3.5rem);
  line-height: 1;
  letter-spacing: -.02em;
}
.section-dark .ba-cue { color: var(--on-dark); }   /* ".section-dark p" would make it muted */
.ba-cue::after {   /* ⟷ drawn, not typed: a rule with a chevron at each end, in the honey of the dark sheets */
  content: "";
  flex: none;
  width: clamp(64px, 7vw, 108px);
  height: 22px;
  background: var(--accent-on-dark);
  -webkit-mask: var(--arrow-lr) no-repeat 50% 50% / 100% 100%;
  mask: var(--arrow-lr) no-repeat 50% 50% / 100% 100%;
  --arrow-lr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 22' preserveAspectRatio='none'%3E%3Cpath d='M3 11H93M13 2 3 11l10 9M83 2l10 9-10 9' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.ba-line::before {   /* the ring the handle breathes with; invisible at rest */
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 56px; height: 56px;
  margin: -28px 0 0 -28px;
  border: 2px solid var(--accent-on-dark);
  opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .rescue-stage.is-seen:not(.is-used) .ba-cue::after { animation: ba-nudge 1.6s ease-in-out 3; }
  .rescue-stage.is-seen:not(.is-used) .ba-line::before { animation: ba-ring 1.6s ease-out 3; }
  @keyframes ba-nudge { 30% { transform: translateX(-10px); } 70% { transform: translateX(10px); } }
  @keyframes ba-ring { from { opacity: .85; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
}
.type-poster { --tp-size: 12vw; }

/* ---------- WHY / COMPARE TABLE ---------- */
.why .sec-title { max-width: 22ch; }
.compare td { color: var(--muted); }
.compare td.win {
  background: var(--tint);
  background: color-mix(in oklab, var(--accent) 8%, var(--bg));
  color: var(--fg);
  font-weight: 600;
}

/* ---------- PROCESS ---------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; }
.step { position: relative; padding: 26px 0; border-top: 1px solid var(--rule-soft); }
.step p { margin: 0; }
.step-name { position: relative; font-family: var(--display); font-weight: 600; font-size: var(--fs-h3); margin: 10px 0 8px; }
.step-text { position: relative; color: var(--muted); max-width: 34ch; }
.process-note { margin: 36px 0 0; }
.steps-axis { display: none; }
@media (min-width: 860px) {
  /* one week, drawn to scale: the draft lands two sevenths of the way along, launch day closes the line.
     Same language as the season axis on the maple demo: a hairline, square ticks, the big tick is the day that matters. */
  .steps-axis { display: block; height: 1px; background: var(--rule); transform-origin: left center; }
  .steps { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr) minmax(0, 2fr); }
  .step { padding: 30px 28px 8px 0; border-top: 0; }
  .step::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--accent); }
  .step-live { padding: 30px 0 8px 28px; text-align: right; }
  .step-live::before { top: -8px; left: auto; right: 0; width: 15px; height: 15px; }
  .step-live .step-text { margin-left: auto; }
}

/* ---------- PRICING (founding card dominant) ---------- */
.price-layout { align-items: start; }
.price-cards { display: grid; gap: 24px; align-items: start; }
.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; }
.founding .chip { margin-bottom: 20px; }
.founding .price { font-size: clamp(3rem, 2.2rem + 2.6vw, 3.5rem); }
.founding .rows { margin: 24px 0 28px; }
.pb-name { margin: 0 0 10px; }
.pb-text { color: var(--muted); margin: 0; }
.price-col { display: grid; gap: 24px; }
.price-col .panel { border: 0; }   /* inset by value only: the founding card is the one framed, lifted object here */
/* founding card beside the two small ones: the right column of the pricing page stays one screen tall */
@media (min-width: 860px) { .price-cards { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); } }
.price-fine { margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--rule-soft); color: var(--fg); }
@media (min-width: 860px) { .founding { padding: 40px 36px; } }

/* ---------- FAQ (native details — works without JS) ---------- */
.faq-grid { align-items: start; }
.faq-item { border-top: 1px solid var(--rule-soft); }
.faq-item:last-of-type { border-bottom: 1px solid var(--rule-soft); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  gap: 18px;
  min-height: 64px;
  padding: 20px 12px;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.3;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  content: "+" / "";            /* decorative: keep it out of the accessible name */
  margin-left: auto;
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--accent-text);
}
.faq-item[open] { background: var(--card, var(--bg)); }   /* the band is --bg-2, so the open row lifts to a card */
.faq-item[open] summary::after { content: "−"; content: "−" / ""; }
.faq-item p { padding: 0 48px 24px 12px; color: var(--muted); margin: 0; }
@media (max-width: 599px) { .faq-item p { padding: 0 12px 22px 12px; } }
/* answers slide open instead of snapping; instant without support or under reduced motion */
@supports (interpolate-size: allow-keywords) {
  .faq-item { interpolate-size: allow-keywords; }
  .faq-item::details-content { height: 0; overflow: clip; transition: height var(--t-slow) var(--ease), content-visibility var(--t-slow) allow-discrete; }
  .faq-item[open]::details-content { height: auto; }
  @media (prefers-reduced-motion: reduce) { .faq-item::details-content { transition: none; } }
}

/* ---------- CONTACT (dark) ---------- */
.contact-grid { align-items: start; }
.contact-title {
  font-family: var(--display);
  font-variation-settings: 'SOFT' 20, 'WONK' 1;
  font-weight: 600;
  font-size: var(--fs-h2);
  line-height: 1.06;
  letter-spacing: -.015em;
  margin: 18px 0 0;
}
.cf-grid { display: grid; gap: 20px; }
@media (min-width: 768px) { .cf-grid { grid-template-columns: 1fr 1fr; } }
.cf-required { margin: 0 0 18px; }
/* M4 — copy the e-mail address (micro.js un-hides it for fine pointers with the Clipboard API) */
.copy-btn { display: none; }
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  /* desktop layout + mouse only; [hidden] (no JS / no Clipboard API) keeps it away everywhere */
  .copy-btn:not([hidden]) {
    display: inline-block;
    position: relative;
    margin-left: 8px;
    padding: 4px 10px;
    border: 1px solid var(--rule-dark);
    border-radius: 0;
    background: transparent;
    color: var(--on-dark);
    cursor: pointer;
    transition: background-color var(--t-ui) var(--ease), color var(--t-ui) var(--ease);
  }
  .copy-btn::after { content: ""; position: absolute; inset: -7px -4px; }   /* 44px hit area around a 30px chip */
}
.copy-btn:hover, .copy-btn:active { background: var(--on-dark); color: var(--fg); }
.copy-status { color: var(--on-dark); }
.copy-status:not(:empty) { margin-left: 8px; }
.contact-form .btn { margin-top: 24px; }
.contact-form .note { margin: 16px 0 0; }
.contact-direct { margin-top: 32px; }
.contact-direct p { margin: 0 0 10px; }
.contact-direct a { color: var(--on-dark); display: inline-block; padding: 12px 0; }
/* the sticky header already carries the five section links: the hub footer is brand + contact */
@media (min-width: 768px) { .site-foot .foot-grid { grid-template-columns: 1.3fr 2fr; } }
.contact .contact-line { font-family: var(--display); font-weight: 600; font-size: 1.25rem; color: var(--on-dark); margin: 14px 0 10px; }

/* ---------- short laptop screens: every hub section is one page (see components.css) ---------- */
@media (min-width: 64rem) and (max-height: 900px) {
  .work-plate .plate-inner { --ar: 16 / 9; }
}
@media (min-width: 64rem) and (max-height: 780px) {
  .hero-price { margin-top: 16px; }
  .price-tag { padding-block: 5px 4px; }
  .work-desc { margin-bottom: 16px; }
  .cap-line { margin-bottom: 20px; padding: 9px 0; }
  .faq-item summary { min-height: 54px; padding: 14px 12px; font-size: 1.125rem; }
  .faq-item p { padding-bottom: 16px; }
  .step { padding-top: 22px; }
}
@media (min-width: 64rem) and (max-height: 680px) {
  .hero { padding-top: 20px; }
  .hero-grid { padding-bottom: 22px; }
  .eyebrow { margin-bottom: 10px; }
  .hero .lead { margin-bottom: 18px; }
  .hero-price { margin-top: 8px; }
  .price-tag { padding-block: 4px 3px; }
  .work-plate .plate-inner { --ar: 5 / 2; }   /* the screenshot column, not the text, sets this page height */
  .work-name { font-size: 1.75rem; }
  .work-meta { margin-bottom: 10px; }
  .work-desc { margin-bottom: 10px; font-size: 1rem; }
  .cap-line { margin-bottom: 12px; padding: 6px 0; }
  .founding { padding: 22px 26px; }
  .founding .chip { margin-bottom: 10px; }
  .founding .price { font-size: 2.5rem; }
  .founding .rows { margin: 12px 0 16px; }
  .price-row { margin-bottom: 8px; }
  .price-fine { margin-top: 16px; padding-top: 12px; }
}