/* FrontAgent — neutral, modern, warm visual system.
   Adopted from the approved VideoTing system 2026-08-03; register rows 2, 20, 21.

   HOW TO RESTYLE THIS SITE
   Every colour, size, spacing, radius, shadow and timing used by the site is
   declared once in the :root block below. Change a value there and it applies
   everywhere. The rules further down only reference tokens — do not put literal
   colours or sizes in them.

     1 PALETTE        brand colours
     2 LETTERS        fonts, type sizes, line heights, heading weight
     3 HEADER         header bar, brand mark, navigation
     4 PANELS         cards, call demonstration frame, bubbles, FAQ, shadows
     5 3D BACKGROUND  hero depth layer: glow, shade, grid, mask
     6 LAYOUT         content widths, section padding, gutter
     7 MOTION         identification colour and the 3s colour cycle
     8 CATEGORY HERO  shared category-page Main Box
     9 CLIENT ACCESS  sign-in, dashboard and client-site preview colours
*/

:root{
  /* ================================================================
     FrontAgent design tokens — change values here, not in the rules
     below. Groups: 1 palette · 2 letters · 3 header · 4 panels ·
     5 3D background · 6 layout · 7 motion · 8 category hero ·
     9 client access.
     ================================================================ */

  /* ---- 1. PALETTE (approved VideoTing system) ---- */
  --bg:#FAF9F7;            /* page background, warm white */
  --surface:#FFFFFF;       /* cards and panels */
  --ink:#2B2724;           /* headings, warm charcoal */
  --body:#5C5650;          /* body text, warm gray */
  --muted:#8A837B;         /* secondary text */
  --accent:#C07A50;        /* soft clay — fills, borders, focus rings only */
  --accent-text:#96562A;   /* deep clay — text/action use (5.5:1 on --bg) */
  --band:#F2EFEA;          /* warm stone section bands */
  --rule:#E5E0D8;          /* borders and rules */
  --tint:#F7EFE7;          /* warm tint — agent bubbles, pills, badges */
  --on-accent:#FFFFFF;     /* text on accent-filled buttons */
  --footer:#6B6259;        /* warm taupe footer */
  --footer-text:#FAF9F7;
  --footer-tag-text:#E4DFD8;
  --footer-legal-text:#D8D2CB;
  --caution-bg:#FBF2EA;
  --hero-visual-mid:#EDE4D9;   /* legacy hero visual gradient */
  --hero-visual-end:#E4CDB8;

  /* ---- 2. LETTERS ---- */
  --font-sans:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular","Cascadia Mono","Roboto Mono",Menlo,Consolas,monospace;
  --text-body:14px;              /* approved body size */
  --text-nav:15px;               /* approved navigation size */
  --text-h1:clamp(34px,4.4vw,56px);
  --text-h2:clamp(26px,2.6vw,34px);
  --text-h2-closing:clamp(26px,2.8vw,36px);
  --text-h2-answer:clamp(21px,2vw,26px);
  --text-h3:18.5px;
  --text-sub:19px;               /* hero sub-headline */
  --text-lead:17px;              /* section lead paragraph */
  --text-answer:16px;            /* answer-first paragraph */
  --text-fine:13px;
  --text-eyebrow:12.5px;
  --text-micro:10.5px;
  --line-body:1.65;
  --line-head:1.2;
  --head-weight:650;
  --head-tracking:-0.01em;

  /* ---- 3. HEADER ---- */
  --header-bg:var(--bg);
  --header-border:var(--rule);
  --header-pad-y:14px;
  --header-pad-x:24px;
  --header-gap:20px;
  --header-z:50;
  --brand-size:19px;
  --brand-gap:6px;
  --brand-dot-size:7px;
  --nav-gap:24px;

  /* ---- 4. PANELS ---- */
  --panel-bg:var(--surface);
  --panel-border:var(--rule);
  --panel-radius:10px;                  /* cards, steps, FAQ, answer block */
  --panel-radius-lg:18px;               /* call demonstration frame */
  --panel-pad:26px 24px;
  --panel-shadow:0 1px 2px rgba(43,39,36,0.05), 0 4px 16px rgba(43,39,36,0.06);
  --panel-float-shadow:0 1px 2px rgba(43,39,36,0.05), 0 18px 44px rgba(43,39,36,0.10);
  --panel-glass:rgba(255,255,255,0.72); /* frosted surface over the hero wash */
  --panel-glass-edge:rgba(255,255,255,0.9);
  --panel-blur:10px;
  --panel-hairline:rgba(43,39,36,0.07); /* internal dividers and grid lines */
  --panel-head-bg:linear-gradient(180deg,rgba(242,239,234,0.9),rgba(242,239,234,0.35));
  --panel-inset-pad:16px;               /* call panel rows */
  --answer-pad:32px;                    /* FRA-C-010 answer block, all four sides */
  --answer-pad-mobile:22px;             /* FRA-C-010 answer block below 768px */
  --bubble-radius:14px;
  --bubble-agent-bg:var(--tint);
  --bubble-caller-bg:var(--surface);
  --fab-shadow:0 6px 24px rgba(43,39,36,0.25);

  /* ---- 5. 3D BACKGROUND (hero depth layer) ---- */
  --bg3d-glow:rgba(192,122,80,0.22);            /* accent halo */
  --bg3d-glow-shape:60% 55% at 78% 18%;
  --bg3d-shade:rgba(43,39,36,0.05);             /* opposite-corner shade */
  --bg3d-shade-shape:45% 45% at 8% 88%;
  --bg3d-grid:var(--panel-hairline);
  --bg3d-grid-size:44px;
  --bg3d-grid-opacity:0.65;
  --bg3d-mask:radial-gradient(70% 60% at 70% 30%,#000 0%,transparent 75%);

  /* Hero scene — the left-side background image behind the hero text column.
     Replacing the illustration with approved photography is a one-line change:
     point --hero-scene at the new file. Nothing else in the hero moves. A photo
     normally also wants --hero-scene-size:cover and --hero-scene-pos:left center. */
  --hero-scene:url("../images/hero/gourmet-kitchen-counter.svg");
  --hero-scene-size:clamp(400px,40vw,660px) auto;
  --hero-scene-pos:left bottom;
  /* Below the breakpoint the hero stacks, so the scene would land behind and
     under the call demonstration panel, where it only clouds the frosted
     surface. Set this to var(--hero-scene) to bring it back on mobile. */
  --hero-scene-mobile:none;
  --hero-scene-size-mobile:min(96%,380px) auto;
  --hero-scene-pos-mobile:left bottom;

  /* ---- 6. LAYOUT ---- */
  --measure:62ch;
  --content-max:1600px;
  --content-w:75%;
  --content-w-mobile:92%;
  --inner-max:1200px;
  /* Vertical rhythm between Content/Body boxes. The gap a reader sees is
     twice this value, because it is the lower padding of one section plus
     the upper padding of the next.
     Halved on 2026-08-11 by Seung's instruction: 72px -> 36px, so the gap
     between FRA-C-018, FRA-C-010, FRA-C-013 and the sections after them
     goes from 144px to 72px. The mobile value in the 768px block and the
     closing box (.closing) were halved in the same step so the page keeps
     one rhythm. */
  --section-pad:36px;
  --gutter:24px;

  /* ---- 7. MOTION ---- */
  --ident-green:#1B7A4B;   /* identified caller (5.3:1 on the panel) */

  /* Shared signal pulse: dark brown -> softly glowing white -> dark brown.
     Used by the logo dot, the favicon circle and the caller-status inner mark.
     Change these four values to retune all three at once. */
  --signal-dark:var(--accent-text);          /* resting dark brown */
  --signal-bright:#FFFDFA;                   /* glowing white at the peak */
  --signal-halo:rgba(192,122,80,0.55);       /* soft halo so the peak stays visible */
  --signal-dur:3s;
  --signal-ease:ease-in-out;

  /* ---- 8. CATEGORY PAGE HERO ----
     One centralized control surface for every category-page Main Box. */
  --category-hero-bg:linear-gradient(135deg,var(--bg) 0%,var(--tint) 58%,var(--band) 100%);
  --category-hero-panel-bg:rgba(255,255,255,0.82);
  --category-hero-panel-border:var(--rule);
  --category-hero-radius:var(--panel-radius-lg);
  --category-hero-shadow:var(--panel-float-shadow);
  --category-hero-pad:clamp(48px,6vw,78px);

  /* ---- 9. CLIENT ACCESS & CLIENT WEBSITE ----
     Central palette for the sign-in page, client dashboard and customer-site
     previews. Change these tokens to recolor every client-facing prototype;
     component rules below must not contain literal color values. */
  --auth-focus-ring:rgba(192,122,80,0.18);
  --client-sidebar-hover-bg:rgba(255,255,255,0.08);
  --client-sidebar-hover-border:rgba(255,255,255,0.14);
  --client-sidebar-rule:rgba(255,255,255,0.16);
  --client-site-bg:#FFFDF9;
  --client-site-surface:#FFFFFF;
  --client-site-ink:#2C251F;
  --client-site-body:#5D554D;
  --client-site-primary:#44563F;
  --client-site-cream:#F7F1E7;
  --client-site-accent:#B47A3C;
  --client-site-rule:#E4DDD3;
  --client-site-strong-rule:#D7CFC4;
  --client-site-art-rule:#D9CBB9;
  --client-site-art-light:#F4D9B7;
  --client-site-art-base:#EEE4D4;
  --client-site-preview-text:#F8F4EE;
  --client-site-muted:#8A8077;
  --client-site-story-text:#EEF0EA;
  --client-site-footer-text:#EEE7DD;
  --client-site-footer-muted:#BDB3A7;
  --client-site-shadow:0 18px 42px rgba(62,47,33,0.12);

  /* Back-compat aliases: older rules still reference these names. */
  --radius:var(--panel-radius);
  --shadow:var(--panel-shadow);
  --glass:var(--panel-glass);
  --glass-edge:var(--panel-glass-edge);
  --glow:var(--bg3d-glow);
  --hairline:var(--panel-hairline);
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-sans);
  font-size:var(--text-body);line-height:var(--line-body);color:var(--body);background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{color:var(--ink);line-height:var(--line-head);font-weight:var(--head-weight);letter-spacing:var(--head-tracking);}
a{color:var(--accent-text);text-decoration:none;}
a:hover{text-decoration:underline;}
img{max-width:100%;display:block;}
ul{list-style:none;}

.skip-link{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--ink);padding:10px 16px;z-index:100;border-radius:0 0 var(--radius) 0;}
.skip-link:focus{left:0;}

:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:4px;}

.content{width:var(--content-w);max-width:var(--content-max);margin:0 auto;}
.inner{max-width:var(--inner-max);margin:0 auto;padding:0 24px;}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:var(--header-z);background:var(--header-bg);
  border-bottom:1px solid var(--header-border);
}
.header-inner{
  max-width:var(--inner-max);margin:0 auto;padding:var(--header-pad-y) var(--header-pad-x);
  display:flex;align-items:center;justify-content:space-between;gap:var(--header-gap);
}
.brand{display:flex;align-items:baseline;gap:var(--brand-gap);color:var(--ink);}
.brand:hover{text-decoration:none;}
.brand-name{font-size:var(--brand-size);font-weight:700;letter-spacing:var(--head-tracking);color:var(--ink);}
.brand-dot{width:var(--brand-dot-size);height:var(--brand-dot-size);border-radius:50%;background:var(--signal-dark);display:inline-block;}
/* Logo circle only — the shared signal pulse. Size and position are
   untouched; nothing else in the logo animates. */
.brand-dot{animation:signalPulse var(--signal-dur) var(--signal-ease) infinite;}
@keyframes signalPulse{
  0%,100%{background-color:var(--signal-dark);box-shadow:0 0 0 0 rgba(192,122,80,0);}
  50%    {background-color:var(--signal-bright);box-shadow:0 0 7px 2px var(--signal-halo);}
}
.site-nav ul{display:flex;align-items:center;gap:var(--nav-gap);}
.site-nav a{font-size:14.5px;color:var(--body);padding:6px 0;border-bottom:2px solid transparent;}
.site-nav a:hover{color:var(--ink);text-decoration:none;border-bottom-color:var(--accent);}
.site-nav a[aria-current="page"]{
  color:var(--ink);font-weight:var(--head-weight);border-bottom-color:var(--accent);
}
.header-actions{display:flex;align-items:center;gap:14px;}
.lang-select{
  font-family:inherit;font-size:13.5px;color:var(--ink);background:var(--surface);
  border:1px solid var(--rule);border-radius:8px;padding:7px 10px;
}
.link-signin{font-size:14.5px;color:var(--body);}
.link-signin:hover,.link-signin[aria-current="page"]{color:var(--ink);text-decoration:none;}
.link-signin .tag{font-size:10.5px;color:var(--muted);margin-left:4px;letter-spacing:0.04em;}

@media (max-width:1100px) and (min-width:769px){
  .header-inner{flex-wrap:wrap;gap:10px 16px;}
  .site-nav{order:3;width:100%;}
  .site-nav ul{justify-content:center;gap:22px;}
}

.btn{
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;font-weight:600;
  font-size:15px;border-radius:9px;padding:11px 20px;cursor:pointer;border:1px solid transparent;
}
.btn:hover{text-decoration:none;}
.btn-primary{background:var(--accent-text);color:var(--on-accent);}
.btn-primary:hover{background:var(--ink);}
.btn-ghost{background:transparent;color:var(--accent-text);border-color:var(--rule);}
.btn-ghost:hover{border-color:var(--accent);color:var(--ink);}
.btn-sm{font-size:14px;padding:9px 16px;}

/* ---------- Hero ---------- */
.hero{padding:72px 0 80px;}
.hero-inner{
  max-width:var(--inner-max);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px;align-items:center;
}
.eyebrow{
  font-size:var(--text-eyebrow);font-weight:600;letter-spacing:0.12em;text-transform:uppercase;
  color:var(--accent-text);margin-bottom:16px;
}
.hero h1{font-size:var(--text-h1);max-width:16ch;}
.hero .sub{margin-top:20px;font-size:var(--text-sub);max-width:var(--measure);}
.hero-ctas{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap;}
.hero-note{margin-top:18px;font-size:13.5px;color:var(--muted);}

/* Warm abstract visual — placeholder layer, independently replaceable
   by approved imagery without touching the text column. */
.hero-visual{position:relative;}
.hv-frame{
  position:relative;border-radius:18px;overflow:hidden;padding:28px;min-height:340px;
  background:linear-gradient(150deg,var(--band) 0%,var(--hero-visual-mid) 55%,var(--hero-visual-end) 100%);
  box-shadow:var(--shadow);
}
.hv-circle{position:absolute;border-radius:50%;}
.hv-c1{width:220px;height:220px;right:-60px;top:-60px;background:rgba(192,122,80,0.18);}
.hv-c2{width:120px;height:120px;left:36px;bottom:48px;background:rgba(43,39,36,0.08);}
.hv-chat{
  position:relative;display:flex;flex-direction:column;gap:12px;
}
.hv-bubble{
  background:var(--surface);border:1px solid var(--rule);border-radius:12px;
  padding:12px 16px;font-size:13.5px;color:var(--body);max-width:78%;box-shadow:var(--shadow);
}
.hv-bubble.right{align-self:flex-end;background:var(--tint);}
.hv-bubble .who{display:block;font-size:10.5px;font-weight:700;letter-spacing:0.08em;color:var(--accent-text);text-transform:uppercase;margin-bottom:3px;}

/* ---------- Sections ---------- */
.section{padding:var(--section-pad) 0;}
.section.band{background:var(--band);}
/* Heading-to-content distance. Reduced 2026-08-11 (was 40px) together with
   the halved --section-pad, so a heading stays visibly closer to the content
   it owns than to the section above it. Separation between groups must read
   larger than separation inside a group: 72px between sections against 28px
   here is 2.6:1, where 40px would have left only 1.8:1. */
.section-head{max-width:var(--inner-max);margin:0 auto 28px;padding:0 24px;}
.section-head h2{font-size:var(--text-h2);max-width:24ch;}
.section-head .lead{margin-top:12px;font-size:var(--text-lead);max-width:var(--measure);}
.grid{max-width:var(--inner-max);margin:0 auto;padding:0 24px;display:grid;gap:22px;}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));}

/* Compact home-page routes. Detailed content stays on category pages. */
.home-category-grid{
  max-width:var(--inner-max);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;
}
.home-category-link{
  display:flex;flex-direction:column;gap:7px;padding:var(--panel-pad);
  color:var(--body);background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:var(--panel-radius);box-shadow:var(--panel-shadow);
}
.home-category-link:hover{
  color:var(--body);text-decoration:none;border-color:var(--accent);
}
.home-category-link strong{color:var(--ink);font-size:var(--text-h3);}
.home-category-link span{font-size:15px;}

@media (max-width:768px){
  .home-category-grid{grid-template-columns:1fr;}
}

.card{
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);
  padding:var(--panel-pad);box-shadow:var(--panel-shadow);
}
.band .card{box-shadow:none;}
.card h3{font-size:var(--text-h3);}
.card p{margin-top:9px;font-size:15.5px;}
.card .k{
  display:inline-flex;width:34px;height:34px;border-radius:9px;background:var(--band);
  color:var(--accent-text);font-weight:700;font-size:15px;align-items:center;justify-content:center;
  margin-bottom:14px;
}

/* Steps */
.steps{max-width:var(--inner-max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;counter-reset:step;}
.step{background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);padding:22px 20px;}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-size:12.5px;font-weight:700;letter-spacing:0.08em;color:var(--accent-text);margin-bottom:10px;
}
.step h3{font-size:16px;}
.step p{margin-top:7px;font-size:14px;}

/* Feature list */
.feature{display:flex;gap:14px;align-items:flex-start;}
.feature .dot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--accent);margin-top:9px;}
.feature h3{font-size:16.5px;}
.feature p{margin-top:5px;font-size:14.5px;}

/* Trust list */
.trust-list{max-width:var(--inner-max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;}
.trust-list li{position:relative;padding-left:30px;font-size:15.5px;}
.trust-list li::before{
  content:"✓";position:absolute;left:0;top:1px;color:var(--accent-text);font-weight:700;
}
.fine{max-width:var(--inner-max);margin:26px auto 0;padding:0 var(--gutter);font-size:var(--text-fine);color:var(--muted);}

/* Closing CTA */
/* Halved with --section-pad on 2026-08-11 (was 84px 24px), so the Apply for
   Service box sits on the same rhythm as the sections above it. */
.closing{text-align:center;padding:42px 24px;}
.closing h2{font-size:var(--text-h2-closing);}
.closing p{margin:14px auto 0;max-width:var(--measure);}
.closing .hero-ctas{justify-content:center;}

/* Coming-soon pill */
.pill{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:0.06em;
  color:var(--accent-text);background:var(--tint);border:1px solid var(--rule);
  border-radius:999px;padding:4px 12px;text-transform:uppercase;
}

/* Benefits */
.arrow-link{font-weight:600;color:var(--accent-text);}
.bullet-list{margin-top:10px;}
.bullet-list li{position:relative;padding-left:18px;font-size:14.5px;margin-top:6px;color:var(--body);}
.bullet-list li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent);}
.page-head{max-width:var(--inner-max);margin:0 auto;padding:64px 24px 8px;}
.page-head h1{font-size:clamp(30px,3.6vw,46px);max-width:24ch;}
.page-head .sub{margin-top:16px;font-size:18px;max-width:var(--measure);}
.page-head .note{margin-top:14px;font-size:13.5px;color:var(--muted);max-width:var(--measure);}

/* ---------- Industries ---------- */
.breadcrumb{max-width:var(--inner-max);margin:0 auto;padding:20px 24px 0;font-size:13.5px;color:var(--muted);}
.breadcrumb a{color:var(--muted);}
.breadcrumb a:hover{color:var(--accent-text);}
.breadcrumb span[aria-current]{color:var(--ink);}

.ind-grid{max-width:var(--inner-max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;}
.ind-card{
  display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--radius);padding:24px 22px;box-shadow:var(--shadow);color:var(--body);
  transition:border-color .15s ease, transform .15s ease;
}
.ind-card:hover{text-decoration:none;border-color:var(--accent);transform:translateY(-2px);}
.ind-badge{
  display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;
  border-radius:12px;background:var(--band);color:var(--accent-text);margin-bottom:16px;
}
.ind-badge.sm{width:30px;height:30px;border-radius:8px;vertical-align:middle;margin:0 8px 0 0;}
.ind-card h3{font-size:18px;}
.ind-card p{margin-top:8px;font-size:14.5px;flex:1;}
.ind-cta{margin-top:16px;font-size:14px;font-weight:600;color:var(--accent-text);}

.ind-hero{padding-top:36px;}
.ind-hero .hero-inner{grid-template-columns:1fr;}
.ind-slogan{font-size:clamp(30px,4vw,50px);max-width:18ch;}
.ind-hero .eyebrow{display:flex;align-items:center;}

.bullet-list.big li{font-size:16.5px;margin-top:12px;padding-left:22px;}
.bullet-list.big li::before{top:11px;width:7px;height:7px;}
.steps.steps-6{grid-template-columns:repeat(3,minmax(0,1fr));}

.caution{
  max-width:var(--inner-max);margin:0 auto;padding:20px 22px;display:flex;gap:14px;align-items:flex-start;
  background:var(--caution-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);
}
.caution-mark{flex:none;width:24px;height:24px;border-radius:50%;background:var(--accent-text);color:#fff;
  font-weight:700;display:flex;align-items:center;justify-content:center;font-size:15px;}
.caution p{font-size:14.5px;color:var(--body);}

.related{margin-top:22px;font-size:14px;color:var(--muted);}
.pill-link{display:inline-block;margin:0 4px;padding:5px 12px;border:1px solid var(--rule);border-radius:999px;font-size:13.5px;color:var(--accent-text);}
.pill-link:hover{border-color:var(--accent);text-decoration:none;}

@media (max-width:1024px){
  .ind-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .steps.steps-6{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:768px){
  .ind-grid{grid-template-columns:1fr;}
  .steps.steps-6{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion:reduce){
  .ind-card{transition:none;}
  .ind-card:hover{transform:none;}
}

/* ---------- Half-width split section (HOME-C-002) ---------- */
.split{
  max-width:var(--inner-max);margin:0 auto;padding:0 24px;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;
}
.split-text h2{font-size:clamp(26px,2.6vw,34px);max-width:16ch;}
.split-slogan{
  margin-top:14px;font-size:clamp(19px,1.7vw,23px);font-weight:650;line-height:1.35;
  color:var(--accent-text);max-width:20ch;
}
.value-list{margin-top:30px;display:flex;flex-direction:column;gap:22px;}
.value-list h3{font-size:17px;}
.value-list p{margin-top:6px;font-size:15px;color:var(--body);max-width:46ch;}

.convo{
  background:var(--surface);border:1px solid var(--rule);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;
}
.convo-head{
  display:flex;align-items:center;gap:9px;padding:13px 18px;
  border-bottom:1px solid var(--rule);background:var(--band);
  font-size:12.5px;font-weight:600;letter-spacing:0.04em;color:var(--muted);text-transform:uppercase;
}
.convo-head .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none;}
.convo-body{padding:20px 18px;display:flex;flex-direction:column;gap:11px;}
.cv{max-width:88%;padding:11px 14px;border-radius:13px;font-size:14.5px;line-height:1.55;}
.cv .who{display:block;font-size:10px;font-weight:700;letter-spacing:0.07em;text-transform:uppercase;margin-bottom:3px;}
.cv.ai{align-self:flex-end;background:var(--tint);border:1px solid var(--rule);color:var(--ink);}
.cv.ai .who{color:var(--accent-text);}
.cv.cust{align-self:flex-start;background:var(--bg);border:1px solid var(--rule);color:var(--body);}
.cv.cust .who{color:var(--muted);}

@media (max-width:900px){
  .split{grid-template-columns:1fr;gap:36px;}
  .split-text h2,.split-slogan{max-width:none;}
}

/* ---------- Interactive order demo ---------- */
.demo{max-width:760px;margin:0 auto;padding:0 24px;}
.demo-tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px;}
.demo-tab{
  font-family:inherit;font-size:14px;font-weight:600;color:var(--body);
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:8px 15px;cursor:pointer;
}
.demo-tab:hover{border-color:var(--accent);color:var(--ink);}
.demo-tab[aria-selected="true"]{background:var(--accent-text);color:#fff;border-color:var(--accent-text);}
.demo-chat{display:flex;flex-direction:column;gap:12px;}
.demo-chat[hidden]{display:none;}
.demo-bubble{
  background:var(--surface);border:1px solid var(--rule);border-radius:14px;
  padding:12px 16px;font-size:15px;color:var(--body);max-width:82%;box-shadow:var(--shadow);
}
.demo-bubble.ai{align-self:flex-end;background:var(--tint);}
.demo-bubble .who{display:block;font-size:10.5px;font-weight:700;letter-spacing:0.07em;
  color:var(--accent-text);text-transform:uppercase;margin-bottom:3px;}
.demo-bubble.cust .who{color:var(--muted);}
.demo-caption{margin-top:24px;font-size:14.5px;color:var(--body);text-align:center;max-width:60ch;margin-left:auto;margin-right:auto;}
.demo-caption .pill{margin-right:8px;}
@media (max-width:600px){ .demo-bubble{max-width:92%;} }

/* ---------- Fixed AI button (preview) ---------- */
.ai-fab{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  background:var(--ink);color:var(--on-accent);border:none;border-radius:999px;
  padding:13px 20px;font-family:inherit;font-size:14.5px;font-weight:600;
  box-shadow:var(--fab-shadow);cursor:not-allowed;
}
.ai-fab .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);}
.ai-fab .soon{font-size:11px;font-weight:500;color:var(--footer-legal-text);}

/* ---------- Footer ---------- */
.site-footer{background:var(--footer);color:var(--footer-text);margin-top:40px;}
.footer-inner{max-width:var(--inner-max);margin:0 auto;padding:48px 24px 36px;}
.footer-brand{font-size:17px;font-weight:700;}
.footer-tag{margin-top:8px;font-size:14.5px;color:var(--footer-tag-text);max-width:52ch;}
.footer-legal{
  margin-top:30px;padding-top:20px;border-top:1px solid rgba(250,249,247,0.22);
  font-size:var(--text-fine);color:var(--footer-legal-text);line-height:1.8;
}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr));}
  .hero-inner{grid-template-columns:1fr;gap:40px;}
  .hero-visual{min-height:300px;}
}
@media (max-width:768px){
  body{font-size:16px;}
  .header-inner{flex-wrap:wrap;gap:10px 16px;padding:12px 18px;}
  .site-nav{order:3;width:100%;overflow-x:auto;}
  .site-nav ul{gap:18px;padding:4px 0;white-space:nowrap;}
  .hero{padding:48px 0 56px;}
  .section{padding:26px 0;}   /* halved 2026-08-11, was 52px */
  .grid-3,.grid-2,.steps{grid-template-columns:1fr;}
  .trust-list{grid-template-columns:1fr;}
  .content{width:var(--content-w-mobile);}
  .ai-fab{right:14px;bottom:14px;padding:11px 16px;}
}

/* ---------- FrontAgent approved overrides ----------
   Approved type sizes: navigation 15px, body text 14px.
   Kept at the end of the file so everything above stays directly
   comparable to the VideoTing source it was adopted from. */
body{font-size:var(--text-body);}
.site-nav a{font-size:var(--text-nav);}
@media (max-width:768px){
  body{font-size:var(--text-body);}
}

/* ==================================================================
   FrontAgent redesign layer
   Approved frame: full-width header / hero / footer, Content/Body at
   75% (max 1600px) desktop and 92% mobile. Header and footer inner
   content stay capped at 1200px per AGENTS.md.
   ================================================================== */

/* ---------- Content/Body width (AGENTS.md required dimensions) ----------
   .content owns the body width. Children that carried their own 1200px
   cap are released inside it so the approved 75%/1600px governs. */
.content > .section-head,
.content > .grid,
.content > .steps,
.content > .trust-list,
.content > .fine,
.content > .faq-list,
.content > .answer-block,
.content > .ind-grid,
.content > .breadcrumb{
  max-width:none;padding-left:0;padding-right:0;margin-left:0;margin-right:0;
}
.content > .section-head{margin:0 0 28px;}   /* matches .section-head, 2026-08-11 */
.content > .fine{margin:26px 0 0;}

/* ---------- Section ID labels (AGENTS.md Content Section IDs) ---------- */
[data-section-id]{position:relative;}
.section-id-label{
  position:absolute;top:10px;right:14px;z-index:2;
  font-family:var(--mono);font-size:10px;letter-spacing:0.06em;
  color:var(--muted);opacity:0.5;pointer-events:none;user-select:none;
}
.section-id-label:hover{opacity:0.9;}

/* ---------- Hero: subtly futuristic wash ---------- */
.hero{position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(var(--bg3d-glow-shape), var(--bg3d-glow) 0%, transparent 62%),
    radial-gradient(var(--bg3d-shade-shape), var(--bg3d-shade) 0%, transparent 60%);
}
.hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(var(--bg3d-grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--bg3d-grid) 1px,transparent 1px);
  background-size:var(--bg3d-grid-size) var(--bg3d-grid-size);
  mask-image:var(--bg3d-mask);
  -webkit-mask-image:var(--bg3d-mask);
  opacity:var(--bg3d-grid-opacity);
}
/* Hero inner adopts the Content/Body width so the hero and the body
   columns line up. Header and footer keep their own 1200px cap. */
.hero-inner{position:relative;z-index:1;}
.hero-inner.content{width:var(--content-w);max-width:var(--content-max);padding:0;}
@media (max-width:768px){ .hero-inner.content{width:var(--content-w-mobile);} }
.hero h1 .accent{color:var(--accent-text);}

/* Hero scene — Gourmet Kitchen counter, anchored to the left of the hero.
   Scoped to FRA-C-001 so other pages that reuse .hero keep their own
   background. It sits under .hero::before and .hero::after, so the approved
   glow and grid still read on top of it. */
.hero[data-section-id="FRA-C-001"]{
  background-image:var(--hero-scene);
  background-repeat:no-repeat;
  background-position:var(--hero-scene-pos);
  background-size:var(--hero-scene-size);
}
@media (max-width:768px){
  .hero[data-section-id="FRA-C-001"]{
    background-image:var(--hero-scene-mobile);
    background-position:var(--hero-scene-pos-mobile);
    background-size:var(--hero-scene-size-mobile);
  }
}
@media print{
  .hero[data-section-id="FRA-C-001"]{background-image:none;}
}

/* ---------- Call demonstration frame ---------- */
.calldemo{position:relative;}
.calldemo-frame{
  position:relative;border-radius:var(--panel-radius-lg);overflow:hidden;
  background:var(--panel-glass);
  border:1px solid var(--panel-glass-edge);
  box-shadow:var(--panel-float-shadow);
  backdrop-filter:blur(var(--panel-blur));-webkit-backdrop-filter:blur(var(--panel-blur));
}

.calldemo-top{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px var(--panel-inset-pad);border-bottom:1px solid var(--panel-hairline);
  background:var(--panel-head-bg);
}
.calldemo-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--accent-text);background:var(--tint);
  border:1px solid var(--rule);border-radius:999px;padding:4px 11px;
}
.calldemo-badge .spark{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.calldemo-live{
  margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:11px;letter-spacing:0.06em;color:var(--muted);
}
.calldemo-live .wave{display:inline-flex;align-items:flex-end;gap:2px;height:11px;}
.calldemo-live .wave i{width:2px;height:4px;background:var(--accent);border-radius:1px;display:block;}
.is-playing .calldemo-live .wave i{animation:wave 1s ease-in-out infinite;}
.is-playing .calldemo-live .wave i:nth-child(2){animation-delay:.15s;}
.is-playing .calldemo-live .wave i:nth-child(3){animation-delay:.3s;}
.is-playing .calldemo-live .wave i:nth-child(4){animation-delay:.45s;}
@keyframes wave{0%,100%{height:4px;}50%{height:11px;}}

/* Caller identity panel — name above, number anchored below */
.caller{
  display:flex;align-items:center;gap:13px;
  padding:14px var(--panel-inset-pad);border-bottom:1px solid var(--panel-hairline);
}
.caller-avatar{
  flex:none;width:38px;height:38px;border-radius:50%;
  background:var(--band);border:1px solid var(--rule);
  display:flex;align-items:center;justify-content:center;
  color:var(--signal-dark);font-weight:700;font-size:14px;
  transition:box-shadow .45s ease, background .45s ease;
}
/* Caller-status icon: only the inner mark carries the shared signal pulse.
   `color` reaches the glyph alone — the outer circle keeps its own border,
   background, size, shape, position and spacing untouched, and the
   identified-state glow is unaffected. */
.caller-avatar{animation:signalPulseInk var(--signal-dur) var(--signal-ease) infinite;}
@keyframes signalPulseInk{
  0%,100%{color:var(--signal-dark);text-shadow:none;}
  50%    {color:var(--signal-bright);text-shadow:0 0 7px var(--signal-halo);}
}

.caller-lines{min-width:0;}
/* Name on its own line, number directly beneath it. Both are spans, so the
   block display is set explicitly — without it they render side by side. */
.caller-name{
  display:block;
  position:relative;font-size:15.5px;font-weight:650;color:var(--ink);line-height:1.2;
  min-height:1.2em;
  transition:color .55s ease;
}
.caller-name .ident{display:inline-block;transition:color .55s ease;}
.caller-number{
  display:block;
  font-family:var(--mono);font-size:12.5px;color:var(--muted);line-height:1.25;
  letter-spacing:0.04em;margin-top:0;font-variant-numeric:tabular-nums;
}

/* Identified: the caller name turns green and stays green until reset. */
.is-identified .caller-name,
.is-identified .caller-name .ident{color:var(--ident-green);}
.is-identified .cd-line[data-who="sarah"] .who{color:var(--ident-green);}
.caller-flag{
  margin-left:9px;font-size:9.5px;font-weight:700;letter-spacing:0.09em;text-transform:uppercase;
  color:var(--accent-text);opacity:0;transition:opacity .3s ease;
}
.is-identified .caller-flag{opacity:1;}
.is-identified .caller-avatar{
  background:var(--tint);box-shadow:0 0 0 3px var(--glow);
}
/* name swap: outgoing rises and fades, incoming rises into place */
.ident-out{animation:identOut .34s ease forwards;}
.ident-in{animation:identIn .40s cubic-bezier(.2,.7,.3,1) forwards;}
@keyframes identOut{to{opacity:0;transform:translateY(-7px);}}
/* The incoming span is created after .is-identified is set, so it would be
   born green. The keyframe carries it from the original ink to green so the
   change reads as a transition rather than a jump. */
@keyframes identIn{
  from{opacity:0;transform:translateY(8px);color:var(--ink);}
  to{opacity:1;transform:none;color:var(--ident-green);}
}

/* Dialogue thread */
.calldemo-thread{
  display:flex;flex-direction:column;gap:10px;
  padding:18px var(--panel-inset-pad);min-height:296px;
  max-height:296px;overflow:hidden;justify-content:flex-end;
}
.cd-line{
  max-width:86%;padding:10px 14px;border-radius:var(--bubble-radius);
  font-size:13.5px;line-height:1.55;border:1px solid var(--panel-border);
  animation:lineIn .34s ease both;
}
.cd-line .who{
  display:block;font-size:9.5px;font-weight:700;letter-spacing:0.09em;
  text-transform:uppercase;margin-bottom:3px;
}
/* No-JS and reduced-motion default: every line visible and crawlable.
   Only the animated mode hides lines before their cue. */
.is-animated .cd-line{display:none;}
.is-animated .cd-line.is-shown{display:block;}
.cd-line.agent{align-self:flex-end;background:var(--bubble-agent-bg);color:var(--ink);}
.cd-line.agent .who{color:var(--accent-text);}
.cd-line.caller{align-self:flex-start;background:var(--bubble-caller-bg);color:var(--body);}
.cd-line.caller .who{color:var(--muted);}
@keyframes lineIn{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}

/* Controls + caption */
.calldemo-controls{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:13px var(--panel-inset-pad);border-top:1px solid var(--panel-hairline);
}
.calldemo-btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:inherit;font-size:13.5px;font-weight:600;color:var(--accent-text);
  background:var(--surface);border:1px solid var(--rule);border-radius:999px;
  padding:9px 16px;cursor:pointer;
}
.calldemo-btn:hover{border-color:var(--accent);color:var(--ink);}
.calldemo-btn .icon{
  width:0;height:0;border-style:solid;
  border-width:5px 0 5px 8px;border-color:transparent transparent transparent currentColor;
}
.calldemo-btn[aria-pressed="true"] .icon{
  width:9px;height:9px;border:0;background:currentColor;border-radius:1px;
}
.calldemo-status{font-size:11.5px;color:var(--muted);}
.calldemo-caption{
  padding:0 var(--panel-inset-pad) 15px;font-size:12px;line-height:1.6;color:var(--muted);
}

/* ---------- Answer-first block (AEO baseline) ---------- */
.answer-block{
  background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:var(--panel-radius);
  padding:26px 28px;box-shadow:var(--panel-shadow);
}
.answer-block h2{font-size:var(--text-h2-answer);}
.answer-block .answer{margin-top:12px;font-size:var(--text-answer);color:var(--ink);max-width:78ch;}
.answer-block .support{margin-top:12px;font-size:14.5px;max-width:78ch;}

/* Owner-facing individual order report — FRA-C-020-R. */
.order-report{
  background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:var(--panel-radius);box-shadow:var(--panel-shadow);overflow:hidden;
}
.order-report > .section-id-label{top:auto;right:8px;bottom:5px;font-size:8px;opacity:.12;}
.order-report-head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:24px 26px 20px;border-bottom:1px solid var(--panel-border);background:var(--surface);
}
.order-report-head .eyebrow{margin:0 0 6px;font-size:11px;}
.order-report-head h3{font-size:24px;}
.order-status{
  display:inline-flex;align-items:center;min-height:30px;padding:5px 12px;
  border:1px solid var(--panel-border);border-radius:999px;background:var(--band);
  color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
}
.order-report-intro{padding:18px 26px 0;font-size:14px;line-height:1.6;color:var(--body);}
.order-report-meta{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;
  margin:18px 26px 0;border:1px solid var(--panel-border);border-radius:var(--radius);overflow:hidden;
}
.order-report-meta div{padding:13px 15px;background:var(--surface);}
.order-report-meta div:nth-child(odd){border-right:1px solid var(--panel-border);}
.order-report-meta div:nth-child(n+3){border-top:1px solid var(--panel-border);}
.order-report-meta dt{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);}
.order-report-meta dd{margin-top:4px;font-size:14.5px;font-weight:600;color:var(--ink);}
.order-report-items{padding:22px 26px 0;}
.order-report-items h4{font-size:14px;color:var(--ink);margin-bottom:10px;}
.order-report-items table{width:100%;border-collapse:collapse;font-size:13.5px;}
.order-report-items th{
  padding:9px 10px;border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);
  background:var(--band);color:var(--muted);font-size:10.5px;letter-spacing:.06em;text-align:left;text-transform:uppercase;
}
.order-report-items td{padding:12px 10px;border-bottom:1px solid var(--panel-border);color:var(--body);}
.order-report-items td:first-child{font-weight:600;color:var(--ink);}
.order-report-items th:last-child,.order-report-items td:last-child{text-align:right;}
.order-report-fulfillment{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:20px 26px 0;}
.order-report-fulfillment div{padding:14px 15px;border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--surface);}
.order-report-fulfillment span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.order-report-fulfillment strong{display:block;margin-top:5px;font-size:13.5px;color:var(--ink);}
.order-report-foot{
  display:flex;justify-content:space-between;gap:14px;margin:20px 26px 0;padding:13px 0;
  border-top:1px solid var(--panel-border);border-bottom:1px solid var(--panel-border);
  font-size:11.5px;color:var(--muted);
}
.order-report .fine{margin:0;padding:14px 26px 22px;font-size:11px;}
.visually-hidden{
  position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;
  overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;
}
@media (max-width:600px){
  .order-report-head{padding:20px;}
  .order-report-intro{padding:16px 20px 0;}
  .order-report-meta{grid-template-columns:1fr;margin:16px 20px 0;}
  .order-report-meta div:nth-child(odd){border-right:0;}
  .order-report-meta div:nth-child(n+2){border-top:1px solid var(--panel-border);}
  .order-report-items{padding:20px 20px 0;}
  .order-report-fulfillment{grid-template-columns:1fr;padding:18px 20px 0;}
  .order-report-foot{flex-direction:column;margin:18px 20px 0;}
  .order-report .fine{padding:13px 20px 20px;}
}

/* FRA-C-010 two-column pairing (approved 2026-08-10).
   The answer-first definition and the always-on benefit relocated from
   FRA-C-003 sit side by side on desktop and stack on mobile through the
   shared .grid-2 rules, so this introduces no new breakpoint and no new
   width. The panels are no longer direct children of .content, so the
   width-release rule above no longer reaches them; .content > .grid governs
   the pair and the approved 75%/1600px desktop and 92% mobile Content/Body
   widths still apply.

   Each panel keeps its natural height. This started as a stretched pair,
   when the two columns differed by only about 77px. Once the four benefit
   boxes moved into the right column it became much the taller of the two,
   and stretching would have opened several hundred pixels of empty space
   inside the bordered left panel — the excess the approved brief rules out.
   Both columns are top-aligned instead, so each ends where its content
   ends. */
.answer-duo{align-items:start;}

/* The four benefit boxes inside the right column, one per row. The approved
   .card component is reused as-is; only the shadow and the inner spacing are
   trimmed, because these cards sit on a panel rather than on the page, and
   .band .card already drops the shadow the same way for the same reason. */
.answer-cards{display:grid;grid-template-columns:1fr;gap:10px;margin-top:20px;}
.answer-cards .card{padding:14px 16px;box-shadow:none;}
.answer-cards .card h3{font-size:15.5px;}

/* FRA-C-010 inner inset. All panel edges now use the shared 1px border. */
[data-section-id="FRA-C-010"] .answer-block{
  padding:var(--answer-pad);
}
@media (max-width:768px){
  [data-section-id="FRA-C-010"] .answer-block{padding:var(--answer-pad-mobile);}
}

/* FRA-C-003 heading measure.
   The approved transition line is a full sentence rather than a short title,
   and the default 24ch heading measure would set it on three narrow lines.
   Widened for this section only; every other section keeps 24ch. */
[data-section-id="FRA-C-003"] .section-head h2{max-width:38ch;}


/* ---------- FAQ ---------- */
.faq-list{display:grid;gap:12px;}
.faq-item{
  background:var(--panel-bg);border:1px solid var(--panel-border);border-radius:var(--panel-radius);
  padding:0 20px;box-shadow:var(--panel-shadow);
}
.band .faq-item{box-shadow:none;}
.faq-item summary{
  list-style:none;cursor:pointer;padding:17px 28px 17px 0;position:relative;
  font-size:16px;font-weight:650;color:var(--ink);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"";position:absolute;right:4px;top:50%;width:8px;height:8px;
  border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
  transform:translateY(-70%) rotate(45deg);transition:transform .3s ease;
}
.faq-item[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq-item .faq-answer{padding:0 0 18px;font-size:14.5px;max-width:80ch;}
.faq-item .faq-answer p + p{margin-top:10px;}

/* ---------- Benefit cards ---------- */
.benefit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.benefit{
  display:flex;gap:15px;background:var(--panel-bg);border:1px solid var(--panel-border);
  border-radius:var(--panel-radius);padding:22px 22px;box-shadow:var(--panel-shadow);
}
.band .benefit{box-shadow:none;}
.benefit .n{
  flex:none;width:31px;height:31px;border-radius:9px;background:var(--band);
  color:var(--accent-text);font-family:var(--mono);font-size:12.5px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.benefit h3{font-size:16.5px;}
.benefit p{margin-top:7px;font-size:14.5px;}

/* ---------- Responsive additions ---------- */
@media (max-width:1024px){
  .benefit-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .content{width:var(--content-w-mobile);}
  .calldemo-thread{min-height:250px;max-height:250px;}
  .hero::after{display:none;}
  .benefit-grid{grid-template-columns:1fr;}
  .section-id-label{top:6px;right:8px;font-size:9px;}
}

/* ==================================================================
   FRA-C-001 Hero media  ·  FRA-C-018 call → conversation → order
   ------------------------------------------------------------------
   Tokens first, as everywhere else in this file. The monitor overlay
   is positioned in percentages of the hero stage, so when the silent
   restaurant clip replaces the poster scene the order screen stays
   locked to the monitor without a single rule changing.
   ================================================================== */
:root{
  /* ---- FRA-C-001 Hero film + dark treatment (approved 2026-08-09) ----
     Seung approved the cinematic Hero: the film runs behind the whole
     section and a scrim darkens the left so the copy is white. This is the
     decision docs/hero-scene-image.md had reserved for its own approval,
     because white copy means the Hero's ink colours change. Every value the
     treatment needs is here — change these, not the rules below. */
  --hero-scene-film:url("../images/hero/hero-scene.jpg");  /* the composited scene */
  --hero-scene-pos-film:center 12%;       /* keeps the wall display and the tablet both in frame */
  --hero-poster:url("../images/hero/hero-poster.jpg");     /* retained, superseded */
  --hero-dark:#171310;                    /* solid ground: what shows if the scene never loads */
  --hero-ink:#FFFFFF;                     /* headline */
  --hero-body:rgba(255,255,255,0.87);     /* sub-headline */
  --hero-muted:rgba(255,255,255,0.64);    /* early-access note, section ID label */
  --hero-accent:#F0B183;                  /* eyebrow + accent phrase — 9.6:1 on --hero-dark */
  --hero-line:rgba(255,255,255,0.38);     /* ghost button border */
  --hero-copy-max:600px;                  /* 521px is the minimum that holds "Never Miss an Order." on one line */
  /* Tall enough that the wall display and the tablet are both inside the crop.
     Shorter than this and the tablet on the counter is the first thing lost. */
  --hero-min-h:clamp(600px,80vh,760px);
  /* Left-to-right scrim. The left end must stay dense enough that white copy
     keeps its contrast over ANY frame of the film, so it starts near-opaque. */
  /* The photograph's own left side is already near-black, so the scrim only has to
     even it out — it is much lighter than the one the film needed. Contrast is
     re-measured against the scene after any change here. */
  --hero-scrim:linear-gradient(90deg,
     rgba(23,19,16,0.93) 0%,
     rgba(23,19,16,0.91) 32%,
     rgba(23,19,16,0.87) 48%,
     rgba(23,19,16,0.64) 60%,
     rgba(23,19,16,0.26) 72%,
     rgba(23,19,16,0.00) 84%);
  /* Only a short fade at the very bottom, to meet the white section below.
     A tall base gradient greys out the owner, who stands in the lower half. */
  --hero-scrim-base:linear-gradient(0deg,rgba(23,19,16,0.30) 0%,rgba(23,19,16,0) 18%);

  /* Hero media */
  --hero-ratio:4 / 3;
  --hero-stage-bg:var(--band);
  --hero-media-radius:var(--panel-radius-lg);

  /* Monitor composite — percentages of the stage */
  --mon-x:47.7%; --mon-y:16.7%; --mon-w:46.5%; --mon-h:45.3%;
  --mon-radius:7px;
  --mon-tilt:-4deg;
  --mon-text:clamp(7px,2.05cqw,11px);

  /* FRA-C-018 — retained from the previous three-panel layout. The rules
     that use these are kept further down and are one markup change away. */
  --flow-gap:22px;
  --flow-col-call:300px;
  --flow-col-order:320px;
  --flow-panel-h:296px;      /* matches .calldemo-thread so the columns align */
  --ring-dur:2.4s;

  /* FRA-C-018 — phone → data bridge → order dashboard (approved 2026-08-09) */
  --afx-gap:26px;
  --afx-phone-w:274px;
  --afx-bridge-min:196px;
  --afx-bridge-h:168px;
  --afx-phone-h:552px;
  --afx-device:#1B1815;              /* device bezel — the deepest tone of --ink */
  --afx-device-radius:52px;
  --afx-screen-radius:44px;
  --afx-tablet-radius:34px;
  --afx-tablet-screen-radius:24px;
  --afx-device-shadow:0 26px 56px rgba(43,39,36,0.16);
  --afx-green-wash:rgba(27,122,75,0.12);   /* same wash as .tkt-state.is-done */
  --afx-bubble-caller:rgba(27,122,75,0.09);
  --afx-flow-dur:1.2s;
  --afx-pulse-dur:2.8s;
}

/* ==================================================================
   FRA-C-001 · cinematic Hero — film behind, dark left, white copy
   Approved 2026-08-09 (desktop-led; mobile follows the same rules).
   ------------------------------------------------------------------
   Scoped to `.hero-film-on`. Every rule below needs that class on the
   Hero, so /pages/ and any other `.hero` keep their light treatment and
   not one shared rule is edited.

   FAILURE BEHAVIOUR IS THE POINT. White copy over a missing background
   would be invisible, so the ground is a solid dark colour first, the
   poster second, and the film last. If the file is absent, autoplay is
   blocked, or motion is reduced, the copy is still readable.
   ================================================================== */
/* `.hero.hero-film-on`, not `.hero-film-on`: the watermark rule above is
   `.hero[data-section-id="FRA-C-001"]`, which carries a class and an attribute.
   A single class loses to it and the SVG watermark keeps painting. */
.hero.hero-film-on{
  background-color:var(--hero-dark);   /* what shows if the scene never loads */
  background-image:var(--hero-scene-film);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:var(--hero-scene-pos-film);
}
.hero-film-on{
  min-height:var(--hero-min-h);
  display:flex;align-items:center;
  color:var(--hero-body);
}
/* The glow and grid wash are tuned for the light ground and only muddy the
   film. Retained above, switched off here. */
.hero-film-on::before,
.hero-film-on::after{display:none;}

/* RETAINED, CURRENTLY UNUSED. The background film was replaced by the composited
   still on 2026-08-10 (Seung chose the still). The rule is kept so re-adding a
   <video class="hero-film"> as the first child of .hero restores it. */
.hero-film{
  position:absolute;inset:0;z-index:0;
  width:100%;height:100%;object-fit:cover;object-position:center;
  pointer-events:none;
}
.hero-scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:var(--hero-scrim),var(--hero-scrim-base);
}
.hero-film-on .hero-inner{position:relative;z-index:2;}

/* The Hero media panel is retired, so the copy takes the full width and is
   held to a comfortable measure instead of a second column. */
.hero-solo{display:block;}
.hero-copy{max-width:var(--hero-copy-max);}
/* The light radial wash existed to protect dark copy from the watermark.
   The scrim does that job now. */
.hero-film-on .hero-inner > div:first-child::before{display:none;}

/* ---- Copy on the dark ground ---- */
.hero-film-on .eyebrow{color:var(--hero-accent);}
.hero-film-on h1{color:var(--hero-ink);max-width:none;}
.hero-film-on h1 .accent{color:var(--hero-accent);}
/* Each approved slogan sentence is its own block. Long sentences may wrap
   naturally inside the protected copy measure. */
.hero-film-on h1 .hl{display:block;}
.hero-film-on .sub{color:var(--hero-body);}
.hero-film-on .hero-note{color:var(--hero-muted);}
.hero-film-on .section-id-label{color:var(--hero-muted);}
.hero-film-on .btn-ghost{color:var(--hero-ink);border-color:var(--hero-line);}
.hero-film-on .btn-ghost:hover{border-color:var(--hero-ink);color:var(--hero-ink);}
.hero-film-on :focus-visible{outline-color:var(--hero-accent);}

/* The Hero background is a still, so there is nothing here for
   prefers-reduced-motion to switch off. The rule that hid the film is retained
   in the reduced-motion block near the end of this file. */

/* ---------- Hero: 6fr / 6fr ----------
   RETAINED, CURRENTLY UNUSED on the home page: `.hero-solo` above makes the
   Hero a single column while the media panel is retired. The rule still
   governs any `.hero` that keeps two columns.
   The hero media needs a 4:3 stage wide enough to keep the composited
   order screen legible. At the previous 7fr/5fr the right column is
   427px and the screen text falls under 8px. 6fr/6fr gives 512px each
   at 1440 and holds the hero's overall height. */
.hero[data-section-id="FRA-C-001"] .hero-inner{
  grid-template-columns:minmax(0,6fr) minmax(0,6fr);
}
@media (max-width:1024px){
  .hero[data-section-id="FRA-C-001"] .hero-inner{grid-template-columns:1fr;}
}

/* The Gourmet Kitchen watermark stays exactly where it was, but the text
   column is now 512px instead of 597px, so the copy wraps further down into
   the busiest part of the illustration. docs/hero-scene-image.md prescribes a
   scrim for precisely this case: the layer is kept, and a soft wash of the
   page ground is laid between it and the type so the headline, sub-headline,
   buttons and early-access note keep their contrast. Nothing is removed. */
.hero[data-section-id="FRA-C-001"]{--hero-scene-size:clamp(320px,27vw,430px) auto;}
.hero[data-section-id="FRA-C-001"] .hero-inner > div:first-child{position:relative;}
.hero[data-section-id="FRA-C-001"] .hero-inner > div:first-child::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  left:-40px;right:-32px;top:-28px;bottom:-40px;
  background:radial-gradient(72% 68% at 32% 58%,
    var(--bg) 0%, rgba(250,249,247,.93) 44%, rgba(250,249,247,0) 100%);
}

.hero-media{
  position:relative;margin:0;
  border-radius:var(--hero-media-radius);overflow:hidden;
  background:var(--surface);border:1px solid var(--rule);
  box-shadow:var(--panel-float-shadow);
}
.hero-stage{
  position:relative;aspect-ratio:var(--hero-ratio);
  background:var(--hero-stage-bg);overflow:hidden;
  container-type:inline-size;
}
/* The clip, when it exists, sits under the order screen and above the poster. */
.hero-clip{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;
}
.hero-clip ~ .hero-scene-art{display:none;}

/* Poster scene. Shapes, not decoration: this is the composition the clip
   is briefed to reproduce — counter, owner in chef's hat and apron, and a
   wall-mounted monitor held at a fixed position and angle. */
.hero-scene-art{position:absolute;inset:0;display:block;z-index:1;}
.hero-scene-art span{position:absolute;display:block;}
.hs-light{left:-14%;top:-32%;width:74%;height:78%;border-radius:50%;background:var(--tint);opacity:.9;}
.hs-counter{left:0;right:0;top:74.5%;height:25.5%;background:var(--tint);}
.hs-counter-front{left:0;right:0;top:78.1%;height:21.9%;background:var(--rule);opacity:.5;}
.hs-counter-edge{left:0;right:0;top:73.4%;height:1.1%;background:var(--rule);opacity:.9;
  box-shadow:0 6px 14px rgba(43,39,36,.07);}
/* The owner stands in the middle distance, softly out of focus. The monitor
   is the subject of this frame, so the figure only has to read as "someone in
   a chef's hat and apron behind the counter" — the clip supplies the person. */
.hs-jacket,.hs-apron,.hs-neck,.hs-head,.hs-hat,.hs-brim{
  filter:blur(2.6px);
}
.hs-jacket{left:8.2%;top:51%;width:13.4%;height:27%;background:var(--surface);
  border-radius:46% 46% 10px 10px / 32% 32% 10px 10px;}
.hs-apron{left:10.9%;top:60.5%;width:8%;height:17.5%;border-radius:8px 8px 5px 5px;
  background:var(--footer);opacity:.5;}
.hs-neck{left:13.6%;top:48.6%;width:2.6%;height:4.2%;background:var(--muted);opacity:.7;}
.hs-head{left:12.3%;top:42.6%;width:5.2%;height:7.6%;border-radius:50%;background:var(--muted);opacity:.8;}
.hs-hat{left:11%;top:37.2%;width:7.8%;height:6%;border-radius:12px 12px 3px 3px;background:var(--surface);}
.hs-brim{left:10.6%;top:41.6%;width:8.6%;height:2.2%;border-radius:3px;background:var(--surface);}
/* A menu board on the back wall, so the room reads as a working restaurant. */
.hs-pass{left:3.5%;top:16%;width:24%;height:19%;border-radius:6px;background:var(--rule);opacity:.32;}
.hs-bezel{left:46.5%;top:15.1%;width:48.8%;height:48.4%;border-radius:10px;background:var(--ink);
  box-shadow:0 14px 30px rgba(43,39,36,.16);}

/* The order screen — real text, composited over the monitor area. */
.hero-monitor{
  position:absolute;z-index:2;
  left:var(--mon-x);top:var(--mon-y);width:var(--mon-w);height:var(--mon-h);
  background:var(--surface);border-radius:var(--mon-radius);overflow:hidden;
  display:flex;flex-direction:column;gap:.65em;
  padding:1em;font-size:var(--mon-text);line-height:1.35;
  transform:perspective(900px) rotateY(var(--mon-tilt));
}
.hm-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6em;
  padding-bottom:.6em;border-bottom:1px solid var(--rule);}
.hm-head b{font-size:1em;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);}
.hm-head span{font-size:.78em;color:var(--muted);}
.hm-ticket + .hm-ticket{padding-top:.6em;border-top:1px solid var(--rule);}
.hm-row{display:flex;align-items:center;gap:.65em;}
.hm-no{font-family:var(--mono);font-size:.85em;color:var(--muted);}
.hm-item{font-size:.96em;font-weight:600;color:var(--ink);}
.hm-chip{margin-left:auto;font-size:.72em;font-weight:700;letter-spacing:.05em;
  border-radius:999px;padding:.2em .6em;white-space:nowrap;}
.hm-chip.ok{color:var(--ident-green);background:rgba(27,122,75,.14);}
.hm-chip.new{color:var(--accent-text);background:var(--tint);}
.hm-opt{font-size:.82em;color:var(--body);}
.hm-pickup{font-size:.82em;font-weight:600;color:var(--accent-text);}
.hm-foot{margin-top:auto;font-size:.76em;color:var(--muted);}

.hero-strip{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:13px var(--panel-inset-pad);border-top:1px solid var(--rule);background:var(--surface);
}
.hero-badge{
  display:inline-flex;align-items:center;gap:7px;
  font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--accent-text);background:var(--tint);border:1px solid var(--rule);
  border-radius:999px;padding:4px 11px;
}
.hero-badge .spark{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;}
.hero-live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);
  font-size:11px;letter-spacing:.06em;color:var(--muted);}
.hero-live .wave{display:inline-flex;align-items:flex-end;gap:2px;height:11px;}
.hero-live .wave i{width:2px;height:4px;background:var(--accent);border-radius:1px;display:block;}
.hero-live .wave i{animation:wave 1s ease-in-out infinite;}
.hero-live .wave i:nth-child(2){animation-delay:.15s;}
.hero-live .wave i:nth-child(3){animation-delay:.3s;}
.hero-live .wave i:nth-child(4){animation-delay:.45s;}

/* ---------- FRA-C-018 · previous three-panel layout ----------
   RETAINED, CURRENTLY UNUSED. The approved 2026-08-09 revision replaced the
   markup these rules style (.flow-col / .callviz / .tkt) with the phone,
   data bridge and order dashboard defined further down. Nothing is deleted:
   the same treatment is one markup change away if it is ever approved again,
   exactly as `.section.band` is kept below. */
.flow-section .section-head .eyebrow{margin-bottom:10px;}
.flow{display:grid;gap:var(--flow-gap);align-items:stretch;
  grid-template-columns:var(--flow-col-call) minmax(0,1fr) var(--flow-col-order);}
.flow-col{
  position:relative;display:flex;flex-direction:column;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--panel-radius);overflow:hidden;
}
.flow-cap{margin-top:auto;padding:16px 18px 18px;border-top:1px solid var(--panel-hairline);}
.flow-step{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-text);margin-bottom:7px;}
.flow-cap h3{font-size:16px;}
.flow-cap p{margin-top:6px;font-size:13.5px;color:var(--muted);}

/* left column — the incoming call */
.callviz{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:18px;padding:34px 18px 24px;}
.rings{position:relative;display:grid;place-items:center;width:132px;height:132px;}
.rings i{position:absolute;inset:0;margin:auto;width:56px;height:56px;border-radius:50%;
  border:1.5px solid var(--accent);opacity:0;}
@keyframes ringOut{from{transform:scale(1);opacity:.5;}to{transform:scale(2.35);opacity:0;}}
.handset{position:relative;z-index:1;display:grid;place-items:center;
  width:52px;height:88px;border-radius:11px;background:var(--ink);}
.handset::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);
  width:16px;height:2px;border-radius:2px;background:rgba(255,255,255,.35);}
.handset-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  width:42px;height:70px;border-radius:7px;background:var(--tint);text-align:center;}
.handset-screen b{font-size:8px;font-weight:700;letter-spacing:.04em;color:var(--accent-text);}
.handset-screen em{font-family:var(--mono);font-style:normal;font-size:6.5px;color:var(--muted);line-height:1.2;}
.call-who{display:flex;align-items:center;gap:10px;}
.call-avatar{flex:none;width:34px;height:34px;border-radius:50%;background:var(--band);
  border:1px solid var(--rule);display:grid;place-items:center;color:var(--muted);font-size:14px;}
.call-lines{min-width:0;}
.call-name{display:block;font-size:14px;font-weight:650;color:var(--ident-green);line-height:1.25;
  transition:color .5s ease;}
.call-num{display:block;font-family:var(--mono);font-size:11.5px;color:var(--muted);
  letter-spacing:.04em;line-height:1.25;font-variant-numeric:tabular-nums;}
.call-chip{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:5px 12px;color:var(--ident-green);background:rgba(27,122,75,.12);}
.call-chip.is-ringing{color:var(--muted);background:var(--bg);border:1px solid var(--rule);}
.call-chip.is-live{color:var(--accent-text);background:var(--tint);}
.flow-cue{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-size:13px;}
.flow-cue i{display:block;width:28px;height:1px;background:var(--accent);opacity:.55;}

/* centre column — the card supplies the frame the panel used to draw itself */
.flow-convo .calldemo-frame{
  background:var(--surface);border:0;border-radius:0;box-shadow:none;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  display:flex;flex-direction:column;height:100%;
}
.flow-convo .calldemo{height:100%;}
.calldemo-title{font-size:12.5px;font-weight:650;color:var(--ink);}
.flow-convo .calldemo-live{margin-left:0;}
.flow-convo .calldemo-badge{margin-left:auto;}

/* right column — the order screen */
.tkt{flex:1;display:flex;flex-direction:column;}
.tkt-top{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:12px var(--panel-inset-pad);border-bottom:1px solid var(--panel-hairline);
  background:var(--panel-head-bg);}
.tkt-top b{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text);}
.tkt-top span{font-family:var(--mono);font-size:11px;color:var(--muted);}
.tkt-body{padding:16px;display:flex;flex-direction:column;gap:14px;
  min-height:var(--flow-panel-h);max-height:var(--flow-panel-h);overflow:hidden;}
.tkt-listen{display:none;align-items:center;gap:9px;font-size:13.5px;font-style:italic;color:var(--muted);}
.tkt-listen .pulse{width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  animation:tktPulse 1.4s ease-in-out infinite;}
@keyframes tktPulse{0%,100%{opacity:.25;}50%{opacity:1;}}
.tkt-id{font-size:17px;font-weight:700;letter-spacing:-.01em;color:var(--ink);}
.tkt-id .n{font-family:var(--mono);}
.tkt-new{margin-left:9px;font-size:9.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);background:var(--tint);border-radius:999px;padding:2px 8px;vertical-align:middle;}
.tkt-meta{display:flex;flex-direction:column;gap:3px;}
.tkt-meta > div,.tkt-pickup > div{display:flex;gap:10px;font-size:13px;}
.tkt-meta dt,.tkt-pickup dt{color:var(--muted);min-width:66px;}
.tkt-meta dd,.tkt-pickup dd{color:var(--ink);font-weight:600;}
.tkt-meta dd.mono{font-family:var(--mono);font-weight:500;letter-spacing:.04em;}
.tkt-items{display:flex;flex-direction:column;gap:9px;padding-top:12px;border-top:1px solid var(--panel-hairline);}
.tkt-items li{display:flex;gap:9px;font-size:13.5px;}
.tkt-items .q{flex:none;font-family:var(--mono);font-weight:700;color:var(--accent-text);}
.tkt-items .nm{display:block;font-weight:600;color:var(--ink);}
.tkt-items .opts{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px;}
.tkt-items .opts span{font-size:11px;color:var(--body);background:var(--band);border-radius:999px;padding:2px 9px;}
.tkt-pickup{padding-top:11px;border-top:1px solid var(--panel-hairline);}
.tkt-foot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:9px;
  flex-wrap:wrap;padding:13px var(--panel-inset-pad);border-top:1px solid var(--panel-hairline);}
.tkt-state{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  border-radius:999px;padding:5px 12px;color:var(--muted);background:var(--bg);border:1px solid var(--rule);}
.tkt-state.is-taking{color:var(--accent-text);background:var(--tint);border-color:transparent;}
.tkt-state.is-done{color:var(--ident-green);background:rgba(27,122,75,.12);border-color:transparent;}
.tkt-done{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--ident-green);}
.tkt-done .tick{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;
  background:var(--ident-green);color:var(--on-accent);font-size:11px;}

/* ---------- Timeline states ----------
   Without JavaScript no data-step is set and the completed order is shown,
   so the section is readable and crawlable exactly as it is. JavaScript
   sets data-step and the rules below roll it back to the start. */
.flow-section[data-step="0"] .tkt-listen{display:flex;}
.flow-section[data-step="0"] .tkt-id,
.flow-section[data-step="1"] .tkt-id{display:none;}
.flow-section[data-step="0"] .tkt-meta,
.flow-section[data-step="1"] .tkt-meta,
.flow-section[data-step="2"] .tkt-meta{display:none;}
.flow-section[data-step="0"] .tkt-items,
.flow-section[data-step="1"] .tkt-items,
.flow-section[data-step="2"] .tkt-items,
.flow-section[data-step="3"] .tkt-items{display:none;}
.flow-section[data-step="0"] .tkt-pickup,
.flow-section[data-step="1"] .tkt-pickup,
.flow-section[data-step="2"] .tkt-pickup,
.flow-section[data-step="3"] .tkt-pickup,
.flow-section[data-step="4"] .tkt-pickup{display:none;}
.flow-section[data-step="6"] .tkt-new{display:none;}
.flow-section[data-step="0"] .tkt-done,
.flow-section[data-step="1"] .tkt-done,
.flow-section[data-step="2"] .tkt-done,
.flow-section[data-step="3"] .tkt-done,
.flow-section[data-step="4"] .tkt-done,
.flow-section[data-step="5"] .tkt-done{display:none;}
.flow-section[data-step] .tkt-id,
.flow-section[data-step] .tkt-meta,
.flow-section[data-step] .tkt-items,
.flow-section[data-step] .tkt-pickup,
.flow-section[data-step] .tkt-done{animation:lineIn .34s ease both;}
.flow-section[data-step="0"] .rings i{animation:ringOut var(--ring-dur) ease-out infinite;}
.flow-section[data-step="0"] .rings i:nth-child(2){animation-delay:calc(var(--ring-dur) / 3);}
.flow-section[data-step="0"] .rings i:nth-child(3){animation-delay:calc(var(--ring-dur) / 3 * 2);}

/* ---------- FRA-C-018 responsive ---------- */
@media (max-width:1100px){
  /* Below three comfortable columns the conversation takes the full width and
     the call and the order sit beneath it. The reading order stays
     call → conversation → order top-to-bottom on the next step down. */
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));}
  .flow-convo{grid-column:1 / -1;order:-1;}
}
@media (max-width:768px){
  .flow{grid-template-columns:1fr;gap:16px;}
  .flow-convo{order:0;}
  .flow-call{order:-1;}
  .flow-order{order:1;}
  /* Nothing in the order may be cut off on a phone. */
  .tkt-body{min-height:0;max-height:none;overflow:visible;}
  .callviz{padding:26px 18px 20px;}
  .hero-monitor{--mon-x:41%;--mon-y:14%;--mon-w:55%;--mon-h:52%;
    --mon-text:clamp(8px,3.1cqw,12px);--mon-tilt:0deg;}
  .hero-strip{padding:11px 14px;}
}

/* ==================================================================
   FRA-C-018 · phone → data bridge → order dashboard
   Approved 2026-08-09.
   ------------------------------------------------------------------
   SCOPING. Every selector in this block is either prefixed `afx-` or
   already owned by FRA-C-018 (.calldemo*, .caller*, .cd-line,
   .call-chip, .tkt-state). No rule here can reach .eyebrow, .feature,
   .pulse, .avatar, .status or any other shared class used elsewhere on
   the site, so FRA-C-005, the hero and /pages/ are untouched.

   COLOUR. Tokens only, as everywhere else in this file. The device
   bezel, the green washes and the bubble tint are declared once in the
   :root block above.

   TIMELINE. The dashboard runs no clock of its own. assets/js/hero.js
   emits the cues, assets/js/order-flow.js turns them into `data-step`
   on this section, and the rules below read it. Without JavaScript no
   data-step is set and the completed order stands as it ships, so the
   section stays readable and crawlable.
   ================================================================== */
.agent-flow-section .section-head .eyebrow{margin-bottom:10px;}

.afx-stage{
  display:grid;gap:var(--afx-gap);align-items:center;
  grid-template-columns:var(--afx-phone-w) minmax(var(--afx-bridge-min),0.62fr) minmax(0,2.4fr);
}

/* ---------- The phone: the approved Concept Demonstration at handset scale ---------- */
.afx-phone-col{display:flex;flex-direction:column;align-items:center;}
.afx-demo{display:flex;flex-direction:column;align-items:center;gap:14px;}

.afx-phone{
  flex:none;width:var(--afx-phone-w);height:var(--afx-phone-h);padding:9px;
  border-radius:var(--afx-device-radius);background:var(--afx-device);
  box-shadow:var(--afx-device-shadow),inset 0 0 0 1px rgba(255,255,255,0.14);
}
.afx-screen{
  position:relative;height:100%;overflow:hidden;
  display:flex;flex-direction:column;
  border-radius:var(--afx-screen-radius);background:var(--surface);
}
.afx-island{
  flex:none;width:86px;height:24px;margin:9px auto 4px;
  border-radius:999px;background:var(--afx-device);
}
.afx-screen-top{flex:none;display:flex;justify-content:center;padding:4px 12px 9px;}
.afx-screen .calldemo-badge{font-size:9px;gap:5px;padding:3px 9px;}
.afx-screen .calldemo-badge .spark{width:5px;height:5px;}

/* Caller identity — the approved identification UI, shrunk to the handset. */
.afx-screen .afx-caller{gap:9px;padding:9px 14px;border-top:1px solid var(--panel-hairline);}
.afx-screen .caller-avatar{width:30px;height:30px;font-size:12px;}
.afx-screen .caller-name{font-size:13px;}
.afx-screen .caller-number{font-size:10.5px;}
.afx-screen .caller-flag{margin-left:6px;font-size:8px;}

/* Dialogue thread. The handset follows the convention every messaging app
   uses: the side you are — FrontAgent — sits on the right, and the person
   you are talking to — the caller — sits on the left. The transcript itself
   is unchanged; only the side each bubble is anchored to. */
.afx-screen .afx-thread{
  flex:1;min-height:0;max-height:none;gap:8px;padding:14px 13px;
  /* The transcript is an <ol> so the order of the lines is carried in the
     markup. The global reset only clears markers on <ul>, and .cd-line falls
     back to display:list-item whenever the animated mode is off — under
     reduced motion and with JavaScript disabled — which printed 1. 2. 3.
     beside the bubbles. The list keeps its semantics; only the markers go. */
  list-style:none;
  /* The thread holds the newest lines at the bottom, so earlier ones leave
     the top of the handset exactly as they do on a real phone. The fade
     makes that edge read as scrolled-away rather than cut off. */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38px);
  mask-image:linear-gradient(180deg,transparent 0,#000 38px);
}
.afx-screen .afx-thread .cd-line{
  max-width:84%;padding:8px 11px;font-size:11.5px;line-height:1.5;border-radius:13px;
}
.afx-screen .afx-thread .cd-line .who{font-size:8.5px;margin-bottom:2px;}
.afx-screen .afx-thread .cd-line.agent{align-self:flex-end;border-bottom-right-radius:4px;}
.afx-screen .afx-thread .cd-line.caller{
  align-self:flex-start;border-bottom-left-radius:4px;
  background:var(--afx-bubble-caller);border-color:transparent;
}

/* Typing indicator — only while the demonstration is actually running, and
   never once the order is confirmed. */
.afx-typing{
  flex:none;display:none;align-items:center;gap:4px;width:fit-content;
  margin:0 13px 4px;padding:8px 11px;border-radius:13px;
  background:var(--bubble-agent-bg);border:1px solid var(--panel-border);
}
.afx-typing i{
  display:block;width:5px;height:5px;border-radius:50%;background:var(--muted);
  animation:afxTyping 1.2s ease-in-out infinite;
}
.afx-typing i:nth-child(2){animation-delay:.15s;}
.afx-typing i:nth-child(3){animation-delay:.3s;}
@keyframes afxTyping{0%,60%,100%{transform:translateY(0);}30%{transform:translateY(-4px);}}
.afx-demo.is-animated.is-playing .afx-typing{display:flex;}
/* Scoped past the four-class rule above on purpose: once the order is
   confirmed nobody is still typing. */
.agent-flow-section[data-step="6"] .afx-demo.is-animated.is-playing .afx-typing{display:none;}

/* Call status bar. This is a telephone call, not a message thread: the bar
   reports the state of the call and offers no way to send text. */
.afx-callbar{
  flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:10px 14px 14px;border-top:1px solid var(--panel-hairline);
}
.afx-callbar .afx-callbar-live{margin-left:0;gap:6px;font-size:10px;}
.afx-callbar .call-chip{font-size:9px;letter-spacing:.06em;padding:4px 9px;}

.afx-demo .afx-controls{
  justify-content:center;gap:10px;padding:0;border-top:0;
  max-width:var(--afx-phone-w);text-align:center;
}
.afx-demo .afx-controls .calldemo-btn{font-size:12.5px;padding:8px 15px;}
.afx-demo .afx-controls .calldemo-status{flex:1 0 100%;text-align:center;}

/* ---------- The data bridge ---------- */
/* The bundle is given an explicit height rather than the viewBox ratio, so
   the four paths spread far enough apart for the label to float inside the
   flow instead of covering it. preserveAspectRatio="none" stretches them. */
.afx-bridge{position:relative;display:grid;place-items:center;}
.afx-bridge svg{width:100%;height:var(--afx-bridge-h);overflow:visible;}
.afx-path{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;opacity:.75;
  stroke-dasharray:8 10;
  animation:afxFlow var(--afx-flow-dur) linear infinite;
  filter:drop-shadow(0 0 5px var(--bg3d-glow));
}
.afx-p2{animation-delay:-.25s;}
.afx-p3{animation-delay:-.5s;}
.afx-p4{animation-delay:-.75s;}
@keyframes afxFlow{to{stroke-dashoffset:-36;}}

/* The travelling dots need offset-path. Where it is unsupported the circles
   would pile up at the SVG origin, so they are drawn only where it works. */
.afx-pulse{display:none;}
@supports (offset-path:path("M0 0 L1 1")){
  .afx-pulse{
    display:block;fill:var(--accent);
    filter:drop-shadow(0 0 7px var(--accent));
    offset-path:path("M0 112 C90 112 120 135 200 135 S300 104 420 104");
    animation:afxPulse var(--afx-pulse-dur) linear infinite;
  }
}
.afx-pulse2{animation-delay:-.9s;}
.afx-pulse3{animation-delay:-1.8s;}
@keyframes afxPulse{
  from{offset-distance:0%;opacity:0;}
  10%{opacity:1;}
  90%{opacity:1;}
  to{offset-distance:100%;opacity:0;}
}
.afx-sync{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  padding:4px 10px;border:1px solid var(--rule);border-radius:999px;
  background:var(--surface);color:var(--accent-text);
  font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
}

/* ---------- The order dashboard ---------- */
.afx-tablet-col{min-width:0;}
.afx-tablet{
  padding:13px;border-radius:var(--afx-tablet-radius);
  background:var(--afx-device);box-shadow:var(--afx-device-shadow);
  container-type:inline-size;
}
.afx-tablet-screen{
  padding:22px;border-radius:var(--afx-tablet-screen-radius);background:var(--surface);
}

.afx-dash-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.afx-dash-top h3{margin-right:auto;font-size:clamp(17px,3.1cqw,23px);}
.afx-live{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 10px;border-radius:999px;
  background:var(--afx-green-wash);color:var(--ident-green);
  font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
}
.afx-live-dot{
  flex:none;width:6px;height:6px;border-radius:50%;background:var(--ident-green);
  animation:tktPulse 1.4s ease-in-out infinite;
}
.afx-dash-top .afx-agent-state{font-size:10.5px;padding:5px 10px;}

.afx-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:20px 0 18px;}
.afx-metric{padding:12px 13px;border:1px solid var(--rule);border-radius:11px;}
.afx-metric span{display:block;font-size:clamp(9.5px,1.75cqw,11.5px);color:var(--muted);}
.afx-metric strong{
  display:block;margin-top:5px;color:var(--ink);
  font-size:clamp(17px,3.1cqw,24px);font-variant-numeric:tabular-nums;
}
.afx-metric b{font-weight:inherit;}
/* The New Orders count ticks over when the order is confirmed. Without
   JavaScript no data-step is set and the final count stands. */
.afx-n-before{display:none;}
.agent-flow-section[data-step] .afx-n-before{display:inline;}
.agent-flow-section[data-step] .afx-n-after{display:none;}
.agent-flow-section[data-step="6"] .afx-n-before{display:none;}
.agent-flow-section[data-step="6"] .afx-n-after{display:inline;animation:lineIn .34s ease both;}

.afx-table{border:1px solid var(--rule);border-radius:12px;overflow:hidden;}
.afx-row{
  display:grid;grid-template-columns:.85fr 1.15fr 1.7fr .95fr 1.05fr;
  gap:10px;align-items:center;
  padding:11px 13px;border-bottom:1px solid var(--panel-hairline);
  font-size:clamp(10px,1.85cqw,12.5px);
}
.afx-table > *:last-child{border-bottom:0;}
.afx-row-head{
  background:var(--band);color:var(--muted);font-weight:650;
  font-size:clamp(9px,1.6cqw,11px);letter-spacing:.05em;text-transform:uppercase;
}
.afx-c{min-width:0;color:var(--ink);}
.afx-c b{display:block;font-family:var(--mono);font-weight:700;}
.afx-c small{display:block;margin-top:2px;font-size:.85em;color:var(--muted);}
.afx-c em{
  display:inline-block;margin-left:4px;padding:1px 7px;
  border-radius:999px;background:var(--band);color:var(--body);
  font-style:normal;font-size:.82em;
}
.afx-mono{font-family:var(--mono);letter-spacing:.03em;}

.afx-st{
  display:inline-flex;align-items:center;gap:5px;width:fit-content;
  padding:4px 8px;border-radius:7px;
  font-size:.88em;font-weight:650;white-space:nowrap;
}
.afx-st-new{color:var(--accent-text);background:var(--tint);}
.afx-st-progress{color:var(--accent-text);box-shadow:inset 0 0 0 1px var(--accent);}
.afx-st-ready{color:var(--ident-green);background:var(--afx-green-wash);}
.afx-st-completed{color:var(--muted);background:var(--band);}
.afx-st-done{color:var(--ident-green);background:var(--afx-green-wash);}
.afx-tick{
  flex:none;display:grid;place-items:center;width:13px;height:13px;border-radius:50%;
  background:var(--ident-green);color:var(--on-accent);font-size:8px;
}

.afx-waiting{
  display:none;align-items:center;gap:9px;
  padding:14px 13px;border-bottom:1px solid var(--panel-hairline);
  font-size:clamp(10px,1.85cqw,12.5px);font-style:italic;color:var(--muted);
}
.afx-wait-dot{
  flex:none;width:6px;height:6px;border-radius:50%;background:var(--accent);
  animation:tktPulse 1.4s ease-in-out infinite;
}

.afx-sample-note{margin-top:12px;font-size:12px;line-height:1.6;color:var(--muted);}

/* ---------- Dashboard timeline ----------
   0 before the call · 1 connected · 2 order opened · 3 customer known
   4 items · 5 pickup time · 6 confirmed. */
.agent-flow-section[data-step="0"] .afx-waiting,
.agent-flow-section[data-step="1"] .afx-waiting{display:flex;}
.agent-flow-section[data-step="0"] .afx-row-live,
.agent-flow-section[data-step="1"] .afx-row-live{display:none;}

.agent-flow-section[data-step="2"] [data-fill="cust"] .afx-v{display:none;}

.agent-flow-section[data-step="2"] [data-fill="items"] .afx-v,
.agent-flow-section[data-step="3"] [data-fill="items"] .afx-v{display:none;}

.agent-flow-section[data-step="2"] [data-fill="pickup"] .afx-v,
.agent-flow-section[data-step="3"] [data-fill="pickup"] .afx-v,
.agent-flow-section[data-step="4"] [data-fill="pickup"] .afx-v{display:none;}

.afx-st-new{display:none;}
.agent-flow-section[data-step="2"] .afx-st-new,
.agent-flow-section[data-step="3"] .afx-st-new,
.agent-flow-section[data-step="4"] .afx-st-new,
.agent-flow-section[data-step="5"] .afx-st-new{display:inline-flex;}
.agent-flow-section[data-step="2"] .afx-st-done,
.agent-flow-section[data-step="3"] .afx-st-done,
.agent-flow-section[data-step="4"] .afx-st-done,
.agent-flow-section[data-step="5"] .afx-st-done{display:none;}

.agent-flow-section[data-step] .afx-v{animation:lineIn .34s ease both;}
.agent-flow-section[data-step="6"] .afx-row-live{animation:afxNewOrder 2.4s ease-in-out;}
@keyframes afxNewOrder{0%{background:var(--tint);}100%{background:transparent;}}

/* ---------- Feature row ---------- */
.afx-features{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;margin-top:44px;
}
.afx-feature{display:flex;gap:14px;align-items:flex-start;}
.afx-feature-icon{
  flex:none;display:grid;place-items:center;width:46px;height:46px;
  border-radius:50%;background:var(--tint);border:1px solid var(--rule);
  font-size:20px;line-height:1;
}
.afx-feature h3{font-size:16px;}
.afx-feature p{margin-top:6px;font-size:14px;line-height:1.55;color:var(--muted);}

.afx-caption{padding:0;margin-top:26px;max-width:var(--measure);}

/* ---------- FRA-C-018 responsive ---------- */
@media (max-width:1024px){
  /* Below three comfortable columns the stage stacks. The reading order
     stays conversation → bridge → dashboard, top to bottom. */
  .afx-stage{grid-template-columns:1fr;justify-items:center;gap:20px;}
  /* A square box so the rotated bridge cannot overflow its own cell. */
  .afx-bridge{width:180px;height:180px;}
  .afx-bridge svg{width:180px;height:120px;transform:rotate(90deg);}
  .afx-tablet-col{width:100%;}
  .afx-features{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;}
}
@media (max-width:768px){
  .afx-features{grid-template-columns:1fr;gap:22px;}
  .afx-tablet{padding:10px;border-radius:26px;}
  .afx-tablet-screen{padding:16px;border-radius:18px;}
  .afx-metrics{grid-template-columns:repeat(2,minmax(0,1fr));}
  /* Nothing in the order may be cut off on a phone, so the table becomes a
     stacked list instead of five squeezed columns. */
  .afx-row{grid-template-columns:1fr auto;gap:5px 10px;padding:13px;font-size:12.5px;}
  .afx-row-head{display:none;}
  .afx-row .afx-c:nth-child(1){grid-column:1;grid-row:1;}
  .afx-row .afx-c:nth-child(5){grid-column:2;grid-row:1;justify-self:end;}
  .afx-row .afx-c:nth-child(2),
  .afx-row .afx-c:nth-child(3),
  .afx-row .afx-c:nth-child(4){grid-column:1 / -1;}
  .afx-c b{display:inline;}
}

/* ==================================================================
   Content background policy — approved 2026-08-09
   ------------------------------------------------------------------
   Content sections are white. Header and Footer keep their approved
   colours. Grey, tinted, gradient and alternating section backgrounds
   are not used for decoration.

   Scoped to `.page-home` on purpose. /pages/benefits/ and
   /pages/industries/ keep their current treatment until they are reworked;
   they carry no `page-home` class, so not one of their rules changes.

   Nothing is deleted. `.section.band` and its rules stay defined above,
   and the `band` class stays on the sections in every page, so the
   previous alternating treatment is one override away if it is ever
   approved again. This block only decides what those sections paint.
   ================================================================== */
:root{
  --content-bg:#FFFFFF;   /* every Content/Body section */
}

body.page-home{background:var(--content-bg);}
.page-home .section,
.page-home .closing{background:var(--content-bg);}
/* The alternating band is retired as decoration on the home page. */
.page-home .section.band,
.page-home .closing.band{background:var(--content-bg);}

/* Cards inside a band borrowed their separation from the tint behind them.
   On white they need their own edge back, so the shared panel shadow is
   restored rather than suppressed. */
.page-home .band .card,
.page-home .band .faq-item,
.page-home .band .benefit{box-shadow:var(--panel-shadow);}

/* Panel header strips carried a tinted gradient. The gradient goes; the
   1px hairline underneath already does the structural work. */
.page-home .calldemo-top,
.page-home .tkt-top{background:var(--content-bg);}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .cd-line{animation:none;}
  .ident-out,.ident-in{animation:none;}
  .ident-out{display:none;}
  .is-playing .calldemo-live .wave i{animation:none;height:7px;}
  .calldemo-thread{max-height:none;overflow:visible;}
  /* Signal elements hold a static dark brown, no pulse. */
  .brand-dot{animation:none;background:var(--signal-dark);box-shadow:none;}
  .caller-avatar{animation:none;color:var(--signal-dark);text-shadow:none;}

  /* FRA-C-018 and the hero media: no motion, and every final value visible.
     The scripts do not set data-step under reduced motion, so the completed
     order stands as it does without JavaScript; these rules stop the loops
     that are declared outside the timeline. */
  .hero-live .wave i{animation:none;height:7px;}
  .rings i,
  .flow-section[data-step="0"] .rings i{animation:none;opacity:.28;}
  .tkt-listen .pulse{animation:none;opacity:.8;}
  .flow-section[data-step] .tkt-id,
  .flow-section[data-step] .tkt-meta,
  .flow-section[data-step] .tkt-items,
  .flow-section[data-step] .tkt-pickup,
  .flow-section[data-step] .tkt-done{animation:none;}
  .tkt-body{max-height:none;overflow:visible;}

  /* FRA-C-018 phone, data bridge and dashboard. hero.js shows all nine lines
     at once here and order-flow.js sets no data-step, so the phone is allowed
     to grow to the full transcript rather than clip it, and the dashboard
     stands complete. These rules only stop the loops declared outside the
     timeline. */
  .afx-path,
  .afx-typing i,
  .afx-live-dot,
  .afx-wait-dot{animation:none;}
  /* A stopped travelling dot would simply sit at the start of its path, so
     it is removed rather than frozen. The four paths still show the route. */
  .afx-pulse{display:none;}
  .afx-demo .afx-typing{display:none;}
  .afx-phone{height:auto;}
  .afx-screen .afx-thread{
    overflow:visible;
    -webkit-mask-image:none;mask-image:none;   /* nothing is clipped, so nothing fades */
  }
  .agent-flow-section[data-step] .afx-v,
  .agent-flow-section[data-step="6"] .afx-n-after,
  .agent-flow-section[data-step="6"] .afx-row-live{animation:none;}
}

/* ==================================================================
   CATEGORY PAGE HERO — added 2026-08-11 with the placeholder pages
   FRA-C-019 / 021 / 023 / 025 (How It Works, Features, Security,
   Pricing).

   These heroes reuse the shared .hero frame unchanged: the full-width
   Main Box, the glow-and-grid wash, and .hero-inner.content's approved
   75%/1600px desktop and 92% mobile widths. The single change is the
   headline measure. `.hero h1` is capped at 16ch for the home page's
   short slogan ("Never Miss a Call."); a category page headline is a
   title and needs a wider line. Equal specificity to `.hero h1`, and
   declared later, so it wins without !important. Nothing on the home
   page carries .hero-page, so FRA-C-001 is untouched.
   ================================================================== */
.hero-page h1{max-width:24ch;}

/* ==================================================================
   APPROVED CATEGORY HERO SYSTEM
   A calm, reusable Main Box for How It Works, Benefits, Industries,
   Features, Security and Pricing. All adjustable values are tokens above.
   ================================================================== */
.category-hero{
  position:relative;overflow:hidden;padding:var(--category-hero-pad) 0;
  background:var(--category-hero-bg);border-bottom:1px solid var(--rule);
}
.category-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:var(--bg3d-grid-opacity);
  background-image:linear-gradient(var(--bg3d-grid) 1px,transparent 1px),linear-gradient(90deg,var(--bg3d-grid) 1px,transparent 1px);
  background-size:var(--bg3d-grid-size) var(--bg3d-grid-size);
  -webkit-mask-image:var(--bg3d-mask);mask-image:var(--bg3d-mask);
}
.category-hero::after{
  content:"";position:absolute;width:42vw;height:42vw;max-width:620px;max-height:620px;
  right:-12vw;top:-24vw;border-radius:50%;background:var(--bg3d-glow);filter:blur(2px);pointer-events:none;
}
.category-hero .hero-inner{position:relative;z-index:1;grid-template-columns:minmax(0,7fr) minmax(300px,5fr);}
.category-hero h1{max-width:18ch;}
.category-hero .sub{font-size:var(--text-lead);}
.category-proof{
  background:var(--category-hero-panel-bg);border:1px solid var(--category-hero-panel-border);
  border-radius:var(--category-hero-radius);box-shadow:var(--category-hero-shadow);
  padding:clamp(22px,3vw,32px);backdrop-filter:blur(var(--panel-blur));
}
.category-proof-label{font-size:var(--text-micro);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-text);}
.category-proof h2{margin-top:9px;font-size:clamp(22px,2.2vw,30px);}
.category-proof-list{display:grid;gap:10px;margin-top:20px;}
.category-proof-item{
  display:grid;grid-template-columns:36px 1fr;gap:12px;align-items:center;
  padding:12px 14px;background:var(--surface);border:1px solid var(--rule);border-radius:var(--panel-radius);
}
.category-proof-item .k{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:var(--tint);color:var(--accent-text);font-weight:700;}
.category-proof-item strong{display:block;color:var(--ink);font-size:14.5px;}
.category-proof-item span:last-child{display:block;color:var(--muted);font-size:12.5px;line-height:1.45;}
.category-status{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;}
.category-status span{padding:5px 10px;border:1px solid var(--rule);border-radius:999px;background:var(--surface);font-size:12px;color:var(--body);}

.audience-grid,.compare-grid,.capability-grid{display:grid;gap:20px;}
.audience-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:28px;}
.compare-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:28px;}
.capability-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
.audience-card,.compare-card,.capability-card{
  padding:var(--panel-pad);background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--panel-radius);box-shadow:var(--panel-shadow);
}
.audience-card h3,.compare-card h3,.capability-card h3{font-size:var(--text-h3);}
.audience-card p,.compare-card p,.capability-card p{margin-top:8px;}
.compare-card.is-after{border-color:var(--accent);background:var(--tint);}
.capability-card .eyebrow{margin-bottom:8px;}
.capability-card ul{margin-top:12px;display:grid;gap:7px;}
.capability-card li{position:relative;padding-left:18px;}
.capability-card li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;border-radius:50%;background:var(--accent);}

@media (max-width:900px){
  .category-hero .hero-inner{grid-template-columns:1fr;gap:32px;}
  .category-proof{max-width:680px;}
  .audience-grid{grid-template-columns:1fr;}
}
@media (max-width:768px){
  .category-hero{padding:42px 0;}
  .category-hero h1{max-width:none;}
  .compare-grid,.capability-grid{grid-template-columns:1fr;}
}

/* ==================================================================
   ALTERNATING CONTENT CARDS  ·  approved by Seung 2026-08-11
   ------------------------------------------------------------------
   The page surface is white — --content-bg, set by Seung on
   2026-08-11 in place of the warm off-white --bg this block first
   used. Every SECOND Content/Body box — the 2nd, 4th, 6th, 8th, 10th
   — is a --surface card carrying the shared panel border, radius and
   shadow. The odd boxes sit straight on the white page.

   ON A WHITE PAGE THE EDGE DOES ALL THE WORK. The card and the page
   are the same colour, so the 1px --rule border and the --panel-shadow
   are the only things marking a box. Never soften or remove them here
   without replacing them with something that draws the boundary, and
   never paint the odd boxes a second, weaker card style — the
   alternation is card / no card, and blurring it removes the contrast
   the boxes are read by. To make the boxes stand out more strongly,
   change ONE token — set body.page-cards back to var(--bg) — rather
   than adding decoration to the cards.

   No new colour, radius or shadow is introduced. --content-bg,
   --surface, --rule, --panel-radius and --panel-shadow are the
   existing approved tokens, used exactly as .card and .step already
   use them.

   RELATION TO THE 2026-08-09 CONTENT BACKGROUND POLICY
   The white page restores that policy exactly: the Content surface is
   white, and no grey, tinted, gradient or alternating background is
   used for decoration. Nothing is deleted; the .page-home rules above
   stay in force and this block only overrides what those sections
   paint. What this block adds is that the boundary between two boxes
   is drawn by an edge rather than by empty space alone.

   SPACING
   --section-pad stays at the 36px Seung approved earlier today and
   still governs every page that is not a card page. Here the edge
   does the separating work, so the outside gap shrinks to --card-gap
   and the space it gave up moves inside the box as --card-pad, where
   it keeps text off the edge. --card-pad is applied to EVERY box,
   carded or not, so the text of an odd box lines up exactly with the
   text of the card above and below it.

   SCOPE
   `.page-cards` is on every page of the site: the home page, the two
   built category pages and the four category placeholders. This
   supersedes the 2026-08-09 note that /pages/benefits/ and
   /pages/industries/ would keep their band treatment until they were
   reworked — Seung extended the treatment to every category page on
   2026-08-11. Nothing is deleted: the `band` class stays on those
   sections and every `.band` rule stays defined above, so the earlier
   treatment is one override away if it is ever approved again.
   ================================================================== */
:root{
  --card-gap:12px;    /* per side — the space between two boxes is twice this */
  --card-pad:28px;    /* inside every Content/Body box, all four sides */
  --card-gap-mobile:8px;
  --card-pad-mobile:20px;
}

body.page-cards{background:var(--content-bg);}   /* white — Seung, 2026-08-11 */

/* Sections stay full-width and unpainted; the box is the Content/Body
   element inside, so the approved 75% / 1600px desktop and 92% mobile
   widths still govern every box, carded or not. */
.page-cards .section,
.page-cards .section.band{background:transparent;padding:var(--card-gap) 0;}
.page-cards .section > .content{padding:var(--card-pad);}

/* WHICH BOXES ARE CARDED — positional, on purpose.
   Counting rule, confirmed by Seung 2026-08-11: the Hero is not a
   Content box. Where a page has one, the box after it is number 1.
   Where a page has none — /pages/benefits/ and /pages/industries/
   open with a page-head section — the first section is number 1.

   `:nth-child(even of .section, .closing)` states exactly that. The
   `of` list filters the siblings FIRST and only then counts, so the
   Hero (`.hero`, never `.section`) and the breadcrumb `<nav>` are not
   in the count on any page, and one rule serves pages with a Hero and
   pages without. No per-section class has to be kept in sync: insert,
   remove or reorder a section and the alternation re-forms by itself.

   `:nth-child(... of S)` needs Chrome/Edge 111+, Firefox 113+ or
   Safari 9+. On anything older the selector is simply dropped, so no
   box is carded and every page still reads correctly on the white
   ground — the degradation is the plain page, never a broken one. */
.page-cards main > :nth-child(even of .section, .closing) > .content{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
}

/* FRA-C-009 has no .content wrapper — its children sit directly in
   the section — so the box is the section itself, given the approved
   Content/Body width by hand rather than by adding markup to it. */
.page-cards .closing,
.page-cards .closing.band{
  width:var(--content-w);max-width:var(--content-max);
  margin:var(--card-gap) auto;
  background:transparent;border:0;box-shadow:none;
  padding:var(--card-pad);
}
.page-cards main > .closing:nth-child(even of .section, .closing){
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
}

/* The hero is the full-width Main Box and is never a box in this
   count. No rule is needed and none may be added: the Hero carries
   `.hero`, not `.section`, so the rules above cannot reach it.
   DO NOT add `.page-cards .hero{background-color:...}` here. It would
   have the same specificity as `.hero.hero-film-on` and, being later
   in the file, would win — wiping out the solid --hero-dark ground
   that keeps the white Hero copy readable when the scene image fails
   to load. That fallback is deliberate; see the FRA-C-001 block. */

@media (max-width:768px){
  .page-cards .section,
  .page-cards .section.band{padding:var(--card-gap-mobile) 0;}
  .page-cards .section > .content{padding:var(--card-pad-mobile);}
  .page-cards .closing,
  .page-cards .closing.band{
    width:var(--content-w-mobile);margin:var(--card-gap-mobile) auto;
    padding:var(--card-pad-mobile);
  }
}

/* ==================================================================
   WIREFRAME IMPORT — Claude Design, "Front Agent Home Wireframes"
   project 3dc5db77-cd5d-4d04-a933-d0a059b0a103,
   file "Front Agent Home Wireframes.dc.html". Added 2026-08-12 on
   Seung's instruction.

   ADDITIVE ONLY. Nothing above this line is changed, removed or
   overridden. Every colour, radius, shadow, spacing and type value
   below is an existing token from the :root blocks — no new token is
   introduced, and no runtime dependency is added.

   Three components, one per place a wireframe was taken to:

     .grid-4         wireframe 1a → the four-across card row for
                     "Four Things It Does for You" (FRA-C-027, home).
                     This is the ONLY part of 1a taken; the rest of
                     that wireframe restates sections the home page
                     already carries and was left alone.

     .picker         wireframe 1d → the industry selector
                     (FRA-C-031, Industries). CSS-only: radio inputs
                     drive the panels through sibling selectors, so
                     the section is keyboard-operable, works with
                     JavaScript disabled, and adds no script.
   ================================================================== */

/* ---- 1a · four-across cards ----
   Follows .grid-3 / .grid-2 exactly, including their step-down:
   4 → 2 at 1024px, 2 → 1 at the approved 768px breakpoint. Declared
   after the responsive block above, so these widths govern. */
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr));}
@media (max-width:1024px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:768px){ .grid-4{grid-template-columns:1fr;} }

/* A breadcrumb had only ever been followed by an .answer-block, which
   carries its own top padding. On How It Works it is followed by a
   .section-head, whose top margin is 0, so the two lines touched. */
.breadcrumb + .section-head{margin-top:20px;}

/* ---- 1d · industry selector ----
   Structure the sibling selectors depend on, in this order inside
   .picker:  six .picker-input radios → .picker-tabs → .picker-panels. */
.picker{max-width:var(--inner-max);margin:0 auto;padding:0 24px;}
.picker-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}
.picker-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin:0;padding:0;list-style:none;}
.picker-tab{
  display:flex;flex-direction:column;align-items:center;gap:9px;height:100%;
  background:var(--surface);border:1px solid var(--rule);border-radius:var(--panel-radius);
  padding:14px 9px;font-size:13.5px;line-height:1.35;text-align:center;color:var(--body);cursor:pointer;
  transition:border-color .15s ease, transform .15s ease;
}
.picker-tab:hover{border-color:var(--accent);transform:translateY(-2px);}
.picker-tab .ind-badge{margin:0;}
.picker-panel{display:none;margin-top:22px;}

/* Selected state and panel switching. Six selectors each, because CSS
   cannot key a rule to "the input whose id matches this label". */
#pk-1:checked ~ .picker-tabs .picker-tab[for="pk-1"],
#pk-2:checked ~ .picker-tabs .picker-tab[for="pk-2"],
#pk-3:checked ~ .picker-tabs .picker-tab[for="pk-3"],
#pk-4:checked ~ .picker-tabs .picker-tab[for="pk-4"],
#pk-5:checked ~ .picker-tabs .picker-tab[for="pk-5"],
#pk-6:checked ~ .picker-tabs .picker-tab[for="pk-6"],
#pk-7:checked ~ .picker-tabs .picker-tab[for="pk-7"],
#pk-8:checked ~ .picker-tabs .picker-tab[for="pk-8"]{
  border:2px solid var(--accent);padding:13px 8px;background:var(--tint);color:var(--ink);font-weight:600;
}
#pk-1:checked ~ .picker-panels .picker-panel[data-pk="1"],
#pk-2:checked ~ .picker-panels .picker-panel[data-pk="2"],
#pk-3:checked ~ .picker-panels .picker-panel[data-pk="3"],
#pk-4:checked ~ .picker-panels .picker-panel[data-pk="4"],
#pk-5:checked ~ .picker-panels .picker-panel[data-pk="5"],
#pk-6:checked ~ .picker-panels .picker-panel[data-pk="6"],
#pk-7:checked ~ .picker-panels .picker-panel[data-pk="7"],
#pk-8:checked ~ .picker-panels .picker-panel[data-pk="8"]{display:block;}
/* Keyboard focus must be visible on the label, since the radio itself
   is off-screen. */
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-1"],
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-2"],
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-3"],
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-4"],
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-5"],
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-6"],
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-7"],
.picker-input:focus-visible ~ .picker-tabs .picker-tab[for="pk-8"]{outline:2px solid var(--accent);outline-offset:2px;}

.picker-panel-head{margin-bottom:18px;}
.picker-panel-head .eyebrow{color:var(--accent-text);}
.picker-panel-head h3{margin-top:8px;font-size:var(--text-h2-answer);}
.picker-panel-head p{margin-top:10px;font-size:15.5px;max-width:var(--measure);}
/* Released inside .content, the same way .content > .grid is released above,
   so the approved 75%/1600px Content/Body width governs and the 1200px
   default cap does not re-appear inside this box. */
.content > .picker{max-width:none;padding:0;}
.picker-panel .grid{max-width:none;padding:0;}

@media (max-width:1024px){
  .picker-tabs{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:768px){
  .picker{padding:0;}
  .picker-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ==================================================================
   WHICH BOXES ARE CARDED — an explicit register, by Section ID.
   Instruction from Seung, 2026-08-12:

     "Keep the original arrangement. When you have a new box, it does
      not change the numbers of other boxes. Just add new box number
      on new boxes."

   This SUPERSEDES the positional rule at
   `.page-cards main > :nth-child(even of .section, .closing)` above.
   That rule re-counted every box on the page whenever one was
   inserted, so adding a single section silently flipped the card
   treatment of every section after it. Under this register a Section
   ID keeps the treatment it was approved with for as long as it
   exists, and a new section only adds its own ID to the list.

   The rule above is NOT deleted — it stays in place, documented, and
   is one deletion of this block away from governing again. What
   follows switches it off and re-applies exactly the same four
   declarations, from exactly the same tokens, to a named list. No new
   colour, radius, shadow or spacing value is introduced, no box gains
   or loses padding, and no markup had to change: every Content/Body
   box already carries its permanent `data-section-id`.

   THE ONE RULE TO FOLLOW WHEN ADDING A SECTION: add the new Section
   ID to the list below only if the new box is meant to be a card.
   Never renumber, reorder, or remove an ID that is already there —
   that is what changes an approved page nobody asked to change.

   Current register, unchanged from the approved 2026-08-11 mapping
   except for the three boxes added on 2026-08-12:
     Home        FRA-C-027 (new), FRA-C-010, FRA-C-004, FRA-C-006,
                 FRA-C-008, FRA-C-009
     Benefits    FRA-C-013
     Industries  FRA-C-016            — FRA-C-032 (new) is not a card
     How It Works FRA-C-028
     Features · Security · Pricing — one box each, box 1, not a card
   ================================================================== */

/* 1 · Switch the positional rule off. Same selectors, so the same
      specificity; later in the file, so these win. */
.page-cards main > :nth-child(even of .section, .closing) > .content{
  background:transparent;border:0;border-radius:0;box-shadow:none;
}
.page-cards main > .closing:nth-child(even of .section, .closing){
  background:transparent;border:0;border-radius:0;box-shadow:none;
}

/* 2 · Re-apply it to the named boxes. */
.page-cards main > .section[data-section-id="FRA-C-004"] > .content,
.page-cards main > .section[data-section-id="FRA-C-006"] > .content,
.page-cards main > .section[data-section-id="FRA-C-008"] > .content,
.page-cards main > .section[data-section-id="FRA-C-010"] > .content,
.page-cards main > .section[data-section-id="FRA-C-016"] > .content,
.page-cards main > .section[data-section-id="FRA-C-027"] > .content,
.page-cards main > .section[data-section-id="FRA-C-028"] > .content{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
}

/* FRA-C-013 is the ONE Section ID that appears on two pages: it is the
   ten benefits, published both on /pages/benefits/ and on the home
   page. The approved mapping cards it on Benefits and leaves it plain
   on the home page, so this rule alone is scoped by page. Every other
   ID above is unique to its page and needs no scope. */
body.page-cards:not(.page-home) main > .section[data-section-id="FRA-C-013"] > .content{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
}

/* ==================================================================
   CLIENT ACCESS PROTOTYPE — Sign in, sign up and C-001 pages
   ================================================================== */
.auth-hero{padding:64px 0 42px;background:var(--band);border-bottom:1px solid var(--rule);}
.auth-hero .content{max-width:var(--inner-max);padding:0 24px;}
.auth-hero h1{max-width:20ch;font-size:clamp(34px,4.4vw,56px);}
.auth-hero .content > p:last-child{max-width:64ch;margin-top:16px;font-size:17px;}
.auth-section{padding-top:44px;}
.auth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;max-width:var(--inner-max);}
.auth-panel{position:relative;padding:32px;background:var(--surface);border:1px solid var(--panel-border);border-radius:var(--panel-radius);box-shadow:var(--panel-shadow);}
.auth-panel h2{font-size:clamp(27px,3vw,36px);}
.auth-intro{min-height:72px;margin-top:12px;font-size:14.5px;line-height:1.65;}
.auth-form{display:flex;flex-direction:column;gap:9px;margin-top:24px;}
.auth-form label{font-size:12.5px;font-weight:700;color:var(--ink);}
.auth-form input:not([type="checkbox"]),.auth-form select{
  width:100%;min-height:46px;padding:10px 12px;font:inherit;font-size:14px;color:var(--ink);
  background:var(--surface);border:1px solid var(--panel-border);border-radius:8px;
}
.auth-form input:focus,.auth-form select:focus{border-color:var(--accent);outline:2px solid var(--auth-focus-ring);outline-offset:1px;}
.auth-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.auth-field-grid > div{display:flex;flex-direction:column;gap:9px;}
.auth-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 8px;}
.check-label{display:flex;align-items:flex-start;gap:8px;font-weight:500!important;color:var(--body)!important;}
.check-label input{margin-top:2px;accent-color:var(--accent-text);}
.check-label.agreement{margin:7px 0;line-height:1.5;}
.text-button{padding:0;border:0;background:none;color:var(--accent-text);font:inherit;font-size:12.5px;cursor:pointer;}
.auth-submit{justify-content:center;width:100%;margin-top:4px;}
.prototype-status{min-height:42px;padding-top:7px;font-size:12px;line-height:1.5;color:var(--accent-text);}
.sample-link{display:inline-flex;margin-top:12px;font-size:13px;font-weight:650;}
.prototype-notice{width:var(--content-w);max-width:var(--inner-max);margin:22px auto 0;padding:14px 18px;border:1px solid var(--panel-border);border-radius:var(--panel-radius);background:var(--band);font-size:12.5px;text-align:center;color:var(--muted);}

/* Client dashboard. */
.client-dashboard-page{background:var(--content-bg);}
.client-topbar{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;min-height:72px;padding:0 30px;background:var(--surface);border-bottom:1px solid var(--rule);}
.client-identity{display:flex;flex-direction:column;align-items:center;font-size:11px;color:var(--muted);}
.client-identity strong{margin-top:2px;font-size:14px;color:var(--ink);}
.client-top-actions{display:flex;justify-content:flex-end;align-items:center;gap:18px;font-size:13px;}
.dashboard-shell{display:grid;grid-template-columns:240px minmax(0,1fr);min-height:calc(100vh - 72px);}
.dashboard-sidebar{padding:30px 22px;background:var(--footer);color:var(--footer-text);}
.dashboard-client-code{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--footer-tag-text);}
.dashboard-sidebar nav{display:flex;flex-direction:column;gap:6px;margin-top:24px;}
.dashboard-sidebar nav a{padding:10px 12px;border:1px solid transparent;border-radius:8px;color:var(--footer-tag-text);font-size:13px;}
.dashboard-sidebar nav a:hover,.dashboard-sidebar nav a[aria-current="page"]{background:var(--client-sidebar-hover-bg);border-color:var(--client-sidebar-hover-border);color:var(--footer-text);text-decoration:none;}
.dashboard-prototype{margin-top:36px;padding-top:18px;border-top:1px solid var(--client-sidebar-rule);font-size:11.5px;line-height:1.6;color:var(--footer-tag-text);}
.dashboard-main{width:100%;max-width:1440px;margin:0 auto;padding:38px 42px 64px;}
.dashboard-welcome{display:flex;align-items:flex-start;justify-content:space-between;gap:30px;padding:28px 30px;border:1px solid var(--panel-border);border-radius:var(--panel-radius);background:var(--surface);box-shadow:var(--panel-shadow);}
.dashboard-welcome h1{font-size:clamp(28px,3vw,42px);}
.dashboard-welcome p:last-child{max-width:70ch;margin-top:10px;font-size:14.5px;}
.dashboard-status{flex:none;padding:7px 12px;border:1px solid var(--panel-border);border-radius:999px;background:var(--band);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);}
.dashboard-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:18px;}
.dashboard-stat-grid article{padding:18px;border:1px solid var(--panel-border);border-radius:var(--panel-radius);background:var(--surface);}
.dashboard-stat-grid span,.dashboard-stat-grid small{display:block;font-size:10.5px;color:var(--muted);}
.dashboard-stat-grid span{font-weight:700;letter-spacing:.06em;text-transform:uppercase;}
.dashboard-stat-grid strong{display:block;margin:8px 0 4px;font-size:20px;color:var(--ink);}
.dashboard-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px;}
.dashboard-card{position:relative;padding:25px;border:1px solid var(--panel-border);border-radius:var(--panel-radius);background:var(--surface);box-shadow:var(--panel-shadow);}
.dashboard-card-wide{grid-column:1/-1;}
.dashboard-card header{padding-bottom:16px;border-bottom:1px solid var(--rule);}
.dashboard-card header .eyebrow{margin-bottom:7px;font-size:10.5px;}
.dashboard-card h2{font-size:22px;}
.dashboard-list{margin-top:6px;}
.dashboard-list div{display:grid;grid-template-columns:145px 1fr;gap:18px;padding:12px 0;border-bottom:1px solid var(--rule);}
.dashboard-list dt{font-size:12px;color:var(--muted);}
.dashboard-list dd{font-size:13.5px;font-weight:600;color:var(--ink);}
.dashboard-note{margin-top:14px;font-size:11.5px;line-height:1.55;color:var(--muted);}
.dashboard-card .arrow-link{display:inline-flex;margin-top:16px;font-size:13px;}
.dashboard-check-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:18px;}
.dashboard-check-grid div{padding:16px;border:1px solid var(--panel-border);border-radius:var(--radius);}
.dashboard-check-grid strong,.dashboard-check-grid span,.dashboard-check-grid em{display:block;}
.dashboard-check-grid strong{font-size:14px;color:var(--ink);}
.dashboard-check-grid span{margin-top:5px;font-size:12.5px;line-height:1.5;color:var(--body);}
.dashboard-check-grid em{margin-top:11px;font-size:10.5px;font-style:normal;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-text);}
.dashboard-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:18px;counter-reset:dashboard-step;}
.dashboard-steps li{padding:16px;border:1px solid var(--panel-border);border-radius:var(--radius);}
.dashboard-steps li::before{counter-increment:dashboard-step;content:counter(dashboard-step,decimal-leading-zero);display:block;margin-bottom:9px;font-size:10px;font-weight:700;color:var(--accent-text);}
.dashboard-steps strong,.dashboard-steps span{display:block;}
.dashboard-steps strong{font-size:14px;color:var(--ink);}
.dashboard-steps span{margin-top:6px;font-size:12.5px;line-height:1.5;}
.dashboard-guideline{margin-top:16px;padding:16px;border:1px solid var(--panel-border);border-radius:var(--radius);background:var(--band);}
.dashboard-guideline strong{font-size:13px;color:var(--ink);}
.dashboard-guideline p{margin-top:5px;font-size:12.5px;}
.dashboard-website-card{display:flex;align-items:center;justify-content:space-between;gap:24px;}
.dashboard-website-card p:last-child{max-width:70ch;margin-top:8px;font-size:13.5px;}
.dashboard-website-card .btn{flex:none;}

/* Gourmet Kitchen sample one-page client website. */
.client-site-page{background:var(--client-site-bg);color:var(--client-site-body);}
.client-preview-bar{display:flex;justify-content:space-between;gap:20px;padding:8px 5%;background:var(--client-site-ink);color:var(--client-site-preview-text);font-size:11.5px;}
.client-preview-bar a{color:var(--client-site-preview-text);text-decoration:underline;}
.restaurant-header{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:76px;padding:0 6%;background:var(--client-site-bg);border-bottom:1px solid var(--client-site-rule);}
.restaurant-brand{font-family:Georgia,serif;font-size:23px;font-weight:700;color:var(--client-site-ink);}
.restaurant-header nav{display:flex;gap:28px;}
.restaurant-header nav a{font-size:13.5px;color:var(--client-site-body);}
.restaurant-order-button,.restaurant-primary,.restaurant-secondary{display:inline-flex;align-items:center;justify-content:center;border-radius:7px;padding:11px 18px;font-size:13px;font-weight:700;}
.restaurant-order-button,.restaurant-primary{background:var(--client-site-primary);color:var(--client-site-surface);}
.restaurant-order-button:hover,.restaurant-primary:hover{color:var(--client-site-surface);text-decoration:none;}
.restaurant-secondary{margin-left:8px;border:1px solid var(--client-site-strong-rule);color:var(--client-site-ink);}
.restaurant-hero{display:grid;grid-template-columns:minmax(0,7fr) minmax(320px,5fr);min-height:570px;background:var(--client-site-cream);}
.restaurant-hero-copy{display:flex;flex-direction:column;justify-content:center;padding:70px max(6vw,40px);}
.restaurant-kicker,.restaurant-section-head > p{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--client-site-accent);}
.restaurant-hero h1{max-width:13ch;margin-top:13px;font-family:Georgia,serif;font-size:clamp(42px,5.5vw,74px);font-weight:600;color:var(--client-site-ink);}
.restaurant-hero-copy > p:not(.restaurant-kicker){max-width:55ch;margin-top:18px;font-size:17px;line-height:1.7;}
.restaurant-hero-copy > div{margin-top:30px;}
.restaurant-hero-art{display:flex;align-items:center;justify-content:center;margin:42px 6vw 42px 0;border:1px solid var(--client-site-art-rule);border-radius:48% 48% 12px 12px;background:radial-gradient(circle at 50% 42%,var(--client-site-art-light) 0 20%,var(--client-site-accent) 21% 38%,var(--client-site-primary) 39% 58%,var(--client-site-art-base) 59%);box-shadow:var(--client-site-shadow);}
.restaurant-hero-art span{display:flex;align-items:center;justify-content:center;width:94px;height:94px;border-radius:50%;background:var(--client-site-bg);border:1px solid var(--client-site-art-rule);font-family:Georgia,serif;font-size:28px;color:var(--client-site-ink);}
.restaurant-section{width:88%;max-width:1200px;margin:0 auto;padding:92px 0;}
.restaurant-section-head{text-align:center;}
.restaurant-section-head h2{margin-top:10px;font-family:Georgia,serif;font-size:clamp(32px,4vw,48px);font-weight:600;color:var(--client-site-ink);}
.restaurant-section-head span{display:block;margin-top:12px;font-size:13px;}
.restaurant-menu-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:38px;}
.restaurant-menu-grid article{padding:28px;border:1px solid var(--client-site-rule);border-radius:12px;background:var(--client-site-surface);}
.restaurant-menu-number{font-size:11px;font-weight:700;color:var(--client-site-accent);}
.restaurant-menu-grid h3{margin-top:24px;font-family:Georgia,serif;font-size:21px;color:var(--client-site-ink);}
.restaurant-menu-grid p{margin-top:10px;font-size:14px;line-height:1.65;}
.restaurant-menu-grid small{display:block;margin-top:22px;padding-top:14px;border-top:1px solid var(--client-site-rule);color:var(--client-site-muted);font-size:11px;}
.restaurant-story{display:grid;grid-template-columns:5fr 7fr;gap:70px;padding:78px 8%;background:var(--client-site-primary);color:var(--client-site-story-text);}
.restaurant-story h2{max-width:14ch;margin-top:12px;font-family:Georgia,serif;font-size:clamp(32px,4vw,48px);font-weight:600;color:var(--client-site-surface);}
.restaurant-story > p{align-self:center;max-width:60ch;font-size:16px;line-height:1.8;}
.restaurant-visit{display:grid;grid-template-columns:5fr 7fr;gap:70px;width:88%;max-width:1200px;margin:0 auto;padding:90px 0;}
.restaurant-visit h2{margin-top:10px;font-family:Georgia,serif;font-size:40px;color:var(--client-site-ink);}
.restaurant-visit div > p:last-child{margin-top:14px;line-height:1.7;}
.restaurant-visit dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid var(--client-site-rule);border-radius:12px;overflow:hidden;}
.restaurant-visit dl div{padding:18px;}
.restaurant-visit dl div:nth-child(odd){border-right:1px solid var(--client-site-rule);}
.restaurant-visit dl div:nth-child(n+3){border-top:1px solid var(--client-site-rule);}
.restaurant-visit dt{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--client-site-muted);}
.restaurant-visit dd{margin-top:7px;font-size:14px;font-weight:600;color:var(--client-site-ink);}
.restaurant-footer{padding:44px 6%;background:var(--client-site-ink);color:var(--client-site-footer-text);text-align:center;}
.restaurant-footer strong{font-family:Georgia,serif;font-size:21px;}
.restaurant-footer p{margin-top:9px;font-size:13px;}
.restaurant-footer span{display:block;margin-top:18px;font-size:10.5px;color:var(--client-site-footer-muted);}

@media (max-width:1024px){
  .dashboard-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .dashboard-steps{grid-template-columns:repeat(2,minmax(0,1fr));}
  .restaurant-hero{grid-template-columns:1fr 1fr;}
}
@media (max-width:768px){
  .auth-grid{grid-template-columns:1fr;}
  .auth-intro{min-height:0;}
  .auth-field-grid{grid-template-columns:1fr;}
  .client-topbar{grid-template-columns:1fr auto;padding:0 4%;}
  .client-identity{display:none;}
  .client-top-actions > a:first-child{display:none;}
  .dashboard-shell{grid-template-columns:1fr;}
  .dashboard-sidebar{padding:14px 4%;}
  .dashboard-sidebar nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:12px;}
  .dashboard-prototype{display:none;}
  .dashboard-main{padding:26px 4% 48px;}
  .dashboard-welcome{flex-direction:column;}
  .dashboard-grid{grid-template-columns:1fr;}
  .dashboard-card-wide{grid-column:auto;}
  .dashboard-check-grid,.dashboard-steps{grid-template-columns:1fr;}
  .dashboard-website-card{align-items:flex-start;flex-direction:column;}
  .client-preview-bar{align-items:flex-start;flex-direction:column;gap:4px;}
  .restaurant-header{flex-wrap:wrap;padding:16px 5%;}
  .restaurant-header nav{order:3;width:100%;justify-content:space-between;gap:12px;padding-top:13px;border-top:1px solid var(--client-site-rule);}
  .restaurant-hero{grid-template-columns:1fr;min-height:0;}
  .restaurant-hero-copy{padding:56px 6%;}
  .restaurant-hero-art{min-height:330px;margin:0 6% 48px;}
  .restaurant-menu-grid{grid-template-columns:1fr;}
  .restaurant-story,.restaurant-visit{grid-template-columns:1fr;gap:28px;}
  .restaurant-story{padding:60px 6%;}
  .restaurant-visit{padding:64px 0;}
}
@media (max-width:480px){
  .auth-panel{padding:24px 20px;}
  .auth-row{align-items:flex-start;flex-direction:column;}
  .dashboard-stat-grid{grid-template-columns:1fr;}
  .dashboard-list div{grid-template-columns:1fr;gap:4px;}
  .restaurant-visit dl{grid-template-columns:1fr;}
  .restaurant-visit dl div:nth-child(odd){border-right:0;}
  .restaurant-visit dl div:nth-child(n+2){border-top:1px solid var(--client-site-rule);}
}

/* FRA-C-009 and FRA-C-031 have no .content wrapper, so the box is the
   section itself — the same exception the positional rule made. */
.page-cards main > .closing[data-section-id="FRA-C-009"]{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--panel-radius);
  box-shadow:var(--panel-shadow);
}