/* board.css — the Wasatch Front Intelligence visual world ("Board").
 * The site is the wall board every small business runs on: a printed week grid on gloss off-white,
 * an ink header rail, and magnets in four stock colors that mean job states. Hairline grid lines are
 * the only structure; controls are magnet strips. Shared by the landing page, about, and the app shell. */

:root{
  --board:#F6F6F1; --board-2:#ECECE6; --paper:#FFFFFF;
  --ink:#1B1B1B; --sec:#5B5E5A;
  --grid:rgba(27,27,27,.55); --grid-soft:rgba(27,27,27,.14);
  --o:#C0522E; --o-2:#E0693F; --g:#2E9E5B; --b:#2B6CD9; --k:#1B1B1B;
  --display:"Barlow Semi Condensed","Barlow",system-ui,sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --rail:64px;
}
*{box-sizing:border-box}
html{background:var(--board);color:var(--ink);font:400 17px/1.5 var(--sans);-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--ink) var(--board)}
body{margin:0;min-height:100vh;background:var(--board);overflow-x:clip}
::selection{background:var(--o);color:#fff}
:focus-visible{outline:2px solid var(--b);outline-offset:3px}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--board)}::-webkit-scrollbar-thumb{background:var(--ink);border:2px solid var(--board)}
h1,h2,h3,p,ol,ul,figure{margin:0}ol,ul{padding:0;list-style:none}
img,video{display:block;max-width:100%}
a{color:inherit}
.tl{font-weight:500;text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1.5px;text-decoration-color:var(--b);transition:text-decoration-color .2s,text-underline-offset .2s}
.tl:hover{text-decoration-color:var(--ink);text-underline-offset:8px}

/* ---- magnet: the one control ---- */
.mag{display:inline-flex;align-items:center;padding:0 16px 0 0;background:var(--o);color:#fff;text-decoration:none;font:600 14px/40px var(--sans);letter-spacing:.02em;white-space:nowrap;transition:transform .15s cubic-bezier(.2,1.4,.4,1),background .2s}
.mag::before{content:"";width:10px;height:40px;background:var(--ink);margin-right:12px;flex:none}
.mag:hover{transform:translateY(-2px);background:#A8461F}
.mag.ink{background:var(--ink);color:var(--board)}.mag.ink::before{background:var(--o)}
.mag.ink:hover{background:#2c2c2c;color:var(--board)}
.chip{display:inline-flex;align-items:center;gap:8px;font:600 12px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.chip::before{content:"";width:12px;height:12px;flex:none}
.chip.o::before{background:var(--o)}.chip.b::before{background:var(--b)}.chip.g::before{background:var(--g)}.chip.k::before{background:var(--k)}

/* ---- rail (nav) ---- */
.rail{position:fixed;inset:0 0 auto 0;z-index:900;height:var(--rail);display:flex;align-items:center;justify-content:space-between;padding:0 3vw;background:var(--ink);color:var(--board)}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 16px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:inherit}
.brand svg{flex:none}
.rail-links{display:flex;gap:26px;align-items:center;font:500 14px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em}
.rail-links a{text-decoration:none;color:rgba(246,246,241,.75);transition:color .2s}
.rail-links a:hover{color:var(--board)}
.rail-links .mag{color:#fff;text-transform:none;letter-spacing:.02em}
.rail-menu{display:none;appearance:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer;flex-direction:column;justify-content:center;gap:7px}
.rail-menu i{display:block;height:2px;background:var(--board);transition:transform .25s}
.rail-menu[aria-expanded="true"] i:first-child{transform:translateY(4.5px) rotate(45deg)}
.rail-menu[aria-expanded="true"] i:last-child{transform:translateY(-4.5px) rotate(-45deg)}
.menu{position:fixed;top:var(--rail);left:0;right:0;z-index:890;background:var(--ink);color:var(--board);padding:12px 6vw 24px;display:grid;gap:4px;border-top:1px solid rgba(246,246,241,.14)}
.menu[hidden]{display:none}
.menu a{text-decoration:none;font:600 18px/48px var(--display);text-transform:uppercase;letter-spacing:.06em;color:var(--board)}
.menu .mag{margin-top:12px;justify-self:start;font-family:var(--sans);text-transform:none;letter-spacing:.02em;color:#fff}

/* ---- the week grid, used by the wall and the close ---- */
.days{display:grid;grid-template-columns:repeat(5,1fr);border-bottom:1.5px solid var(--grid);background:var(--board-2)}
.days span{padding:10px 3vw;font:700 13px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sec);border-right:1px solid var(--grid-soft)}
.days span:last-child{border-right:0}
.field{position:relative;display:grid;grid-template-columns:repeat(5,1fr);background-image:repeating-linear-gradient(180deg,transparent 0 calc(12.5vh - 1px),var(--grid-soft) calc(12.5vh - 1px) 12.5vh)}
.field>i{border-right:1px solid var(--grid-soft)}
.field>i:last-child{border-right:0}

/* ---- 1. the wall (first viewport) ---- */
.wall{position:relative;min-height:100vh;min-height:100svh;padding-top:var(--rail);display:grid;grid-template-rows:auto 1fr;overflow:hidden;background:var(--board)}
.wall-video{position:absolute;left:0;right:0;top:var(--rail);bottom:0;width:100%;height:calc(100% - var(--rail));object-fit:cover;object-position:50% 50%;z-index:0;opacity:var(--vo,1)}
.wall .days{display:none}
.wall .field{background-image:none}
.wall .field>i{display:none}
.wall .loose{display:none}
.wall::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--board);opacity:var(--bo,0)}
.loose{position:absolute;inset:0;pointer-events:none;z-index:2;perspective:1200px}
.tag{position:absolute;left:var(--x);top:var(--y);transform:translate3d(var(--dx,0),var(--dy,0),0) rotateX(var(--tx,0deg)) rotate(var(--r)) scale(var(--sc,1));opacity:var(--op,1);will-change:transform,opacity;transform-origin:50% 50%;box-shadow:0 calc(6px + var(--lift,0)*22px) calc(16px + var(--lift,0)*30px) calc(-10px - var(--lift,0)*6px) rgba(27,27,27,calc(.6 + var(--lift,0)*.2));display:inline-flex;align-items:stretch;background:var(--paper);border:1px solid var(--ink);font:500 12px/1.2 var(--sans);box-shadow:0 6px 16px -10px rgba(27,27,27,.6);white-space:nowrap;padding:7px 10px 7px 18px}
.tag::before{content:"";position:absolute;left:0;top:0;bottom:0;width:8px}
.tag.o::before{background:var(--o)}.tag.b::before{background:var(--b)}.tag.g::before{background:var(--g)}.tag.k::before{background:var(--k)}
.hero{position:relative;z-index:3;transform:translate3d(0,var(--hy,0),0);opacity:var(--ho,1);will-change:transform,opacity;padding:8vh 3vw;display:flex;flex-direction:column;justify-content:space-between;grid-area:1/1/2/6;min-height:calc(100vh - var(--rail) - 34px);min-height:calc(100svh - var(--rail) - 34px)}
.field>i:nth-child(1){grid-column:1}.field>i:nth-child(2){grid-column:2}.field>i:nth-child(3){grid-column:3}.field>i:nth-child(4){grid-column:4}.field>i:nth-child(5){grid-column:5}
.field>i{grid-row:1}
.h1{font:700 clamp(52px,6.4vw,116px)/1.04 var(--display);letter-spacing:-.02em;text-transform:uppercase;max-width:10.5ch;text-wrap:balance}
.h1 mark{background:none;color:inherit;padding:0}
.lede{margin-top:24px;max-width:46ch;font-size:19px;line-height:1.5;color:var(--sec)}
.lede b{color:var(--ink);font-weight:600}
.ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.hero .ctas{margin-top:28px}
.origin{align-self:flex-start;text-align:left;font:600 15px/1.45 var(--display);letter-spacing:.04em;color:var(--sec)}

/* ---- 2. the stage: the opening, then three chapters ---- */
.stage{position:relative;overflow-x:clip}
.stage-pin{position:relative}

/* a chapter: a full-bleed loop of a working tool, dimmed, behind points that move as you scroll */
.ch-hold{position:relative}
.chapters{position:relative;background:transparent;color:var(--board)}
.ch{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;display:grid;align-items:center;background:transparent}
/* the story film: one layer under the copy, sized to the screen below the rail on both layouts */
.story-bg{position:relative;height:100vh;height:100svh;background:var(--ink);overflow:hidden;opacity:var(--so,1);pointer-events:none}
.story-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.story-bg .ch-dim{opacity:var(--dimo,1)}
.stage.is-pinned .story-bg{position:absolute;left:0;right:0;top:var(--rail);bottom:0;height:auto;z-index:8;display:none}
.stage.is-pinned .story-bg.is-live{display:block}
.stage.is-hero-pinned .story-bg{position:fixed;left:0;top:var(--rail);width:100%;height:calc(100% - var(--rail));z-index:8;display:none}
.stage.is-hero-pinned .story-bg.is-live{display:block}
.ch-dim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(27,27,27,.86) 0,rgba(27,27,27,.62) 34%,rgba(27,27,27,.34) 60%,rgba(27,27,27,.3) 100%)}
.ch-copy{position:relative;z-index:2;display:grid;grid-template-rows:auto 1fr auto;height:100vh;height:100svh;padding:calc(var(--rail) + 4vh) 3vw 5vh;width:min(46vw,760px);min-width:0}
.ch-kicker{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ch-kicker .chip{background:var(--paper);color:var(--ink)}
.ch-sub{font:600 14px/1.3 var(--display);letter-spacing:.06em;text-transform:uppercase;color:rgba(246,246,241,.72)}
.ch-points{position:relative;list-style:none;margin:0;padding:0;min-height:0}
.ch-points li{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);font:700 clamp(26px,2.8vw,48px)/1 var(--display);text-transform:uppercase;letter-spacing:-.015em;text-wrap:balance;max-width:17ch;color:var(--board);will-change:transform,opacity}
.ch-points li::before{content:"";display:block;width:56px;height:5px;background:var(--o);margin-bottom:18px}
.ch-meta{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.ch-note{font:500 13px/1.3 var(--sans);color:rgba(246,246,241,.72)}
.story-bg .ch-dim{background:linear-gradient(90deg,rgba(27,27,27,.72) 0,rgba(27,27,27,.42) 40%,rgba(27,27,27,.12) 70%,rgba(27,27,27,.08) 100%)}
.ch--story .ch-points li{max-width:19ch}
.ch--story{background:transparent}   /* the film is its own layer beneath */
.ch--yours{background:var(--board);color:var(--ink);place-items:center;text-align:center;padding:calc(var(--rail) + 6vh) 6vw 8vh}
.yours{max-width:64ch;margin:0 auto}
.yours-word{font:700 clamp(72px,11vw,180px)/.88 var(--display);text-transform:uppercase;letter-spacing:-.03em}
.yours-line{margin-top:18px;font-size:19px;color:var(--sec);text-wrap:balance}
.yours .ctas{margin-top:32px;justify-content:center}
.ch-run{display:none}

/* engine on: the chapters share one screen and crossfade */
.stage.is-pinned .chapters,.stage.is-hero-pinned .chapters{overflow:hidden;height:100vh;height:100svh}
.stage.is-pinned .ch,.stage.is-hero-pinned .ch{position:absolute;inset:0;min-height:0;opacity:0;pointer-events:none;will-change:opacity}
.stage.is-pinned .ch.is-on,.stage.is-hero-pinned .ch.is-on{pointer-events:auto}
.stage.is-pinned .ch-copy,.stage.is-hero-pinned .ch-copy{opacity:var(--co,1);transform:translate3d(0,calc(var(--cy,0) * 1vh),0)}
.stage.is-pinned .ch--yours .yours,.stage.is-hero-pinned .ch--yours .yours{opacity:var(--co,1);transform:translate3d(0,calc(var(--cy,0) * 1vh),0)}
.stage.is-pinned .ch-points li,.stage.is-hero-pinned .ch-points li{opacity:var(--po,1);transform:translate3d(0,calc(-50% + var(--py,0) * 1vh),0) scale(var(--ps,1));transform-origin:0 50%}
/* engine off: normal flow, one chapter after another; every point is readable */
.stage:not(.is-pinned):not(.is-hero-pinned) .ch-copy{height:auto;min-height:100vh;min-height:100svh}
.stage:not(.is-pinned):not(.is-hero-pinned) .story-bg{position:absolute;left:0;right:0;top:0;height:100%;z-index:0}
.stage:not(.is-pinned):not(.is-hero-pinned) .ch-hold{position:relative}
.stage:not(.is-pinned):not(.is-hero-pinned) .ch--story{position:relative;z-index:1}
.stage:not(.is-pinned):not(.is-hero-pinned) .ch--yours{background:var(--board)}
.stage:not(.is-pinned):not(.is-hero-pinned) .ch-points{display:grid;gap:22px;align-content:center;padding:6vh 0}
.stage:not(.is-pinned):not(.is-hero-pinned) .ch-points li{position:static;transform:none;font-size:clamp(22px,2.2vw,34px)}
.stage:not(.is-pinned):not(.is-hero-pinned) .ch-points li::before{width:36px;height:4px;margin-bottom:12px}

/* desktop: the stage pins for the opening and the chapters */
.stage.is-pinned .stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.stage.is-pinned .wall{position:absolute;inset:0;z-index:6;min-height:0;height:100%;opacity:var(--wo,1);pointer-events:var(--wp,auto);will-change:opacity}
.stage.is-pinned .wall .hero{min-height:0;height:100%}
.stage.is-pinned .ch-hold{position:absolute;inset:0;z-index:9;opacity:var(--cho,0);pointer-events:none}   /* the copy, above the film */
.stage.is-pinned .ch-hold.is-live{pointer-events:auto}
.stage.is-pinned .chapters{position:absolute;inset:0}

/* phones: the wall pins for the opening, then the chapters pin after it */
.stage.is-hero-pinned .ch-hold{position:relative;z-index:9}
.stage.is-hero-pinned .chapters{position:sticky;top:0}
.stage.is-hero-pinned .ch-run{display:block}

/* ---- shared section rhythm ---- */
.sec{padding:14vh 3vw;border-top:1.5px solid var(--grid)}
.sec-head{max-width:72ch}
.sec-h2{font:700 clamp(36px,4.8vw,76px)/.9 var(--display);letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance}
.sec-lead{margin-top:20px;font-size:18px;color:var(--sec);max-width:58ch}

/* ---- 3. ROI ---- */
.roi-grid{display:grid;grid-template-columns:40% 1fr;gap:6vw;margin-top:8vh;align-items:start}
.roi-field+.roi-field{margin-top:22px}
.roi-field label{display:flex;justify-content:space-between;align-items:baseline;gap:16px;font:600 15px/1.3 var(--sans);color:var(--ink)}
.roi-field output{font-variant-numeric:tabular-nums;color:var(--sec);font-weight:500}
input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;background:transparent;touch-action:none;cursor:pointer;--fill:0%}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(to right,var(--ink) var(--fill),var(--grid-soft) var(--fill))}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:26px;height:16px;border-radius:0;border:1px solid var(--ink);background:linear-gradient(90deg,var(--ink) 0 8px,var(--o) 8px);margin-top:-7px;transition:transform .15s cubic-bezier(.2,1.4,.4,1)}
input[type=range]:hover::-webkit-slider-thumb,input[type=range]:active::-webkit-slider-thumb{transform:translateY(-2px)}
input[type=range]::-moz-range-track{height:2px;background:var(--grid-soft)}
input[type=range]::-moz-range-progress{height:2px;background:var(--ink)}
input[type=range]::-moz-range-thumb{width:26px;height:16px;border-radius:0;border:1px solid var(--ink);background:linear-gradient(90deg,var(--ink) 0 8px,var(--o) 8px)}
input[type=range]:focus-visible{outline:2px solid var(--b);outline-offset:6px}
.roi-note{margin-top:28px;font-size:14px;line-height:1.5;color:var(--sec);max-width:42ch}
.roi-big{display:flex;align-items:baseline;font:700 clamp(72px,10vw,168px)/.9 var(--display);letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--ink)}
.roi-big .roi-cur{font-size:.5em;margin-right:.06em;align-self:flex-start;margin-top:.1em;color:var(--o)}
.roi-cap{margin-top:14px;font:600 16px/1.5 var(--display);letter-spacing:.03em;color:var(--sec)}
.roi-mini{display:flex;gap:56px;flex-wrap:wrap;margin-top:6vh;border-top:1px solid var(--grid);padding-top:24px}
.roi-mini b{display:block;font:700 40px/1 var(--display);font-variant-numeric:tabular-nums;color:var(--ink)}
.roi-mini span{display:block;margin-top:6px;font-size:15px;color:var(--sec)}

/* ---- 4. the color key ---- */
.key{background:var(--board-2)}
.key-list{margin-top:6vh;display:grid;grid-template-columns:repeat(4,1fr);gap:0 28px;border-top:1.5px solid var(--grid)}
.key-list li{padding:28px 0 34px;min-width:0;border-right:1px solid var(--grid-soft)}
.key-list li:last-child{border-right:0}
.key-list li+li{padding-left:24px}
.key-list h3{display:inline-flex;align-items:stretch;background:var(--paper);border:1px solid var(--ink);font:700 20px/1.1 var(--display);text-transform:uppercase;letter-spacing:.01em;box-shadow:0 6px 16px -10px rgba(27,27,27,.6);transition:transform .15s cubic-bezier(.2,1.4,.4,1)}
.key-list h3::before{content:"";width:10px;flex:none}
.key-list h3 span,.key-list h3{padding:0}
.key-list h3{padding:10px 14px 10px 0;min-height:64px;align-items:center}.key-list h3::before{margin-right:12px;align-self:stretch}
.key-list li:hover h3{transform:translateY(-2px)}
.key-list li.o h3::before{background:var(--o)}.key-list li.b h3::before{background:var(--b)}.key-list li.g h3::before{background:var(--g)}.key-list li.k h3::before{background:var(--k)}
.key-list p{margin:18px 0 0;font-size:15px;line-height:1.55;color:var(--sec);max-width:30ch}

/* ---- 5. process: four columns on the board ---- */
.week{margin-top:6vh;display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--grid);border-bottom:1.5px solid var(--grid)}
.week li{padding:28px 24px 34px 0;border-right:1px solid var(--grid-soft);position:relative}
.week li+li{padding-left:24px}
.week li:last-child{border-right:0}
.week-n{display:inline-grid;place-items:center;width:32px;height:32px;background:var(--ink);color:var(--board);font:700 14px/1 var(--display)}
.week h3{margin-top:18px;font:700 28px/1 var(--display);text-transform:uppercase;letter-spacing:.01em}
.week p{margin-top:12px;font-size:15px;line-height:1.55;color:var(--sec);max-width:30ch}

/* ---- 6. close ---- */
.close{position:relative;border-top:1.5px solid var(--grid);display:grid;grid-template-rows:auto 1fr;min-height:90vh}
.close-inner{position:relative;z-index:2;padding:14vh 3vw 12vh;display:grid;place-items:start;align-content:center;background-image:repeating-linear-gradient(180deg,transparent 0 calc(12.5vh - 1px),var(--grid-soft) calc(12.5vh - 1px) 12.5vh)}
.close-h2{font:700 clamp(48px,7vw,120px)/.88 var(--display);letter-spacing:-.02em;text-transform:uppercase;max-width:11ch;text-wrap:balance}
.close-p{margin-top:22px;font-size:18px;color:var(--sec);max-width:48ch}
.close .ctas{margin-top:32px}
.close-small{margin-top:48px;font:600 15px/1.5 var(--display);letter-spacing:.03em;color:var(--sec)}

/* ---- footer ---- */
.foot{padding:28px 3vw 40px;display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;background:var(--ink);color:var(--board);font:500 13px/1.5 var(--sans)}
.foot p{color:rgba(246,246,241,.75)}
.foot a{color:inherit}

/* ============================================================
   MOBILE (≤899px)
   ============================================================ */
@media (max-width:899px){
  :root{--rail:56px}
  .rail{padding:0 5vw}
  .rail-links{display:none}
  .rail-menu{display:flex}
  .days span{padding:10px 2vw;font-size:11px;letter-spacing:.08em}
  .hero{padding:6vh 6vw 7vh;min-height:calc(100svh - var(--rail) - 33px)}
  .h1{font-size:clamp(46px,13vw,64px);max-width:none}
  .lede{font-size:17px}
  .hero .ctas{gap:16px}
  .origin{align-self:flex-start;text-align:left;margin-top:28px}
  .tag{display:none}.tag--keep{display:inline-flex;font-size:11px;padding:6px 9px 6px 16px}
  .tag--keep.k{left:6%;top:71%}.tag--keep.g{left:54%;top:71%}
  .loose{overflow:hidden}
  .ch-dim{background:linear-gradient(180deg,rgba(27,27,27,.55) 0,rgba(27,27,27,.4) 30%,rgba(27,27,27,.62) 58%,rgba(27,27,27,.92) 100%)}
  .story-bg .ch-dim{background:linear-gradient(180deg,rgba(27,27,27,.3) 0,rgba(27,27,27,.1) 35%,rgba(27,27,27,.5) 62%,rgba(27,27,27,.88) 100%)}
  .ch-copy{width:auto;padding:calc(var(--rail) + 3vh) 6vw 4vh;grid-template-rows:auto 1fr auto}
  .ch-points li{top:auto;bottom:7vh;transform:translateY(0);font-size:clamp(26px,7.4vw,38px);max-width:none}
  .stage.is-hero-pinned .ch-points li{transform:translate3d(0,calc(var(--py,0) * 1vh),0) scale(var(--ps,1))}
  .ch-points li::before{width:40px;height:4px;margin-bottom:12px}
  .ch-sub{display:none}
  .ch-meta{gap:14px}.ch-note{display:none}
  .yours-word{font-size:clamp(64px,22vw,96px)}
  .sec{padding:12vh 6vw}
  .roi-grid{grid-template-columns:1fr;gap:8vh;margin-top:6vh}
  .roi-big{font-size:clamp(64px,17vw,96px)}
  .roi-mini{gap:32px}.roi-mini b{font-size:32px}
  .key-list{grid-template-columns:1fr;gap:0}
  .key-list li{border-right:0;border-bottom:1px solid var(--grid-soft);padding:24px 0}
  .key-list li+li{padding-left:0}.key-list li:last-child{border-bottom:0}
  .key-list h3{font-size:18px}.key-list p{margin:14px 0 0;font-size:15px;max-width:none}
  .week{grid-template-columns:1fr}
  .week li{border-right:0;border-bottom:1px solid var(--grid-soft);padding:24px 0}
  .week li+li{padding-left:0}.week li:last-child{border-bottom:0}
  .close-inner{padding:12vh 6vw 10vh}
  .close .ctas{flex-direction:column;align-items:flex-start;gap:16px}
  .close-small{margin-top:36px}
  .foot{padding:24px 6vw 36px}
}

/* reduced motion: the board is already assembled; nothing scrubs */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important}
  .tag{--dx:0;--dy:0;--op:1}
  .wall.has-video .days,.wall.has-video .field>i,.wall.has-video .field::after{opacity:1}
  .tag{--tx:0deg;--sc:1;--lift:0}.hero{--hy:0;--ho:1}
}

/* ---- the records app: the product the cabinet becomes (authored at 1186x752, scaled by the engine) ---- */
.app-live{position:absolute;left:0;top:0;width:1186px;height:752px;transform-origin:0 0;z-index:7;opacity:0;pointer-events:none;background:var(--paper);overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);will-change:transform,opacity}
.app-live .screen{position:absolute;inset:0;display:grid;grid-template-columns:200px 1fr 336px;grid-template-rows:56px 1fr;background:var(--paper)}
.app-live .top{grid-column:1/-1;display:flex;align-items:center;gap:18px;padding:0 20px;background:var(--ink);color:var(--board)}
.app-live .top .logo{display:flex;align-items:center;gap:10px;font:700 14px/1 var(--display);letter-spacing:.08em;text-transform:uppercase}
.app-live .top .logo svg{width:22px;height:22px}
.app-live .top .search{margin-left:18px;width:420px;height:34px;background:rgba(246,246,241,.1);border:1px solid rgba(246,246,241,.25);display:flex;align-items:center;gap:10px;padding:0 12px;font:400 13px/1 var(--sans);color:rgba(246,246,241,.7)}
.app-live .top .search b{width:12px;height:12px;border:2px solid rgba(246,246,241,.7);border-radius:50%;position:relative}
.app-live .top .search b::after{content:"";position:absolute;width:2px;height:6px;background:rgba(246,246,241,.7);right:-4px;bottom:-5px;transform:rotate(-45deg)}
.app-live .top .right{margin-left:auto;display:flex;align-items:center;gap:18px;font:500 13px/1 var(--sans)}
.app-live .top .new{display:inline-flex;align-items:center;height:34px;padding:0 14px 0 0;background:var(--o);color:#fff;font:600 13px/1 var(--sans)}
.app-live .top .new::before{content:"";width:8px;height:34px;background:#111;margin-right:10px}
.app-live .top .user{width:30px;height:30px;border-radius:50%;background:var(--o-2);display:grid;place-items:center;font:700 12px/1 var(--display);color:#111}
.app-live .side{background:var(--board-2);height:100%;min-height:0;border-right:1.5px solid var(--grid);padding:18px 0;display:flex;flex-direction:column;gap:2px}
.app-live .side a{display:flex;align-items:center;gap:12px;padding:10px 18px;font:500 14px/1 var(--sans);color:var(--sec);text-decoration:none}
.app-live .side a i{width:8px;height:16px;background:transparent}
.app-live .side a.on{color:var(--ink);font-weight:600;background:var(--paper);border-right:3px solid var(--o)}
.app-live .side a.on i{background:var(--o)}
.app-live .side .grp{margin:16px 18px 6px;font:700 11px/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:var(--sec)}
.app-live .side .foot{margin-top:auto;padding:14px 18px 0;font:400 12px/1.4 var(--sans);color:var(--sec);border-top:1px solid var(--grid-soft)}
.app-live /* main */
.main{display:flex;flex-direction:column;min-width:0}
.app-live .hd{display:flex;align-items:flex-end;justify-content:space-between;padding:20px 22px 12px}
.app-live .hd h1{font:700 26px/1 var(--display);text-transform:uppercase;letter-spacing:-.01em;margin:0}
.app-live .hd h1 small{display:block;margin-top:6px;font:400 13px/1 var(--sans);text-transform:none;letter-spacing:0;color:var(--sec)}
.app-live .tabs{display:flex;gap:2px;border:1px solid var(--ink)}
.app-live .tabs span{padding:8px 12px;font:600 12px/1 var(--sans)}
.app-live .tabs span.on{background:var(--ink);color:var(--board)}
.app-live .kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1.5px solid var(--grid);border-bottom:1.5px solid var(--grid);margin:0 22px}
.app-live .kpi{padding:12px 0 12px;border-right:1px solid var(--grid-soft)}
.app-live .kpi+.kpi{padding-left:16px}
.app-live .kpi:last-child{border-right:0}
.app-live .kpi b{display:block;font:700 26px/1 var(--display);font-variant-numeric:tabular-nums}
.app-live .kpi b.o{color:var(--o)}
.app-live .kpi span{display:block;margin-top:4px;font:500 11px/1.2 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.app-live .filters{display:flex;gap:8px;align-items:center;padding:12px 22px 8px;font:500 12px/1 var(--sans);color:var(--sec)}
.app-live .chipf{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 10px 0 0;border:1px solid var(--ink);background:var(--paper);font:600 12px/1 var(--sans);color:var(--ink)}
.app-live .chipf::before{content:"";width:6px;height:28px;background:var(--ink)}
.app-live .chipf.o::before{background:var(--o)}
.app-live .chipf.g::before{background:var(--g)}
.app-live .chipf.b::before{background:var(--b)}
.app-live .thead,.app-live .row{display:grid;grid-template-columns:18px 1.5fr 1.1fr .9fr .85fr .7fr;gap:12px;align-items:center;padding:0 22px}
.app-live .thead{height:34px;font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sec);border-bottom:1.5px solid var(--grid)}
.app-live .row{height:50px;border-bottom:1px solid var(--grid-soft);font:400 13.5px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.app-live .row i{display:block;width:6px;height:28px}
.app-live .row.o i{background:var(--o)}
.app-live .row.b i{background:var(--b)}
.app-live .row.g i{background:var(--g)}
.app-live .row.k i{background:var(--k)}
.app-live .row b{font-weight:600;display:block}
.app-live .row b small{display:block;font-weight:400;color:var(--sec);font-size:12px;margin-top:2px}
.app-live .row .st{display:inline-flex;align-items:center;gap:6px;font:600 11px/1 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--sec)}
.app-live .row .st::before{content:"";width:8px;height:8px;background:var(--sec)}
.app-live .row.o .st::before{background:var(--o)}
.app-live .row.b .st::before{background:var(--b)}
.app-live .row.g .st::before{background:var(--g)}
.app-live .row.k .st::before{background:var(--k)}
.app-live .row .num{text-align:right;font-weight:500}
.app-live .row.sel{background:var(--board);box-shadow:inset 3px 0 0 var(--ink)}
.app-live .row .due.late{color:var(--ink);font-weight:600}
.app-live .tfoot{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:12px 22px;border-top:1.5px solid var(--grid);font:500 12px/1 var(--sans);color:var(--sec)}
.app-live .pg{display:flex;gap:4px}
.app-live .pg span{width:26px;height:26px;border:1px solid var(--ink);display:grid;place-items:center;font-weight:600;color:var(--ink)}
.app-live .pg span.on{background:var(--ink);color:var(--board)}
.app-live /* detail panel */
.detail{border-left:1.5px solid var(--grid);background:var(--paper);display:flex;flex-direction:column;min-height:0}
.app-live .dhd{padding:18px 20px 14px;border-bottom:1.5px solid var(--grid)}
.app-live .dhd .st{display:inline-flex;align-items:center;gap:8px;font:600 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--b)}
.app-live .dhd .st::before{content:"";width:8px;height:8px;background:var(--b)}
.app-live .dhd h2{margin:10px 0 0;font:700 22px/1 var(--display);text-transform:uppercase;letter-spacing:-.01em}
.app-live .dhd p{margin:6px 0 0;font:400 13px/1.4 var(--sans);color:var(--sec)}
.app-live .dl{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;padding:14px 20px;border-bottom:1px solid var(--grid-soft)}
.app-live .dl div span{display:block;font:700 10px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.app-live .dl div b{display:block;margin-top:5px;font:600 14px/1.2 var(--sans);font-variant-numeric:tabular-nums}
.app-live .lines{padding:12px 20px;border-bottom:1px solid var(--grid-soft)}
.app-live .lines h3{margin:0 0 8px;font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.app-live .line{display:flex;justify-content:space-between;gap:10px;font:400 13px/1.3 var(--sans);padding:6px 0;border-top:1px solid var(--grid-soft);font-variant-numeric:tabular-nums}
.app-live .line:first-of-type{border-top:0}
.app-live .line b{font-weight:600}
.app-live .act{padding:12px 20px}
.app-live .act h3{margin:0 0 8px;font:700 11px/1 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--sec)}
.app-live .ev{display:grid;grid-template-columns:14px 1fr;gap:10px;font:400 12.5px/1.35 var(--sans);padding:5px 0}
.app-live .ev i{width:8px;height:8px;margin-top:5px;background:var(--grid)}
.app-live .ev i.o{background:var(--o)}
.app-live .ev i.g{background:var(--g)}
.app-live .ev i.b{background:var(--b)}
.app-live .ev small{display:block;color:var(--sec);font-size:11px}
.app-live .dact{margin-top:auto;display:flex;gap:10px;padding:14px 20px;border-top:1.5px solid var(--grid)}
.app-live .dact .mag{font-size:13px;line-height:36px}
.app-live .dact .mag::before{height:36px}
.app-live .dact .ghost{display:inline-flex;align-items:center;height:36px;padding:0 12px;border:1px solid var(--ink);font:600 13px/1 var(--sans)}
.app-live .row.k.flip i{background:var(--g)}.app-live .row.k.flip .st::before{background:var(--g)}.app-live .row.k.flip .due{color:var(--sec);font-weight:400}
.app-live .kpi b,.app-live .row .st,.app-live .row i,.app-live .row .due{transition:background .4s,color .4s}
.stage:not(.is-pinned) .app-live{display:none}
/* phones / coarse pointers: the stage flows, but the opening still pins. The wall sticks for the length of
 * .wall-run (set by the engine), the footage scrubs, the app pushes in from the laptop, flips, and settles back. */
.wall-run{height:0}
.stage.is-hero-pinned .wall{position:sticky;top:0;z-index:6;height:100vh;height:100svh;min-height:0}
.stage.is-hero-pinned .wall .hero{min-height:0;height:100%;justify-content:flex-start;padding:3.5vh 6vw 0}
/* the promise sits in the clear wall above the cabinet (top ~40% of the 9:16 frame) and lifts as the drawers open */
.stage.is-hero-pinned .origin{order:-1;margin:0 0 10px;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.stage.is-hero-pinned .origin br{display:none}
.stage.is-hero-pinned .origin-town::before{content:" \00b7  "}
.stage.is-hero-pinned .h1{font-size:clamp(34px,9.6vw,46px);line-height:1.04}
.stage.is-hero-pinned .lede{margin-top:12px;font-size:14.5px;line-height:1.4;max-width:34ch}
.stage.is-hero-pinned .hero .ctas{margin-top:14px;gap:12px}
.stage.is-hero-pinned .hero .ctas .tl{display:none}
.stage.is-hero-pinned .app-live{display:block;position:fixed;left:0;top:0}
@media (prefers-reduced-motion:reduce){.app-live{display:none}.stage.is-hero-pinned .app-live{display:none}}

/* ---- 0. the curtain: two ink doors part at an orange seam; the mark spins to a stop; once per session ---- */
.curtain{display:none;position:fixed;inset:0;z-index:2000;overflow:hidden;font-size:1vw;pointer-events:none}
html.curtain-on .curtain{display:block}
html.curtain-lock{overflow:hidden}
/* if the engine never arrives, the doors still open on their own */
.curtain:not(.go):not(.skip) .door.t{animation:c-openT .6s cubic-bezier(.76,0,.24,1) 3.6s forwards}
.curtain:not(.go):not(.skip) .door.b{animation:c-openB .6s cubic-bezier(.76,0,.24,1) 3.6s forwards}
.curtain .door{position:absolute;left:0;right:0;height:50%;background:var(--ink);overflow:hidden;will-change:transform}
.curtain .door.t{top:0;border-bottom:.35em solid var(--o)}
.curtain .door.b{bottom:0}
.curtain .half{position:absolute;left:3.4%;right:3.4%;font:700 8.8em/1 var(--display);letter-spacing:-.02em;text-transform:uppercase;color:var(--board);white-space:nowrap;opacity:0}
.curtain .door.t .half{bottom:-.02em;transform:translateY(30%)}
.curtain .door.b .half{top:-.02em;transform:translateY(-30%)}
.curtain .half em{font-style:normal;color:var(--o-2)}
.curtain .tick{position:absolute;left:3.4%;top:4vh;font:600 clamp(11px,1.1em,14px)/1 var(--display);letter-spacing:.14em;text-transform:uppercase;color:rgba(246,246,241,.6);opacity:0}
.curtain .tick.r{left:auto;right:3.4%}
.curtain .door.b .tick{top:auto;bottom:4vh}
.curtain .spin{position:absolute;left:50%;top:50%;width:7em;height:7em;min-width:56px;min-height:56px;margin:-3.5em 0 0 -3.5em;z-index:3;transform:rotate(-540deg) scale(.2);opacity:0}
.curtain.go .half{animation:c-halfin .7s cubic-bezier(.2,.8,.2,1) .3s forwards}
.curtain.go .tick{animation:c-fade .4s .8s forwards}
.curtain.go .spin{animation:c-spinin .9s cubic-bezier(.2,.9,.2,1) .15s forwards,c-spinout .5s ease-in 1.7s forwards}
.curtain.go .door.t{animation:c-openT .9s cubic-bezier(.76,0,.24,1) 1.75s forwards}
.curtain.go .door.b{animation:c-openB .9s cubic-bezier(.76,0,.24,1) 1.75s forwards}
.curtain.skip .door.t{animation:c-openT .5s cubic-bezier(.76,0,.24,1) 0s forwards}
.curtain.skip .door.b{animation:c-openB .5s cubic-bezier(.76,0,.24,1) 0s forwards}
.curtain.skip .spin{animation:c-spinout .3s ease-in 0s forwards}
@keyframes c-halfin{to{opacity:1;transform:none}}
@keyframes c-fade{to{opacity:1}}
@keyframes c-spinin{to{transform:none;opacity:1}}
@keyframes c-spinout{to{transform:scale(.001);opacity:0}}
@keyframes c-openT{to{transform:translateY(-100%)}}
@keyframes c-openB{to{transform:translateY(100%)}}
@media (max-width:899px){
  .curtain{font-size:2.2vw}
  .curtain .half{font-size:5.9em;white-space:normal;line-height:.95}
  .curtain .spin{width:16vw;height:16vw;margin:-8vw 0 0 -8vw}
}
@media (max-height:520px){.curtain .half{font-size:6em}}