/* =========================================================================
   walker-page.css -- the walker page, portable.

   The fourth extraction in the series that produced walker_tokens.css (the
   :root block), walker_nav.css (the bar) and sandbox.css (the beach). This one
   takes the last piece: the hero and the five sections below it.

   WHAT IT REPLACES. On walked.html the appearance of those sections is the sum
   of three files, and none of the three can be loaded next to a theme:

     styles.css        *{margin:0;padding:0;box-sizing:border-box}, a body{},
                       img{max-width:100%}, a{color:inherit}, plus a whole
                       second header (header{position:sticky} / .nav /
                       .nav-links / .nav-cta / .logo) and a whole footer
                       (footer{} / .foot-grid / .foot-base). .logo alone
                       restyles the site wordmark.
     recolor.css       body{} background gradient, and a gold remap that
                       walked-shell.css then overrides again.
     walked-shell.css  *{box-sizing}, body{} gradient, and
                       a{color:inherit;text-decoration:none} -- which strips
                       every underline on the page, chrome included.

   Every rule below is the END STATE of that stack, resolved once. That is why
   nothing here says var(--brass): recolor.css pinned it to gold and
   walked-shell.css:296-337 then re-pointed it to the accent with contrast
   corrections. Carrying all three would mean shipping two files whose only job
   is to undo the first. The corrections are applied at the source instead:

     surface (borders, rules, fills)      -> var(--accent)       3:1 floor
     text, and fills behind white text    -> var(--accent-deep)  4.5:1 floor
     the same accent on a dark ground     -> var(--accent-bright)

   SCOPED, NOT GLOBAL. Everything is under .walker-page. .wrap, .btn, .quote,
   .trust and .final are names a theme might already own, and the page this
   loads onto is a live storefront running Foundation. The box-sizing
   assertion is scoped the same way and for the same reason walker_nav.css
   scopes its own (walker_nav.css:16): the padding maths below assumes
   border-box, and this file does not own the document.

   THE RESET IS TARGETED. styles.css got its margins from `*{margin:0}`. A
   scoped `*` would work but would also flatten anything the interview, the bag
   and the showcase put inside .walker-page. The reset below names the eleven
   elements that actually appear in the markup and stops there.

   WHAT IT DELIBERATELY DOES NOT CARRY:

     the bar, the drawer, the mega panel     the theme's #H is the real one
     the footer, .foot-grid, .foot-base      the theme's #F is the real one
     .hero / .hero-inner                     replaced by .hero-split
     #corpBtn.on, #randomBtn.on              dead: neither id exists in the
                                             markup or in logic.js any more
     the demo itself                         sandbox.css owns .demo-card,
                                             .demo-input-row, .dev, .dev-toggle,
                                             .seg-btn, .ds-head, .mail-note and
                                             .fs-toast. Restating any of them
                                             here would be a second source.
     a reduced-motion block                  walker_tokens.css already kills
                                             transitions globally and
                                             sandbox.css:338 kills the beach's
                                             animations. Nothing is left.

   REQUIRES, IN THIS ORDER:
     walker_tokens.css   --accent* --wed* --cream --panel --ink --ink-soft
                         --hairline --sans --serif --maxw --gutter
     this file
     sandbox.css         --sand --sand-deep --imprint --tide --shell, which
                         the sections below borrow for the beach-toned
                         gradients. Loading this file without it leaves .how,
                         .quote, .trust and .final with unresolved colours.
   ========================================================================= */

.walker-page,
.walker-page *,
.walker-page *::before,
.walker-page *::after{box-sizing:border-box;}

/* --coral is the only token this file owns. walker_tokens.css deliberately
   carries the accent and the wedding gold; sandbox.css carries the beach and
   --tide. The consumer segment colour was declared in styles.css:root and
   nowhere else, so it lands here with the rules that use it. */
.walker-page{
  --coral:#D96A45;
  font-family:var(--sans);font-weight:300;color:var(--ink);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.walker-page h1,.walker-page h2,.walker-page h3,.walker-page h4,.walker-page h5,
.walker-page p,.walker-page ul,.walker-page ol,.walker-page li,
.walker-page blockquote,.walker-page figure{margin:0;padding:0;}
.walker-page ul,.walker-page ol{list-style:none;}
.walker-page img{max-width:100%;}
.walker-page a{color:inherit;text-decoration:none;}

.walker-page h1,.walker-page h2,.walker-page h3,.walker-page .display{
  font-family:var(--serif);font-weight:400;line-height:1.15;}

/* =========================================================================
   shared
   ========================================================================= */
.walker-page .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);}

/* accent-as-TEXT: this was color:var(--brass) and landed at 3.47:1 */
.walker-page .eyebrow{font-size:.72rem;letter-spacing:.28em;text-transform:uppercase;
  font-weight:500;color:var(--accent-deep);}

.walker-page .btn{display:inline-block;padding:14px 34px;font-size:.8rem;letter-spacing:.2em;
  text-transform:uppercase;font-weight:500;border:1px solid var(--ink);color:var(--ink);
  background:transparent;transition:all .25s ease;cursor:pointer;}
.walker-page .btn:hover{background:var(--ink);color:var(--shell);}
.walker-page .btn.solid{background:var(--ink);color:var(--shell);}
/* white on --accent is 3.47:1 -- this already failed on gold (3.88) and would
   have failed the same way on aqua. The deep end carries white at 5.16:1. */
.walker-page .btn.solid:hover{background:var(--accent-deep);border-color:var(--accent-deep);color:#fff;}
.walker-page .btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}

.walker-page .hero-ctas{display:flex;gap:16px;margin-top:36px;flex-wrap:wrap;}

.walker-page .sec-head{text-align:center;max-width:46em;margin:0 auto 64px;}
.walker-page .sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:14px;}

/* =========================================================================
   hero
   Co-hero split: product photo left, copy right, on the shared grid. The demo
   block (interview + bag + sandbox) stays full-width BELOW the split -- it
   needs its 860px track and does not fit in a 600px column.

   .hero-split owns the two-column geometry; .hero-copy owns alignment. The
   copy is left-aligned inside its column at desktop (the split supplies the
   asymmetry the old centred hero was avoiding) and re-centres when the grid
   collapses at 900, matching .sec-head and .final below.
   ========================================================================= */
/* width:100% is load-bearing. "stage" collides with the theme's own stage (the
   Fabric builder), whose stylesheet gives it a Foundation column width -- 7/12,
   the exact 58.33% this rendered at. Every other property here already outruns
   that rule on specificity; width was the one left undeclared, so the theme's
   value sailed through. Declare it and the collision has nothing left to hit. */
   
.walker-page .stage{width:100%;max-width:var(--maxw);margin:0 auto;padding:56px var(--gutter) 72px;
  display:flex;flex-direction:column;align-items:center;text-align:center;}

.walker-page .hero-split{display:grid;
  grid-template-columns:minmax(0,480px) minmax(0,1fr);
  align-items:center;gap:20px 56px;width:100%;}
.walker-page .hero-photo{width:100%;height:auto;display:block;}
.walker-page .hero-copy{display:flex;flex-direction:column;align-items:flex-start;text-align:left;}

.walker-page .stage .eyebrow{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent-deep);font-weight:500;}
.walker-page .stage h1{font-size:clamp(32px,5.4vw,60px);line-height:1.06;margin:16px 0 0;max-width:13ch;}
.walker-page .hero-copy p{margin:20px 0 0;max-width:48ch;color:var(--ink-soft);
  font-size:16px;line-height:1.6;}

/* the demo block is the widest thing here, so it sets its own track */
.walker-page .stage .demo-card{width:100%;max-width:860px;margin-top:40px;text-align:left;}

/* =========================================================================
   breadcrumb
   Mirrors the EZOrder crumb in easyorder-v2.php so a shopper who clicks
   "Design Discovery" over there lands on a page that confirms the label.

   width:100% is load-bearing for the same reason it is on .stage, though for
   a different rule: .stage is a centring flex column (align-items:center), so
   without it the nav shrink-to-fits and centres. text-align:left then beats
   .stage's inherited text-align:center.

   Colour and underline are restated on the anchor because .walker-page a
   strips both globally -- inherited from walked.html's reset, and the reason
   a crumb link would otherwise be invisible as a link.
   ========================================================================= */
.walker-page .wk-crumb{width:100%;text-align:left;margin:0 0 28px;
  font-size:12px;letter-spacing:.08em;color:var(--ink-soft);}
.walker-page .wk-crumb a{color:var(--accent-deep);}
.walker-page .wk-crumb a:hover,
.walker-page .wk-crumb a:focus-visible{text-decoration:underline;}
.walker-page .wk-crumb .sep{margin:0 8px;opacity:.6;}
.walker-page .wk-crumb [aria-current="page"]{color:var(--ink);}

/* =========================================================================
   three paths
   ========================================================================= */
.walker-page .audiences{padding:110px 0 90px;}
.walker-page .aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.walker-page .aud{background:#fff;border:1px solid rgba(28,43,51,.08);
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease;}
.walker-page .aud:hover{transform:translateY(-6px);box-shadow:0 30px 50px -30px rgba(28,43,51,.35);}
.walker-page .aud-band{height:5px;}
.walker-page .aud-art{height:170px;display:flex;align-items:center;justify-content:center;}
.walker-page .aud-art svg{width:84px;height:84px;}
.walker-page .aud-body{padding:30px 32px 36px;display:flex;flex-direction:column;flex:1;}
.walker-page .aud-kicker{font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;font-weight:600;}
.walker-page .aud h3{font-size:1.5rem;margin:10px 0 12px;}
.walker-page .aud p{font-size:.96rem;color:var(--ink-soft);flex:1;}
.walker-page .aud-link{margin-top:26px;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;
  font-weight:500;display:inline-flex;align-items:center;gap:8px;}
.walker-page .aud-link::after{content:"\2192";transition:transform .2s;}
.walker-page .aud-link:hover::after{transform:translateX(5px);}

.walker-page .aud.consumer .aud-band{background:var(--coral);}
.walker-page .aud.consumer .aud-kicker{color:var(--coral);}
.walker-page .aud.consumer .aud-art{background:linear-gradient(150deg,#FAE8DE,#F3D2C0);}

/* GOLD LIVES HERE AND NOWHERE ELSE. The wedding segment. Corporate is --tide,
   consumer is --coral; gold is what makes wedding a third thing, so it must
   NOT follow the accent. --wed-deep is 6.01:1 where the surface gold was 3.88. */
.walker-page .aud.wedding .aud-band{background:var(--wed);}
.walker-page .aud.wedding .aud-kicker{color:var(--wed-deep);}
.walker-page .aud.wedding .aud-art{background:linear-gradient(150deg,#F6EEDC,#EADDB9);}

.walker-page .aud.corporate .aud-band{background:var(--tide);}
.walker-page .aud.corporate .aud-kicker{color:var(--tide);}
.walker-page .aud.corporate .aud-art{background:linear-gradient(150deg,#DDEAEA,#C2D9D8);}

/* =========================================================================
   how it works -- the dark band
   ========================================================================= */
.walker-page .how{background:var(--ink);color:var(--shell);padding:100px 0;}
.walker-page .how .eyebrow{color:var(--sand-deep);}
.walker-page .how h2{font-size:clamp(1.9rem,3.4vw,2.7rem);margin-top:14px;}
.walker-page .how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;margin-top:64px;}
.walker-page .how-step{border-top:1px solid rgba(251,247,238,.25);padding-top:26px;}
.walker-page .how-step .display{font-size:1.35rem;margin-bottom:12px;color:var(--sand);}
.walker-page .how-step p{font-size:.95rem;color:rgba(251,247,238,.75);}
/* on a dark ground the accent has to go the other way */
.walker-page .how-step .step-no{font-family:var(--serif);color:var(--accent-bright);
  font-size:.95rem;letter-spacing:.15em;display:block;margin-bottom:14px;}

/* =========================================================================
   proof
   ========================================================================= */
.walker-page .proof{padding:110px 0;}
.walker-page .quote-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:60px;}
.walker-page .quote{background:#fff;border:1px solid rgba(28,43,51,.08);
  padding:36px 34px;position:relative;}
.walker-page .quote::before{content:"\201C";font-family:var(--serif);font-size:4rem;
  color:var(--sand-deep);position:absolute;top:10px;left:24px;line-height:1;}
.walker-page .quote p{font-size:.98rem;color:var(--ink-soft);margin-top:26px;font-style:italic;}
.walker-page .quote cite{display:block;margin-top:22px;font-style:normal;font-size:.78rem;
  letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--accent-deep);}
.walker-page .quote .where{font-size:.8rem;color:var(--ink-soft);letter-spacing:.05em;
  text-transform:none;font-weight:400;margin-top:4px;display:block;}

/* =========================================================================
   trust bar
   ========================================================================= */
.walker-page .trust{border-top:1px solid rgba(28,43,51,.1);
  border-bottom:1px solid rgba(28,43,51,.1);background:#F5EEDF;}
.walker-page .trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  padding:42px 0;text-align:center;}
.walker-page .trust-item .display{font-size:1.25rem;color:var(--ink);}
.walker-page .trust-item span{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:500;}

/* =========================================================================
   final cta
   ========================================================================= */
.walker-page .final{padding:130px 0;text-align:center;
  background:
    radial-gradient(ellipse 110% 80% at 50% 130%, var(--sand-deep) 0%, var(--sand) 50%, transparent 80%),
    var(--shell);}
.walker-page .final h2{font-size:clamp(2rem,4vw,3.1rem);max-width:18em;margin:16px auto 18px;}
.walker-page .final p{max-width:34em;margin:0 auto;color:var(--ink-soft);}
.walker-page .final .hero-ctas{justify-content:center;}

/* =========================================================================
   responsive
   960 collapses the three-column grids; 900 and 560 are the hero's own bands,
   inherited from walked-shell.css. They are separate breakpoints on purpose --
   the grids break where three columns stop fitting, the hero breaks where the
   photo starts pushing the demo card off the first screen.
   ========================================================================= */
@media (max-width:960px){
  .walker-page .aud-grid,
  .walker-page .how-grid,
  .walker-page .quote-grid{grid-template-columns:1fr;}
  .walker-page .trust-grid{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:900px){
  .walker-page .stage{padding:44px var(--gutter) 56px;}
  /* single column: copy first, photo second and capped -- a full-height photo
     here would push the demo card down a screen and a half */
  .walker-page .hero-split{grid-template-columns:1fr;gap:26px;justify-items:center;}
  .walker-page .hero-copy{order:1;align-items:center;text-align:center;}
  .walker-page .hero-photo{order:2;width:auto;max-width:100%;max-height:240px;}
  .walker-page .stage .demo-card{margin-top:32px;}
}

@media (max-width:560px){
  /* 84px of top padding on a 390px phone pushed the interview card -- the
     actual product -- clean off the first screen. The photo stays, but small:
     170px tall (~227px wide at 4:3), below the copy, above the demo card. */
  .walker-page .stage{padding:30px var(--gutter) 44px;}
  .walker-page .hero-photo{max-height:170px;}
  .walker-page .hero-split{gap:18px;}
  .walker-page .stage h1{margin-top:12px;max-width:none;}
  .walker-page .hero-copy p{margin-top:14px;font-size:15px;}
  .walker-page .stage .demo-card{margin-top:26px;}
}