/* ═══ site layer — rides on top of previews.css ═══ */
section{border-bottom:0}
.wrap{max-width:1160px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}

/* nav */
.snav{position:sticky;top:0;z-index:50;background:color-mix(in srgb,#BA8F5F 88%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.snav-in{max-width:1160px;margin:0 auto;padding:10px 26px;display:flex;align-items:center;gap:22px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:900;
  font-size:20px;color:var(--text);text-decoration:none;letter-spacing:-.01em}
/* The MARK, not the app icon. mark.svg is bare ink on currentColor, so it is
   masked rather than dropped in as an image — that way it takes the brand's
   own colour exactly instead of rendering as a picture of a logo. */
.brand .mk{width:42px;height:42px;display:block;flex:none;
  /* the app icon's own face gradient, not an approximation of it — the mask
     lets the mark wear it exactly as the icon does, with no tile behind it */
  background:linear-gradient(160deg,#DDBC8F 0%,#D4B080 52%,#CAA574 100%);
  -webkit-mask:url(/mark.svg) no-repeat center/contain;
  mask:url(/mark.svg) no-repeat center/contain;
  /* the icon reads as cut FROM the board; without a tile the cut edge is what
     keeps a cream mark legible on kraft */
  filter:drop-shadow(0 1.5px 0 rgba(50,32,14,.5)) drop-shadow(0 2px 3px rgba(50,32,14,.3))}
.snav-links{margin-left:auto;display:flex;align-items:center;gap:18px}
.snav-links a{color:var(--muted);text-decoration:none;font-size:14px;font-weight:600}
.snav-links a:hover{color:var(--text)}
@media(max-width:780px){.snav-links a:not(.btn):not(.keep){display:none}}
.btn{display:inline-block;background:var(--brand);color:var(--on-brand);text-decoration:none;
  font:700 14px var(--font-ui);letter-spacing:.04em;border-radius:4px;padding:11px 20px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 3px 0 color-mix(in srgb,var(--brand) 60%,#000),0 5px 8px rgba(50,32,14,.3)}
.btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 1px 0 color-mix(in srgb,var(--brand) 60%,#000)}
.btn.ghost{background:var(--cb-face);color:var(--text);
  box-shadow:inset 0 1px 0 rgba(255,240,214,.44),0 3px 0 var(--cb-edge),0 5px 8px rgba(50,32,14,.26)}

/* copy column */
.copy .pill{margin-bottom:14px}
.copy .eye{font-size:clamp(15px,1.6vw,19px)}
.copy h1,.copy h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  letter-spacing:-.014em;line-height:1.03;margin:6px 0 0;font-size:clamp(34px,4.2vw,54px)}
.copy h2{font-size:clamp(28px,3.4vw,44px)}
.copy .sub{font-family:var(--font-quote);font-style:italic;font-weight:600;
  font-size:clamp(16px,1.7vw,20px);line-height:1.5;color:var(--muted);margin:16px 0 0;max-width:44ch}
.ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:16px}
.startform{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;max-width:440px}
.startform input{flex:1;min-width:200px;font:inherit;font-size:16px;padding:12px 14px;
  background:var(--cb-face);border:1px solid var(--border-2);border-radius:4px;color:var(--text);
  box-shadow:inset 0 1px 3px rgba(90,62,32,.18)}
.startform input::placeholder{color:var(--faint)}
.startform input:focus{outline:2px solid var(--brand);outline-offset:1px}
.startform .btn{border:0;cursor:pointer;font-family:var(--font-ui)}
.hero-note{font-size:13.5px;color:var(--faint);margin-top:14px}
.hero-note b{color:var(--green)}
.claims{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:10px}
.claims li{font-size:15.5px;line-height:1.5;color:var(--muted);padding-left:22px;position:relative}
.claims li::before{content:'';position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:2px;
  background:var(--cb-face);box-shadow:inset 0 1px 0 rgba(255,240,214,.5),0 1.5px 0 var(--cb-edge)}
.claims b{color:var(--text)}

/* ═══ scenes — each section IS the final shot; the film plays across it ═══ */
.duo{display:grid;grid-template-columns:minmax(320px,38%) 1fr;gap:clamp(20px,3vw,44px);
  align-items:center;padding:26px 0;min-height:calc(100svh - 64px);
  overflow:hidden;position:relative}
.duo.flip{grid-template-columns:1fr minmax(320px,38%)}
.scene{position:relative;height:min(86svh,780px);container-type:inline-size}
@media(max-width:999px){
  /* ═══ phone view: ONE SECTION = ONE SCREEN. Same structure as desktop —
     copy then scene — condensed, never split across two scrolls. ═══ */
  .duo,.duo.flip{grid-template-columns:1fr;min-height:100svh;padding:14px 0 18px;
    gap:10px;align-content:center;overflow:visible}
  /* the section used to clip at the wrap's 26px gutter, which sliced the
     exhibits' shadows into a straight vertical edge — a box on the wood.
     Nothing clips on a phone now; the page guards its own width instead. */
  body{overflow-x:hidden}
  /* the replay control lived below the scene and was hidden by the old clip —
     keep it hidden here so the surface stays unbroken */
  .replaybar{display:none}
  .duo.flip .copy{order:-1}
  /* scene 1 gets the hero's spare height: six pieces have to rest on the desk
     beside the phone before four of them fly in */
  .scene{height:min(52svh,422px)}
  /* copy, condensed */
  .copy h1{font-size:clamp(29px,8.4vw,38px)}
  .copy h2{font-size:clamp(25px,7.2vw,32px)}
  .copy .eye{font-size:15px}
  .copy .sub{font-size:15px;line-height:1.42;margin-top:10px}
  .claims{gap:5px;margin-top:12px}
  .claims li{font-size:13px;line-height:1.4;padding-left:17px}
  /* three claims is what a phone screen can hold with the scene intact */

  .claims li::before{width:8px;height:8px}
  .ctas{margin-top:12px;gap:10px}
  .startform{margin-top:14px}
  .hero-note{margin-top:9px;font-size:12.5px}

  .btn{padding:10px 16px;font-size:13px}
  /* scene 1: the phone keeps its presence, tiles run a column beside it */
  /* the phone is sized FROM the scene height, so it can never outgrow it */
  /* no clip anywhere on a phone — a sliced shadow draws a wall on the wood */
  .scene{overflow:visible}
  .scene .s1phone{right:2%;left:auto;margin:0;bottom:3%;
    width:calc(min(52svh,422px) * 0.90 / 2.168)}
  /* tiles read smaller on a phone without losing the material */
  .scene .ptile .saka-wt{font-size:8.5px;margin-bottom:3px}
  .scene .ptile .saka-big{font-size:13px}
  /* saka.css sets .saka-w.q .saka-big with !important — match it or the
     paired narrow tiles keep a 15px headline and clip */
  .scene .ptile .saka-w.q .saka-big{font-size:13px!important}
  /* a short screen tightens the desk rather than letting them bleed downward */
  .scene.desk-tight .ptile .saka-w{padding:4px 6px}
  .scene.desk-tight .ptile .saka-big,
  .scene.desk-tight .ptile .saka-w.q .saka-big{font-size:11px!important}
  .scene.desk-tight .ptile .saka-wt{font-size:7.5px;margin-bottom:2px}
  .scene.desk-tight .ptile .saka-sub,.scene.desk-tight .ptile .saka-foot{font-size:7.5px}
  .scene .ptile .saka-sub,.scene .ptile .saka-foot{font-size:8.5px}
  .scene .ptile .saka-w{padding:5px 7px}
  .scene .ptile .saka-w.q{padding:6px 7px}
  .scene .ptile .saka-qa b{font-size:10px}
  .scene .ptile .saka-qa span{font-size:8px}
  .scene .ptile .saka-ic svg{width:15px;height:15px}
  .scene .ptile .saka-brow{font-size:8.5px}
}
.scene .ptile{position:absolute;z-index:3;opacity:0;
  filter:drop-shadow(0 7px 10px rgba(44,28,10,.32))}
.scene .ptile .saka-w{width:100%;cursor:default}
.scene .ptile.sel .saka-w{box-shadow:0 0 0 2px var(--brand),
  inset 0 1px 0 rgba(255,240,214,.44),0 4px 0 var(--cb-edge),0 6px 8px rgba(50,32,14,.3)}
.scene .bhide{opacity:0}
/* scene 1: the phone is an object on the desk, board live inside */
.s1phone{position:absolute;right:3%;bottom:2%;width:min(330px,37svh);z-index:2}
.s1phone .scr{display:flex;flex-direction:column}
.s1phone .psafe{height:8%;flex:none}
.s1phone img.pscr-hdr{display:block;width:100%;height:auto;flex:none}
.s1phone .pboardhost{position:relative;flex:1;overflow:hidden}
.s1phone .pboard{position:absolute;left:0;top:0;width:430px;transform-origin:0 0;padding:8px 12px 12px}
.s1phone .pboard .ghost{display:none}
.s1phone .pboard .saka-w{cursor:default}
/* scene 2: the chair owns its column — nothing sits on it */
.s2stn{position:absolute;left:3%;top:4%;width:min(280px,40cqw);z-index:2}
.s2stn .chsvg{width:86%}
.s2menu{position:absolute;right:5%;bottom:8%;width:min(330px,50cqw);z-index:2}
.s2menu .saka-w{width:100%}
/* the handle is a HANDLE — it wears the kraft chip like the name plate */
.scene .stn .lk{display:inline-block;align-self:center;background:var(--cb-face);
  border:1px solid rgba(90,62,32,.5);border-radius:4px;padding:.5em 1em;margin-top:5%;
  font-weight:700;letter-spacing:.02em;color:var(--brand);
  font-size:clamp(9.5px,2.3cqw,13.5px);
  box-shadow:inset 0 1px 0 rgba(255,240,214,.5),0 2px 0 var(--cb-edge),0 3px 4px rgba(50,32,14,.24)}
@media(max-width:999px){
  /* scene 2, condensed: the chair is CENTRED and the menu is the featured
     tile directly beneath it — the two loose tiles flank the chair, they do
     not stack on top of it. Centring is done with left/right+margin, never
     a transform, because the entrance animations own transform. */
  #sc2{height:min(52svh,442px)}
  /* capped: at 700px this query still applies, and an uncapped 44% chair
     grows to 280px and swallows the menu under it */
  .s2stn{left:0;right:0;margin:0 auto;top:1%;width:44%;max-width:165px}
  .s2stn .chsvg{width:84%}
  .s2stn .av{width:22%}
  .s2stn .plate{font-size:9.5px}
  .s2stn .lk{font-size:9px;padding:.4em .7em;margin-top:6%}
  /* the menu: a tile, centred under the chair — not a wall across the screen */
  /* the menu is a FEATURED TILE, not a wall: narrow, set low in the scene,
     with a clear band of wood between it and the chair's handle */
  /* bottom is the pre-measure fallback — packStage() places the menu off the
     chair's real height so the two can never share the same wood */
  .s2menu{left:0;right:0;margin:0 auto;bottom:0;width:58%;max-width:250px}
  /* a scene too short to hold both: the chair gives way, never the menu */
  #sc2.stage-tight .s2stn{width:34%;max-width:130px}
  #sc2.stage-tight .s2stn .lk{font-size:8px;margin-top:4%}
  .s2menu .saka-wt{font-size:7.5px;padding:5px 7px 0}
  .s2menu .sv-r{padding:3px 7px;gap:5px}
  .s2menu .sv-nm{font-size:10px}
  .s2menu .sv-du{font-size:7.5px}
  .s2menu .sv-pr{font-size:10px;min-width:2.2em}
  .s2menu .saka-foot{font-size:7px;padding:0 7px 5px;line-height:1.3;
    white-space:normal;overflow:visible;text-overflow:clip}
}
/* scene 3: chairs across the top, exhibits in a masonry below */
.s3line{position:absolute;left:2%;right:2%;top:2%;display:flex;align-items:flex-end;
  justify-content:center;gap:2%}
.s3line .fbox{flex:0 0 16.5%}
.s3x{position:absolute;z-index:2}
.s3line .stn .chsvg{width:86%}
#sc3x1{left:1.5%;top:31%;width:47%}
#sc3x2{right:0;top:34%;width:47%}
#sc3x3{left:4%;top:76%;width:92%}
@media(max-width:999px){
  /* scene 3, condensed: chairs across the top, the three exhibits stacked
     small enough that the whole floor reads on one screen */
  #sc3{height:min(60svh,487px)}
  #sc3 .s3line{top:0}
  /* the floor line takes the whole width: four chairs edge to edge, drawn at
     full box width, with the secondary caption dropped so the chair itself
     gets the height it frees up */
  #sc3 .s3line{gap:0;left:0;right:0;width:98%;max-width:430px;margin:0 auto}
  #sc3 .s3line .fbox{flex:0 0 25%}
  #sc3 .s3line .stn .chsvg{width:100%}
  /* the floor with no room to breathe: chairs and exhibits both come down a
     step so the three bands still clear each other */
  #sc3.floor-tight .s3line .fbox{flex:0 0 21%}
  #sc3.floor-tight .xh b{font-size:10.5px}
  #sc3.floor-tight .seat .who{font-size:7.5px}
  #sc3.floor-tight .rname{font-size:8px}
  #sc3.floor-tight .row{padding:3px 5px;margin-bottom:3px}
  /* the secondary caption goes so the chair gets the height it frees */
  #sc3 .s3line .terms .wait,#sc3 .s3line .terms br{display:none}
  #sc3 .stn .plate{font-size:8px;padding:.26em .6em}
  #sc3 .stn .av{width:28%;font-size:8px}
  #sc3 .stn .terms{font-size:7px;margin-top:3%}
  /* a deliberate mosaic, not a column: the floor runs full width under the
     chairs, then booth rent and the Google name sit SIDE BY SIDE beneath it.
     Tops are fixed here so nothing can run off the bottom of the scene. */
  /* the scene stops clipping on a phone — a sliced drop-shadow draws a hard
     rectangle on the wood and reads as a video box sitting on the surface.
     Positions are pinned in CSS now, so nothing needs the clip to behave. */
  /* tops here are only the pre-measure fallback — packFloor() measures the
     line and places these off its real height */
  #sc3x1{left:2%;right:auto;width:96%;top:33%}
  #sc3x2{left:2%;right:auto;width:57%;top:64%}
  #sc3x3{left:auto;right:2%;width:38%;top:64%}
  #sc3x2 .xh{text-align:left}
  #sc3 .xh b{font-size:12px}
  #sc3 .xh{margin-bottom:4px}
  #sc3 .xh .tag{font-size:7.5px;padding:.28em .5em}
  #sc3 .seat{padding:3px 15% 3px 4px;border-radius:5px;min-height:0}
  #sc3 .seat .who{font-size:8px;padding-right:8px}
  #sc3 .seat .cl{font-size:6.5px;line-height:1.2;margin-top:1px}
  #sc3 .seat .mchair{width:11px}
  #sc3 .room-grid{gap:3px;margin-top:2px}
  #sc3 .room-lobby{margin-top:4px}
  #sc3 .room-lobby .lchip,#sc3 .room-ln{font-size:7.5px}
  #sc3 .row{padding:4px 6px;gap:5px;margin-bottom:4px;border-radius:5px}
  #sc3 .avatar{width:17px;height:17px;font-size:8px}
  #sc3 .rname{font-size:9px}
  #sc3 .rmeta{font-size:7px;margin-top:0}
  #sc3 .st{font-size:7px;padding:.25em .6em}
  #sc3x3 .saka-wt{font-size:8px}
  #sc3x3 .saka-big{font-size:13px}
  #sc3x3 .saka-sub,#sc3x3 .saka-srow{font-size:8px}
  #sc3x2 .xh{text-align:left}
  /* narrow rows: drop the decorative Paid button and let the text have the width */
  #sc3 .row .mini{display:none}
  #sc3 .rname,#sc3 .rmeta{white-space:normal;overflow:visible;text-overflow:clip}
  /* the rating is the point — never let it clip */
  #sc3x3 .namerow{flex-wrap:wrap;gap:1px 6px}
  #sc3x3 .namerow .saka-big{flex:1 0 100%;white-space:normal;overflow:visible;text-overflow:clip}
  /* in the narrow column the badge carries the rating and the name only */
  #sc3x3 .saka-srow{display:none}
  #sc3x3 .saka-sub{font-size:7px;line-height:1.25;word-break:break-all}
  #sc3x3 .saka-big{font-size:12px}
}
.replaybar{position:absolute;left:0;right:auto;bottom:-30px;z-index:4}
.replaybar .pbtn{padding:6px 12px;font-size:11px}

/* the money strip */
.money{margin:40px 0;padding:34px 30px;background:rgba(255,240,214,.2);border:1px solid var(--border);border-radius:5px;text-align:center}
.money p{margin:0;font-family:var(--font-display);font-weight:700;font-size:clamp(20px,2.6vw,30px);line-height:1.4}
.money p span{color:var(--brand)}
.money small{display:block;margin-top:12px;font-size:14px;color:var(--muted)}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;margin-top:34px}
.plan{background:var(--cb-face);border-radius:5px;padding:26px 24px;position:relative;isolation:isolate;
  box-shadow:inset 0 1px 0 rgba(255,240,214,.44),inset 0 -1px 0 rgba(90,62,32,.3),
    0 4px 0 var(--cb-edge),0 5.5px 0 var(--cb-edge-dark),0 10px 9px rgba(50,32,14,.3)}
.plan .who{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--brand)}
.plan .fig{font-family:var(--font-display);font-weight:900;font-size:44px;margin:10px 0 2px}
.plan .fig span{font-family:var(--font-ui);font-weight:600;font-size:14px;color:var(--faint)}
.plan p{margin:8px 0 0;font-size:14px;line-height:1.55;color:var(--muted)}
.plan .plan-cta{display:inline-block;margin-top:16px;font-size:14px;padding:10px 20px}
.price-foot{margin-top:18px;font-size:14px;color:var(--faint);text-align:center}
.price-foot b{color:var(--text)}
@media(max-width:999px){
  /* the three prices stay SIDE BY SIDE on a phone, same as the web view —
     comparing them is the whole point, and a stack hides the comparison */
  .plans{grid-template-columns:repeat(3,1fr);gap:8px;margin-top:22px}
  .plan{padding:12px 9px 14px;border-radius:4px}
  .plan .who{font-size:8px;letter-spacing:.09em;line-height:1.25}
  .plan .fig{font-size:26px;margin:8px 0 0;line-height:1}
  .plan .fig span{display:block;font-size:10px;margin-top:2px}
  .plan p{font-size:10.5px;line-height:1.4;margin-top:7px}
  .price-foot{font-size:12px;margin-top:14px;padding:0 14px}
}

/* footer */
footer{border-top:1px solid var(--border);margin-top:70px;padding:34px 0 60px}
.foot-in{max-width:1160px;margin:0 auto;padding:0 26px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;
  font-size:13.5px;color:var(--faint)}
.foot-in a{color:var(--muted);text-decoration:none}
.foot-in a:hover{color:var(--text)}
.foot-in .sp{flex:1}
/* the firm's mark sits IN the line, wearing the line's own colour and weight —
   masked for the same reason as the nav mark */
.foot-in .built{display:inline-flex;align-items:center;gap:.36em;white-space:nowrap}
.foot-in .built b{color:var(--muted);letter-spacing:.02em}
/* the mark rides BESIDE the words, not instead of them — sized to read
   (the 2-1-3 lockup turns to mush much under 24px tall) */
.foot-in .divmark{display:inline-block;width:2.2em;height:1.7em;background:currentColor;
  -webkit-mask:url(/division.svg) no-repeat center/contain;
  mask:url(/division.svg) no-repeat center/contain}

/* App Store badge (drawn, no external asset) */
.asbadge{display:inline-flex;align-items:center;gap:9px;background:#1b1712;color:#f3ead9;text-decoration:none;
  border-radius:8px;padding:8px 16px 8px 12px;border:1px solid rgba(255,240,214,.2)}
.asbadge svg{width:22px;height:22px;display:block;fill:#f3ead9}
.asbadge .t{line-height:1.15;text-align:left}
.asbadge .t small{display:block;font-size:9.5px;letter-spacing:.04em;opacity:.75}
.asbadge .t b{font-size:15px;font-weight:600;letter-spacing:.01em}