/* Homepage (2026-11-04 live-foundation redesign). Loaded after site-pages.css; homepage only.
   The nav, page width, type scale and section rhythm it introduced now live in the shared sheets. */
/* ---- base: split grid, staff demo grid, price block, closing photo (was an inline <style>) ---- */
.only-m{display:none!important}

.home-split{display:grid;gap:56px;margin-top:40px;align-items:start}

.staff-g{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"phone ." "phone try" "phone screen" "phone .";grid-template-rows:1fr auto auto 1fr;column-gap:var(--split-gap);margin-top:40px;align-items:start}
.staff-g .phone{grid-area:phone}
.staff-g .try{grid-area:try;margin:0 0 12px;font-size:var(--fs-small);font-weight:600;color:var(--green)}
.staff-g .ready-screen{grid-area:screen;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--grey)}
.ready-screen .board-shell{padding:0;background:none;border-radius:6px}
.phone-head [hidden]{display:none}


.site-cta-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.site-cta::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,32,25,.35),rgba(16,32,25,.92) 62%)}
.site-cta .site-cta-band{z-index:1;align-items:start;margin-top:clamp(10.625rem,25vw,18.75rem);padding:36px 0 72px;border-top:1px solid rgba(255,255,255,.25)}
.site-cta .site-cta-band h2{font-size:clamp(2.5rem,1.4rem + 3vw,4rem)}
.site-cta .site-cta-band p{color:rgba(255,255,255,.82)}

@media (max-width:760px){
  .only-d{display:none!important}
  .only-m{display:block!important}
  span.only-m{display:inline!important}
  .home-split{grid-template-columns:minmax(0,1fr);gap:18px;margin-top:22px}
  .staff-g{grid-template-columns:minmax(0,1fr);grid-template-areas:"try" "phone" "screen";grid-template-rows:none;margin-top:22px}
  .staff-g .try{margin:0 0 10px}
  .staff-g .ready-screen{margin-top:12px;padding:8px;border:2px solid var(--green)}
  .site-cta .site-cta-band{padding:0 0 44px;border-top:0}
  .site-cta::after{background:linear-gradient(180deg,rgba(16,32,25,.35),rgba(16,32,25,.94) 45%)}
}

/* ---- sections ---- */
.foundation-hero { background:var(--deep); color:#fff; overflow:hidden; padding-top:48px; text-align:center; }
.ps-public.site-page .foundation-hero h1 { margin:0; font-size:clamp(3rem,6.2vw,5.375rem); line-height:1; letter-spacing:-.04em; }
.foundation-hero h1 span { color:var(--lime); }
.foundation-sub { margin:18px 0 0; font-size:clamp(1.375rem,1.1rem + 1vw,1.875rem); font-weight:600; line-height:1.2; letter-spacing:-.02em; color:#fff; }
.foundation-lede { max-width:34em; font-size:clamp(1.0625rem,.95rem + .45vw,1.25rem); line-height:1.5; color:var(--on-deep); margin:25px auto 24px; }
.foundation-actions { display:flex; align-items:center; justify-content:center; gap:30px; }
.site-page .foundation-hero .btn.go { background:var(--lime); color:var(--on-lime); min-height:54px; padding-inline:26px; }
.site-page .foundation-hero .btn.go:hover { background:var(--lime-hover); }
.site-page main a.foundation-secondary { color:#fff; display:flex; align-items:center; gap:12px; min-height:44px; font-size:0.9375rem; font-weight:600; }
.foundation-secondary:hover { text-decoration:underline; text-underline-offset:5px; }
.foundation-terms { font-size:var(--fs-small); color:var(--on-deep-muted); margin:14px 0 24px; }
.foundation-hero figure { margin:0 auto; width:calc(min(var(--page-max),100% - 2 * var(--page-gutter)) + 1.25rem); }
.foundation-hero figure img { display:block; width:100%; }
#staff { background:#fff; }
.staff-g { column-gap:var(--split-gap); }
.staff-g .ready-screen { padding:7px; border:0; border-radius:10px; background:var(--bezel); }
.site-cta .site-cta-band h2 { letter-spacing:-.035em; }
@media(max-width:1100px) {
  .split-board { gap:36px; }
}
@media(max-width:760px) {
  .foundation-hero { padding-top:34px; }
  .ps-public.site-page .foundation-hero h1 { font-size:clamp(2.3125rem,9.8vw,3.625rem); letter-spacing:-.035em; }
  .foundation-lede { margin:19px auto 23px; max-width:34ch; }
  .foundation-lede br { display:none; }
  .foundation-actions { flex-direction:column; gap:7px; }
  .site-page .foundation-hero .btn.go { width:100%; max-width:20.625rem; min-height:52px; font-size:0.9375rem; }
  .site-page main a.foundation-secondary { font-size:var(--fs-small); min-height:38px; }
  .foundation-terms { margin:10px 0 20px; font-size:var(--fs-small); }
  .split-board { grid-template-columns:minmax(0,1fr); gap:23px; }
  .staff-g { grid-template-columns:minmax(0,1fr); }
}

/* Council fixes, 2026-11-04. */
/* Lime focus ring wherever the background is dark green (the shared green ring is 1.9:1 there). */
.foundation-hero :focus-visible, .personal-preview .board-shell :focus-visible, .site-page .site-cta :focus-visible { outline-color:var(--lime); }
/* Fade the hero render into the band at every width, so it never shows hard edges. */
.foundation-hero figure img { -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
/* The demo control is secondary; only the trial button is solid green. */

.split-board { grid-template-columns:minmax(0,1fr); gap:30px; }
.personal-preview { min-width:0; width:100%; container:picker / inline-size; }
.split-board>div:last-child { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,22rem),1fr)); gap:0 var(--split-gap); align-items:start; }
.personal-browse { text-align:right; }
.personal-preview .board-shell { padding:7px; background:var(--bezel); border-radius:11px; }
.personal-preview .board-frame { overflow:hidden; }
.personal-preview .personal-open { display:flex; align-items:center; justify-content:flex-end; gap:8px; min-height:40px; padding:8px 7px 0; color:var(--on-deep); font-size:var(--fs-small); }
.site-page main .personal-open:hover { color:#fff; }
/* Pause for the sample-order feed, on the dark bezel under each live board. */
.feed-bar .personal-open { margin-left:auto; }
.personal-browse { font-size:var(--fs-small); font-weight:600; margin:18px 0 0; }
.personal-styles { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:15px; }
.personal-styles button { display:flex; flex-direction:column; justify-content:flex-start; text-align:left; padding:14px 12px; border:1px solid #cfd9c6; border-radius:8px; color:var(--ink); background:transparent; cursor:pointer; transition:background 150ms ease; }
.personal-styles b { display:block; font-size:0.9375rem; font-weight:600; line-height:1.4; }
.personal-styles span { display:block; font-size:var(--fs-small); margin-top:4px; line-height:1.4; color:var(--moss); }
.personal-styles button:hover { background:#e6eedb; }
.personal-styles button[aria-pressed=true] { background:#173d28; border-color:#173d28; color:#fff; }
.personal-styles button[aria-pressed=true] span { color:var(--on-deep-muted); }
.personal-inputs { display:grid; grid-template-columns:auto minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:2px 18px; margin:0 0 20px; }
.personal-inputs label, .personal-inputs input { grid-row:1 / 3; }
.personal-inputs p { grid-column:3; align-self:end; }
.personal-inputs p + p { align-self:start; }
.personal-inputs label { display:block; font-size:1.375rem; line-height:1.3; font-weight:600; letter-spacing:-.02em; }
.personal-inputs input { display:block; width:100%; padding:13px 15px; border:1px solid var(--muted); border-radius:7px; color:var(--ink); background:#fff; font:inherit; min-height:52px; font-size:1.1875rem; }
.personal-inputs input::placeholder { color:#667760; opacity:1; }
.personal-inputs input:focus-visible { outline:3px solid var(--green); border-color:var(--green); outline-offset:2px; }
.personal-inputs p { font-size:var(--fs-small); margin:0; color:var(--muted); }
@container picker (max-width:56rem) {
  .personal-inputs { grid-template-columns:auto minmax(0,1fr); gap:6px 18px; }
  .personal-inputs label, .personal-inputs input { grid-row:auto; }
  .personal-inputs p, .personal-inputs p + p { grid-column:2; align-self:auto; }
  .personal-inputs label { font-size:1.3125rem; }
}
@container picker (max-width:40rem) {
  .personal-inputs { display:block; margin:0 0 16px; }
  .personal-inputs label { margin-bottom:10px; }
  .personal-inputs p { margin-top:8px; }
  .personal-inputs input { font-size:1.0625rem; min-height:50px; }
  .personal-styles { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:13px; }
  .personal-styles button { padding:12px; }
}
@media(max-width:760px) {
  .split-board { display:flex; flex-direction:column; align-items:stretch; }
  .split-board>div:last-child { display:block; order:0; }
  .split-board>div:last-child>.row,.split-board>div:last-child>.more { display:none; }
}
@media(prefers-reduced-motion:reduce) {
  .personal-styles button { transition:none; }
}

/* Windows high contrast drops backgrounds; keep the selected style and step visible. */
@media(forced-colors:active) {
  .personal-styles button[aria-pressed=true] { background:Highlight; color:HighlightText; forced-color-adjust:none; }
  .personal-styles button[aria-pressed=true] span { color:HighlightText; }
}

/* ---- real apps: the Fire TV app and the iPad/iPhone app, each with its store button; registers below ---- */
.staff-get { margin:18px 0 0; font-size:0.9375rem; font-weight:600; }
.apps-g { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr)); gap:clamp(1rem,2.5vw,2rem); margin-top:clamp(1.5rem,3vw,2.25rem); }
.apps-sec { padding-block:clamp(3rem,6vw,4.5rem); }
.app-card { display:flex; flex-direction:column; overflow:hidden; border:1px solid rgba(255,255,255,.14); border-radius:16px; background:rgba(255,255,255,.05); container-type:inline-size; }
.app-art { position:relative; display:flex; align-items:center; justify-content:center; aspect-ratio:2 / 1; padding:6% 13%; overflow:hidden; background:var(--stage); }
.app-art img { display:block; height:auto; filter:drop-shadow(0 18px 24px rgba(20,34,26,.2)); }
.app-art-tv img { width:100%; }
/* The iPad sits low and runs off the bottom edge; the iPhone stands in front of it, whole. */
.app-art-ios { align-items:flex-start; justify-content:flex-start; padding:7% 0 0 9%; }
.app-ipad { width:68%; }
.app-iphone { position:absolute; top:9%; right:9%; width:19%; }
.app-copy { display:flex; flex:1; flex-direction:column; padding:clamp(1.25rem,4.5cqi,2rem); }
.app-store { margin:0; font-size:var(--fs-small); font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.app-copy h3 { margin:6px 0 0; font-size:clamp(1.25rem,1.05rem + .6vw,1.5rem); line-height:1.2; letter-spacing:-.02em; color:#fff; }
.app-copy>p:not(.app-store) { margin:10px 0 0; max-width:none; font-size:var(--fs-text); line-height:1.5; color:var(--on-deep); }
.app-act { display:flex; flex-wrap:wrap; align-items:center; gap:6px 22px; margin-top:auto; padding-top:clamp(1.25rem,3.5cqi,1.75rem); }
.site-page main a.app-get { background:#fff; color:var(--ink); min-height:48px; white-space:normal; text-align:center; }
.site-page main a.app-get:hover { background:var(--green-tint); color:var(--ink); }
.site-page main a.app-more { display:inline-flex; align-items:center; gap:.4em; min-height:44px; font-weight:600; color:#fff; }
.site-page main a.app-more:hover { color:var(--lime); }
.apps-pos { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 48px; margin-top:clamp(1.5rem,3vw,2rem); padding-top:clamp(1.25rem,2.5vw,1.5rem); border-top:1px solid rgba(255,255,255,.16); }
.apps-pos h3 { margin:0; font-size:clamp(1.1875rem,1.05rem + .25vw,1.25rem); letter-spacing:-.015em; color:#fff; }
.apps-pos p { margin:4px 0 0; font-size:var(--fs-small); line-height:1.5; color:var(--on-deep-muted); }
.apps-pos ul { display:flex; flex:0 1 auto; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.site-page main .apps-pos a { display:inline-flex; align-items:center; min-height:44px; padding:0 16px; border:1px solid rgba(255,255,255,.3); border-radius:999px; font-size:var(--fs-small); font-weight:600; color:#fff; }
.site-page main .apps-pos a:hover { border-color:#fff; }
@media(max-width:760px) { .site-page main a.app-get { width:100%; } }

/* ---- the story under the hero: order in, staff tap Ready, the customer sees it ----
   Three steps side by side while each gets a third of a 48rem column; narrower, each step becomes a row
   (screen beside the words), then a stack on phones. Sized by the section's own width, not the window. */
.story>.w { container:story / inline-size; }
.story-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1.75rem,3vw,2.5rem); margin:clamp(2rem,4vw,3rem) 0 0; padding:0; list-style:none; }
.story-steps li { display:flex; flex-direction:column; min-width:0; }
.story-art { display:flex; justify-content:center; align-items:center; aspect-ratio:4 / 3; padding:9%; overflow:hidden; border-radius:16px; background:var(--stage); }
.story-steps h3 { display:flex; gap:.45em; margin:clamp(1.25rem,2.5vw,1.75rem) 0 0; padding-top:clamp(1rem,2vw,1.375rem); border-top:2px solid var(--ink); font-size:clamp(1.375rem,1.1rem + .9vw,1.75rem); line-height:1.2; letter-spacing:-.02em; }
.story-steps h3 span { color:var(--green); font-variant-numeric:tabular-nums; }
.story-steps li>p { margin:10px 0 0; font-size:var(--fs-body); line-height:1.55; color:var(--muted); }
.site-page main .story-demo .btn { background:#fff; color:var(--green); box-shadow:inset 0 0 0 2px var(--green); }
.site-page main .story-demo .btn:hover { background:var(--green-tint); }
@container story (max-width:48rem) {
  .story-steps { grid-template-columns:minmax(0,1fr); }
  .story-steps li { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,3fr); grid-template-rows:auto 1fr; column-gap:clamp(1.25rem,4cqi,2rem); }
  .story-art { grid-row:1 / 3; }
  .story-steps h3 { margin-top:0; }
}
@container story (max-width:28rem) {
  .story-steps li { display:flex; }
  .story-steps h3 { margin-top:1.25rem; }
}

/* ---- the kitchen display system: copy beside the real iPad screen ---- */
.foundation-kitchen { background:var(--stage); }
.foundation-kitchen>.w { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr); gap:clamp(1.875rem,4vw,3rem) var(--split-gap); align-items:center; }
.foundation-kitchen .h2 { font-size:clamp(2.375rem,1rem + 2.8vw,3.125rem); }
.foundation-kitchen-copy .p { margin-top:24px; max-width:40ch; color:var(--body-ink); }
.site-page main .foundation-link { display:inline-flex; align-items:center; gap:12px; min-height:44px; margin-top:23px; color:#17432b; font-weight:600; font-size:var(--fs-text); }
.foundation-kitchen-art { margin:0; }
.foundation-kitchen-art img { display:block; width:100%; filter:drop-shadow(0 18px 24px rgba(20,34,26,.2)); }
.foundation-kitchen-art figcaption { font-size:var(--fs-small); margin-top:14px; color:var(--moss); }
/* Section labels: Board | Staff app | Kitchen display system, so the three products read as three parts. */
.sect-label { margin:0 0 clamp(.75rem,1.5vw,1rem); font-size:var(--fs-small); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--green); }
@media(max-width:760px) {
  .foundation-kitchen>.w { grid-template-columns:minmax(0,1fr); gap:30px; }
  .foundation-kitchen-copy .p { margin-top:19px; }
  .site-page main .foundation-link { margin-top:15px; }
}


/* ---- pricing: one card, the price and trial on the left, what's included on the right ---- */
.price-sec { padding-block:clamp(3.5rem,8vw,5.75rem); background:var(--band); }
.price-card { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,22rem),1fr)); gap:clamp(2rem,4vw,3rem) var(--split-gap); padding:clamp(1.5rem,5vw,3.5rem); border:1px solid var(--line-strong); border-radius:20px; background:#fff; }
.price-main .h2 { font-size:clamp(2rem,1.3rem + 2.2vw,2.75rem); }
.price-big { margin:clamp(1.25rem,3vw,2rem) 0 0; font-size:clamp(4rem,2.8rem + 4vw,6.25rem); line-height:.9; font-weight:600; letter-spacing:-.05em; color:var(--ink); }
.price-main .p { margin-top:10px; }
.price-main .btn { margin-top:clamp(1.25rem,3vw,1.75rem); }
.price-main .sm { margin-top:12px; max-width:36em; }
.price-incl h3 { margin:0; font-size:var(--fs-small); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.price-rows { margin:14px 0 0; padding:0; list-style:none; border-top:1px solid var(--ink); }
.price-rows li { position:relative; padding:14px 0 14px 2em; border-bottom:1px solid var(--line); font-size:var(--fs-text); line-height:1.4; }
.price-rows li::before { content:"✓"; position:absolute; left:.2em; top:14px; font-weight:700; color:var(--green); }
.price-ask { margin:18px 0 0; font-weight:600; }
/* The staff demo on one stage: the live phone beside the TV it drives. */
.staff-g { margin-top:clamp(1.75rem,4vw,2.75rem); padding:clamp(1.25rem,4vw,2.5rem); border-radius:20px; background:var(--stage); align-items:center; }
.staff-g .try { color:var(--ink); }
/* "Tap me": the first Ready button pulses until the visitor taps; a still ring under reduced motion. */
@keyframes tapPulse { 0% { box-shadow:0 0 0 0 rgba(31,104,72,.55); } 70%,100% { box-shadow:0 0 0 12px rgba(31,104,72,0); } }
#staffPhone:not(.tapped) #phoneMaking .phone-row:first-child button { animation:tapPulse 1.6s ease-out infinite; }
@media(prefers-reduced-motion:reduce) { #staffPhone:not(.tapped) #phoneMaking .phone-row:first-child button { animation:none; box-shadow:0 0 0 3px var(--lime); } }
/* Beside the TV, the phone is drawn at 80% so the board reads as the bigger screen; its layout stays intact. */
@media(min-width:761px) { .staff-g .phone { width:18.75rem; zoom:.8; } }
/* ---- story panels: one order, #204 Maya C., at each step, drawn in the site's own type ---- */
.story-art { padding:5%; font-size:clamp(.8125rem,1.1cqi + .3rem,1.125rem); line-height:1.3; }
.story-art b, .mini-src { white-space:nowrap; }
.mini-ticket, .mini-row, .mini-tv { width:90%; border-radius:14px; box-shadow:0 18px 30px -12px rgba(20,34,26,.28); }
.story-art p { margin:0; }
.mini-ticket { padding:1.1em 1.2em; background:#fff; color:var(--ink); }
.mini-src { display:flex; align-items:center; gap:.6em; font-size:.8em; color:var(--muted); }
.mini-src span { padding:.2em .6em; border-radius:999px; background:var(--grey); font-weight:600; color:var(--ink); }
.mini-order { margin-top:.6em !important; font-size:1.55em; font-weight:600; letter-spacing:-.02em; }
.mini-order b { margin-right:.25em; }
.mini-item { margin-top:.2em !important; color:var(--muted); }
.mini-state { display:inline-block; margin-top:.8em !important; padding:.25em .7em; border-radius:6px; background:var(--panel); font-size:.8em; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--moss); }
.mini-row { display:flex; align-items:center; justify-content:space-between; gap:1em; padding:1em 1.3em 1em 1.2em; background:#fff; }
.mini-row b { display:block; font-size:1.35em; letter-spacing:-.01em; color:var(--ink); }
.mini-row span { display:block; margin-top:.15em; font-size:.85em; color:var(--muted); }
.mini-ready { flex:none; padding:.75em 1.15em; border-radius:10px; background:var(--green); color:#fff; font-style:normal; font-weight:600; box-shadow:0 0 0 .3em rgba(31,104,72,.2); }
.mini-tv { padding:1.1em 1.3em; border:.45em solid var(--bezel); background:var(--deep); color:#fff; }
.mini-tv-label { font-size:.72em; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--lime); }
.mini-tv-name, .mini-tv-next { display:flex; align-items:baseline; justify-content:space-between; gap:1em; }
.mini-tv-name { margin-top:.4em !important; }
.mini-tv-name b { font-size:1.8em; letter-spacing:-.03em; }
.mini-tv-name span, .mini-tv-next span { font-weight:600; color:var(--on-deep-muted); }
.mini-tv-next { margin-top:.35em !important; padding-top:.5em; border-top:1px solid rgba(255,255,255,.14); opacity:.55; }
.mini-tv-next b { font-size:1.2em; }
@container story (max-width:28rem) { .story-art { aspect-ratio:16 / 9; } }

/* ---- "Using Square?" under the story: the homepage's direct link to the Square page (SEO audit 2026-11-06) ---- */
.square-band { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px 40px; margin-top:clamp(2rem,4vw,2.75rem); padding:clamp(1.25rem,3vw,1.75rem) clamp(1.25rem,3vw,2rem); border:1px solid var(--panel-line); border-radius:14px; background:var(--panel); }
.square-band>div { flex:1 1 26rem; }
.square-band h2.h3 { margin:0; }
.site-page main .square-band p { max-width:44em; margin:6px 0 0; font-size:var(--fs-text); line-height:1.55; color:var(--body-ink); }
.site-page main .square-band .foundation-link { margin-top:0; }