/* ==========================================================================
   ShowPoppy landing page
   --------------------------------------------------------------------------
   Loads after showpoppy-tokens.css and before showpoppy-prefs.css.

   Color, shape, elevation and the spacing scale all come from the token
   file. This stylesheet adds only what a marketing page needs on top: a
   longer section rhythm than the product pages run on, an editorial type
   scale, and the components drawn in the approved composition.

   Two families, both self hosted and variable:
     Plus Jakarta Sans  marketing headlines, nothing else (no serifs — Chip)
     Inter            navigation, body, product UI, pricing, controls
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   --------------------------------------------------------------------------
   Self hosted rather than fetched from Google. That removes two blocking
   third party origins and nine static faces, and replaces them with two
   local variable files that carry the whole 400 to 700 range each.

   Both are licensed under the SIL Open Font License 1.1, which permits this
   redistribution and requires the notices to travel with the files:
     fonts/inter-LICENSE.txt              Copyright (c) 2016 The Inter Project Authors
   -------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter var";
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url("fonts/inter-latin-var.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
/* --------------------------------------------------------------------------
   2. Page scale
   --------------------------------------------------------------------------
   Set on <body>, not :root. The token file is the only place allowed to
   declare :root, and the landing page runs a wider rhythm than the doc and
   intake pages that share those tokens.
   -------------------------------------------------------------------------- */
body{
  /* Families. Inter first, then the token stack as the fallback chain. */
  --font-sans:"Inter var",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  /* Chip: no serifs, ever. The "serif" display role is Plus Jakarta Sans.
     Kept as a variable so CJ's .h-serif rules and tuned tracking still apply. */
  --font-serif:var(--font-display);

  /* Measure. ONE container width for the whole page. Every section carries
     the same --maxw and the same --gutter, so every left edge lands on the
     same vertical line from the header to the footer. Narrow text blocks are
     centered INSIDE that container rather than given their own max-width on
     the container itself: an intro at 800px and a section at 1240px put their
     left edges 220px apart, and the eye reads that drift as amateur even when
     it cannot name it. */
  /* THE GRID (brief §13). Three widths, each with a job, so headline,
     product and reading copy stop sharing one arbitrary container:
       --maxw       the page shell
       --showcase   product demonstrations, which need room to be read
       --measure-wide  section intros
       --measure    body copy, kept at a readable line length
     1400 was too wide for a text container and too narrow to make a 1440
     canvas feel occupied, which is why product sat small in empty space. */
  --maxw:1280px;
  --showcase:1180px;      /* map, tour, request preview, itinerary        */
  --measure-wide:760px;   /* centered section intros, inside the container */
  --measure:640px;        /* body copy column                             */

  /* Section rhythm. ONE value, with a single tight variant for the closing
     run. The page previously ran five different paddings (104, 115, 86, 78,
     49) from three competing variables, which reads as noise rather than
     rhythm: nothing repeats, so nothing feels deliberate. */
  /* Retuned 2026-08-30 (brief §11: cut vertical travel 10-20% by composition,
     not global compression). 154px of padding above AND below every section
     was making the reader work to get between arguments; the argument itself
     is what should separate them. Previous: 86/9vw/154 and 67/6.7vw/115. */
  /* VERTICAL RHYTHM (brief §14). Three deliberate steps rather than one
     value applied everywhere: a transition does not need a major section's
     air, and a major product demonstration does need more than a FAQ. */
  --sec-y:clamp(64px,6.6vw,104px);       /* normal section              */
  --sec-y-major:clamp(76px,8vw,132px);   /* major product demonstration */
  --sec-y-tight:clamp(46px,4.4vw,72px);  /* FAQ, final CTA, footer      */
  --hero-top:clamp(45px,4.3vw,70px);
  --hero-bottom:clamp(28px,2.8vw,48px);
  --head-gap:clamp(34px,3.4vw,52px);     /* section title to content  */
  --gutter:clamp(24px,3.4vw,48px);
  --col-gap:clamp(24px,3vw,48px);

  /* Type scale. The hero was 66px against a 47px section title, a ratio of
     1.4 that made every section compete with the headline. Opening that gap
     puts one voice at the top of the page and a clearly subordinate one on
     each section below it.

     Display sizes also carry their own leading and tracking below. Timid
     leading is the single loudest tell of a template: at 1.06 a 76px headline
     reads as three separate lines, where 0.96 reads as one sculpted block. */
  /* The 2026-09 headline is eight words longer than the one this scale was
     set for ("A three-hour buyer tour. Booked in three minutes."), which took
     it to four lines on a desktop and pushed the primary CTA under the fold.
     The ceiling comes down rather than the copy being trimmed: the promise is
     the point, and at 56px it sets in three lines with the CTA still in the
     first viewport. The floor is untouched, so phones are unchanged. */
  --fs-hero:clamp(42px,4.2vw,56px);
  --fs-h2:clamp(28px,2.7vw,42px);
  --fs-h3:clamp(20px,1.6vw,25px);
  --lh-display:0.98;
  --ls-display:-.035em;
  --fs-price:clamp(46px,4.4vw,62px);
  --fs-card:clamp(20px,1.5vw,23px);
  --fs-lead:clamp(18px,1.5vw,21px);
  --fs-body:clamp(16px,1.35vw,19px);
  --fs-ui:16px;      /* navigation, buttons, product UI */
  --fs-sm:15px;
  --fs-eyebrow:13px;
  --fs-legal:14px;

  /* Shape */
  /* Aliases onto the shared scale. Nothing declares its own value. */
  --r-frame:var(--r-lg);
  --r-card:var(--r-lg);
  --r-input:var(--r-sm);
  --r-ctl:var(--r-sm);
}



/* --------------------------------------------------------------------------
   2b. Texture and depth
   --------------------------------------------------------------------------
   Large flat fills are what make a page read as a template. Real grain is one
   inline SVG turbulence tile, about 300 bytes, no request, no image asset. It
   sits at 3 to 4 percent so it is never visible as noise, only as the absence
   of flatness.
   -------------------------------------------------------------------------- */
:root{
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain{position:relative;isolation:isolate}
.grain::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--grain);
  opacity:.035;mix-blend-mode:multiply;
}
/* On a dark field multiply has nothing to darken, so the tile has to add
   light instead. */
.grain.on-navy::after{opacity:.10;mix-blend-mode:overlay}
@media (prefers-reduced-motion:no-preference){
  .grain::after{will-change:auto}
}
/* Every direct child of a grained surface has to clear the overlay. */
.grain > *{position:relative;z-index:1}

/* A hairline that states where the grid is. Editorial pages earn their
   structure by showing it. */
.rule{
  display:flex;align-items:center;gap:var(--sp-4);
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
}
.rule::before,.rule::after{
  content:"";flex:1;height:1px;background:var(--border-subtle);
}
/* The hero rule is left-anchored, so it only needs the trailing half. */
.rule--accent::before{display:none}
.rule--accent{justify-content:flex-start}
.rule--accent::after{max-width:120px;flex:0 0 120px}
.rule__n{
  font-variant-numeric:tabular-nums;
  color:var(--text-accent);
}
/* --text-accent is tuned for AA on light surfaces and lands at 3.29:1 on
   navy. The inverse band gets the lighter brand orange instead. */
.on-navy .rule{color:var(--text-inverse-soft)}
.on-navy .rule__n{color:#FF9166}
.on-navy .rule::before,.on-navy .rule::after{background:var(--border-inverse)}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html:focus-within{scroll-padding-top:104px}  /* clears the sticky header */

body{
  margin:0;
  background:var(--surface-primary);
  color:var(--text-primary);
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;   /* belt and braces; no child may exceed the viewport */
}

img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}

h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.021em;text-wrap:balance}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

/* Headlines are the only place the serif appears. */
.h-serif{font-family:var(--font-serif);font-weight:800;letter-spacing:-.026em}

/* One focus ring for the whole page. */
:where(a,button,input,summary,[tabindex]):focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
  border-radius:var(--r-ctl);
}
.on-navy :where(a,button):focus-visible{box-shadow:var(--focus-ring-inverse)}

::selection{background:#FBD9CC;color:var(--navy)}

/* Skip link. Off screen until focused, then pinned top left. */
.skip{
  position:fixed;top:12px;left:12px;z-index:200;
  transform:translateY(-160%);
  padding:12px 18px;border-radius:var(--r-ctl);
  background:var(--navy);color:var(--text-inverse);
  font-size:var(--fs-ui);font-weight:600;
  box-shadow:var(--e-3);
  transition:transform .18s var(--ease);
}
.skip:focus{transform:translateY(0)}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --------------------------------------------------------------------------
   4. Layout primitives
   -------------------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--sec-y)}
.section--tint{background:var(--surface-secondary);border-block:1px solid #E7EDF3}
.section--white{background:var(--surface-primary)}

.sec-head{
  max-width:var(--measure-wide);margin-inline:auto;margin-bottom:var(--head-gap);
  text-align:center;
}
.sec-head .rule{margin-bottom:var(--sp-5)}

.eyebrow{
  display:block;
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-accent);
  margin-bottom:var(--sp-4);
}
.eyebrow--slate{color:var(--text-secondary)}

.sec-title{font-size:var(--fs-h2);line-height:1.14;letter-spacing:-.02em}
.sec-sub{
  margin:var(--sp-5) auto 0;max-width:58ch;
  font-size:var(--fs-lead);line-height:1.55;color:var(--text-secondary);
}


/* --------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:0 24px;
  border:1px solid transparent;border-radius:var(--r-ctl);
  font-size:var(--fs-ui);font-weight:600;letter-spacing:-.005em;
  cursor:pointer;white-space:nowrap;
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             color .18s var(--ease),box-shadow .18s var(--ease),
             transform .18s var(--ease);
}
.btn svg{flex:none}
.btn:active{transform:translateY(1px)}

.btn--primary{
  background-image:linear-gradient(180deg,var(--orange) 0%,var(--orange-foot) 100%);
  color:#fff;box-shadow:var(--e-cta);
}
.btn--primary:hover{
  background-image:linear-gradient(180deg,#EF5324 0%,#CF4315 100%);
  box-shadow:var(--e-cta-hi);
}

.btn--secondary{
  background:var(--surface-primary);color:var(--text-primary);
  border-color:var(--border-strong);box-shadow:var(--e-1);
}
.btn--secondary:hover{border-color:#B8C3D0;background:#FCFDFE}

.btn--outline{
  background:transparent;color:var(--text-accent);
  border-color:#F0BBA6;
}
.btn--outline:hover{background:var(--surface-accent);border-color:var(--orange)}

.btn--wide{width:100%}
.btn--lg{min-height:54px;padding:0 30px}

.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.45;cursor:not-allowed;box-shadow:none;transform:none;
}

/* Text button. Underline is always present so the affordance never depends
   on color alone. */
.linkish{
  display:inline-flex;align-items:center;gap:6px;min-height:44px;
  background:none;border:0;padding:4px 2px;cursor:pointer;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-accent);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:#F0BBA6;
}
.linkish:hover{text-decoration-color:currentColor}
.linkish[disabled]{color:var(--text-secondary);text-decoration-color:var(--border-strong);cursor:not-allowed}

/* Trademark mark. Raised and reduced rather than a full superscript, which
   the serif renders too small to read. */
.tm{font-size:.52em;vertical-align:.62em;font-weight:500;letter-spacing:0}

/* --------------------------------------------------------------------------
   6. Header
   -------------------------------------------------------------------------- */
/* The frosted bar is painted by a pseudo-element rather than by .hdr itself.
   backdrop-filter turns the element carrying it into a containing block for
   position:fixed descendants, which collapsed the mobile panel into the
   68px header box. A sibling pseudo-element blurs identically and leaves the
   panel anchored to the viewport where it belongs. */
.hdr{
  position:sticky;top:0;z-index:100;
  border-bottom:1px solid var(--border-soft);
}
.hdr::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hdr::before{background:#fff}
}

.hdr__in{
  display:flex;align-items:center;gap:var(--sp-8);
  height:68px;
}
/* ── THE POPPY BAR SITS IN THE HEADER ─────────────────────────────────────
   The OfficePoppy app-switcher used to float (position:fixed, top:10px,
   right:10px, z-index 2147483000). Floating, it covered the BURGER at
   390/430/768 and the primary "Create Your First Tour" CTA at 1024/1200/1263
   — the button the whole page exists to get tapped — and on an iPhone it sat
   under the clock and the battery, which the status-bar rule forbids.

   Reserving a strip for it fixed the overlap but not the height. So it is
   mounted INLINE instead, into #poppy-bar in the action cluster, immediately
   left of the burger: it inherits the header's own safe-area padding, aligns
   with the controls beside it, and there is no longer a floating element to
   dodge. poppybar.js supports this natively via data-inline="true".

   Sized to the burger so the two read as a pair rather than as a widget
   parked next to a button. */
#poppy-bar{display:inline-flex;align-items:center;flex:none}
/* A mount with no launcher in it must not spend a flex gap in the row. */
#poppy-bar:empty{display:none}
#poppy-bar .pbar__grid{
  width:44px;height:44px;
  /* The widget ships as a pill. Beside a rounded-square burger that reads as
     a stray control rather than a sibling, so it takes the burger's radius,
     border and fill exactly. */
  border-radius:var(--r-ctl);
  border-color:var(--border-strong);
  background:var(--surface-primary);
  box-shadow:none;
}
#poppy-bar .pbar__grid:hover{background:var(--surface-secondary);box-shadow:none}
/* On a narrow screen the panel cannot be right-anchored to the button and
   still fit: the button sits ~56px from the edge, so a 292px panel hangs off
   the left. Below 560px the panel is handed back to the HEADER as its
   containing block — .pbar goes static, .hdr is the nearest positioned
   ancestor — and pinned to the header's own width with top:100%. No magic
   offsets, and it tracks the header height if that ever changes. */
@media (max-width:560px){
  #poppy-bar .pbar{position:static}
  #poppy-bar .pbar__panel{
    top:100%;left:12px;right:12px;
    min-width:0;max-width:none;width:auto;
  }
}
@media (min-width:900px){.hdr__in{height:78px;gap:var(--sp-10)}}

.brand{display:inline-flex;align-items:center;flex:none;min-height:44px;border-radius:var(--r-xs)}
.brand img{width:auto;height:30px;max-width:none}
@media (min-width:900px){.brand img{height:34px}}

/* ── THE BAR IS LEFT-GROUPED ──────────────────────────────────────────────
   Chip, 2026-09-07: "Look at that space in the middle. There's more space in
   the middle than there is anywhere else. Just move the Today People Listings
   and whatever else over to the LEFT."

   One flex row: [brand] [nav] <<flexible gap>> [actions]. The nav sits
   immediately after the brand and carries NO auto margin — `margin-inline:auto`
   centred it and split the row into two dead gaps. The single flexible gap now
   comes from margin-left:auto on .hdr__act and from nowhere else.

   min-width:0 + overflow-x:auto: when the row is genuinely too tight the LINKS
   SCROLL rather than anything being clipped, covered or wrapped. The scrollbar
   is hidden — the bar is 44px of touch target, not a scroll region to look at
   — and every link stays reachable by drag, wheel and keyboard. */
.nav{display:none}
@media (min-width:900px){
  .nav{
    display:flex;align-items:center;gap:var(--sp-2);margin-inline:0;
    min-width:0;overflow-x:auto;overflow-y:hidden;
    scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
  }
  .nav::-webkit-scrollbar{display:none}
}
.nav a{
  display:inline-flex;align-items:center;min-height:44px;padding:0 16px;
  border-radius:var(--r-ctl);
  font-size:var(--fs-ui);font-weight:500;color:var(--text-secondary);
  /* Never shrink, never wrap: the links scroll as written, at full label and
     full 44px target. */
  flex:none;white-space:nowrap;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.nav a:hover{color:var(--text-primary);background:var(--surface-secondary)}

/* margin-left:auto AT EVERY WIDTH — the one flexible gap in the row. It used
   to be cancelled at 900 and up because the nav carried the auto margin
   instead; that is what opened the middle gap. flex:none so the action cluster
   is never the thing that gives. */
.hdr__act{display:flex;align-items:center;gap:var(--sp-3);margin-left:auto;flex:none}
@media (min-width:900px){.hdr__act{margin-left:auto}}
.hdr__signin{
  display:none;align-items:center;min-height:44px;padding:0 14px;
  border-radius:var(--r-ctl);
  font-size:var(--fs-ui);font-weight:500;color:var(--text-secondary);
}
.hdr__signin:hover{color:var(--text-primary);background:var(--surface-secondary)}
@media (min-width:560px){.hdr__signin{display:inline-flex}}
/* The CTA appears in the bar as soon as there is room for it beside the logo
   and the menu button. Below that it lives in the panel and in the hero,
   both of which are reachable without scrolling. */
.hdr__cta{display:none}
@media (min-width:560px){.hdr__cta{display:inline-flex;padding:0 16px;font-size:15px}}
@media (min-width:900px){.hdr__cta{padding:0 24px;font-size:var(--fs-ui)}}

/* Menu button, mobile only */
.burger{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;
  background:var(--surface-primary);border:1px solid var(--border-strong);
  border-radius:var(--r-ctl);cursor:pointer;color:var(--text-primary);
}
.burger:hover{background:var(--surface-secondary)}
@media (min-width:900px){.burger{display:none}}
.burger__x{display:none}
.burger[aria-expanded="true"] .burger__x{display:block}
.burger[aria-expanded="true"] .burger__bars{display:none}

/* Mobile panel */
.mnav{
  position:fixed;inset:68px 0 0;z-index:99;
  display:flex;flex-direction:column;
  padding:var(--sp-6) var(--gutter) var(--sp-10);
  background:var(--surface-primary);
  overflow-y:auto;overscroll-behavior:contain;
}
.mnav[hidden]{display:none}
.mnav a.mnav__link{
  display:flex;align-items:center;min-height:56px;
  padding:0 var(--sp-3);border-radius:var(--r-input);
  border-bottom:1px solid var(--border-soft);
  font-size:19px;font-weight:500;
}
.mnav a.mnav__link:hover{background:var(--surface-secondary)}
.mnav__foot{display:grid;gap:var(--sp-3);margin-top:var(--sp-8)}
@media (min-width:900px){.mnav{display:none}}

body.is-locked{overflow:hidden}


/* ==========================================================================
   6b. THE POPPY FAMILY HEADER  (locked brand spec, 2026-09-07)
   --------------------------------------------------------------------------
   One product family, six specialists. Everything below is ADDITIVE: every
   rule in section 6 above is still exactly as it was written, and the few
   values this section changes are restated here rather than edited in place,
   so the original intent — and the comment that explains it — survives.

   THE COLOR LAW. Only three things in this header may carry the product
   accent: the bird's wing, the first word of the wordmark, and the primary
   CTA. "Poppy", the descriptor, the navigation, Sign In and every rule and
   divider stay in the family ink. Nothing else gets colored, ever.

   ON THE ACCENT VALUE — read this before "fixing" it. The header runs
   #F15A2A, which is NOT --orange. That is deliberate.

   ShowPoppy's --orange was retuned from #F15A2A to #FF4F18 on 2026-08-30 (the
   reasoning is recorded in showpoppy-tokens.css and still stands for the rest
   of the page). The canonical bird, however, is drawn with a #F15A2A wing,
   and redrawing the master bird is forbidden — it is the one piece of this
   system shared byte-for-byte across all six sites. The color law binds the
   wing, the first word and the CTA together as ONE color, so the wing is what
   the other two have to meet. Owner's ruling the same day, on ReportPoppy's
   identical per-project retune: "Why is ReportPoppy different? Make it
   canonical also." A per-project retune loses to the family canon.

   So the canonical accent is declared HERE, on .hdr, and read only by the
   header. --orange is NOT touched, NOT redefined, and still governs every
   button and accent in the page body — repaletting the whole page is a
   separate decision and the owner's to make. Known and accepted consequence
   until he makes it: the header CTA sits a hair deeper than the in-page CTAs.
   The gradient foot and pressed values are this palette's own recorded pair
   for #F15A2A, taken from the "previous values" note in the token file. No
   value below is a new shade.
   -------------------------------------------------------------------------- */

/* Declared on .hdr, so every value here is header-scoped by construction: the
   desktop dropdown and the mobile panel both live inside <header class="hdr">,
   and nothing outside it can read them. The six product accents are read
   straight out of the canonical bird SVGs, and none is used anywhere but a
   switcher row. */
.hdr{
  --show-accent:#F15A2A;         /* the canonical wing, first word and CTA    */
  --show-accent-foot:#DE4A1B;    /* foot of the CTA gradient, pre-retune pair */
  --show-accent-deep:#C9420F;    /* pressed / hover                           */

  --poppy-show:var(--show-accent);
  --poppy-mls:#1F6FDB;
  --poppy-picture:#0FA294;
  --poppy-report:#E8A020;
  --poppy-file:#6C4BE0;
  --poppy-touch:#D9377A;
  --poppy-office:#D6361C;
}

/* The header's primary CTA, in the bar and in the mobile panel alike. Scoped
   to .hdr, so .btn--primary everywhere else on the page is untouched, and
   written as a full override of section 5's gradient rather than an edit to
   it. Two different oranges inside one header would be the exact failure the
   color law exists to prevent, which is why the panel button moves with the
   bar button. */
.hdr .btn--primary{
  background-image:linear-gradient(180deg,var(--show-accent) 0%,var(--show-accent-foot) 100%);
}
.hdr .btn--primary:hover{
  background-image:linear-gradient(180deg,var(--show-accent-foot) 0%,var(--show-accent-deep) 100%);
}

/* --- The bar ------------------------------------------------------------ */
/* Taller on desktop than the 78px it ran at, because the lockup is now two
   lines: wordmark over descriptor. 92px is the spec's 88–104 band. Mobile
   stays at exactly 68px, which is what .mnav's fixed inset is written to. */
@media (min-width:900px){
  /* 12px between brand, nav and the action cluster in the tight band rather
     than var(--sp-4). Same reason as the .nav a padding below: at exactly
     900px the full desktop row is 11.8px wider than the bar, and the law says
     buy it back out of gaps and control padding, never out of targets or the
     logo. At 960 it opens back up to where it was. */
  .hdr__in{height:92px;gap:12px}
}
@media (min-width:960px){
  .hdr__in{gap:var(--sp-4)}
}
@media (min-width:1140px){
  .hdr__in{gap:var(--sp-6)}
}

/* THE HEADER BAR LAW (Chip, 2026-09-07). "Look at that space in the middle.
   There's more space in the middle than there is anywhere else. Just move the
   Today People Listings and whatever else over to the LEFT."

   The bar is one flex row, left-grouped:

       [brand] [nav] <<flexible gap>> [actions]

   The nav therefore sits IMMEDIATELY AFTER the brand and carries NO auto
   margin. `margin-inline:auto 0` used to push it across to join the right-hand
   cluster; that is what opened the dead gap in the middle of the bar and what
   put the last nav link under anything floating in the top-right corner. The
   one flexible gap in the row is margin-left:auto on .hdr__act, and nothing
   else. Everything the nav contained is still in it, in the same order. */
@media (min-width:900px){
  .nav{margin-inline:0;gap:0}
  /* 7px rather than 9px in the tight band. The full desktop row — logo, three
     links, the switcher, Sign In and the CTA — is 11.8px too wide for exactly
     900px, and with the links now nowrap (so "How It Works" can never break
     mid-phrase) that width had to come from somewhere. It comes out of control
     PADDING, per the band's own rule, never out of the 44px targets and never
     out of the logo: the links keep their full height and their full labels. */
  .nav a{padding:0 7px}
}
@media (min-width:960px){
  .nav a{padding:0 9px}
}
@media (min-width:1140px){
  .nav{gap:var(--sp-2)}
  .nav a{padding:0 16px}
}

/* 900 to 1139 is the tight band: the full desktop row — logo, three links,
   the switcher, Sign In and the CTA — has to fit a 1024 laptop with the
   page's own 3.4vw gutters on both sides. It is bought back out of control
   PADDING and the gaps between controls, never out of the 44px targets and
   never out of the logo, which stays one size across the whole desktop
   range. At 1140 everything opens back up. */
@media (min-width:900px){
  .hdr__act{gap:var(--sp-2)}
}
@media (min-width:1140px){
  .hdr__act{gap:var(--sp-3)}
}

/* Hairline dividers either side of the suite switcher. Decoration only, so
   they are aria-hidden in the markup and never appear on mobile. */
.hdr__rule{display:none}
@media (min-width:900px){
  .hdr__rule{
    display:block;flex:none;
    width:1px;height:26px;
    background:var(--border-subtle);
  }
}

/* --- The lockup: bird + wordmark + descriptor --------------------------- */
.brand{gap:9px;flex:none;min-width:0}
@media (min-width:900px){.brand{gap:12px}}

/* Higher specificity than the section-6 `.brand img` rule, so that rule is
   left standing for any other image a brand block might ever carry. */
.brand .brand__bird{
  height:26px;width:auto;max-width:none;flex:none;
  /* The master bird is a wide file (1944x1340). Fixing the height and letting
     width follow keeps every Poppy's bird at identical scale across the six
     sites, which is the whole point of one master geometry. */
}
@media (min-width:420px){.brand .brand__bird{height:28px}}
@media (min-width:900px){.brand .brand__bird{height:38px}}

.brand__lockup{
  display:flex;flex-direction:column;justify-content:center;
  gap:2px;min-width:0;
}
@media (min-width:900px){.brand__lockup{gap:3px}}

.brand__word{
  font-family:var(--font-display);
  font-weight:800;font-size:15px;line-height:1;
  letter-spacing:-.022em;
  color:var(--text-primary);          /* "Poppy" — family ink, never accent */
  white-space:nowrap;
}
@media (min-width:420px){.brand__word{font-size:16px}}
@media (min-width:900px){.brand__word{font-size:25px}}

/* The ONLY accented word in the wordmark. */
.brand__first{color:var(--poppy-show)}

.brand__desc{
  font-family:var(--font-sans);
  font-weight:600;font-size:8.5px;line-height:1;
  letter-spacing:.17em;text-transform:uppercase;
  color:var(--text-primary);          /* descriptor is ink, NOT the accent */
  white-space:nowrap;
}
@media (min-width:420px){.brand__desc{font-size:9px}}
@media (min-width:900px){.brand__desc{font-size:11px;letter-spacing:.2em}}

/* --- Primary CTA label -------------------------------------------------- */
/* One anchor, one destination, two labels. The short label is the same
   promise in fewer words; it appears only where the full one would crowd the
   bar (phones, and the 900-1140 laptop band where nav + switcher + Sign In
   already fill the row). Both are inside the same <a href="start.html">, so
   nothing about the route or its analytics changes with the viewport. */
.hdr__cta-full{display:none}
.hdr__cta-short{display:inline}
@media (min-width:1140px){
  .hdr__cta-full{display:inline}
  .hdr__cta-short{display:none}
}
/* The CTA now earns its place on a phone as well — the spec's mobile bar is
   [logo] [CTA] [menu]. Below 380px it stands down again exactly as before,
   because logo + CTA + burger cannot all fit without one of them shrinking
   past a 44px target; there it stays reachable in the panel and the hero.
   The 560 and 900 steps below restate section 6's own values so the ladder
   still ends where it always did. */
@media (min-width:380px){
  .hdr__cta{display:inline-flex;min-height:42px;padding:0 13px;font-size:14px}
}
@media (min-width:560px){
  .hdr__cta{min-height:44px;padding:0 16px;font-size:15px}
}
@media (min-width:900px){
  .hdr__cta{min-height:46px;padding:0 16px;font-size:var(--fs-ui)}
  .hdr__signin{padding:0 10px}
  .suitesw__btn{padding:0 8px}
}
@media (min-width:1140px){
  .hdr__cta{padding:0 24px}
  .hdr__signin{padding:0 14px}
  .suitesw__btn{padding:0 12px;gap:7px}
}

/* --- Poppy Suite switcher (desktop) ------------------------------------- */
.suitesw{display:none}
@media (min-width:900px){.suitesw{display:block;position:relative;flex:none}}

.suitesw__btn{
  display:inline-flex;align-items:center;gap:6px;
  min-height:44px;padding:0 8px;
  background:none;border:0;border-radius:var(--r-ctl);
  cursor:pointer;
  font-family:inherit;font-size:var(--fs-ui);font-weight:500;
  color:var(--text-secondary);
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.suitesw__btn:hover{color:var(--text-primary);background:var(--surface-secondary)}
.suitesw__btn[aria-expanded="true"]{color:var(--text-primary);background:var(--surface-secondary)}
.suitesw__dots{flex:none;opacity:.7}
.suitesw__btn:hover .suitesw__dots,
.suitesw__btn[aria-expanded="true"] .suitesw__dots{opacity:1}
.suitesw__chev{flex:none;opacity:.65;transition:transform .18s var(--ease)}
.suitesw__btn[aria-expanded="true"] .suitesw__chev{transform:rotate(180deg)}

/* display:none while closed rather than a hidden-but-painted panel, so the
   six 112KB master birds inside it are never fetched by a visitor who never
   opens the menu. The fade is applied a frame after the panel is displayed. */
.suitesw__menu{
  position:absolute;top:calc(100% + 10px);right:0;z-index:120;
  width:336px;padding:var(--sp-2);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:var(--r-md);
  box-shadow:var(--e-3);
  opacity:0;transform:translateY(-6px);
  transition:opacity .16s var(--ease),transform .16s var(--ease);
}
.suitesw__menu[hidden]{display:none}
.suitesw__menu.is-open{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .suitesw__menu{transition:none;transform:none}
  .suitesw__chev{transition:none}
}

/* --- One switcher row (shared by desktop dropdown and mobile panel) ------ */
.suitesw__parent,
.msuite__parent,
.suitesw__item{
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:8px 10px;
  border-radius:var(--r-sm);
  color:var(--text-primary);
  transition:background-color .16s var(--ease);
}
a.suitesw__parent:hover,
a.msuite__parent:hover,
a.suitesw__item:hover{background:var(--surface-secondary)}

/* The parent sits above the six and is separated by a rule, so "OfficePoppy
   is the suite, these six are the products" is read rather than inferred. */
.suitesw__parent,.msuite__parent{
  border-bottom:1px solid var(--border-soft);
  border-radius:var(--r-sm) var(--r-sm) 0 0;
  margin-bottom:var(--sp-2);padding-bottom:12px;
}

.suitesw__list,.msuite__list{list-style:none;margin:0;padding:0}

.suitesw__bird{width:34px;height:auto;flex:none}
/* OfficePoppy wears the poppy bloom, never a bird — the birds belong to the
   six applications. officepoppy-mark.svg is the approved identity mark,
   copied byte-for-byte out of the family asset library. It is square where
   the birds are wide, so it is centred inside a bird-width column and the
   text of all seven rows still starts on one line. No radius: the bloom has
   no ground behind it to round off. */
.suitesw__mark{width:26px;height:26px;flex:none;margin:0 4px}

.suitesw__txt{display:flex;flex-direction:column;gap:1px;min-width:0}
.suitesw__name{
  font-family:var(--font-display);
  font-weight:800;font-size:15px;line-height:1.15;letter-spacing:-.018em;
  color:var(--text-primary);          /* "Poppy" — ink */
}
.suitesw__desc{
  font-size:12.5px;line-height:1.3;font-weight:400;
  color:var(--text-secondary);        /* supporting text — neutral, never accent */
}

/* First word only, in that product's own accent. No colored backgrounds,
   no colored descriptors — the row is otherwise identical for all seven. */
.suitesw__first--office{color:var(--poppy-office)}
.suitesw__first--show{color:var(--poppy-show)}
.suitesw__first--mls{color:var(--poppy-mls)}
.suitesw__first--picture{color:var(--poppy-picture)}
.suitesw__first--report{color:var(--poppy-report)}
.suitesw__first--file{color:var(--poppy-file)}
.suitesw__first--touch{color:var(--poppy-touch)}

/* The current product. Deliberately quiet: a small ink-neutral tag, not a
   highlighted row. It is a <span>, not a link, because there is nowhere to go. */
.suitesw__item.is-here{cursor:default}
.suitesw__here{
  margin-left:auto;flex:none;
  font-style:normal;font-size:11px;font-weight:600;
  letter-spacing:.02em;white-space:nowrap;
  color:var(--text-secondary);
}

/* --- Poppy Suite in the mobile panel ------------------------------------ */
/* Open on the page, not behind a second disclosure. All seven fit the column
   at 320px with no horizontal scroll and no target under 44px. */
.msuite{margin-top:var(--sp-6)}
@media (min-width:900px){.msuite{display:none}}
.msuite__lbl{
  margin:0 0 var(--sp-2);padding:0 var(--sp-3);
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-secondary);
}
.msuite__parent,.msuite .suitesw__item{min-height:56px}
.msuite .suitesw__name{font-size:16px}
.msuite .suitesw__desc{font-size:13px}
.msuite .suitesw__bird{width:38px}
.msuite .suitesw__mark{width:28px;height:28px;margin:0 5px}

/* --- Focus. One ring, the page's own. ----------------------------------- */
.suitesw__btn:focus-visible,
.suitesw__parent:focus-visible,
.msuite__parent:focus-visible,
.suitesw__item:focus-visible,
.brand:focus-visible{
  outline:none;box-shadow:var(--focus-ring);
}


/* --------------------------------------------------------------------------
   7. Hero
   --------------------------------------------------------------------------
   Warm white base. One cool radial wash sits behind the product frame at a
   maximum of about 6 percent, and one dotted flight path arcs above the
   frame. Neither ever crosses body copy or a control.
   -------------------------------------------------------------------------- */
.hero{
  position:relative;isolation:isolate;
  background:var(--surface-warm);
  padding-block:var(--hero-top) var(--hero-bottom);
  overflow:hidden;
}

/* Asymmetric editorial composition. A centered stack is the most generic
   layout there is: it is what every template ships with, and it gives the eye
   no order beyond top-to-bottom. Setting the promise against the product on a
   deliberately uneven split creates the tension that reads as designed.

   The columns are 47/53 rather than 50/50. An even split has no hierarchy, so
   neither side leads. */
.hero{position:relative;isolation:isolate}
.hero__grid{display:grid;gap:clamp(40px,4vw,64px)}
.hero__copy{position:relative;z-index:2}

/* ------------------------------------------------------------------
   CENTRED HERO
   ------------------------------------------------------------------
   The split hero put the copy in a 471px column, which was too narrow
   for the headline to break well and too narrow to hold both actions
   on one row, so the primary CTA lost its weight to a wrap. Centring
   the stack gives the headline the full measure and hands the product
   the entire container width beneath it, which is the part a visitor
   is actually trying to read.
   ------------------------------------------------------------------ */
.hero__grid{justify-items:center;text-align:center}
.hero__copy{max-width:52rem;margin-inline:auto}
.hero__copy .rule{justify-content:center}
.hero__cta{justify-content:center}
.hero__meta{justify-content:center}
.hero__stage{width:100%}

@media (min-width:1040px){
  .hero__grid{
    grid-template-columns:minmax(0,1fr);
    align-items:center;
    gap:clamp(40px,4.4vw,64px);
  }
  /* The frame stays inside the container. Two earlier versions pushed it past
     the viewport edge, first by 64px and then flush to zero; both read as the
     page being cut off rather than as a deliberate crop, because a browser
     edge is not a frame the eye trusts. */
  .hero__stage{min-width:0}
}

.hero__title{
  font-size:var(--fs-hero);
  line-height:var(--lh-display);
  letter-spacing:var(--ls-display);
  margin-top:var(--sp-6);
  text-wrap:balance;
}
/* The last line carries the promise, so it gets the one italic in the page.
   One deliberate emphasis reads as voice; two read as decoration. */
.hero__title em{font-style:italic;color:var(--text-accent)}

.hero__sub{
  margin-top:var(--sp-6);max-width:60ch;margin-inline:auto;
  font-size:var(--fs-lead);line-height:1.5;color:var(--text-secondary);
}
.hero__cta{
  display:flex;flex-wrap:wrap;align-items:center;
  gap:var(--sp-4) var(--sp-6);margin-top:var(--sp-8);
}
/* Price and terms sit on the same line as the button, at label weight. They
   are a condition of the offer, not a second thing to read. */
.hero__link{
  display:inline-flex;align-items:center;gap:var(--sp-3);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary);
  text-decoration:none;
}
.hero__link:hover{color:var(--text-primary)}
.hero__link-sep{
  width:3px;height:3px;border-radius:var(--r-pill);
  background:var(--border-strong);
}

/* The price and the one true reassurance, under the buttons rather than
   beside them. Two full-size actions now share that row, and a third thing
   competing for it made the primary action read as one option of three. */
.hero__meta{
  display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);
  margin-top:var(--sp-5);
  font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary);
}

/* Depth. One warm light source top-left, one cool fall-off bottom-right, so
   the surface has somewhere the light comes from instead of reading as a flat
   fill. Both sit under the grain. */
.hero__glow{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(120% 80% at 12% 0%, rgba(255,255,255,.9), transparent 60%),
    radial-gradient(90% 70% at 88% 18%, rgba(58,116,196,.10), transparent 62%),
    radial-gradient(70% 60% at 4% 88%, rgba(241,90,42,.07), transparent 66%);
}
/* A faint architectural grid. It states that the page has structure without
   ever being legible as lines. */
.hero__mesh{
  position:absolute;inset:0;z-index:-2;pointer-events:none;
  background-image:
    linear-gradient(to right, rgba(14,27,42,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(14,27,42,.045) 1px, transparent 1px);
  background-size:clamp(64px,6vw,104px) clamp(64px,6vw,104px);
  -webkit-mask-image:radial-gradient(120% 90% at 70% 10%, #000 10%, transparent 68%);
          mask-image:radial-gradient(120% 90% at 70% 10%, #000 10%, transparent 68%);
}
/* The frame sits on the page container like everything else. Unconstrained it
   rendered 1424px wide and read as a stretched browser window; on its own
   1180px measure it aligned with nothing. */

/* --------------------------------------------------------------------------
   8. Product frame and walkthrough chrome
   --------------------------------------------------------------------------
   A reconstruction of the real Create a Tour surface in HTML, not a
   screenshot. It scales with the viewport, stays selectable and readable at
   every width, and costs nothing to download.
   -------------------------------------------------------------------------- */
.frame{margin:0}

/* Scene name and explanation read as one caption line under the frame. */
/* Height is reserved for the two-line case, measured rather than guessed:
   across the fifteen scenes this caption renders at either 22px or 49px, and
   an em-based reservation resolved against the caption's own 19px font rather
   than the 15px text inside it. A fixed reservation cannot drift. */
.wt__cap{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--sp-4);
  min-height:49px;margin-bottom:var(--sp-3);
}
.wt__scene{
  flex:none;
  font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-accent);
}

/* The product surface */
.app{
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-frame) var(--r-frame) 0 0;
  box-shadow:var(--e-3);
  overflow:hidden;
}
/* Slightly deeper elevation than anything else on the page carries, so the
   frame reads as the subject rather than another card. Three stacked layers
   at 30 and 35 percent read as a 2016 drop shadow; the weight now comes from
   one wide, low-opacity layer. */
.wt-stage,.frame .wt{position:relative}
.wt-stage{
  box-shadow:0 1px 2px rgba(14,27,42,.04),
             0 28px 60px -28px rgba(14,27,42,.24);
  border-radius:var(--r-frame) var(--r-frame) 0 0;
}

.app__bar{
  display:flex;align-items:center;gap:var(--sp-4);
  padding:13px 18px;
  border-bottom:1px solid var(--border-soft);
  background:linear-gradient(180deg,#fff,#FCFDFE);
}
.app__bar img{height:22px;width:auto;max-width:none;flex:none}
.app__who{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0}
.app__avatar{
  display:grid;place-items:center;flex:none;
  width:32px;height:32px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-size:12px;font-weight:600;letter-spacing:.02em;
}
/* grid, not a bare span: name over brokerage, always. Left inline these two
   run together on wide screens and only stack when the column happens to be
   narrow enough to wrap them. */
.app__whotext{display:grid;min-width:0}
.app__name{display:block;font-size:13px;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.app__org{display:block;font-size:12px;color:var(--text-secondary);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.app__body{display:grid;gap:0}
@media (min-width:760px){
  .app__body{grid-template-columns:minmax(0,1fr) 238px}
}

.app__main{padding:clamp(18px,2vw,26px)}
.app__h{font-size:19px;font-weight:600;letter-spacing:-.015em}
.app__hsub{margin-top:3px;font-size:13.5px;color:var(--text-secondary);line-height:1.5}

/* The free text tour input, which is how the real product takes a tour. */
.app__input{
  margin-top:var(--sp-5);padding:16px 18px 12px;
  background:var(--surface-primary);
  border:1px solid var(--border-strong);border-radius:var(--r-input);
  box-shadow:inset 0 1px 2px rgba(14,27,42,.04);
}
.app__inputtext{font-size:13.5px;line-height:1.72;color:#2C3A4B}
.app__inputtext .stop{display:block;font-variant-numeric:tabular-nums}
.app__inputtext .stop b{font-weight:500;color:var(--text-primary)}
.app__inputtext .stop i{font-style:normal;color:var(--text-secondary);margin-left:8px}
.app__caret{
  display:inline-block;width:1.5px;height:14px;vertical-align:-2px;
  background:var(--orange);margin-left:1px;
}
.app__count{
  display:flex;justify-content:flex-end;margin-top:10px;
  font-size:11.5px;color:var(--slate-soft);font-variant-numeric:tabular-nums;
}

.app__row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:14px}
.chip{
  display:inline-flex;align-items:center;gap:6px;
  min-height:34px;padding:0 12px;
  border:1px solid var(--border-subtle);border-radius:var(--r-xs);
  background:var(--surface-primary);
  font-size:13px;font-weight:500;color:var(--text-secondary);
}
.chip--on{
  border-color:#F5C3AF;background:var(--surface-accent);color:var(--text-accent);
}
.app__go{
  display:inline-flex;align-items:center;gap:7px;
  min-height:36px;padding:0 16px;margin-left:auto;
  border-radius:var(--r-xs);
  background-image:linear-gradient(180deg,var(--orange) 0%,var(--orange-foot) 100%);
  color:#fff;font-size:13.5px;font-weight:600;
  box-shadow:0 1px 2px rgba(146,44,15,.28);
}

/* Right rail: what ShowPoppy does with the input. Every line is a real
   capability in the shipped product. */
.app__rail{
  padding:clamp(18px,2vw,22px);
  background:var(--surface-secondary);
  border-top:1px solid var(--border-soft);
}
@media (min-width:760px){
  .app__rail{border-top:0;border-left:1px solid var(--border-soft)}
}
.app__railh{font-size:13px;font-weight:600;letter-spacing:-.01em}

/* The agent's own next step, set apart from the system list above it so the
   two are never read as one undifferentiated set of bullets. */
.app__next{
  margin-top:14px;padding-top:12px;
  border-top:1px solid var(--border-subtle);
}
.app__nexth{
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--text-accent);
}
.app__nextb{
  position:relative;margin-top:6px;padding-left:24px;
  font-size:12.5px;line-height:1.45;color:var(--text-primary);
}
.app__nextb svg{position:absolute;left:0;top:2px;color:var(--orange)}
.app__nextb b{font-weight:600}
/* Icon lists throughout the page place the glyph absolutely rather than as a
   flex sibling. A flex container splits a sentence containing any inline
   element (a trademark span, a link) into separate flex items, which tears
   the line apart. Absolute positioning lets the text flow as one run. */
.app__rail ul{margin-top:12px;display:grid;gap:11px}
.app__rail li{position:relative;padding-left:24px;font-size:12.5px;line-height:1.42;color:#3B4859}
.app__rail li svg{position:absolute;left:0;top:2px;color:var(--success)}

.app__note{
  display:flex;align-items:center;gap:8px;
  padding:11px 18px;
  border-top:1px solid var(--border-soft);
  background:#FBFCFD;
  font-size:12.5px;color:var(--text-secondary);
}
.app__note svg{flex:none;color:var(--success)}
.app__note b{font-weight:600;color:var(--text-primary)}

/* Walkthrough chrome: explanation, progress, chapter rail, controls. */
.wt{margin-top:var(--sp-5)}

/* The one-sentence explanation of the current scene. Height is reserved for
   two lines so a longer sentence cannot nudge the controls down. The
   reservation lives on the block-level caption, not on the span inside it:
   min-height on an inline box does nothing at all. */
.wt__say{
  text-wrap:balance;
  font-size:var(--fs-sm);font-weight:500;line-height:1.45;
  color:var(--text-secondary);
}

.wt__prog{
  height:3px;border-radius:var(--r-pill);overflow:hidden;
  background:var(--border-subtle);
  max-width:420px;margin:0 auto var(--sp-4);
}
.wt__prog span{
  display:block;height:100%;width:6.6667%;
  border-radius:var(--r-pill);background:var(--orange);
  transition:width .34s var(--ease);
}

.wt__rail{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-bottom:var(--sp-4);
}
/* Every step carries the same weight whether or not it is current. Switching
   weight on the active step changes its width, which can rewrap the rail onto
   a second line and shove the controls down. Color and the dot carry the
   state instead. */
.wt__step{
  display:inline-flex;align-items:center;gap:7px;
  padding:6px 13px;border-radius:var(--r-pill);
  font-size:12.5px;font-weight:600;color:var(--text-secondary);
  border:1px solid transparent;
}
.wt__step::before{
  content:"";width:6px;height:6px;border-radius:50%;
  background:var(--border-strong);
}
.wt__step[aria-current="step"]{
  color:var(--text-accent);border-color:#F5C3AF;background:var(--surface-accent);
}
.wt__step[aria-current="step"]::before{background:var(--orange)}

.wt__ctrls{display:flex;justify-content:center;gap:var(--sp-2)}
.wt__btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;min-width:44px;padding:0 18px;
  border:1px solid var(--border-strong);border-radius:var(--r-ctl);
  background:var(--surface-primary);
  font-size:14px;font-weight:600;color:var(--text-primary);
  box-shadow:var(--e-1);
}
.wt__btn:hover:not([disabled]){background:var(--surface-secondary);border-color:#B8C3D0}
.wt__btn--play{background:var(--navy);border-color:var(--navy);color:#fff}
.wt__btn--play:hover:not([disabled]){background:var(--navy-raised);border-color:var(--navy-raised)}
.wt__btn:active:not([disabled]){transform:translateY(1px)}
.wt__btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.wt__btn[hidden]{display:none}

@media (prefers-reduced-motion:reduce){
  .wt__prog span{transition:none}
}

/* --------------------------------------------------------------------------
   9. Connected tour
   -------------------------------------------------------------------------- */
.tour__grid{display:grid;gap:var(--col-gap)}
@media (min-width:940px){
  .tour__grid{grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);align-items:start}
}

.map{
  position:relative;
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  box-shadow:var(--e-2);overflow:hidden;
}
/* Direct child only. A descendant selector here also caught the 16px info
   icon down in .map__foot and stretched it to the full card width. */
.map>svg{width:100%;height:auto;display:block}
/* The live Google map keeps the old diagram's exact footprint (640x420), so
   the tour grid does not reflow while tiles stream in. The min-height is the
   fallback for engines without aspect-ratio — a mapless empty strip is the
   failure this rule exists to prevent. */
#tourMap{width:100%;aspect-ratio:640/420;min-height:300px;background:#EAF0F5}
/* ── The illustrated tour map ──────────────────────────────────────────────
   Inline SVG, drawn in the design system's own map palette. It fills the panel
   the live map used to fill, so the section's proportions are unchanged.

   `slice` on preserveAspectRatio means the drawing always COVERS the panel and
   is cropped, never letterboxed — the same behavior a tiled map had, and the
   reason the composition keeps the route away from the edges. */
.tourmap{display:block;width:100%;height:100%;min-height:300px}
/* Map typography. A map is mostly its labels: the hierarchy below is the
   ordinary cartographic one — places in small caps, water italic, greens and
   roads quieter than either — and it is what stops the drawing reading as an
   illustration with words on it. */
.tm-lbl text{font-family:var(--font-sans)}
.tm-sea{font-size:13px;font-weight:600;letter-spacing:.24em;fill:#84A2BE}
.tm-place{font-size:11.5px;font-weight:700;letter-spacing:.14em;fill:#67717F}
.tm-water{font-size:9.5px;font-weight:600;letter-spacing:.06em;fill:#7C9DBC}
.tm-green{font-size:9px;font-weight:600;letter-spacing:.02em;fill:#6E8F72}
.tm-road{font-size:8.5px;font-weight:600;letter-spacing:.03em;fill:#9AA5B1}
.tm-shield{font-family:var(--font-sans);font-size:12px;font-weight:700;fill:#5F6B7A}
.tourmap__n{font-family:var(--font-sans);font-size:14px;font-weight:700}

.map__foot{
  display:flex;align-items:flex-start;gap:8px;
  padding:13px 18px;border-top:1px solid var(--border-soft);
  background:#FBFCFD;
  font-size:13px;line-height:1.5;color:var(--text-secondary);
}
.map__foot svg{flex:none;margin-top:2px;color:var(--slate-soft)}

/* Stop list */
.stops{
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  box-shadow:var(--e-2);overflow:hidden;
}
.stops__h{
  display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-4);
  padding:16px 20px;border-bottom:1px solid var(--border-soft);
}
.stops__ht{font-size:15px;font-weight:600}
.stops__hn{font-size:13px;color:var(--text-secondary)}

.stop-row{display:flex;gap:14px;padding:15px 20px;border-bottom:1px solid var(--border-soft)}
.stop-row:last-child{border-bottom:0}
.stop-row__n{
  display:grid;place-items:center;flex:none;
  width:28px;height:28px;border-radius:50%;
  background:var(--navy);color:#fff;
  font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;
}
.stop-row__b{min-width:0;flex:1}
.stop-row__addr{font-size:15px;font-weight:500;line-height:1.35}
.stop-row__meta{
  margin-top:4px;display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;
  font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums;
}
.stop-row__meta .dot{width:3px;height:3px;border-radius:50%;background:var(--border-strong)}

/* Status pills. Every one carries a glyph as well as a color, so the
   meaning never rests on hue alone. */
.pill{
  display:inline-flex;align-items:center;gap:5px;flex:none;align-self:flex-start;
  padding:4px 10px;border-radius:var(--r-pill);
  border:1px solid transparent;
  font-size:12px;font-weight:600;letter-spacing:.01em;white-space:nowrap;
}
.pill svg{flex:none}
.pill--confirmed{background:var(--success-soft);border-color:var(--success-line);color:var(--success-text)}
.pill--rescheduled{background:var(--warning-soft);border-color:var(--warning-line);color:var(--warning-text)}
.pill--sent{background:var(--surface-secondary);border-color:var(--border-subtle);color:var(--text-secondary)}
.pill--declined{background:var(--danger-soft);border-color:var(--danger-line);color:#B4282C}

/* Drive time connector between stops */
.drive{
  display:flex;align-items:center;gap:8px;
  padding:7px 20px 7px 62px;
  background:#FBFCFD;border-bottom:1px solid var(--border-soft);
  font-size:12.5px;color:var(--slate-soft);font-variant-numeric:tabular-nums;
}
.drive svg{flex:none}

/* --------------------------------------------------------------------------
   10. Core value
   -------------------------------------------------------------------------- */




/* --------------------------------------------------------------------------
   Before and after
   --------------------------------------------------------------------------
   Two columns of the same five steps. The left column is deliberately plain
   and the right one carries the surface, border and accent: the visual weight
   is the argument, so it should not need a label to say which one is better.
   -------------------------------------------------------------------------- */
.vs{display:grid;gap:var(--sp-6)}
@media (min-width:860px){
  .vs{grid-template-columns:1fr 1fr;gap:var(--col-gap);align-items:start}
}
.vs__col{
  padding:clamp(24px,2.6vw,36px);
  border-radius:var(--r-card);
  border:1px solid transparent;
}
/* The status quo sits flat on the page: no card, no elevation, nothing to
   make it look like an option being offered. */
.vs__col--now{
  background:var(--surface-primary);
  border-color:var(--border-subtle);
  box-shadow:var(--e-2);
}

.vs__h{display:flex;flex-direction:column;gap:var(--sp-1);margin-bottom:var(--sp-6)}
.vs__tag{
  font-size:var(--fs-eyebrow);font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;
  color:var(--text-secondary);
}
.vs__tag--now{color:var(--text-accent)}
.vs__sub{font-size:var(--fs-sm);color:var(--slate-soft)}

.vs__steps{list-style:none;margin:0;padding:0;counter-reset:vs}
.vs__steps li{
  counter-increment:vs;
  position:relative;padding-left:38px;
  font-size:var(--fs-sm);line-height:1.55;color:var(--text-secondary);
}
.vs__steps li + li{margin-top:var(--sp-5)}
.vs__steps li::before{
  content:counter(vs,decimal-leading-zero);
  position:absolute;left:0;top:1px;
  font-size:12px;font-weight:600;font-variant-numeric:tabular-nums;
  letter-spacing:.04em;
  color:var(--slate-soft);
}
.vs__col--now .vs__steps li::before{color:var(--text-accent)}
.vs__steps b{
  display:block;font-weight:600;color:var(--text-primary);
  margin-bottom:2px;
}

/* --------------------------------------------------------------------------
   11. Pricing
   -------------------------------------------------------------------------- */
.pricing{padding-block:var(--sec-y)}
.price__grid{display:grid;gap:var(--col-gap);align-items:start}
@media (min-width:1000px){
  /* 62 / 38. The Agent Plan is the page's decision, so it carries the width. */
  .price__grid{grid-template-columns:minmax(0,62fr) minmax(0,38fr)}
}

.card{
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  box-shadow:var(--e-2);
}
.card--plan{border-color:#D6E1EC;box-shadow:var(--e-3)}
.card__in{padding:clamp(24px,3vw,40px)}

.plan__name{font-size:var(--fs-card);font-weight:600;text-align:center}
.plan__price{
  display:flex;align-items:baseline;justify-content:center;gap:10px;
  margin-top:var(--sp-4);
}
.plan__amt{
  font-family:var(--font-serif);font-weight:800;
  font-size:var(--fs-price);line-height:1;letter-spacing:-.028em;
  font-variant-numeric:tabular-nums;
}
.plan__per{font-size:var(--fs-body);font-weight:500;color:var(--text-secondary)}
.plan__blurb{
  margin:var(--sp-5) auto 0;max-width:460px;text-align:center;
  font-size:var(--fs-body);line-height:1.55;color:var(--text-secondary);
}

.feats{display:grid;gap:12px;margin-top:var(--sp-8)}
@media (min-width:620px){.feats{grid-template-columns:1fr 1fr;gap:12px var(--sp-8)}}
.feats li{position:relative;padding-left:27px;font-size:var(--fs-body);line-height:1.45}
.feats svg{position:absolute;left:0;top:4px;color:var(--success)}

.plan__foot{margin-top:var(--sp-8)}
.plan__fine{
  margin-top:var(--sp-4);text-align:center;
  font-size:var(--fs-sm);color:var(--text-secondary);
}

/* Planned add-on. Visually connected to the plan but clearly set apart, and
   with no purchase control anywhere inside it. The plan body drops its lower
   padding so the gap between the two is the add-on's own margin, not both. */
.card--plan .card__in{padding-bottom:0}
.addon__tagrow{text-align:center}
.addon{
  margin:var(--sp-8) clamp(24px,3vw,40px) clamp(24px,3vw,40px);
  padding:clamp(20px,2.4vw,28px);
  background:var(--surface-secondary);
  border:1px dashed #C9D6E2;border-radius:var(--r-card);
}
.addon__tag{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--surface-primary);border:1px solid var(--border-subtle);
  font-size:11.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-secondary);
}
.addon__name{margin-top:12px;font-size:var(--fs-card);font-weight:600;text-align:center}
.addon__price{display:flex;align-items:baseline;justify-content:center;gap:8px;margin-top:10px}
.addon__amt{
  font-family:var(--font-serif);font-weight:800;
  font-size:clamp(32px,2.6vw,38px);line-height:1;letter-spacing:-.02em;
  color:var(--text-secondary);font-variant-numeric:tabular-nums;
}
.addon__per{font-size:var(--fs-sm);font-weight:500;color:var(--text-secondary)}
.addon__blurb{
  margin:var(--sp-4) auto 0;max-width:420px;text-align:center;
  font-size:var(--fs-sm);line-height:1.55;color:var(--text-secondary);
}
.addon__list{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px;
  margin-top:var(--sp-4);
}
.addon__list li{
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--surface-primary);border:1px solid var(--border-subtle);
  font-size:12.5px;color:var(--text-secondary);
}
.addon__foot{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  margin-top:var(--sp-5);
}
.addon__fine{font-size:13px;font-weight:600;color:var(--text-secondary)}

/* Teams card */
.teams{display:flex;flex-direction:column;height:100%;text-align:center}
.teams__icon{margin:0 auto var(--sp-5)}
.teams__t{font-size:var(--fs-card);font-weight:600}
.teams__lead{margin-top:var(--sp-3);font-size:var(--fs-body);line-height:1.5;color:var(--text-primary)}
.teams__d{margin-top:var(--sp-4);font-size:var(--fs-body);line-height:1.55;color:var(--text-secondary)}
.teams__list{display:grid;gap:9px;margin-top:var(--sp-6);text-align:left}
.teams__list li{position:relative;padding-left:24px;font-size:var(--fs-sm);color:var(--text-secondary)}
.teams__list svg{position:absolute;left:0;top:5px;color:var(--slate-soft)}
.teams__cta{margin-top:var(--sp-8)}

/* --------------------------------------------------------------------------
   12. Listing agent reassurance strip
   -------------------------------------------------------------------------- */
.strip{background:var(--surface-inverse);color:var(--text-inverse)}
.strip__grid{display:grid;gap:var(--col-gap)}
@media (min-width:940px){
  .strip__grid{
    grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
    gap:clamp(40px,5vw,80px);
    align-items:center;   /* the copy is shorter than the proof list */
  }
}
.strip .eyebrow{color:#F9A88A}
.strip__t{font-size:var(--fs-h3);line-height:1.28;font-family:var(--font-serif);font-weight:800;letter-spacing:-.014em}
.strip__d{margin-top:var(--sp-5);font-size:var(--fs-body);line-height:1.6;color:var(--text-inverse-soft);max-width:var(--measure)}

.proofs{display:grid;gap:2px;background:var(--border-inverse);border-radius:var(--r-card);overflow:hidden}
.proofs li{
  position:relative;
  padding:18px 20px 18px 54px;background:var(--brand-navy-raised);
  font-size:var(--fs-body);line-height:1.45;
}
.proofs svg{position:absolute;left:20px;top:20px;color:#F9A88A}

/* --------------------------------------------------------------------------
   13. FAQ
   -------------------------------------------------------------------------- */
.faq{padding-block:var(--sec-y-tight)}
.faq__grid{
  display:grid;gap:12px;align-content:start;
  max-width:var(--measure-wide);margin-inline:auto;
}

.faq__item{
  border:1px solid var(--border-subtle);border-radius:var(--r-md);
  background:var(--surface-primary);
  align-self:start;
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease);
}
.faq__item:hover{border-color:var(--border-strong)}
.faq__item[data-open="true"]{border-color:#D6E1EC;box-shadow:var(--e-2)}

.faq__q{
  display:flex;align-items:flex-start;gap:var(--sp-4);width:100%;
  padding:19px 20px;min-height:64px;
  background:none;border:0;cursor:pointer;text-align:left;
  font-size:17px;font-weight:600;line-height:1.42;letter-spacing:-.012em;
  color:var(--text-primary);
  border-radius:var(--r-md);
}
.faq__qt{flex:1}

/* Plus that becomes a minus: the vertical bar rotates out and fades. */
.faq__sign{
  position:relative;flex:none;width:22px;height:22px;margin-top:1px;
  border-radius:50%;color:var(--text-accent);
}
.faq__sign::before,.faq__sign::after{
  content:"";position:absolute;left:50%;top:50%;
  background:currentColor;border-radius:1px;
  transition:transform .26s var(--ease),opacity .26s var(--ease);
}
.faq__sign::before{width:13px;height:1.8px;transform:translate(-50%,-50%)}
.faq__sign::after{width:1.8px;height:13px;transform:translate(-50%,-50%)}
.faq__item[data-open="true"] .faq__sign::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}

/* Height animation without measuring: 0fr to 1fr on a grid row. Visibility
   flips with it so collapsed answers leave the accessibility tree too. */
.faq__panel{
  display:grid;grid-template-rows:0fr;visibility:hidden;
  transition:grid-template-rows .28s var(--ease),visibility 0s linear .28s;
}
.faq__item[data-open="true"] .faq__panel{
  grid-template-rows:1fr;visibility:visible;
  transition:grid-template-rows .28s var(--ease),visibility 0s;
}
.faq__panelin{overflow:hidden}
.faq__a{
  padding:0 20px 20px;max-width:56ch;
  font-size:var(--fs-body);line-height:1.6;color:var(--text-secondary);
}

/* --------------------------------------------------------------------------
   14. Final CTA
   -------------------------------------------------------------------------- */
.final{
  position:relative;isolation:isolate;overflow:hidden;
  padding-block:var(--sec-y-tight);
  background:var(--surface-accent);
  border-block:1px solid #F7DED2;
}
.final__in{text-align:center;position:relative}
.final__t{margin-inline:auto;max-width:26ch}
.final__t{font-size:var(--fs-h2);line-height:1.15}
.final__d{
  margin:var(--sp-5) auto 0;max-width:600px;
  font-size:var(--fs-lead);line-height:1.55;color:#5A4136;
}
.final__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--sp-3);margin-top:var(--sp-8)}
.final__fine{margin-top:var(--sp-5);font-size:var(--fs-sm);font-weight:500;color:#6B5045}

.final__bird{
  position:absolute;z-index:-1;pointer-events:none;
  display:none;right:3%;top:50%;width:112px;transform:translateY(-50%);
  opacity:.42;
}
@media (min-width:1080px){.final__bird{display:block}}
.final__path{
  position:absolute;z-index:-1;pointer-events:none;display:none;
  left:-3%;top:50%;width:24%;transform:translateY(-50%);opacity:.24;
}
@media (min-width:1080px){.final__path{display:block}}
.final__path path{
  fill:none;stroke:var(--orange);stroke-width:2.4;
  stroke-linecap:round;stroke-dasharray:1 11;
}

/* --------------------------------------------------------------------------
   15. Footer. White, with a navy top rule.
   -------------------------------------------------------------------------- */
.foot{
  background:var(--surface-primary);
  border-top:2px solid var(--navy);
  padding-block:var(--sec-y-tight);
}
.foot__grid{display:grid;gap:var(--sp-10)}
@media (min-width:700px){.foot__grid{grid-template-columns:1fr 1fr;gap:var(--sp-10) var(--col-gap)}}
@media (min-width:1040px){
  .foot__grid{grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr))}
}

.foot__brand img{height:32px;width:auto;max-width:none}
.foot__tag{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--text-secondary);max-width:34ch;line-height:1.55}
.foot__co{margin-top:var(--sp-4);font-size:13.5px;color:var(--slate-soft);max-width:34ch;line-height:1.55}

.foot__h{
  font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-primary);margin-bottom:var(--sp-4);
}
/* min-width as well as min-height: short labels such as "FAQ" are only
   29px wide, and target size is measured in both axes. */
.foot__col a{
  display:inline-flex;align-items:center;min-height:44px;min-width:44px;
  font-size:var(--fs-sm);color:var(--text-secondary);
  border-radius:var(--r-xs);
}
.foot__col a:hover{color:var(--text-accent);text-decoration:underline;text-underline-offset:3px}

.foot__legal{
  margin-top:var(--sec-y-tight);padding-top:var(--sp-8);
  border-top:1px solid var(--border-soft);
}
.foot__legal p{
  font-size:var(--fs-legal);line-height:1.68;color:var(--text-secondary);
  max-width:92ch;
}
.foot__legal p+p{margin-top:var(--sp-4)}

/* --------------------------------------------------------------------------
   16. Motion preferences
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  /* The accordion still has to open, it just does it instantly. */
  .faq__panel{transition:none}
  .faq__item[data-open="true"] .faq__panel{transition:none}
}

/* Higher contrast preference, set from /accessibility.html. Deepens the
   secondary text that sits on tinted and navy surfaces. */
html[data-sp-contrast="on"] .strip__d{color:#DCE5EF}
html[data-sp-contrast="on"] .final__d{color:#4A342A}

/* Phone touch-target floor — audited 2026-07-30. Type size unchanged; only
   the hit area grows. */
@media (pointer: coarse), (max-width: 700px){
  .hero__link{min-height:44px;display:inline-flex;align-items:center;flex-wrap:wrap}
  .nav a,.burger,.site-header a{min-height:44px;display:inline-flex;align-items:center}
}


/* --------------------------------------------------------------------------
   Status bar / notch clearance
   --------------------------------------------------------------------------
   The iOS shell runs the site in a WKWebView with .ignoresSafeArea() and
   contentInsetAdjustmentBehavior = .never, so page content starts at the
   physical top of the screen — the brand lockup collided with the clock and
   the burger sat under the battery icon. env() only reports real values when
   the viewport is declared viewport-fit=cover, which index.html now does.

   max() keeps normal browsers exactly as they were: the inset is 0 there, so
   the header falls back to its designed height. The bar itself is padded
   rather than the page, so the sticky header stays flush to the top when
   scrolled and its background continues up behind the status bar.
   -------------------------------------------------------------------------- */
.hdr{padding-top:max(env(safe-area-inset-top,0px), var(--sp-safe-top,0px))}
.hdr__in{
  padding-left:max(0px, env(safe-area-inset-left,0px));
  padding-right:max(0px, env(safe-area-inset-right,0px));
}
/* ...and the gutter the container declared, which the two lines above have
   been silently cancelling since they were written: .hdr__in carries .wrap,
   .wrap sets padding-inline:var(--gutter), and a later padding-left/right at
   the same specificity overrides the shorthand. The bar has therefore been
   running edge to edge while every other section on the page starts one
   gutter in. It went unnoticed under a flat PNG lockup with its own internal
   margin; the composed lockup has none, so the bird's tail sat on the
   viewport edge and the CTA touched the opposite one.

   max() keeps the notch rule exactly as intended — on a landscape iPhone the
   larger inset still wins — and adds nothing new to reason about. */
.hdr__in{
  padding-left:max(var(--gutter), env(safe-area-inset-left,0px));
  padding-right:max(var(--gutter), env(safe-area-inset-right,0px));
}
/* The menu panel is fixed at inset:68px (the header height). The header is
   now taller by the inset, so the panel's TOP offset moves with it — padding
   would have overridden its designed internal spacing and still left the
   first row under the bar. */
.mnav{top:calc(68px + max(env(safe-area-inset-top,0px), var(--sp-safe-top,0px)))}

/* ======================================================================
   AGENT CONTROL
   ----------------------------------------------------------------------
   A three-up on desktop that becomes one column on a phone. Deliberately
   plain: this is the section that answers an anxiety, and heavy card
   styling here reads as marketing rather than as an answer. The left rule
   is the only ornament, and it carries the accent so the eye still groups
   the six as one set.
   ====================================================================== */
.ctrl{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:var(--sp-10) var(--sp-8);
}
.ctrl__item{
  padding-left:var(--sp-5);
  border-left:2px solid var(--border-subtle);
}
.ctrl__t{
  margin:0 0 var(--sp-2);
  font-size:var(--fs-card);font-weight:650;letter-spacing:-.012em;
  color:var(--text-primary);
}
.ctrl__d{
  margin:0;
  font-size:var(--fs-body);line-height:1.62;color:var(--text-secondary);
}

@media (max-width:1024px){
  .ctrl{grid-template-columns:repeat(2,1fr);gap:var(--sp-8) var(--sp-6)}
}
@media (max-width:640px){
  .ctrl{grid-template-columns:1fr;gap:var(--sp-6)}
}

/* ======================================================================
   HERO REQUIREMENTS
   ----------------------------------------------------------------------
   The Dashboard's three inputs, on the signed-out page. Rendered as a
   three-up divided row rather than as cards: these are one instruction
   split into three parts, and three bordered boxes would read as three
   separate features. The dividers are the only structure, which is what
   the Dashboard does too.
   ====================================================================== */
/* The one-line version of what the hero used to spend three cards saying.
   The .hero__req* rules below are kept intact: the markup that used them is
   gone from the hero, but nothing else in this file assumes their absence and
   a future section may want the numbered form back. */
.hero__req-line{
  margin:var(--sp-5) 0 0;
  max-width:52ch;
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--text-secondary);
}
.hero__req-line strong{ color:var(--text-primary);font-weight:600; }

.hero__req{
  list-style:none;margin:var(--sp-10) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0;
  text-align:left;
  max-width:46rem;margin-inline:auto;
}
.hero__reqi{padding:0 var(--sp-6)}
.hero__reqi + .hero__reqi{border-left:1px solid var(--border-subtle)}
.hero__reqh{
  display:flex;align-items:baseline;gap:var(--sp-2);margin:0 0 var(--sp-2);
}
.hero__reqn{
  font-size:var(--fs-sm);font-weight:700;color:var(--text-accent);
  font-variant-numeric:tabular-nums;
}
.hero__reql{
  font-size:var(--fs-ui);font-weight:650;color:var(--text-primary);
  letter-spacing:-.01em;
}
.hero__reqd{
  margin:0;font-size:var(--fs-sm);line-height:1.5;color:var(--text-secondary);
}

@media (max-width:720px){
  /* Stacked, with the divider moving to the top edge so the three still
     read as one sequence rather than as three loose paragraphs. */
  .hero__req{grid-template-columns:1fr;gap:var(--sp-5);max-width:26rem}
  .hero__reqi{padding:0}
  .hero__reqi + .hero__reqi{
    border-left:0;border-top:1px solid var(--border-subtle);
    padding-top:var(--sp-5);
  }
}

/* ------------------------------------------------------------------
   HERO BIRD — the ShowPoppy swallow leads the page in person, gliding
   above the headline. Full-strength brand color, gentle glide.
   ------------------------------------------------------------------ */
.hero__bird{
  width:clamp(120px,15vw,190px);height:auto;
  margin:0 auto var(--sp-4);
  filter:drop-shadow(0 14px 28px rgba(14,27,42,.22));
  animation:heroBirdGlide 5.5s ease-in-out infinite;
}
@keyframes heroBirdGlide{
  0%,100%{transform:translateY(0) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}
@media (prefers-reduced-motion:reduce){.hero__bird{animation:none}}

/* ==========================================================================
   THE SPLIT HERO ON NAVY (landing blueprint, section 1)
   --------------------------------------------------------------------------
   The hero was centered for a documented reason: an earlier split put the
   copy in a 471px column, too narrow for the headline to break well and too
   narrow to hold both actions on one row. That reason is respected here
   rather than ignored — the split is 1.05fr / 0.95fr inside the full page
   measure, which gives the copy ~520px at 1280 and more above it, so the
   headline still breaks in two lines and the CTAs still share a row.

   Below 1000px it returns to the centered arrangement, unchanged.
   ========================================================================== */
.hero--navy{
  background:var(--brand-navy);
  color:var(--text-inverse);
}
.hero--navy .hero__glow,
.hero--navy .hero__mesh{ opacity:.35; }
.hero--navy .hero__title{ color:var(--text-inverse); }
.hero--navy .hero__title em{ color:var(--orange); }
.hero--navy .hero__sub,
.hero--navy .hero__req-line{ color:var(--text-inverse-soft); }
.hero--navy .hero__req-line strong{ color:var(--text-inverse); }
.hero--navy .hero__meta{ color:var(--text-inverse-soft); }
.hero--navy .rule{ color:var(--text-inverse-soft); }
.hero--navy .rule::after,
.hero--navy .rule::before{ background:var(--border-inverse); }
/* The secondary action has to hold its own on navy. */
.hero--navy .btn--secondary{
  background:transparent;color:var(--text-inverse);
  border-color:rgba(255,255,255,.28);
}
.hero--navy .btn--secondary:hover{
  background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.45);
}
.hero--navy .hero__link-sep{ background:var(--border-inverse); }
.hero--navy .hero__bird{ opacity:.9; }

@media (min-width:1000px){
  .hero__grid--split{
    grid-template-columns:1.05fr 0.95fr;
    align-items:center;
    justify-items:stretch;
    text-align:left;
  }
  .hero__grid--split .hero__copy{ margin-inline:0;max-width:none; }
  .hero__grid--split .hero__copy .rule{ justify-content:flex-start; }
  .hero__grid--split .hero__cta{ justify-content:flex-start; }
  .hero__grid--split .hero__bird{ margin-inline:0; }
}
/* Under 1000px the demo would only push the CTA below the fold. */
@media (max-width:999px){
  .hero__demo{ display:none; }
}

/* --------------------------------------------------------------------------
   The interface demo — the blueprint's three-second loop, in markup
   -------------------------------------------------------------------------- */
.demo{
  border-radius:14px;overflow:hidden;
  background:var(--surface-primary);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 30px 70px -28px rgba(0,0,0,.65);
}
.demo__bar{
  display:flex;align-items:center;gap:6px;
  padding:9px 12px;background:#F3F4F6;border-bottom:1px solid var(--border-subtle);
}
.demo__dot{width:8px;height:8px;border-radius:50%;background:#D1D5DB}
.demo__url{
  margin-left:8px;font-size:11px;letter-spacing:.02em;color:var(--text-secondary);
}
.demo__body{padding:16px}
.demo__label{
  margin:0 0 6px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--text-secondary);
}
.demo__label--out{margin-top:16px}
.demo__input{
  display:flex;align-items:center;min-height:38px;
  padding:8px 11px;border-radius:9px;
  background:var(--surface-secondary);border:1px solid var(--border-subtle);
  font-size:12.5px;color:var(--text-primary);
}
/* Five MLS numbers typed in, then held, then cleared — a 9s cycle so the
   itinerary below has time to be read rather than flickering. */
.demo__typed::after{
  content:"OC24512, OC24518, OC24530,";
  white-space:pre;
  animation:demoTyped 6s steps(1) infinite;
}
@keyframes demoTyped{
  0%, 4%   {opacity:0}
  8%, 92%  {opacity:1}
  96%,100% {opacity:0}
}
.demo__caret{
  width:1.5px;height:15px;margin-left:2px;background:var(--orange);
  animation:demoCaret 1s steps(1) infinite;
}
@keyframes demoCaret{50%{opacity:0}}

.demo__stops{list-style:none;margin:0;padding:0}
/* LOOPING, not a one-shot (owner: "3-second looping"). One 6s cycle: the
   rows snap in over the first ~2.5s, the itinerary holds long enough to
   actually be read, then it clears and starts again. A loop that never rests
   is a loop nobody can read, so the hold is most of the cycle. */
.demo__stops li{
  display:flex;align-items:baseline;gap:10px;
  padding:8px 0;border-bottom:1px solid var(--border-soft);
  opacity:0;
  animation:demoRow 6s var(--ease,cubic-bezier(.2,.7,.3,1)) infinite;
  animation-delay:calc(var(--i) * .28s);
}
.demo__stops li:last-child{border-bottom:0}
.demo__t{
  flex:none;width:56px;font-size:11.5px;font-weight:700;
  color:var(--orange-text);font-variant-numeric:tabular-nums;
}
.demo__a{font-size:12.5px;color:var(--text-primary);line-height:1.35}
@keyframes demoRow{
  0%   {opacity:0;transform:translateY(7px)}
  10%  {opacity:1;transform:none}     /* snapped into place */
  85%  {opacity:1;transform:none}     /* held, so it can be read */
  95%  {opacity:0;transform:translateY(-4px)}
  100% {opacity:0;transform:translateY(7px)}
}

/* Motion is decoration. Anyone who asked for less gets the finished state. */
@media (prefers-reduced-motion:reduce){
  .demo__caret{animation:none}
  .demo__typed::after{animation:none;opacity:1}
  .demo__stops li{opacity:1;animation:none;transform:none}
}

/* ==========================================================================
   PROFESSIONAL BRANDING BAND (landing update, item 5)
   --------------------------------------------------------------------------
   Was a dashed box tucked inside the $49 card, which read as an afterthought.
   It is its own band now: the argument on the left, the thing being bought on
   the right, because a branded itinerary sells itself faster than a list of
   what branding includes.
   ========================================================================== */
.brandband{
  display:grid;gap:clamp(28px,3vw,44px);
  margin-top:var(--sp-6);
  padding:clamp(26px,3vw,40px);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-card);
  align-items:center;
}
@media (min-width:900px){
  .brandband{grid-template-columns:1fr 1fr}
}
.brandband__t{
  margin:var(--sp-3) 0 0;
  font-size:clamp(23px,2.1vw,30px);line-height:1.2;letter-spacing:-.02em;
  color:var(--text-primary);
}
.brandband__price{
  margin:var(--sp-3) 0 0;display:flex;align-items:baseline;gap:8px;
}
.brandband__d{
  margin:var(--sp-3) 0 0;max-width:46ch;
  font-size:var(--fs-sm);line-height:1.6;color:var(--text-secondary);
}
.brandband .addon__list{margin-top:var(--sp-4)}
.brandband .addon__foot{margin-top:var(--sp-5)}

/* The mockup. A real branded itinerary, at the size a buyer sees it. */
.brandband__demo{display:flex;justify-content:center}
.bcard{
  width:min(360px,100%);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:14px;overflow:hidden;
  box-shadow:0 2px 6px rgba(11,23,48,.05), 0 30px 60px -30px rgba(11,23,48,.4);
}
.bcard__hd{
  display:flex;align-items:center;gap:10px;
  padding:14px 16px;
  background:var(--brand-navy);color:var(--text-inverse);
}
.bcard__face{
  width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none;
  border:2px solid rgba(255,255,255,.28);
}
.bcard__who{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.3}
.bcard__who b{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
.bcard__who span{font-size:12.5px;color:var(--text-inverse-soft)}
.bcard__logo{
  flex:none;display:grid;place-items:center;
  width:34px;height:34px;border-radius:7px;
  background:#C8A24A;color:#1A1206;
  font-size:11px;font-weight:800;letter-spacing:.04em;
}
.bcard__label{
  margin:0;padding:12px 16px 8px;
  font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-secondary);
}
.bcard__stops{list-style:none;margin:0;padding:0 16px 4px}
.bcard__stops li{
  display:flex;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid var(--border-soft);
}
.bcard__stops li:last-child{border-bottom:0}
.bcard__stops span{
  flex:none;width:58px;font-size:11.5px;font-weight:700;color:#B08A2E;
  font-variant-numeric:tabular-nums;
}
.bcard__stops b{font-size:13px;font-weight:600;color:var(--text-primary);line-height:1.35}
.bcard__foot{
  margin:0;padding:11px 16px;
  border-top:1px solid var(--border-subtle);background:var(--surface-secondary);
  font-size:11px;font-weight:600;letter-spacing:.05em;color:var(--text-secondary);
  text-align:center;
}

/* ── Item 6: the closing CTA has to be the loudest thing on the page ────── */
.final .btn--primary{
  background:var(--orange);
  border-color:var(--orange);
  color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.28), 0 18px 40px -14px rgba(255,79,24,.6);
}
.final .btn--primary:hover{
  background:var(--orange-deep);border-color:var(--orange-deep);
}

/* ==========================================================================
   CONVERSION REFINEMENT (2026-08-30)
   --------------------------------------------------------------------------
   New components for the restructured argument. One radius scale, one border,
   one elevation step, so a marketing surface reads as the same product as the
   authenticated app rather than as a separate brochure.

   Orange carries exactly one meaning on this page: action and change. It is
   spent on the primary CTA, on a changed appointment, and on nothing else.
   ========================================================================== */

/* ── Hero visual: the live tour ────────────────────────────────────────── */
.livetour{
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:16px;overflow:hidden;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.6);
}
.livetour__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-secondary);
}
.livetour__t{display:flex;flex-direction:column;line-height:1.3}
.livetour__t b{font-size:15px;font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.livetour__t span{font-size:13px;color:var(--text-secondary)}
.livetour__n{
  flex:none;font-size:12px;font-weight:600;color:var(--text-secondary);
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--surface-primary);border:1px solid var(--border-subtle);
}
.livetour__stops{list-style:none;margin:0;padding:4px 0}
.livetour__stops li{
  display:flex;align-items:center;gap:12px;
  padding:11px 18px;
}
.livetour__stops li + li{border-top:1px solid var(--border-soft)}
.livetour__num{
  flex:none;width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand-navy);color:#fff;
  font-size:12px;font-weight:700;
}
.livetour__b{display:flex;flex-direction:column;min-width:0;flex:1;line-height:1.35}
.livetour__b b{font-size:14px;font-weight:600;color:var(--text-primary)}
.livetour__b span{font-size:12.5px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.livetour__f{
  margin:0;padding:12px 18px;
  border-top:1px solid var(--border-subtle);background:var(--surface-secondary);
  font-size:12.5px;color:var(--text-secondary);
}

/* ── The hero reveal ───────────────────────────────────────────────────────
   Two statements that appear after the tour has drawn: the route was ordered,
   the requests are waiting. Both are shipped behavior, evidenced further down
   the page by the map foot and the request preview.

   THE RESTING STATE IS THE FINISHED STATE. Everything below is fully visible
   with no animation at all; motion is added only inside the no-preference
   query, and only ever as a keyframe that ENDS where the resting state already
   is. So reduced motion, a stylesheet that fails to load and a crawler all get
   the complete strip, and there is no way for this to hide content. */
.livetour__reveal{
  display:flex;flex-wrap:wrap;gap:6px 8px;
  list-style:none;margin:0;padding:12px 18px 0;
}
.livetour__rv{
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:var(--r-pill);
  font-size:12px;font-weight:600;letter-spacing:-.005em;
  color:var(--brand-navy);
  background:rgba(255,255,255,.9);
  border:1px solid var(--border-subtle);
}
.livetour__rv svg{flex:none;color:var(--brand-orange)}

/* THE BREAKPOINT IS PART OF THE CONDITION, NOT AN OPTIMISATION.
   .hero__demo is display:none under 1000px. An element inside display:none
   never starts its animations, so with `backwards` fill it would sit pinned at
   the keyframe's FROM value — opacity 0 — for as long as it stayed hidden. Any
   viewport that then crossed 1000px without a reload (a rotated tablet, a
   desktop window being widened) would reveal an empty card. Declaring the
   motion only where the element is actually displayed means the animation
   cannot exist in a state it will never be allowed to run out of. */
@media (min-width:1000px) and (prefers-reduced-motion:no-preference){
  /* The five stops settle in sequence, then the two statements land. Total
     sequence is ~4.4s, inside the 4-6s the brief asks for. `backwards` is what
     holds each row at the keyframe's start value during its delay; without it
     every row would paint first and then jump. */
  .livetour__stops li{animation:lt-in .5s cubic-bezier(.22,1,.36,1) backwards}
  .livetour__stops li:nth-child(1){animation-delay:.15s}
  .livetour__stops li:nth-child(2){animation-delay:.45s}
  .livetour__stops li:nth-child(3){animation-delay:.75s}
  .livetour__stops li:nth-child(4){animation-delay:1.05s}
  .livetour__stops li:nth-child(5){animation-delay:1.35s}
  .livetour__rv{animation:lt-in .5s cubic-bezier(.22,1,.36,1) backwards}
  .livetour__rv--1{animation-delay:2.5s}
  .livetour__rv--2{animation-delay:3.9s}
}
@keyframes lt-in{
  from{opacity:0;transform:translateY(6px)}
  to{opacity:1;transform:none}
}
/* Action needed is the one state that has to be felt. */
.pill--action{
  color:#B4291F;background:var(--red-soft);border:1px solid var(--red-line);
}
.pill--ready{
  color:var(--orange-text);background:var(--orange-soft);border:1px solid #F6D5C6;
}

/* ── Micro-proof ───────────────────────────────────────────────────────── */
.microproof{
  background:var(--surface-primary);
  border-bottom:1px solid var(--border-subtle);
  padding:clamp(26px,3.2vw,40px) 0;
}
.microproof__in{display:flex;flex-direction:column;align-items:center;gap:var(--sp-4)}
.microproof__flow{
  display:flex;align-items:stretch;flex-wrap:wrap;justify-content:center;
  gap:clamp(12px,2.4vw,34px);
  list-style:none;margin:0;padding:0;
}
.microproof__flow li{
  position:relative;display:flex;flex-direction:column;gap:2px;
  padding-right:clamp(12px,2.4vw,34px);text-align:center;
}
.microproof__flow li:last-child{padding-right:0}
/* The adoption fact sits apart from the three-step flow: no arrow into it, and
   none out of the step before it. Set explicitly in the markup rather than by
   position, so adding a step later cannot silently re-chain it. */
.microproof__flow li.no-arrow::after{display:none}
.microproof__flow li.is-aside{
  padding-left:clamp(12px,2.4vw,34px);
  border-left:1px solid var(--border-subtle);
}
.microproof__flow li.is-aside b{color:var(--brand-orange)}
/* The arrow is the whole point: it shows the direction of the model. */
.microproof__flow li:not(:last-child)::after{
  content:'';position:absolute;right:-4px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-top:2px solid var(--border-strong);
  border-right:2px solid var(--border-strong);
  transform:rotate(45deg);
}
.microproof__flow b{
  font-size:clamp(16px,1.5vw,19px);font-weight:700;letter-spacing:-.015em;
  color:var(--text-primary);line-height:1.25;
}
.microproof__flow span{font-size:13px;color:var(--text-secondary)}
.microproof__note{
  margin:0;font-size:13.5px;font-weight:600;color:var(--text-secondary);
}
@media (max-width:640px){
  .microproof__flow{flex-direction:column;gap:14px}
  .microproof__flow li{padding-right:0}
  .microproof__flow li:not(:last-child)::after{
    right:auto;left:50%;top:auto;bottom:-11px;margin:0;transform:rotate(135deg);
  }
  .microproof__flow li.is-aside{padding-left:0;border-left:0;padding-top:14px;border-top:1px solid var(--border-subtle)}
}

/* ── Control: three steps, then the request as the agent sees it ───────── */
.steps3{
  display:grid;gap:var(--sp-4);
  grid-template-columns:1fr;
  list-style:none;margin:0 0 var(--sp-6);padding:0;
  counter-reset:none;
}
@media (min-width:760px){ .steps3{grid-template-columns:repeat(3,1fr)} }
.steps3 li{
  display:flex;flex-direction:column;gap:6px;
  padding:var(--sp-5);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
}
.steps3__n{
  width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:var(--brand-navy);color:#fff;font-size:13px;font-weight:700;
}
.steps3 b{font-size:var(--fs-sm);font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.steps3 span{font-size:14.5px;line-height:1.55;color:var(--text-secondary)}

.reqprev{
  max-width:560px;margin:0 auto var(--sp-8);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
  overflow:hidden;
  box-shadow:0 1px 2px rgba(14,27,42,.04), 0 24px 50px -30px rgba(14,27,42,.4);
}
.reqprev__h{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;
  padding:14px 18px;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-secondary);
}
.reqprev__addr{font-size:15px;font-weight:700;color:var(--text-primary);letter-spacing:-.01em}
.reqprev__when{font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.reqprev__meta{margin:0;padding:16px 18px 4px}
.reqprev__meta dt{
  font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--text-secondary);margin-bottom:4px;
}
.reqprev__meta dd{margin:0 0 14px;font-size:14px;color:var(--text-primary);line-height:1.55}
.reqprev__msg{
  padding:12px 14px;border-radius:10px;
  background:var(--surface-secondary);border:1px solid var(--border-soft);
  font-size:13.5px;color:var(--text-secondary);
}
.reqprev__acts{display:flex;gap:10px;padding:0 18px 16px;flex-wrap:wrap}
.reqprev__edit,.reqprev__send{
  padding:10px 16px;border-radius:10px;font-size:14px;font-weight:600;
}
.reqprev__edit{
  border:1px solid var(--border-subtle);background:var(--surface-primary);
  color:var(--text-primary);
}
.reqprev__send{background:var(--orange);color:#fff;flex:1;text-align:center}
.reqprev__note{
  margin:0;padding:11px 18px;border-top:1px solid var(--border-subtle);
  background:var(--surface-secondary);
  font-size:12.5px;font-weight:600;color:var(--text-secondary);text-align:center;
}

/* ── Listing agent: the receiving side ─────────────────────────────────── */
.lacard{
  max-width:340px;margin:0 0 var(--sp-6);
  padding:20px;border-radius:16px;
  background:var(--surface-primary);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.65);
}
.lacard__eyebrow{
  margin:0;font-size:11px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--text-secondary);
}
.lacard__addr{margin:8px 0 0;font-size:18px;font-weight:700;letter-spacing:-.015em;color:var(--text-primary)}
.lacard__when{margin:2px 0 0;font-size:14px;color:var(--text-secondary);font-variant-numeric:tabular-nums}
.lacard__ask{margin:14px 0 12px;font-size:14.5px;color:var(--text-primary)}
.lacard__act{
  display:block;padding:12px 14px;margin-bottom:8px;
  border-radius:10px;border:1px solid var(--border-subtle);
  font-size:14px;font-weight:600;color:var(--text-primary);text-align:center;
}
.lacard__act--yes{background:var(--brand-navy);border-color:var(--brand-navy);color:#fff}
.lacard__foot{
  margin:12px 0 0;font-size:12.5px;font-weight:600;color:var(--text-secondary);text-align:center;
}

/* ── Buyer payoff ──────────────────────────────────────────────────────── */
.payoff__grid{display:grid;gap:clamp(28px,4vw,56px);align-items:center}
@media (min-width:900px){ .payoff__grid{grid-template-columns:1fr 1fr} }
.payoff__sub{margin-top:var(--sp-4);max-width:44ch}
.payoff__demo{display:flex;justify-content:center}
.bitin{
  width:min(340px,100%);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:16px;overflow:hidden;
  box-shadow:0 2px 6px rgba(14,27,42,.05), 0 30px 60px -32px rgba(14,27,42,.42);
}
.bitin__h{padding:16px 18px;background:var(--brand-navy);color:#fff}
.bitin__h b{display:block;font-size:16px;font-weight:700;letter-spacing:-.015em}
.bitin__h span{display:block;margin-top:2px;font-size:13px;color:var(--text-inverse-soft)}
.bitin__stops{list-style:none;margin:0;padding:6px 0}
.bitin__stops li{
  display:grid;grid-template-columns:64px 1fr;gap:2px 12px;
  padding:11px 18px;align-items:baseline;
}
.bitin__stops li + li{border-top:1px solid var(--border-soft)}
.bitin__stops span{
  grid-row:span 2;font-size:12.5px;font-weight:700;color:var(--orange-text);
  font-variant-numeric:tabular-nums;
}
.bitin__stops b{font-size:14px;font-weight:600;color:var(--text-primary);line-height:1.3}
.bitin__stops i{font-style:normal;font-size:12.5px;color:var(--text-secondary)}
.bitin__f{
  margin:0;padding:11px 18px;border-top:1px solid var(--border-subtle);
  background:var(--surface-secondary);
  font-size:12px;color:var(--text-secondary);text-align:center;
}

/* ── FAQ: two columns on a desktop (brief §19) ─────────────────────────────
   Twelve stacked accordions is a long scroll for a section whose job is to
   let someone find THEIR objection. Two columns halve the travel and make
   the set scannable at a glance. Masonry-free on purpose: each item is an
   independent <details>-style block, so a column break never splits a
   question from its answer.

   Mobile is untouched. One column, same accordion, same touch targets. */
@media (min-width:960px){
  .faq__grid{
    grid-template-columns:1fr 1fr;
    gap:12px clamp(20px,2.4vw,32px);
    max-width:var(--measure-wide);
  }
  /* An open answer grows its own cell rather than shifting its neighbour. */
  .faq__item{align-self:start}
}

/* The branding band's padding pushed it 26px past a 390px viewport: its grid
   children were sizing to content rather than to the track. Measured, not
   assumed (scrollWidth 416 in a 390 container). */
@media (max-width:640px){
  .brandband{padding:20px;gap:22px}
  .brandband__copy,.brandband__demo{min-width:0}
  .brandband .addon__list{padding-left:18px}
  .bcard,.lacard,.bitin{width:100%;max-width:100%}
}
.brandband__copy,.brandband__demo{min-width:0}

/* ==========================================================================
   FINAL ENTERPRISE PASS (2026-08-30)
   --------------------------------------------------------------------------
   Three corrections the page kept making: product demonstrations sized like
   thumbnails inside a wide canvas, one container width used for every kind of
   content, and a rounded white card as the default answer to every idea.
   ========================================================================== */

/* ── §13 Product demonstrations get their own, wider container ─────────── */
.tour__grid,
.reqprev,
.brandband,
.payoff__grid,
.vs{
  max-width:var(--showcase);
  margin-inline:auto;
}
/* §15: the map and schedule are the argument, so they get the room. */
@media (min-width:1100px){
  .tour__grid{grid-template-columns:1.15fr 1fr;gap:clamp(24px,2.6vw,40px)}
}

/* ── §14 Major product sections breathe more than transitions ──────────── */
#how-it-works,
#control,
.payoff{ padding-block:var(--sec-y-major); }

/* ── §7 Control as a connected process, not three floating cards ───────── */
.steps3{
  position:relative;
  max-width:var(--showcase);margin-inline:auto;
}
@media (min-width:760px){
  /* The rail: one line through the three steps, so they read as a sequence
     rather than as three unrelated claims. Drawn behind the numbers. */
  .steps3::before{
    content:'';position:absolute;left:14%;right:14%;top:calc(var(--sp-5) + 14px);
    height:2px;background:var(--border-subtle);z-index:0;
  }
  .steps3 li{background:transparent;border:0;padding:var(--sp-5) var(--sp-4);text-align:center;align-items:center}
  .steps3 li > *{position:relative;z-index:1}
  .steps3__n{
    box-shadow:0 0 0 6px var(--surface-primary);
  }
}
.steps3 li{position:relative}

/* §7: the request preview is product proof, so it is sized like proof. */
.reqprev{max-width:720px}
.reqprev__msg{font-size:14.5px}
.reqprev__meta dd{font-size:15px}

/* ── §8 Listing agent: copy left, a real response interface right ──────── */
@media (min-width:900px){
  .strip__grid{grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,4vw,64px)}
}
.lacard{
  max-width:400px;margin-inline:auto;
  padding:24px;
}
.lacard__addr{font-size:20px}
.lacard__ask{font-size:15.5px}
.lacard__act{padding:14px;font-size:15px}
/* The five proofs become a quiet list under the copy, not a competing card. */
.strip .proofs{margin-top:var(--sp-6)}

/* ── §9 The buyer itinerary is a deliverable, not a thumbnail ───────────── */
.bitin{width:min(420px,100%)}
.bitin__h{padding:20px}
.bitin__h b{font-size:18px}
.bitin__stops li{padding:14px 20px}
.bitin__stops b{font-size:15px}
.bitin__stops i{font-size:13.5px}
.bitin__stops span{font-size:13.5px}

/* ── §21 The branded example needs to be readable ───────────────────────── */
.bcard{width:min(400px,100%)}
.bcard__stops b{font-size:14px}

/* ── §16 Body copy stops being 12px on a phone ──────────────────────────── */
@media (max-width:640px){
  .sec-sub,.strip__d,.brandband__d,.payoff__sub{font-size:16px}
  .steps3 span,.reqprev__meta dd,.lacard__ask{font-size:15px}
  .livetour__b b{font-size:15px}
  .livetour__b span{font-size:13.5px}
  .microproof__flow span{font-size:14px}
}

/* ── §26 Footer ownership line ──────────────────────────────────────────── */
/* .foot__owner and .foot__co are retired with the ownership sentence they
   styled. The brand column now ends on its tagline, so the gap that sentence
   used to fill is closed rather than left hanging. */
.foot__brand .foot__tag{margin-bottom:0}

/* ── §23 The close earns its space ──────────────────────────────────────── */
.final__t{max-width:16ch;margin-inline:auto}

/* ── §19 Teams and Brokerages: an organizational band, not a plan card ──── */
.teamband{
  display:grid;gap:var(--sp-5) clamp(24px,3vw,48px);
  align-items:center;
  max-width:var(--showcase);margin:var(--sp-8) auto 0;
  padding:clamp(24px,2.6vw,34px) clamp(24px,3vw,40px);
  background:var(--brand-navy);color:var(--text-inverse);
  border-radius:var(--r-card);
}
@media (min-width:900px){
  .teamband{grid-template-columns:1.3fr 1fr auto}
}
.teamband__t{
  margin:0;font-size:clamp(19px,1.8vw,23px);font-weight:700;letter-spacing:-.018em;
  color:var(--text-inverse);line-height:1.25;
}
.teamband__d{
  margin:8px 0 0;font-size:15px;line-height:1.6;color:var(--text-inverse-soft);
  max-width:42ch;
}
.teamband__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.teamband__list li{
  position:relative;padding-left:20px;
  font-size:14.5px;color:var(--text-inverse-soft);line-height:1.4;
}
.teamband__list li::before{
  content:'';position:absolute;left:0;top:.55em;
  width:9px;height:2px;border-radius:1px;background:var(--orange);
}
.teamband__cta .btn--outline{
  border-color:rgba(255,255,255,.4);color:var(--text-inverse);background:transparent;
}
.teamband__cta .btn--outline:hover{
  background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.62);
}
@media (max-width:640px){
  .teamband__cta,.teamband__cta .btn{width:100%}
}

/* ── §22 FAQ: quieter rows, better rhythm ───────────────────────────────── */
.faq__q{font-size:15.5px;line-height:1.4;padding-block:16px}
@media (max-width:640px){ .faq__q{font-size:16px} }

/* ── §18 Mobile safety net ───────────────────────────────────────────────
   Grid and flex children default to min-width:auto, which means a long
   address or a wide button can push a track past the viewport instead of
   wrapping. Measured overflow on .brandband was exactly this. These are the
   containers that hold product UI or long strings, made explicitly shrinkable
   so nothing can force a sideways scroll on a phone. */
@media (max-width:900px){
  .teamband{grid-template-columns:1fr;text-align:left}
  .teamband__copy,.teamband__list,.teamband__cta{min-width:0}
  .teamband__cta .btn{width:100%}
}
@media (max-width:640px){
  .price__grid,.vs,.tour__grid,.payoff__grid,.strip__grid,.faq__grid,
  .brandband,.steps3,.microproof__flow{grid-template-columns:1fr}
  .price__grid > *,.vs > *,.tour__grid > *,.payoff__grid > *,
  .strip__grid > *,.faq__grid > *,.steps3 > *{min-width:0}
  .faq__q{word-break:normal;overflow-wrap:anywhere}
  .livetour__b b,.bitin__stops b,.bcard__stops b{overflow-wrap:anywhere}
  /* Status chips wrap to their own line rather than squeezing the address. */
  .livetour__stops li{flex-wrap:wrap}
  .livetour__b{flex:1 1 100%}
  .livetour__stops li .pill{margin-left:36px}
}

/* 360px is the narrowest phone the brief names, and the plan card's own
   padding put it 10px over there. Measured, not guessed. */
@media (max-width:380px){
  .card__in{padding-inline:18px}
  .plan__price{flex-wrap:wrap}
  .brandband,.teamband{padding-inline:18px}
}

/* ==========================================================================
   THE FLAGSHIP: ONE TIME CHANGES
   --------------------------------------------------------------------------
   Editorial, not another card grid. Two timelines with the event between
   them, so the argument is read as a sequence rather than assembled from
   three feature boxes. Orange appears on exactly one row, the one that moved,
   which is the whole point of the section.
   ========================================================================== */
.change__head{max-width:var(--measure-wide)}
.change__grid{
  display:grid;gap:clamp(20px,2.6vw,34px);
  max-width:var(--showcase);margin-inline:auto;
  align-items:start;
}
@media (min-width:940px){
  .change__grid{grid-template-columns:1fr 250px 1fr;align-items:center}
}
.change__label{
  margin:0 0 12px;font-size:11.5px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--text-secondary);
}

/* ── The timeline ───────────────────────────────────────────────────────
   THREE COLUMNS, and the rail gets its own. The first cut drew the line at
   left:33px and the node at 29px while the time column occupied 0 to 52px,
   so the rail ran straight through 10:00, 11:45 and 12:35. A decorative line
   crossing an operational number is not a style problem, it is the number
   becoming unreadable.

       [ TIME ]  [ RAIL ]  [ ADDRESS ]
         56px      22px       1fr

   One variable positions the line AND the node, so they cannot drift apart
   from each other or from the column, at any width. Nothing is nudged. */
.tline{
  --t-col:56px;      /* time column   */
  --rail:22px;       /* rail column   */
  --dot:11px;
  list-style:none;margin:0;padding:0;position:relative;
}
.tline li{
  position:relative;
  display:grid;
  grid-template-columns:var(--t-col) var(--rail) minmax(0,1fr);
  align-items:baseline;
  padding:10px 0;
}
.tline__t{
  grid-column:1;
  text-align:right;
  font-size:13.5px;font-weight:700;color:var(--text-secondary);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.tline__a{
  grid-column:3;
  font-size:14.5px;color:var(--text-primary);line-height:1.35;
  min-width:0;overflow-wrap:anywhere;
}
.tline__a em{
  display:block;font-style:normal;margin-top:3px;
  font-size:12.5px;font-weight:600;color:var(--text-secondary);
}

/* The connecting line lives in column 2 and nowhere else. Segments are drawn
   per row rather than one line down the list, so the rail starts at the first
   node and ends at the last instead of overshooting into the padding. */
.tline li::before{
  content:'';position:absolute;left:calc(var(--t-col) + (var(--rail) / 2) - 1px);
  top:0;bottom:0;width:2px;background:var(--border-subtle);
}
.tline li:first-child::before{top:50%}
.tline li:last-child::before{bottom:50%}
/* The node, centered in the same column by the same variables. */
.tline li::after{
  content:'';position:absolute;
  left:calc(var(--t-col) + (var(--rail) / 2) - (var(--dot) / 2));
  top:calc(50% - (var(--dot) / 2));
  width:var(--dot);height:var(--dot);border-radius:50%;
  background:var(--surface-primary);border:2px solid var(--border-strong);
}

/* The one row that moved. */
.tline--after .is-moved .tline__t{color:var(--orange-text)}
.tline--after .is-moved::after{background:var(--orange);border-color:var(--orange)}
.tline--after .is-moved .tline__a{font-weight:600}
/* The rows that moved with it: a consequence, not the event. */
.tline--after .is-shift .tline__t{color:var(--text-primary)}
.tline--after .is-shift::after{border-color:var(--orange)}

.change__note{
  margin:14px 0 0;padding-left:22px;
  font-size:13.5px;line-height:1.55;color:var(--text-secondary);
  border-left:2px solid var(--orange);
}

/* The event between the two timelines. */
.change__event{display:flex;flex-direction:column;align-items:center;gap:8px}
.evt{
  width:100%;padding:14px 16px;border-radius:12px;
  background:var(--surface-secondary);border:1px solid var(--border-subtle);
}
.evt--you{background:var(--brand-navy);border-color:var(--brand-navy)}
.evt__who{
  margin:0;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-secondary);
}
.evt--you .evt__who{color:#B9C6D6}
.evt__msg{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--text-primary)}
.evt--you .evt__msg{color:#fff}
.evt__arrow{margin:0;font-size:20px;color:var(--orange);line-height:1}
@media (max-width:939px){
  .change__event{order:2}
  .evt__arrow{transform:none}
}

/* ── Hero and closing eyebrows (licensed-professional positioning) ─────── */
.hero__eyebrow{
  margin:0 0 14px;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-inverse-soft);
}
.final__eyebrow{
  margin:0 0 10px;font-size:11.5px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--text-secondary);
}
@media (max-width:640px){
  .hero__eyebrow,.final__eyebrow{font-size:11px;letter-spacing:.09em}
  .tline__a{font-size:15px}
  .change__note{font-size:14px}
}

/* The flagship on a phone. Measured: .change__grid ran 581px inside 390,
   because the three tracks kept sizing to content. One column, and the two
   timelines and the event each get the full width in reading order:
   as booked, what happened, what it became. */
@media (max-width:939px){
  .change__grid{grid-template-columns:1fr}
  .change__grid > *{min-width:0;width:100%}
  .change__event{order:0}
  .tline__a{padding-left:0}
}
@media (max-width:640px){
  .tline{--t-col:50px;--rail:20px}
  .tline__t{font-size:13px}
  .change__note{font-size:13.5px}
}

/* ==========================================================================
   PROFESSIONAL BRANDING: give the artifact room, then structure it
   --------------------------------------------------------------------------
   The preview was 400px inside an equal split, which is where the reported
   damage came from: the identity row ran out of horizontal space, so the
   agent name and brokerage wrapped and the logo crowded them, and the
   itinerary addresses broke over three lines. Every one of those is a width
   problem wearing a typography costume, so width is fixed first and the font
   sizes are left alone.
   ========================================================================== */
@media (min-width:900px){
  /* The preview is the thing being sold, so it takes the larger share. */
  .brandband{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr)}
}
.brandband__copy{min-width:0}
/* The headline gets a real measure instead of stacking one word per line. */
.brandband__t{max-width:14ch}
@media (min-width:900px){ .brandband__t{max-width:none} }
.brandband__d{max-width:44ch}

.bcard{width:min(480px,100%)}

/* ── Identity header: [ HEADSHOT ] [ AGENT + BROKERAGE ] [ LOGO ] ───────── */
.bcard__hd{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:13px;
  padding:16px 18px;
}
.bcard__face{width:48px;height:48px}
.bcard__who{display:block;min-width:0}
.bcard__who b{
  display:block;font-size:16px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bcard__who span{
  display:block;margin-top:2px;font-size:13px;line-height:1.3;
  overflow-wrap:anywhere;
}
.bcard__logo{width:38px;height:38px;font-size:11.5px;border-radius:8px}

/* ── Itinerary rows: [ TIME ] [ ADDRESS ] ───────────────────────────────── */
.bcard__stops{padding:0 18px 6px}
.bcard__stops li{
  display:grid;grid-template-columns:64px minmax(0,1fr);
  align-items:baseline;gap:14px;
  padding:11px 0;
}
.bcard__stops span{
  width:auto;font-size:13px;white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.bcard__stops b{font-size:14.5px;line-height:1.35;min-width:0;overflow-wrap:normal}
.bcard__label{padding:14px 18px 8px}
.bcard__foot{padding:12px 18px;font-size:11.5px}

/* Mobile: copy first, preview second, preview takes the width it needs. */
@media (max-width:899px){
  .brandband{grid-template-columns:1fr}
  .brandband__copy{order:0}
  .brandband__demo{order:1}
  .bcard{width:100%}
  .bcard__who b{white-space:normal}
}
@media (max-width:400px){
  .bcard__stops li{grid-template-columns:56px minmax(0,1fr);gap:10px}
  .bcard__hd{gap:10px;padding:14px}
  .bcard__stops,.bcard__label,.bcard__foot{padding-inline:14px}
}

/* THE ACTUAL CAUSE of the squeezed branding preview. When the add-on was
   lifted out of the $49 card it came to rest INSIDE .price__grid, so it was
   living in that grid's second column at 431px, not at the band width it was
   written for. The card measured 165px. Every reported symptom followed from
   that one fact: the agent name clipped, the brokerage fragmented, and the
   addresses broke over four lines.

   They are full-width rows of the pricing block, so they say so. */
.price__grid > .brandband,
.price__grid > .teamband{ grid-column:1 / -1; }

/* Footer children shrink with their track. .foot__brand img carries
   max-width:none for the lockup, which is the one element in there that can
   push a column wider than its container. Defensive: the grid is already
   single-column below 700px and the live page does not scroll sideways. */
.foot__grid > *{min-width:0}
.foot__brand img{max-width:100%}

/* The tier tag is an inline-flex pill, so the <span class="tm"> inside the
   name became its own flex item and broke "ShowPoppy Signature" across three
   lines. The name is one string; it stays one line. */
.addon__tag{white-space:nowrap}
.addon__tag .tm{display:inline;font-size:.62em;vertical-align:super;line-height:0}

/* ==========================================================================
   §11 / §13  PRODUCT VISUAL SIZE
   --------------------------------------------------------------------------
   The five artifacts a visitor must read without zooming, measured at 1440:
   hero tour 532, time change 1180, route proof 1180, request 720, itinerary
   420. The two smallest were the two that carry the most persuasion, so they
   grow. Nothing else moves.
   ========================================================================== */
@media (min-width:1200px){
  /* The hero card is the first proof and was the narrowest. ~25% wider, taken
     from the copy column, which still holds a comfortable measure. */
  .hero__grid--split{grid-template-columns:0.92fr 1.08fr}
  .livetour{max-width:none}
}
/* The itinerary is what the agent imagines their buyer opening, so it stops
   being a phone-sized thumbnail on a desktop canvas. */
@media (min-width:900px){
  .bitin{width:min(460px,100%)}
  .bitin__h{padding:22px}
  .bitin__h b{font-size:19px}
  .bitin__stops li{padding:15px 22px}
  .bitin__stops b{font-size:15.5px}
  .bitin__stops span{font-size:14px}
  .bitin__stops i{font-size:14px}
}

/* ==========================================================================
   FAQ + FINAL CTA  ·  responsive architecture
   --------------------------------------------------------------------------
   ROOT CAUSE OF THE FAQ BREAKOUT was markup, not CSS: five stray </div>
   closers (one per FAQ item removed in an earlier pass) closed .faq__grid
   early and then .wrap, so later items rendered as children of .wrap (1184px)
   and of the section itself (full viewport). The nesting is repaired in
   index.html; nothing below is compensating for it.

   What follows is the responsive system for the two sections, built on the
   page's existing containers and tokens.
   ========================================================================== */

/* ── FAQ container ──────────────────────────────────────────────────────
   ONE boundary for every row, at every width. --measure-wide (760px) is the
   page's existing intro measure, so the FAQ shares the container the rest of
   the page already uses rather than inventing a width. */
.faq__grid{
  max-width:var(--measure-wide);
  margin-inline:auto;
  gap:10px;
}
/* Two columns only where a 364px column is still comfortable to read. Below
   that it is one column, well before anything gets cramped. */
@media (min-width:960px){
  .faq__grid{grid-template-columns:1fr 1fr;gap:12px clamp(18px,2vw,28px)}
  .faq__item{align-self:start}
}
@media (max-width:959px){
  .faq__grid{grid-template-columns:1fr}
}
/* Every item obeys the container. Stated once, so no item can escape again. */
.faq__item{width:100%;min-width:0;max-width:100%}

/* ── FAQ question row: [ text ][ fixed toggle ] ──────────────────────────
   A durable two-part grid. The toggle cannot shrink, cannot drift, and keeps
   a 44px target even though the visible sign is smaller. */
.faq__q{
  display:grid;
  grid-template-columns:minmax(0,1fr) 44px;
  align-items:center;
  gap:14px;
  width:100%;
  min-height:56px;
  padding:16px 18px;
  text-align:left;
}
.faq__qt{min-width:0;overflow-wrap:anywhere;line-height:1.4}
.faq__sign{
  justify-self:end;
  width:44px;height:44px;              /* touch target */
  display:grid;place-items:center;
  flex:none;
}

/* ── FAQ answer measure ─────────────────────────────────────────────────
   55ch to 65ch on a desktop column, which at 364px is naturally satisfied;
   the cap matters in the single-column state where the row is 760px wide. */
.faq__a{max-width:62ch;line-height:1.6}
.faq__panelin{padding:0 18px 18px}

@media (max-width:640px){
  /* Questions read at roughly 30ch here, which is the comfortable phone
     measure: long enough not to fragment, short enough to scan. */
  .faq__q{padding:15px 16px;min-height:52px;gap:10px}
  .faq__panelin{padding:0 16px 16px}
  .faq__a{font-size:15.5px}
  .faq{padding-block:clamp(40px,9vw,64px)}
  .faq .sec-head{margin-bottom:clamp(20px,5vw,30px)}
}

/* ══ FINAL CTA ═══════════════════════════════════════════════════════════
   Desktop keeps the route and the bird. Mobile gets its own composition
   rather than the desktop one squeezed: decoration steps aside so the
   conversion stack owns the width. */
.final__in{max-width:var(--measure-wide);margin-inline:auto}
.final__d{margin-inline:auto;max-width:46ch}
.final__fine{margin-inline:auto;max-width:42ch}

@media (max-width:900px){
  /* Reduce the decorative spread BEFORE it starts crowding the copy. */
  .final__path{opacity:.35;transform:scale(.8)}
  .final__bird{opacity:.5;width:220px;height:auto}
}
@media (max-width:640px){
  /* A. Hide the route, keep one restrained bird. Conversion content wins. */
  .final__path{display:none}
  .final__bird{
    position:static;display:block;margin:0 auto 14px;
    width:104px;height:auto;opacity:.9;
  }
  .final{padding-block:clamp(52px,13vw,72px)}
  /* 3 to 4 intentional lines at common phone widths. */
  .final__t{font-size:clamp(27px,7.4vw,34px);line-height:1.18;max-width:17ch}
  .final__d{max-width:34ch;font-size:16px;line-height:1.55}
  .final__fine{max-width:36ch;font-size:13.5px}
  .final__eyebrow{margin-bottom:8px}
  /* Buttons stack, share a width, and keep a comfortable target. */
  .final__cta{display:grid;gap:10px;width:100%;max-width:340px;margin-inline:auto}
  .final__cta .btn{width:100%;min-height:50px}
}

/* At 360 the headline ran to five lines, which reads as a fragment rather
   than a statement. A slightly lower floor and one more character of measure
   holds it to four at every phone width the brief names. */
@media (max-width:380px){
  .final__t{font-size:clamp(25px,7vw,29px);max-width:19ch}
  .final__d{max-width:33ch}
  .final__fine{max-width:34ch}
}

/* ── Pricing 2026-09: monthly/annual toggle, annual line, suite line ───────
   Added with the catalog 2026-09 rollout. Nothing above this block changed;
   the Agent Plan card, the Signature band and the team band keep their own
   rules and this only adds the pieces the new catalog needs. */
.ptoggle{display:flex;align-items:center;gap:0;margin:18px 0 10px;flex-wrap:wrap;justify-content:center}
.ptoggle__btn{
  font-family:inherit;font-weight:700;font-size:.9rem;
  padding:9px 20px;border:1.5px solid var(--line,#E4E7EC);background:#fff;
  color:var(--muted,#5F6B7A);cursor:pointer;min-height:42px;
}
.ptoggle__btn:first-of-type{border-radius:8px 0 0 8px}
.ptoggle__btn:last-of-type{border-radius:0 8px 8px 0;border-left:0}
.ptoggle__btn.is-on{background:var(--ink,#12202E);border-color:var(--ink,#12202E);color:#fff}
.ptoggle__note{margin-left:14px;font-size:.88rem;font-weight:600;color:var(--accent,#F15A2A)}
.sec-sub--trial{font-weight:600}
.plan__alt{margin:2px 0 12px;font-size:.9rem;color:var(--muted,#5F6B7A)}
.suiteline{
  grid-column:1 / -1;text-align:center;margin:26px 0 0;font-size:.95rem;
  color:var(--muted,#5F6B7A);
}
.suiteline a{font-weight:700;color:inherit}

/* ══════════════════════════════════════════════════════════════════════════
   SIGNATURE  ·  why it exists, before the price is asked for
   --------------------------------------------------------------------------
   Two columns holding two REAL cards drawn by window.ShowPoppyCard.render.
   The stage sets a comfortable card width and gets out of the way — .card-x
   is `width:100%` with `container-type:inline-size`, so it sizes itself off
   the stage and every internal breakpoint keeps working untouched.
   ═════════════════════════════════════════════════════════════════════════ */
.sigwhy__grid{
  display:grid;gap:var(--sp-6);
  grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:860px){
  .sigwhy__grid{grid-template-columns:1fr 1fr;gap:var(--sp-8)}
}
.sigwhy__col{margin:0;display:flex;flex-direction:column;gap:var(--sp-4)}
.sigwhy__cap{display:flex;flex-direction:column;gap:4px}
.sigwhy__tier{
  align-self:flex-start;
  padding:4px 11px;border-radius:var(--r-pill);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-secondary);
  background:var(--surface-secondary);border:1px solid var(--border-subtle);
}
.sigwhy__tier--sig{
  color:#fff;background:var(--brand-navy);border-color:var(--brand-navy);
}
.sigwhy__what{font-size:14px;color:var(--text-secondary);line-height:1.45}
/* The stage is capped so a card never stretches to an unreadable width on a
   wide desktop, and centred so the two columns stay optically paired. */
.sigwhy__stage{width:100%;max-width:420px}
.sigwhy__fallback{
  margin:0;padding:var(--sp-6);
  border:1px dashed var(--border-strong);border-radius:var(--r-card);
  font-size:14px;color:var(--text-secondary);
}
/* The Signature column carries a whisper of emphasis and nothing more: the
   argument is the card beside it, not a border treatment. */
@media (min-width:860px){
  .sigwhy__col--sig .sigwhy__stage{
    padding:var(--sp-4);margin:calc(var(--sp-4) * -1);
    border-radius:calc(var(--r-card) + 6px);
    background:var(--surface-secondary);
    max-width:calc(420px + var(--sp-4) * 2);
  }
}
.sigwhy__foot{
  margin:var(--sp-8) 0 0;
  font-size:var(--fs-sm);font-weight:600;color:var(--text-primary);
  text-align:center;
}
.sigwhy__price{
  display:block;margin-top:6px;
  font-size:14px;font-weight:500;color:var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   THE POPPY SUITE  ·  compact by design
   --------------------------------------------------------------------------
   Five names, five roles, one door. It is deliberately the plainest section
   on the page: it comes after the decision has been offered, and its job is
   to be available rather than to compete.
   ═════════════════════════════════════════════════════════════════════════ */
.suite{background:var(--surface-secondary);border-top:1px solid var(--border-subtle)}
.suite__grid{
  display:grid;gap:var(--sp-3);
  grid-template-columns:1fr;
  list-style:none;margin:0;padding:0;
}
@media (min-width:620px){.suite__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.suite__grid{grid-template-columns:repeat(6,1fr);gap:var(--sp-4)}}
.suite__item{
  display:flex;flex-direction:column;gap:2px;
  padding:var(--sp-5);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);border-radius:var(--r-card);
}
/* Each product's bird sits BESIDE its name, in the space the card already had
   to the right of two short lines of text. Stacking it above left that space
   empty and made every card taller for no gain.

   The five share one geometry and differ only in wing color, so the row reads
   as one family in five colorways — which is the point of the section.

   Sized by height with width:auto so the intrinsic 1944x1340 box (carried on
   the tag to reserve space and prevent layout shift) cannot stretch it. */
.suite__row{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-2);
}
.suite__txt{display:flex;flex-direction:column;gap:2px;min-width:0}
/* Sized so the LONGEST role ("Reports and CMAs") still sets on one line beside
   it in the narrowest column the five-across grid produces. At 38px the bird
   took enough width to wrap three of the five, which made the row read as
   uneven rather than as a set. Wrapping is still allowed underneath — this is
   a fit, not a guarantee, and a clipped label would be worse than a wrapped
   one. */
.suite__bird{
  flex:none;
  height:30px;width:auto;
}
.suite__item b{font-size:var(--fs-sm);font-weight:700;letter-spacing:-.01em;color:var(--text-primary)}
.suite__txt span{font-size:13px;color:var(--text-secondary);line-height:1.4}
.suite__item a{
  margin-top:auto;padding-top:10px;
  display:inline-flex;align-items:center;
  min-height:44px;
  font-size:13.5px;font-weight:600;color:var(--text-accent);
}
.suite__item a:hover{text-decoration:underline}
/* The current product names itself rather than linking to itself. */
.suite__item--here{border-color:var(--border-strong);background:var(--surface-primary)}
.suite__item--here em{
  margin-top:auto;padding-top:10px;
  min-height:44px;display:inline-flex;align-items:center;
  font-size:12px;font-weight:700;font-style:normal;
  letter-spacing:.05em;text-transform:uppercase;color:var(--text-secondary);
}
.suite__cta{margin:var(--sp-10) 0 0;text-align:center}
.suite__cta .btn{gap:8px}

/* ==========================================================================
   HEADER BAR LAW — the last two pixels (owner, 2026-09-10)
   --------------------------------------------------------------------------
   index.html is the locked family reference and keeps its own stylesheet
   rather than the shared poppy-header.css, which is why the two corrections
   made across all six siblings had to be restated here by hand. Its markup is
   untouched; this is CSS only, appended so nothing above is disturbed.

   1. THE 44px FLOOR. The header CTA ran min-height:42px in the 380–559 band
      (line 699). 44 is the floor the law sets for a touch target, and the
      other six Poppys were corrected to it. Height costs no horizontal width,
      so nothing that fitted stops fitting — measured at 390px, where the row
      has the least slack of any width.

   2. THE 900px SQUEEZE. At 900 and 901 the nav had to scroll 17px and 16px,
      so the last link was only partly in view at a width the law names.
      Nothing was covered — it was reachable by scrolling — but OfficePoppy,
      ReportPoppy and FilePoppy all show every destination whole at 900px, and
      "all taken care of the same way" is the whole point. The pixels come out
      of control PADDING and the gaps between controls, exactly as the family
      spec says to buy them back: never out of the logo, never out of a 44px
      target, and never by dropping a destination into the mobile panel.
   ========================================================================== */
@media (min-width:380px) and (max-width:559px){
  .hdr .hdr__cta{min-height:44px}
}
@media (min-width:900px) and (max-width:1023px){
  .hdr .hdr__in{gap:var(--sp-3)}
  .hdr .nav a{padding:0 6px}
  .hdr .hdr__act{gap:6px}
  .hdr .suitesw__btn{padding:0 6px;gap:5px}
  .hdr .hdr__signin{padding:0 7px}
  .hdr .hdr__cta{padding:0 13px}
}
@media (min-width:900px) and (max-width:955px){
  .hdr .hdr__in{gap:10px}
  .hdr .nav a{padding:0 3px}
  .hdr .hdr__act{gap:5px}
  .hdr .suitesw__btn{padding:0 4px}
  .hdr .hdr__signin{padding:0 5px}
  .hdr .hdr__cta{padding:0 11px}
}