/* ==========================================================================
   filepoppy.com landing page
   --------------------------------------------------------------------------
   Built entirely on filepoppy-tokens.css. Nothing here declares :root.
   Section rhythm, measure, radii, elevation, and focus all come from the
   family tokens; this file only arranges them.
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
/* The page itself never scrolls sideways. Wide content (the folder listing)
   scrolls inside its own container instead. */
html,body{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
body{
  margin:0;
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--text-primary);
  background:var(--surface-warm);
}
img{max-width:100%;height:auto}
a{color:var(--text-accent)}
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
.strip :focus-visible,.final :focus-visible,.ftr :focus-visible{box-shadow:var(--focus-ring-inverse)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.wrap--doc{max-width:var(--maxw-doc)}

/* Grid and flex children default to min-width:auto, which lets wide content
   (a <pre>, a long unbroken string) stretch a column past the viewport and
   make the whole page pan side to side on a phone. Never that. */
.hero__in>*,.split>*,.steps>*,.grid>*,.ftr__in>*,.hdr__in>*{min-width:0}

h1,h2,h3{font-family:var(--font-display);line-height:1.15;margin:0 0 var(--sp-4)}
p{margin:0 0 var(--sp-4)}

.kicker{
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--text-accent);
  margin-bottom:var(--sp-2);
}
.sec-head{max-width:820px;margin-bottom:var(--sp-10)}
.sec-title{font-size:var(--fs-h2);font-weight:700}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-block;
  font-family:var(--font-ui);
  font-weight:600;
  font-size:var(--fs-sm);
  text-decoration:none;
  border-radius:var(--r-sm);
  padding:14px 26px;
  transition:transform .15s var(--ease),box-shadow .15s var(--ease);
}
.btn--primary{
  color:var(--text-inverse);
  background:linear-gradient(180deg,var(--violet),var(--violet-foot));
  box-shadow:var(--e-cta),var(--hairline);
}
.btn--primary:hover{box-shadow:var(--e-cta-hi);transform:translateY(-1px)}
.btn--ghost{
  color:var(--text-accent);
  background:var(--surface-primary);
  border:1.5px solid var(--violet);
}
.btn--sm{padding:10px 18px}
.btn--lg{padding:16px 34px;font-size:var(--fs-body)}

/* --- Header ------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:10;
  background:color-mix(in srgb,var(--surface-warm) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.hdr__in{display:flex;align-items:center;gap:var(--sp-6);padding-top:var(--sp-3);padding-bottom:var(--sp-3)}
.hdr__brand{display:flex;align-items:center;gap:var(--sp-3);text-decoration:none}
.hdr__word{font-family:var(--font-display);font-weight:700;font-size:22px;color:var(--text-primary)}
.hdr__word em{font-style:normal;color:var(--violet-text)}
.hdr__nav{display:flex;gap:var(--sp-5);margin-left:auto}
.hdr__nav a{color:var(--text-secondary);text-decoration:none;font-size:var(--fs-sm);font-weight:500}
.hdr__nav a:hover{color:var(--text-primary)}
@media (max-width:720px){.hdr__nav{display:none}}

/* --- Hero --------------------------------------------------------------- */
.hero{padding:var(--section-y) 0;background:
  radial-gradient(900px 480px at 85% -10%,var(--violet-soft),transparent 70%),
  var(--surface-warm)}
.hero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-12);align-items:center}
@media (max-width:900px){.hero__in{grid-template-columns:1fr}}
.hero__bird{width:180px;height:auto;margin-bottom:var(--sp-6)}
.hero__title{font-size:var(--fs-display);font-weight:800;letter-spacing:-.015em}
.hero__title em{font-style:normal;color:var(--violet-text)}
.hero__sub{font-size:var(--fs-lead);color:var(--text-secondary);max-width:56ch}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-6) 0 var(--sp-4)}
.hero__meta{font-size:var(--fs-label);color:var(--slate-soft)}

.hero__card{display:flex;justify-content:center}
.mock{
  width:min(360px,100%);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--e-3);
  padding:var(--pad-card);
  font-size:var(--fs-sm);
}
.mock__addr{font-family:var(--font-display);font-weight:700;font-size:20px;margin-bottom:2px}
.mock__meta{color:var(--text-secondary);font-size:var(--fs-label);margin-bottom:var(--sp-3)}
.mock__pill{display:inline-block;border-radius:var(--r-pill);padding:6px 12px;font-weight:600;font-size:var(--fs-label);margin-bottom:var(--sp-2)}
.mock__pill--needs{background:var(--warning-soft);color:var(--warning-text)}
.mock__need{color:var(--warning-text);font-size:var(--fs-label);margin-bottom:var(--sp-4)}
.mock__row{display:flex;justify-content:space-between;gap:var(--sp-3);padding:var(--sp-2) 0;border-top:1px solid var(--border-soft)}
.mock__ok{color:var(--success-text);font-size:var(--fs-label)}
.mock__btn{
  margin-top:var(--sp-4);
  text-align:center;
  font-weight:600;
  color:var(--text-inverse);
  background:linear-gradient(180deg,var(--violet),var(--violet-foot));
  border-radius:var(--r-sm);
  padding:12px;
}

/* --- Sections ----------------------------------------------------------- */
.section{padding:var(--section-y) 0}
.section--white{background:var(--surface-primary)}
.section--tint{background:var(--surface-secondary)}

.cols{columns:2;column-gap:var(--sp-12);max-width:1000px}
.cols p{break-inside:avoid}
@media (max-width:820px){.cols{columns:1}}

.steps{
  list-style:none;counter-reset:step;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);
  padding:0;margin:0;
}
@media (max-width:820px){.steps{grid-template-columns:1fr}}
.step{
  counter-increment:step;
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  box-shadow:var(--e-2);
  padding:var(--pad-card);
}
.step::before{
  content:counter(step,decimal-leading-zero);
  font-family:var(--font-display);
  font-weight:800;
  color:var(--violet-light);
  font-size:15px;
  letter-spacing:.1em;
}
.step__t{font-size:var(--fs-h3);margin-top:var(--sp-2)}
.status-needs{color:var(--warning-text);font-weight:600}
.status-ready{color:var(--success-text);font-weight:600}

/* --- Split sections ------------------------------------------------------ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-12);align-items:center}
@media (max-width:900px){.split{grid-template-columns:1fr}}
.split--rev .split__copy{order:2}
.split--rev .split__fig{order:1}
@media (max-width:900px){.split--rev .split__copy{order:1}.split--rev .split__fig{order:2}}
.promise{background:var(--surface-accent);border-radius:var(--r-md);padding:var(--sp-5)}

.logmock{
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  box-shadow:var(--e-3);
  padding:var(--pad-card);
  font-size:var(--fs-label);
}
.logmock__day{text-align:center;color:var(--text-secondary);font-weight:600;margin-bottom:var(--sp-4)}
.logmock__msg{border:1px solid var(--border-subtle);border-radius:var(--r-sm);padding:var(--sp-3) var(--sp-4);margin-bottom:var(--sp-3);max-width:88%}
.logmock__msg--in{background:#EFEFEF}
.logmock__msg--out{background:#DBE7F5;margin-left:auto}
.logmock__msg p{margin:0}
/* Dark enough for AA at 12px on the tinted message bubbles. */
.logmock__hdr{font-size:12px;color:#46515E;font-weight:600;margin-bottom:4px!important}
.logmock__foot{border-top:1px solid var(--border-subtle);padding-top:var(--sp-3);margin:var(--sp-4) 0 0;text-align:center;color:var(--slate-soft);font-size:12px}

.foldermock{
  background:var(--navy);
  color:#DCE4EE;
  border-radius:var(--r-md);
  box-shadow:var(--e-3);
  padding:var(--pad-card);
  overflow-x:auto;
}
.foldermock pre{margin:0;font:500 14px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace}

/* --- Family grid --------------------------------------------------------- */
.grid{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6);
}
@media (max-width:960px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.grid{grid-template-columns:1fr}}
.cell{
  background:var(--surface-warm);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-md);
  padding:var(--pad-card);
}
.cell__t{font-size:var(--fs-h3)}
.cell p{margin:0;color:var(--text-secondary);font-size:var(--fs-sm)}

/* --- Strip --------------------------------------------------------------- */
.strip{background:var(--surface-inverse);color:var(--text-inverse)}
.strip__in{max-width:820px;text-align:center}
.strip__t{font-size:var(--fs-h2);color:var(--text-inverse)}
.strip__p{color:var(--text-inverse-soft);font-size:var(--fs-lead);margin:0}

/* --- FAQ ----------------------------------------------------------------- */
.faq__list{margin:0}
.faq__item{border-top:1px solid var(--border-subtle);padding:var(--sp-6) 0}
.faq__item dt{font-family:var(--font-display);font-weight:700;font-size:var(--fs-h3);margin-bottom:var(--sp-2)}
.faq__item dd{margin:0;color:var(--text-secondary)}

/* --- Final CTA ----------------------------------------------------------- */
.final{
  background:
    radial-gradient(700px 400px at 50% 120%,rgba(108,75,224,.35),transparent 70%),
    var(--navy-raised);
  color:var(--text-inverse);
  padding:var(--section-y) 0;
}
.final__in{text-align:center;max-width:720px}
.final__bird{margin-bottom:var(--sp-4)}
.final__t{font-size:var(--fs-h2);color:var(--text-inverse)}
.final__p{color:var(--text-inverse-soft);font-size:var(--fs-lead);margin-bottom:var(--sp-8)}

/* --- Footer -------------------------------------------------------------- */
.ftr{background:var(--navy);color:var(--text-inverse-soft);padding:var(--sp-16) 0 var(--sp-8)}
.ftr__in{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr 1fr;gap:var(--sp-8)}
@media (max-width:960px){.ftr__in{grid-template-columns:1fr 1fr}}
.ftr__tag{font-size:var(--fs-label);margin-top:var(--sp-3)}
.ftr__col h3{font-size:var(--fs-label);color:var(--text-inverse);letter-spacing:.06em;text-transform:uppercase;margin-bottom:var(--sp-3)}
.ftr__col a{display:block;color:var(--text-inverse-soft);text-decoration:none;font-size:var(--fs-sm);padding:4px 0}
.ftr__col a:hover{color:var(--text-inverse)}
.ftr__legal{border-top:1px solid var(--border-inverse);margin-top:var(--sp-10);padding-top:var(--sp-6)}
.ftr__legal p{font-size:var(--fs-label);margin:0}

/* ==========================================================================
   POPPY PRODUCT HEADER SYSTEM  —  locked brand implementation
   --------------------------------------------------------------------------
   Additive. Nothing above this line was removed; the original .hdr rules are
   still in place and still apply. These rules come later in the cascade and
   only refine them, so the old header markup would still render if it came
   back.

   Brand law for this header (do not "improve" it):
     · the accent (--violet #6C4BE0) appears in exactly three places —
       the bird's wing, the word "File", and the primary CTA.
     · "Poppy", the descriptor THE RECORD, and every nav item are dark navy.
     · the bird is the canonical asset assets/filepoppy-bird.svg. Never redraw.
   ========================================================================== */

/* Sticky header is ~92px; anchored sections must not slide under it. */
#how-it-works,#pricing,#faq,#log,#family,#cta{scroll-margin-top:104px}

.hdr{background:color-mix(in srgb,var(--surface-warm) 92%,transparent)}
.hdr__in{
  min-height:92px;
  gap:var(--sp-4);
  padding-top:var(--sp-2);
  padding-bottom:var(--sp-2);
}

/* --- Product lockup: bird + wordmark + descriptor ------------------------ */
.hdr__brand{gap:var(--sp-3);align-items:center;flex:0 0 auto}
.hdr__bird{width:64px;height:44px;flex:0 0 auto}
.hdr__lockup{display:flex;flex-direction:column;justify-content:center;line-height:1}
.hdr__word{
  font-family:var(--font-display);
  font-weight:800;
  font-size:23px;
  letter-spacing:-.015em;
  line-height:1.05;
  white-space:nowrap;
}
/* THE COLOR LAW. First word accent, "Poppy" navy. Nothing else accented. */
.hdr__word-a{color:var(--violet)}
.hdr__word-b{color:var(--navy)}
.hdr__tm{font-size:.5em;font-weight:700;color:var(--navy);vertical-align:super;margin-left:1px}
.hdr__desc{
  font-family:var(--font-ui);
  font-size:10px;
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--navy);
  margin-top:4px;
  white-space:nowrap;
}

/* --- Desktop navigation -------------------------------------------------- */
.hdr__nav{align-items:center;gap:var(--sp-5);margin-left:auto}
.hdr__nav .hdr__link{
  color:var(--navy);
  text-decoration:none;
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  padding:8px 2px;
  border-radius:var(--r-xs);
  transition:opacity .15s var(--ease);
  opacity:.82;
}
.hdr__nav .hdr__link:hover{opacity:1;color:var(--navy)}
.hdr__rule{
  width:1px;height:24px;flex:0 0 auto;
  background:var(--border-subtle);
  margin:0 calc(var(--sp-1) * -1);
}
.hdr__cta{
  flex:0 0 auto;
  padding:12px 20px;
  font-size:15px;
  white-space:nowrap;
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
/* The primary CTA now sits INSIDE .hdr__nav, and `.hdr__nav a` (0,1,1) at the
   top of this file outranks `.btn--primary{color:var(--text-inverse)}` (0,1,0)
   — which rendered the button label in muted slate on the violet gradient.
   Restore the inverse label without touching either original rule. */
.hdr__nav a.hdr__cta{color:var(--text-inverse)}
.hdr__nav a.hdr__cta:hover{color:var(--text-inverse)}
.hdr__cta--m{display:none}

/* --- Poppy Suite switcher (desktop) -------------------------------------- */
.suite{position:relative}
.suite__btn{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-size:15px;font-weight:600;
  color:var(--navy);
  background:transparent;border:0;cursor:pointer;
  padding:8px 6px;border-radius:var(--r-xs);
  min-height:40px;
  opacity:.82;
  transition:opacity .15s var(--ease);
}
.suite__btn:hover,.suite__btn[aria-expanded="true"]{opacity:1}
.suite__dots{width:15px;height:15px;flex:0 0 auto;color:var(--slate)}
.suite__chev{width:10px;height:10px;flex:0 0 auto;transition:transform .18s var(--ease)}
.suite__btn[aria-expanded="true"] .suite__chev{transform:rotate(180deg)}

.suite__menu{
  position:absolute;top:calc(100% + 14px);right:0;
  width:352px;max-width:calc(100vw - 32px);
  background:var(--surface-primary);
  border:1px solid var(--border-subtle);
  border-radius:var(--r-lg);
  box-shadow:var(--e-3);
  padding:var(--sp-2);
  z-index:30;
}
.suite__menu[hidden]{display:none}
.suite__sep{height:1px;background:var(--border-soft);margin:var(--sp-2) var(--sp-3)}

/* One row = canonical bird + name + descriptor. No coloured card grounds. */
.suite__item{
  display:flex;align-items:center;gap:var(--sp-3);
  padding:9px var(--sp-3);
  min-height:48px;
  border-radius:var(--r-sm);
  text-decoration:none;
  transition:background .13s var(--ease);
}
.suite__item:hover{background:var(--surface-warm)}
.suite__mark{width:36px;height:25px;flex:0 0 auto;object-fit:contain}
.suite__mark--parent{width:26px;height:26px;border-radius:7px}
.suite__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.suite__name{
  font-family:var(--font-display);
  font-weight:800;font-size:15px;letter-spacing:-.01em;
  color:var(--navy);
  white-space:nowrap;
}
.suite__name b{font-weight:800;color:var(--a)}      /* first word only */
.suite__name sup{font-size:.5em;font-weight:700;color:var(--navy);vertical-align:super}
.suite__desc{
  font-size:9.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-top:3px;white-space:nowrap;
}
.suite__here{
  margin-left:auto;flex:0 0 auto;
  font-size:11px;font-weight:600;letter-spacing:.01em;
  color:var(--slate);
  background:var(--surface-warm);
  border:1px solid var(--border-soft);
  border-radius:var(--r-pill);
  padding:3px 9px;
}
.suite__item--here{background:var(--surface-warm)}

/* The canonical family accents. These are the locked product hexes from the
   Poppy header spec §1 — read out of the canonical bird SVGs. Not new shades,
   and used only on each product's own first word, exactly as the law allows. */
.suite__item--office {--a:#D6361C}
.suite__item--show   {--a:#F15A2A}
.suite__item--mls    {--a:#1F6FDB}
.suite__item--picture{--a:#0FA294}
.suite__item--report {--a:#E8A020}
.suite__item--file   {--a:var(--violet)}
.suite__item--touch  {--a:#D9377A}

/* --- Mobile -------------------------------------------------------------- */
.hdr__burger{
  display:none;
  width:44px;height:44px;flex:0 0 auto;
  align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--border-subtle);
  border-radius:var(--r-sm);color:var(--navy);cursor:pointer;
}
.hdr__burger svg{width:18px;height:18px}
.hdr__burger[aria-expanded="true"] .i-open{display:none}
.hdr__burger[aria-expanded="false"] .i-close{display:none}

.mnav{
  border-top:1px solid var(--border-soft);
  background:var(--surface-primary);
  max-height:calc(100vh - 68px);
  overflow-y:auto;
}
.mnav[hidden]{display:none}
.mnav__in{padding:var(--sp-4) 0 var(--sp-6)}
.mnav__link{
  display:flex;align-items:center;min-height:48px;
  color:var(--navy);text-decoration:none;
  font-size:16px;font-weight:600;
  border-bottom:1px solid var(--border-soft);
}
.mnav__group{
  font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--slate);margin:var(--sp-6) 0 var(--sp-2);
}
.mnav__link--sub{font-weight:500;font-size:15px;color:var(--text-secondary);min-height:46px}
.mnav .suite__item{padding-left:0;padding-right:0}
.mnav .suite__item:hover{background:transparent}
.mnav .suite__item--here{background:transparent}
.mnav__cta{display:block;text-align:center;margin-top:var(--sp-6)}

@media (max-width:1000px){
  .hdr__in{min-height:68px;gap:var(--sp-3)}
  .hdr__nav{display:none}
  .hdr__burger{display:inline-flex}
  .hdr__cta{display:none}
  .hdr__cta--m{display:inline-flex;align-items:center;margin-left:auto;
               font-size:14px;padding:10px 16px;min-height:44px;white-space:nowrap}
  .hdr__bird{width:50px;height:34px}
  .hdr__word{font-size:19px}
  .hdr__desc{font-size:9px;letter-spacing:.16em}
}
@media (max-width:380px){
  .hdr__in{gap:8px;padding-left:14px;padding-right:14px}
  .hdr__bird{width:40px;height:28px}
  .hdr__word{font-size:16px}
  .hdr__desc{font-size:8px;letter-spacing:.13em}
  .hdr__cta--m{font-size:12.5px;padding:10px 10px}
  .mnav{max-height:calc(100vh - 62px)}
}