/* V5 widgets: offer pop-up, demo board, calculators. Tokens from v5-base.css. */

/* ---------- Offer ---------- */
.offer-backdrop{position:fixed;inset:0;z-index:90;background:rgba(250,251,252,.4)}
.offer{position:fixed;z-index:91;background:var(--white);color:var(--ink);border:1px solid var(--rule);box-shadow:var(--paper-shadow);overflow:auto;overscroll-behavior:contain;outline:none}
.offer[hidden],.offer-backdrop[hidden],.offer-bar[hidden]{display:none}
.offer-grid{display:flex;gap:24px;padding:32px}
.offer-thumb{margin:0;flex:0 0 144px;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.offer-thumb :is(img,svg){width:144px;height:192px;object-fit:contain;background:var(--mist);border:1px solid var(--rule);border-radius:var(--r-paper)}
.offer-copy{min-width:0;flex:1}
.offer-tag{margin:0 0 8px}
.offer-title{font-size:clamp(28px,3.4vw,36px)}
.offer-body{margin-top:12px;font-size:18px}
.offer-pick{margin-top:16px;font-weight:600;color:var(--ink)}
.offer-trades{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.offer-trade{min-height:48px}
.offer-small{margin-top:16px}
.offer-close{margin-top:12px;min-height:48px}
.offer-x{position:absolute;top:4px;right:4px;width:48px;height:48px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink);cursor:pointer}
.sheet-handle{display:none}

@media (min-width:768px){
  .offer{inset:0;margin:auto;width:min(640px,calc(100vw - 48px));height:fit-content;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);border-radius:var(--r-paper);opacity:0;transform:translateY(8px);transition:opacity 200ms ease,transform 200ms ease}
  .offer.is-in{opacity:1;transform:none}
}
@media (max-width:767px){
  .offer{left:0;right:0;bottom:0;max-height:55vh;max-height:55dvh;border-radius:16px 16px 0 0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transition:transform 280ms ease}
  .offer.is-in{transform:none}
  /* Sheet: tag, headline and body sit beside a small report thumbnail; chips, small print and Not now take the full width. */
  .offer-grid{display:grid;grid-template-columns:minmax(0,1fr) 64px;grid-template-areas:"tag tag" "title thumb" "body thumb" "pick pick" "trades trades" "small small" "close close";column-gap:12px;padding:0 16px 8px}
  .offer-copy{display:contents}
  .offer-grid>*,.offer-copy>*{margin:0}
  .offer-grid{row-gap:6px}
  .offer-tag{grid-area:tag;margin:0;padding-right:44px;font-size:13px}
  .offer-title{grid-area:title;font-size:22px;margin-top:2px}
  .offer-body{grid-area:body;font-size:15px;line-height:1.4;margin-top:4px}
  .offer-thumb{grid-area:thumb;flex:none;align-self:start;margin-top:4px;gap:4px}
  .offer-thumb :is(img,svg){width:64px;height:85px}
  .offer-thumb .example-tag{font-size:12px;padding:0 6px}
  .offer-pick{grid-area:pick;margin-top:6px}
  .offer-trades{grid-area:trades;margin-top:4px;gap:6px}
  .offer-trade{min-height:44px;padding:8px 14px}
  .offer-small{grid-area:small;order:0;margin-top:4px;font-size:14px;line-height:1.35}
  .offer-close{grid-area:close;order:0;justify-self:start;min-height:44px;height:44px;padding-block:0;margin-top:0}
  /* Short phones: no thumbnail, full-width copy, tighter grid so the sheet never scrolls inside. */
  @media (max-height:799px),(max-width:380px){
    .offer-grid{grid-template-columns:minmax(0,1fr);grid-template-areas:"tag" "title" "body" "pick" "trades" "small" "close";row-gap:4px;padding:0 16px 6px}
    .offer-thumb{display:none}
    .offer-title{font-size:20px;line-height:1.1}
    .offer-body{font-size:14px;line-height:1.35;margin-top:2px}
    .offer-pick{margin-top:4px;font-size:15px}
    .offer-trades{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
    .offer-trade{padding:8px 6px;justify-content:center;text-align:center;font-size:15px;line-height:1.15}
    .offer-small{font-size:13px;line-height:1.3;margin-top:2px}
    .offer-close{margin-top:0}
  }
  /* Short phones (667 px and under): drop the tag line and tighten type so Not now stays inside the 55% cap. */
  @media (max-height:700px){
    .offer-tag{display:none}
    .offer-title{font-size:18px}
    .offer-body{font-size:13px;line-height:1.3}
    .offer-pick{font-size:14px;margin-top:2px}
    .offer-trades{gap:4px}
    .offer-trade{min-height:44px;padding:4px;font-size:14px}
    .offer-small{font-size:12px;line-height:1.25}
    .offer-close{min-height:44px}
    .sheet-handle{height:16px}
    .sheet-handle::before{top:6px}
  }
  /* Tiny screens (568 px tall): the sheet may scroll, but Not now stays pinned and fully visible. */
  @media (max-height:600px){
    .offer-close{position:sticky;bottom:0;z-index:1;box-shadow:0 -8px 8px var(--white);background:var(--white)}
  }
  .sheet-handle{display:block;position:relative;height:24px}
  .sheet-handle::before{content:"";position:absolute;left:50%;top:10px;width:40px;height:5px;margin-left:-20px;border-radius:3px;background:var(--rule)}
  /* Swipe zone: the handle and the headline area. Chips and buttons keep normal touch. */
  .sheet-handle,.offer-tag,.offer-title,.offer-body,.offer-thumb{touch-action:none}
  .offer-x{top:0;width:44px;height:44px}
}

.offer-bar{position:fixed;z-index:80;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:center;gap:12px;padding:8px 8px calc(8px + env(safe-area-inset-bottom)) 16px;background:var(--white);border-top:1px solid var(--rule);box-shadow:var(--paper-shadow)}
.offer-bar-text{margin:0;font:600 16px/1.3 var(--body)}
.offer-bar-start{min-height:44px;padding:8px 20px;font-size:16px}
.offer-bar-x{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--ink);cursor:pointer}

/* v5.1 pop-up (BUILD-BRIEF 7): the offer is the hero. Dark, blurred page behind; 880 px card; sheet up to 72%. */
.offer-backdrop{background:rgba(32,14,22,.58);-webkit-backdrop-filter:blur(10px) saturate(.9);backdrop-filter:blur(10px) saturate(.9);animation:offer-fade 200ms ease}
@keyframes offer-fade{from{opacity:0}}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.offer-backdrop{background:rgba(32,14,22,.72)}}
.offer-noblur .offer-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(32,14,22,.75)}
.offer-ticks{list-style:none;padding:0;display:grid;gap:6px}
.offer-ticks li{position:relative;padding-left:28px;font-weight:600;line-height:1.35}
.offer-ticks li::before{content:"";position:absolute;left:0;top:.12em;width:20px;height:20px;border-radius:50%;background:var(--warm) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='%23472732' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.offer-start{margin-top:16px;width:100%}
.offer-close.btn{border-color:transparent;background:none;text-decoration:underline;text-underline-offset:4px;font-weight:600}
@media (min-width:768px){
  .offer{width:min(880px,calc(100vw - 48px));border:0;border-radius:8px;box-shadow:0 30px 80px #1A080F66;overflow:hidden auto}
  .offer-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:0;padding:0}
  .offer-thumb{position:relative;flex:none;margin:0;background:var(--wine);min-height:100%}
  .offer-thumb :is(img,svg){width:100%;height:100%;min-height:420px;object-fit:contain;border:0;border-radius:0;background:var(--wine)}
  .offer-thumb figcaption{position:absolute;left:16px;bottom:16px}
  .offer-copy{padding:40px 44px 28px}
  .offer-title{font-size:44px;line-height:1.02;letter-spacing:-.03em}
  .offer-ticks{margin-top:20px;font-size:18px}
  .offer-pick{margin-top:22px}
  .offer-x{top:8px;right:8px}
}
@media (max-width:767px){
  .offer-backdrop{-webkit-backdrop-filter:blur(6px) saturate(.9);backdrop-filter:blur(6px) saturate(.9)}
  .offer{max-height:72vh;max-height:72dvh}
  .offer-grid{grid-template-areas:"tag tag" "title thumb" "body thumb" "pick pick" "trades trades" "start start" "small small" "close close";grid-template-columns:minmax(0,1fr) 72px}
  .offer-thumb :is(img,svg){width:72px;height:84px;border-radius:6px;background:var(--wine)}
  .offer-ticks{grid-area:body;font-size:15px;gap:3px}
  .offer-ticks li{padding-left:24px}
  .offer-ticks li::before{width:17px;height:17px;background-size:12px}
  .offer-start{grid-area:start;margin-top:6px;min-height:48px}
  @media (max-height:799px),(max-width:380px){
    .offer-grid{grid-template-areas:"tag" "title" "body" "pick" "trades" "start" "small" "close";grid-template-columns:minmax(0,1fr)}
    .offer-ticks{font-size:14px}
  }
  @media (max-height:700px){.offer-ticks{font-size:13px;gap:1px}.offer-start{min-height:44px}}
}
@media (prefers-reduced-motion:reduce){.offer-backdrop{animation:none}}

/* ---------- Demo board ---------- */
.demo-line{margin-top:12px}
.demo-controls{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.demo-controls .btn[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.demo-controls .btn{flex:1 1 150px;max-width:220px;padding-inline:12px}
.demo-controls .btn:disabled{opacity:.6;cursor:default}
/* Round 4 (M6): the played state reads as done, ink on warm, 4.5:1 or better. */
#demo-board [data-play-week]:disabled{background:var(--warm);color:var(--ink);border:2px solid #E9D1A6;opacity:1;cursor:default}
.demo-board{margin-top:24px;padding:16px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-paper)}
.example-label{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;font-weight:600}
.demo-cols{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.demo-tiles{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:2px;padding:12px;border:1px solid var(--rule);border-radius:var(--r-control);background:var(--paper);min-width:0}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:6px}
.tile-l{font:600 13px/1.25 var(--body);color:var(--muted)}
.tile .example-tag{font-size:12px;padding:0 5px;flex:none}
.tile-n{font:800 26px/1.15 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums;margin-top:6px}
.tile-sub{font-size:14px;line-height:1.3;color:var(--muted)}
.tile[data-tile="reheated"]{border-top:3px solid var(--apricot)}
.demo-main.has-feed{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:12px;align-items:start}
.demo-feed{padding:12px;border:1px solid var(--rule);border-radius:var(--r-control);background:var(--paper)}
.demo-feed-h{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 15px/1.3 var(--body);letter-spacing:0}
.demo-feed .example-tag{font-size:12px;padding:0 5px}
.feed-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:8px;font-size:14px;line-height:1.35}
.feed-list li{padding-left:10px;border-left:2px solid var(--rule);transition:opacity 260ms cubic-bezier(.2,.8,.2,1),transform 260ms cubic-bezier(.2,.8,.2,1)}
.feed-list li.is-new{border-left-color:var(--apricot);animation:feed-in 260ms cubic-bezier(.2,.8,.2,1)}
@keyframes feed-in{from{opacity:0;transform:scale(.94) translateY(6px)}}
.feed-t{display:block;font-size:13px;color:var(--muted)}
.feed-empty{font-size:14px;color:var(--muted);margin-top:8px}
.demo-col-val{min-height:20px;margin:-6px 0 8px;font:600 14px/1.4 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.demo-col-note{margin:-4px 0 8px;font-size:13px;line-height:1.3;color:var(--ink)}
.demo-col-cap{margin:0 0 8px;font:600 14px/1.3 var(--body);color:var(--solid)}
.demo-col-cap[hidden]{display:none}
.demo-col-reheated{background:#FBEBD6;box-shadow:inset 0 3px 0 var(--apricot)}
.demo-closed{margin-top:12px;padding:12px;border:1px dashed var(--rule);border-radius:var(--r-control);display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}
.demo-closed-h{font:600 16px/1.3 var(--body);letter-spacing:0}
.demo-closed .demo-col-body{display:flex;flex-direction:row;flex-wrap:wrap;min-height:44px;gap:8px}
.demo-closed .demo-card{width:auto;min-width:170px}
.demo-closed-line{font-size:15px;color:var(--muted)}
.dc-meta{font-size:13px;line-height:1.3;color:var(--ink);font-variant-numeric:tabular-nums}
.dc-tags{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px}
.dc-tag{padding:0 6px;border-radius:99px;background:var(--mist);font:600 12px/1.6 var(--body)}
.msg-sys{margin-top:12px;font:600 13px/1.4 var(--body);color:var(--muted);text-align:center}
.msg-bot{border-style:dashed}
.is-xmas .demo-tiles,.is-xmas .demo-feed,.is-xmas .demo-closed{display:none}
.is-xmas .demo-main.has-feed{grid-template-columns:1fr}
@media (max-width:1199px){.demo-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}.demo-main.has-feed{grid-template-columns:1fr}}
@media (min-width:768px) and (max-width:1199px){.demo-cols{grid-template-columns:repeat(3,minmax(0,1fr))}}
.demo-col{min-width:0;background:var(--mist);border-radius:var(--r-paper);padding:12px}
.demo-col-head{display:flex;align-items:center;justify-content:space-between;gap:8px;font:700 16px/1.3 var(--body);letter-spacing:0;margin:0 0 12px}
.demo-count{min-width:28px;padding:0 8px;border-radius:999px;background:var(--white);text-align:center;font:600 14px/1.6 var(--body);font-variant-numeric:tabular-nums}
.demo-col-body{display:flex;flex-direction:column;gap:8px;min-height:64px}
.demo-card{display:flex;flex-direction:column;justify-content:center;gap:3px;width:100%;height:auto;min-height:60px;padding:8px 10px;text-align:left;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-control);cursor:pointer;color:var(--ink);will-change:transform}
.demo-card:hover{border-color:var(--ink)}
.demo-card[aria-expanded="true"]{border-color:var(--ink)}
.dc-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dc-name{font:600 16px/1.2 var(--body)}
.dc-sub{font-size:14px;line-height:1.3;color:var(--muted);overflow-wrap:anywhere}
.demo-card .example-tag{font-size:13px;padding:0 6px}
.demo-summary[hidden]{display:none}
.feed-list li[hidden]{display:none}
.demo-summary{margin-top:16px;padding:12px 16px;background:var(--warm);border-radius:var(--r-paper);font-size:17px}
.demo-msg{margin-top:16px;padding:16px;background:var(--white);border:2px solid var(--ink);border-radius:var(--r-paper);outline:none}
.demo-msg[hidden]{display:none}
.demo-msg-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px}
.demo-msg-title{font-size:22px;letter-spacing:-.01em}
.demo-msg-close{min-height:44px}
.msg{max-width:60ch;margin-top:12px;padding:12px 16px;border-radius:var(--r-paper);background:var(--paper);border:1px solid var(--rule)}
.msg-out{background:var(--cold);border-color:var(--cold)}
.msg-meta{font:600 14px/1.4 var(--body);color:var(--muted)}
.msg-text{margin-top:4px;font-size:17px}
.demo-under{margin-top:24px;display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;font-size:19px}
.demo-under .text-link{display:inline-flex;min-height:44px;align-items:center}
.demo-samples{margin-top:16px}
.demo-samples ul{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 24px}
.demo-samples li{min-height:44px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.demo-samples a{display:inline-flex;min-height:44px;align-items:center}
.demo-sample-pending{font-weight:600;color:var(--ink)}

@media (max-width:767px){
  .demo-board{padding:12px}
  .demo-cols{grid-template-columns:1fr;gap:8px}
  /* Stacked: a column with no cards collapses to a slim header row with its count. */
  .demo-col{padding:8px 12px}
  .demo-col-head{margin:0;min-height:28px}
  .demo-col-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-content:start;min-height:0;margin-top:8px}
  .demo-col.is-empty .demo-col-body{display:none}
  .demo-tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .tile{padding:10px}.tile-n{font-size:22px}
  .demo-closed{grid-template-columns:1fr}
  .demo-col-val{margin:0}
}

/* ---------- Calculators ---------- */
.calc{margin-top:24px}
.calc-tabs{display:flex;flex-wrap:wrap;gap:8px}
.calc-tab{min-height:48px;padding:8px 16px;border:1px solid var(--rule);border-radius:999px;background:var(--white);font:600 16px/1.2 var(--body);cursor:pointer}
.calc-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.calc-panel{margin-top:16px;display:grid;gap:24px;padding:24px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-paper);min-height:560px}
@media (min-width:900px){.calc-panel{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);align-items:start}}
.calc-fields{display:grid;gap:20px}
.calc-label{display:block;font:600 17px/1.3 var(--body)}
.calc-input{display:flex;align-items:center;gap:8px;margin-top:6px}
.calc-input input{width:100%;max-width:220px;min-height:48px;padding:8px 12px;font-size:18px;border:1px solid var(--muted);border-radius:var(--r-control);background:var(--paper)}
.calc-unit{font-weight:600;color:var(--muted)}
.calc-hint{margin-top:6px}
.calc-input{flex-wrap:wrap}
.calc-tag{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--warm);color:var(--ink);font:600 13px/1.5 var(--body)}
.calc-tag[hidden]{display:none}
.calc-left{display:grid;gap:16px;align-content:start}
.calc-assume{margin:0}
.calc-assume[hidden]{display:none}
.calc-source{margin-top:4px;min-height:44px;padding:0;border:0;background:none;font:600 16px/1.3 var(--body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;text-align:left}
.calc-note{margin-top:4px}
.calc-result{padding:24px;background:var(--paper);border:1px solid var(--rule);border-radius:var(--r-paper)}
.calc-headline{margin-top:12px;font:800 clamp(32px,5vw,48px)/1.1 var(--display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-headline.is-prompt{font:600 20px/1.4 var(--body);letter-spacing:0;color:var(--muted)}
.calc-maths{margin-top:16px}
.calc-maths summary{min-height:44px;display:flex;align-items:center;font-weight:600;cursor:pointer}
.calc-steps{margin:8px 0 0;padding-left:24px}
.calc-steps li{margin-top:6px;font-variant-numeric:tabular-nums}
.calc-caveat{margin-top:16px}
.calc-never{margin-top:16px}
.calc-compact .calc-panel{min-height:0;padding:16px}
.calc-compact .calc-headline{font-size:32px}
.calc-sub{margin-top:4px;font:600 18px/1.4 var(--body);color:var(--muted);font-variant-numeric:tabular-nums}
.calc-sub[hidden]{display:none}

/* ==================================================================================================
   Round 3 (Fable 5.2): phone structure and craft layer for /summer/. Loads after v5.css and v5-hero.css.
   Type on phones: 14, 17, 21, 28, 40 (36 at 360). Spacing on an 8 px grid: 12 heading to content,
   24 between groups, 48 around "show" sections, 32 around "tell" sections. Motion: --ease at 120, 200, 320 ms,
   transform and opacity only, all of it inside prefers-reduced-motion: no-preference.
   ================================================================================================== */

/* ---------- Shared craft (all widths) ---------- */
.summer .sw-label,.summer .tally-l{font:700 14px/1.3 var(--display);letter-spacing:0;text-transform:none;color:var(--muted)}
.summer .tally-n,.summer .tile-n,.summer .ct-v,.summer .ct-out strong,.summer .hc-n,.summer .dc-val,.summer .demo-col-val{font-variant-numeric:tabular-nums}
/* The one action is amber wherever the surface is ink (hero, final, sticky bar). Ink on amber is about 6:1. */
.summer .hero .btn-primary,.summer .final .btn-primary{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.summer .hero .btn-primary:hover,.summer .final .btn-primary:hover{background:var(--warm);border-color:var(--warm)}
.summer .hero :focus-visible,.summer .final :focus-visible{outline-color:var(--amber)}
/* One low warm glow behind the scene, like heat coming off a roof. Painted on the hero itself, never a card. */
.summer .hero{background:radial-gradient(62% 58% at 76% 60%,#E7A44A2B 0,#E7A44A12 46%,#E7A44A00 74%),var(--wine)}
.summer .final{background:radial-gradient(70% 90% at 12% 110%,#E7A44A24 0,#E7A44A00 70%),var(--wine)}

/* Board: paper job tickets on mist. A punched hole, a soft resting shadow, and the one being read lifts a level. */
.summer .demo-board{background:linear-gradient(180deg,#FFFFFF 0,#F7F9FA 100%);box-shadow:var(--paper-shadow)}
.summer .demo-card{padding:9px 10px 9px 24px;border-color:#D9E0E3;border-radius:3px;box-shadow:0 1px 2px #4727320D;
  background:radial-gradient(circle at 12px 14px,var(--mist) 0 3.5px,#C9D2D6 3.6px 4.4px,#FFFFFF00 4.5px),var(--white)}
.summer .demo-card[aria-expanded="true"]{border-color:var(--ink);box-shadow:var(--lift);transform:translateY(-2px)}
.summer .dc-val{font-weight:600}
.summer .tile{background:var(--white);box-shadow:0 1px 2px #4727320D}
.summer .tile-sub{color:var(--ink)}
.feed-list li{padding-left:0;border-left:0}
.feed-b{display:grid;gap:1px;width:100%;min-height:44px;padding:4px 0 4px 10px;border:0;border-left:2px solid var(--rule);background:none;text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.feed-list li.is-new .feed-b{border-left-color:var(--apricot)}
.feed-x{display:block}
.msg-card-meta{margin-top:8px;font-size:14px;color:var(--muted)}

/* Q8: behind the scenes. Two short lists and one closing line; plain words, no method. */
.behind{margin-top:32px}
.behind .sw-behind{margin-top:0}
.behind-grid{display:grid;gap:24px;margin-top:20px}
.behind-col h3{font:700 17px/1.3 var(--display);letter-spacing:0}
.behind-col ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px;font-size:17px;line-height:1.4}
.behind-col li{position:relative;padding-left:22px}
.behind-slip li::before{content:"";position:absolute;left:2px;top:.62em;width:10px;height:2px;background:var(--leak)}
.behind-run li::before{content:"";position:absolute;left:2px;top:.32em;width:10px;height:6px;border-left:2.5px solid var(--solid);border-bottom:2.5px solid var(--solid);transform:rotate(-45deg)}
.behind-close{margin-top:20px;font-weight:600;max-width:64ch}
.beat-dots{display:none}
.drawer-t{display:grid;gap:2px}
.drawer-hook{font:400 14px/1.3 var(--body);color:var(--muted)}
.guide-samples{margin-top:20px}
.guide-samples ul{list-style:none;margin:4px 0 0;padding:0}
.guide-samples a{display:inline-flex;align-items:center;min-height:44px}
.calc-next{margin-top:16px;padding-top:16px;border-top:1px solid var(--rule);display:grid;gap:10px;justify-items:start}
.calc-next p{font-size:16px}

/* Folds: native details. From 768 px section folds show their own h2 and stay open; the summary is not there. */
.fold-sum{list-style:none}
.fold-sum::-webkit-details-marker{display:none}
@media (min-width:768px){
  .fold:not([data-fold-keep])>.fold-sum{display:none}
  .fold[data-fold-keep]>.fold-sum{pointer-events:none;cursor:default}
  .fold[data-fold-keep] .fold-chev,.behind .fold-hook{display:none}
  .behind{padding:28px 32px;background:var(--white);border:1px solid var(--rule);border-radius:var(--r-paper);box-shadow:var(--paper-shadow);max-width:1040px}
  .behind>.fold-sum{display:block;margin-bottom:12px}
  .behind .fold-t{font:800 clamp(22px,2.2vw,28px)/1.1 var(--display);letter-spacing:-.01em}
  .behind-grid{grid-template-columns:1fr 1fr;gap:48px}
  .guarantee>.fold-sum{display:block}
  .guarantee .guarantee-line{display:block}
}
.guarantee .sw-label{display:block}

/* Count-ups land with a small settle (tally, tiles, hero counters). */
@media (prefers-reduced-motion:no-preference){
  .is-settle{display:inline-block;animation:rv-settle var(--t-slide) var(--ease)}
  .tile-n.is-settle{display:block;transform-origin:left center}
  @keyframes rv-settle{0%{transform:scale(1.1)}55%{transform:scale(.975)}100%{transform:none}}
  .fold[open]>.fold-in,.drawer[open]>.drawer-body,.faq-list details[open]>p,.story-more[open]>p,.calc-maths[open]>.calc-steps{animation:rv-open var(--t-open) var(--ease)}
  @keyframes rv-open{from{opacity:0;transform:translateY(-6px)}}
  .fold-chev,.drawer summary::after,.faq-list summary::after{transition:transform var(--t-open) var(--ease)}
  .sw-tabs button,.sw-problems button,.seg button,.calc-tab,.ct-b,.q0-option,.demo-card,.feed-b,.fold-sum,.drawer summary,.faq-list summary,.beat,.offer-bar-x,.hs-btn,.hs-more,.guide{transition:transform var(--t-press) var(--ease),opacity var(--t-press) var(--ease)}
  .sw-tabs button:active,.sw-problems button:active,.seg button:active,.calc-tab:active,.ct-b:active,.q0-option:active,.demo-card:active,.beat:active,.guide:active{transform:scale(.98);opacity:.86}
  .fold-sum:active,.drawer summary:active,.faq-list summary:active,.feed-b:active,.hs-btn:active,.hs-more:active,.offer-bar-x:active{opacity:.7}
}

/* Sticky action bar. Phones: a 64 px ink bar with an amber button that slides in once the hero button has gone. */
.offer-bar-text{display:grid}
@media (max-width:767px){
  .offer-bar{justify-content:space-between;gap:8px;min-height:64px;padding:8px 4px calc(8px + env(safe-area-inset-bottom)) var(--gutter);background:var(--ink);color:var(--paper);border:0;box-shadow:0 -8px 20px #47273238;
    transform:translateY(110%);opacity:0;visibility:hidden;transition:transform var(--t-slide) var(--ease),opacity var(--t-slide) var(--ease),visibility 0s linear var(--t-slide)}
  .offer-bar.is-in{transform:none;opacity:1;visibility:visible;transition-delay:0s}
  .offer-bar-text{flex:1;min-width:0;font:700 15px/1.25 var(--display);letter-spacing:-.005em}
  .offer-bar-sub{font:400 13px/1.3 var(--body);color:#FAFBFCC7}
  .offer-bar-start.btn{min-height:48px;padding:0 22px;background:var(--amber);border-color:var(--amber);color:var(--ink);font-weight:700}
  .offer-bar-x{color:var(--paper)}
  .offer-bar :focus-visible{outline-color:var(--amber)}
}

/* ---------- Phones (under 768) ---------- */
@media (max-width:767px){
  .summer{font-size:17px;line-height:1.5}
  .summer h1{font-size:40px}
  .summer h2{font-size:28px}
  .summer h3{font-size:21px}
  .summer .lede{font-size:17px;margin-top:12px;max-width:60ch}
  .summer .small{font-size:14px}
  .summer .section{padding-block:48px}
  .summer .btn{min-height:48px;font-size:17px}

  /* Hero: one button; the walkthrough and the calculator are text links. Trade chips and the promise line live further down. */
  .summer .hero{padding-block:24px 56px;background:radial-gradient(120% 34% at 50% 37%,#E7A44A2E 0,#E7A44A10 52%,#E7A44A00 78%),var(--wine)}
  .summer .hero h1{margin-top:12px;max-width:none}
  .summer .hero-pick,.summer .hero-promise{display:none}
  .summer .hero-ctas{gap:0 20px;margin-top:12px}
  .summer .hero-ctas .btn-primary{width:100%;min-height:52px}
  .summer .hero-ctas .btn:not(.btn-primary){width:auto;min-height:44px;padding:0;border:0;background:none;color:var(--warm);font-size:16px;text-decoration:underline;text-underline-offset:4px}
  .summer .hero-calc{margin-top:0;font-size:16px}
  .summer .hero-calc a{display:inline-flex;align-items:center;min-height:44px}
  .summer .hero-sub{margin-top:8px;font-size:17px}
  .summer .hs-more{margin-top:4px}
  .summer .hero-under{margin-top:8px;font-size:14px}

  /* Teaser: a warm card that overlaps the hero's bottom edge by 24 px. */
  /* Round 4 (J3): the hero's amber base rule is back on phones; it sits just above the teaser card, which overlaps the hero by 24 px. */
  .js .summer .hero::after{bottom:8px;height:22px}
  .summer .calc-teaser{position:relative;z-index:2;margin-top:-24px;border-radius:16px 16px 0 0;border-bottom:0;box-shadow:0 -6px 16px #2A111A2E}
  .summer .ct-row{gap:10px 16px;padding-block:16px 20px}
  .summer .ct-out{font-size:17px}
  .summer .ct-out strong{font-size:21px}
  .summer .ct-links{width:100%;justify-content:space-between;flex-wrap:nowrap;gap:12px}
  .summer .ct-go{width:auto;flex:none;padding-inline:18px}

  /* Switcher: tabs in one swipe row, steps in one swipe row with the next card peeking in. */
  .summer .sw{background:var(--paper)}
  .summer .sw-one{margin-top:8px;font-size:14px}
  .summer .sw-tabs{flex-wrap:nowrap;overflow-x:auto;margin:20px calc(-1 * var(--gutter)) 0;padding:2px var(--gutter);scrollbar-width:none}
  .summer .sw-tabs::-webkit-scrollbar,.summer .beats::-webkit-scrollbar,.summer .demo-tiles::-webkit-scrollbar,.summer .demo-cols::-webkit-scrollbar{display:none}
  .summer .sw-tabs button{flex:none;padding-inline:18px}
  .summer .sw-panel{margin-top:16px}
  .summer .sw-problems button{min-height:52px;padding:10px 16px;font-size:17px}
  .summer .sw-copy{gap:16px;margin-top:24px}
  .summer .sw-col p:last-child{font-size:17px;margin-top:4px}
  .summer .sw-tally{margin-top:24px;padding:12px 0;gap:8px}
  .summer .sw-tally p{font-size:15px}
  .summer .tally-n{font-size:21px}
  .summer .sw-grid{margin-top:24px}
  .summer .obj-stage{border-radius:14px}
  .summer .connector{display:none!important}
  .summer .beats{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;margin:16px calc(-1 * var(--gutter)) 0;padding:4px var(--gutter) 10px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .summer .beat-item{flex:0 0 84%;scroll-snap-align:center;gap:0;padding-bottom:14px;background:var(--white);border:1.5px solid var(--rule);border-radius:10px;box-shadow:var(--paper-shadow)}
  .summer .beat-item:has(.beat[aria-current="step"]){border-color:var(--ink)}
  .summer .beat,.summer .beat[aria-current="step"]{min-height:64px;padding:14px 14px 10px;border:0;border-radius:10px;background:none;box-shadow:none;transform:none;font-size:17px;line-height:1.3}
  .summer .beat-steps{padding:0 14px 0 18px;font-size:15px}
  .js .summer .beat-steps li:not(.is-in){opacity:1;transform:none}
  .summer .beat-dots{display:flex;justify-content:center;gap:6px;margin-top:2px}
  .summer .beat-dots i{width:6px;height:6px;border-radius:50%;background:var(--rule)}
  .summer .beat-dots[data-on="1"] i:nth-child(1),.summer .beat-dots[data-on="2"] i:nth-child(2),.summer .beat-dots[data-on="3"] i:nth-child(3){background:var(--ink)}
  .summer .behind{margin-top:20px}
  .summer .sw-safety{font-size:15px}
  .summer .sw-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}
  .summer .sw-actions .btn{width:auto;padding-inline:10px}
  .summer .sw-actions [data-check-mine]{order:-1;background:var(--ink);color:var(--paper)}
  .summer .sw-actions [data-run-numbers]{background:var(--white);color:var(--ink)}
  .summer .sw-actions [data-replay]{grid-column:1 / -1;justify-self:start;min-height:44px;padding:0;border:0;background:none;text-decoration:underline;text-underline-offset:4px;font-size:16px}
  .summer .sw-note{display:none}

  /* Board: tiles and columns swipe sideways like a phone job board. The feed opens when the week is played. */
  .summer .demo-section{background:var(--mist)}
  .summer .demo-controls{margin-top:16px}
  .summer .demo-board{margin-top:16px;padding:12px;border-radius:10px}
  .summer .example-label{margin-bottom:12px;font-size:14px}
  .summer .demo-tiles{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -12px 12px;padding:2px 12px 4px;scrollbar-width:none}
  .summer .tile{flex:0 0 78%;scroll-snap-align:start;padding:10px 12px}
  .summer .tile-n{font-size:21px;margin-top:2px}
  .summer .demo-cols{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:-12px;padding:2px 12px 4px;scrollbar-width:none}
  .summer .demo-col{flex:0 0 84%;scroll-snap-align:center;padding:10px 10px 12px}
  .summer .demo-col.is-empty .demo-col-body{display:grid;min-height:56px}
  .summer .demo-col-head{min-height:28px}
  .summer .demo-col-body{gap:6px;margin-top:6px}
  .summer .demo-card{min-height:56px;padding:7px 8px 7px 22px;gap:1px}
  .summer .dc-name{font-size:15px}
  .summer .dc-sub{font-size:13px}
  .summer .dc-where,.summer .dc-rest,.summer .dc-tags{display:none}
  .summer .dc-meta{font-size:13px}
  .summer .demo-card .example-tag{font-size:11px;padding:0 4px}
  .summer #demo-board:not(.has-played) .demo-feed{display:none}
  .summer .demo-feed{margin-top:12px}
  .summer .demo-closed{margin-top:8px;padding:10px;gap:6px}
  .summer .demo-summary{font-size:15px}

  /* Your summer and the leak check start read as one section with one action. */
  .summer .season{padding-bottom:20px}
  .summer .seg{margin-top:16px}
  .summer .seg button{min-height:48px;font-size:15px}
  .summer .season-stack{margin-top:20px}
  .summer .season-panel .lede,.summer .season-panel .btn{display:none}
  .summer .drawer{margin-top:16px}
  .summer .drawer summary{min-height:56px;font-size:17px;padding-inline:0}
  .summer .drawer{background:none}
  .summer .drawer-body{padding:4px 0 24px;gap:20px}
  .summer .leak-start{padding-top:20px;background:none;border:0}
  .summer .leak-start-inner{gap:16px}
  .summer .leak-start h2{font-size:21px;letter-spacing:-.01em}
  .summer .leak-start .lede{margin-top:4px}
  .summer .q0-q{font-size:17px;font-family:var(--body);font-weight:600;letter-spacing:0}
  .summer .q0-grid{gap:8px;margin-top:10px}
  .summer .q0-option{min-height:52px;padding:8px 16px;font-size:17px;background:var(--white)}

  /* What we put in writing: six short ticks, the guarantee headline on a card with its terms inside. */
  .summer .promises{padding-block:32px;background:var(--white);border-block:1px solid var(--rule)}
  .summer .promises-inner{gap:20px}
  .summer .tick-list{margin-top:12px}
  .summer .tick-list li{padding:9px 0 9px 32px;font-size:16px;line-height:1.35}
  .summer .tick-list li::before{top:15px}
  .summer .guarantee{padding:0;border-radius:10px}
  .summer .guarantee>.fold-sum{display:grid;grid-template-columns:1fr 24px;gap:4px 12px;align-items:center;padding:16px;cursor:pointer}
  .summer .guarantee .sw-label{grid-column:1}
  .summer .guarantee-line{grid-column:1;margin-top:0;font-size:19px;line-height:1.25}
  .summer .guarantee .fold-chev{grid-column:2;grid-row:1 / span 2}
  .summer .guarantee>.fold-in{padding:0 16px 14px}
  .summer .guarantee .small{margin-top:0}

  /* Story: heading, the trust line, the rest folded. */
  .summer .story{padding-block:32px;border:0;background:none}
  .summer .story-inner{gap:16px}
  .summer .story-panel{padding:0 0 0 14px;border:0;border-left:4px solid var(--warm);background:none}
  .summer .story-panel>.values{display:none}
  .summer .story-quote p{font-size:21px;max-width:none}
  .summer .story-text p.sig{margin-bottom:4px;font-size:21px}
  .summer .story-more{margin-top:0}
  .summer .story-more .values{list-style:none;margin:8px 0 16px;padding:0;display:grid;gap:6px;font-weight:600}
  .summer .story-text p{font-size:17px}

  /* Folded cards: one stacked contents list with hairline dividers, not four floating boxes. */
  .summer .fold-sec{padding-block:0;background:none;border:0}
  .summer .fold-sec>.wrap>h2{display:none}
  .summer #calculators{padding-top:8px;border-top:1px solid var(--rule)}
  .summer #faq{padding-bottom:40px}
  .summer .fold-sec .fold{border-bottom:1px solid var(--rule)}
  .summer .fold-sum{display:grid;grid-template-columns:1fr 24px;gap:2px 12px;align-items:center;min-height:72px;padding:14px 0;cursor:pointer}
  .summer .fold-t{grid-column:1;font:700 21px/1.2 var(--display);letter-spacing:-.01em}
  .summer .fold-hook{grid-column:1;font-size:14px;line-height:1.35;color:var(--muted)}
  .summer .fold-chev{grid-column:2;grid-row:1 / span 2;justify-self:center;width:10px;height:10px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-3px) rotate(45deg)}
  .summer .fold[open]>.fold-sum .fold-chev{transform:translateY(3px) rotate(-135deg)}
  .summer .fold-sec .fold[open]>.fold-sum,.summer .behind[open]>.fold-sum{margin-inline:calc(-1 * var(--gutter));padding-inline:var(--gutter);background:var(--warm)}
  .summer .fold-sec .fold[open] .fold-hook,.summer .behind[open] .fold-hook{color:var(--ink)}
  .summer .fold-in{padding:16px 0 28px}
  .summer .fold-in>:first-child{margin-top:0}
  .summer .behind{border-block:1px solid var(--rule)}
  .summer .behind>.fold-sum{min-height:64px}
  .summer .behind .fold-t{font-size:17px}
  .summer .look-strip{margin-top:0}
  .summer .look-strip li{padding:12px 0;font-size:17px}
  .summer .pipe,.summer .look-line{margin-top:24px}
  .summer .guide-list{margin-top:0}
  .summer .guide{min-height:72px;padding:14px 0;gap:14px}
  .summer .guide-body strong{font-size:17px}
  .summer .faq-list{margin-top:0}
  .summer .faq-list summary{font-size:17px;min-height:52px}
  .summer .calc{margin-top:16px}
  .summer .calc-panel{padding:16px;min-height:0}

  .summer .final{padding-block:48px}
  .summer .final .hero-ctas{gap:0 20px;margin-top:20px}
  .summer .final .btn-primary{width:100%;min-height:52px}
  .summer .final .btn:not(.btn-primary){width:auto;min-height:44px;padding:0;border:0;background:none;color:var(--warm);font-size:16px;text-decoration:underline;text-underline-offset:4px}
  .summer .final-line{margin-top:12px;font-size:14px}
  .summer .site-footer{padding-block:20px;font-size:14px}
  .summer .footer-row{gap:4px 24px}
}
@media (max-width:374px){.summer h1{font-size:36px}}
/* Round 4: scroll reveals are back on phones. Heading lines fade (they wrap inline, so no rise). Swipe rows and option
   grids reveal as one block, so their children keep the 120 ms press timing. Nothing inside a fold hides: the fold's own
   open animation already brings it in. */
@media (max-width:767px) and (prefers-reduced-motion:no-preference){
  .js .summer [data-reveal="stagger"]:not(.is-in){opacity:0;transform:translateY(14px)}
  .js .summer [data-reveal="stagger"]{transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
  .js .summer [data-reveal="stagger"]:not(.is-in)>*{opacity:1;transform:none}
  .js .summer [data-reveal="stagger"]>*{transition:transform var(--t-press) var(--ease),opacity var(--t-press) var(--ease)}
  .js .summer .fold-in [data-reveal]:not(.is-in),.js .summer .fold-in [data-reveal-lines]:not(.is-in) .ln{opacity:1;transform:none;color:inherit}
  /* Fold titles keep the 120 ms press timing (they are controls); the amber title settling to ink carries their reveal. */
  .js .summer .fold-sum[data-reveal]:not(.is-in){transform:none}
  .js .summer .fold-sum[data-reveal]{transition:opacity var(--t-press) var(--ease),transform var(--t-press) var(--ease)}
}
/* Phone height pass (hard check: 7.5 screens at 390 x 844). */
@media (max-width:767px){
  .skip-link:not(:focus){width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);padding:0}
  .summer .hero{padding-bottom:48px}
  .summer .hero-sub{font-size:16px;line-height:1.45}
  .summer .ct-step{flex:none}
  .summer .ct-val{flex:1;min-width:0}
  .summer .section.sw,.summer .section.demo-section{padding-block:48px 40px}
  .summer .sw-intro{margin-top:8px}
  .summer .obj-stage{max-width:300px}
  .summer .sw-actions [data-replay]{order:3}
  .summer .demo-closed .demo-col-body{min-height:0}
  .summer .demo-closed-h{font-size:15px}
  .summer .demo-closed-line{font-size:14px}
  .summer .demo-card{min-height:52px}
  .summer .story-h{max-width:none}
  .summer .q0-option{min-height:48px}
  .summer .fold-sum{min-height:68px;padding-block:12px}
}
@media (max-width:767px){
  .summer h2 .ln{display:inline}
  .summer .sw-copy{margin-top:20px}
  .summer .sw-tally{margin-top:16px}
  .summer .sw-grid{margin-top:16px}
  .summer .sw-problems button{min-height:48px}
  .summer .tick-list li{padding-block:7px}
  .summer .tick-list li::before{top:13px}
  .summer .fold-sum{min-height:64px}
  .summer .final{padding-block:40px}
  .summer .section.season{padding-top:40px}
  /* The Closed strip is empty until the week is played, so it shows once Play has been pressed. */
  .summer #demo-board:not(.has-played) .demo-closed{display:none}
}
/* Seven tiles when the example after-hours tile is on (Q2); six close up cleanly when it is off. */
@media (min-width:1200px){.demo-tiles:has([data-tile="chat"]:not([hidden])){grid-template-columns:repeat(7,minmax(0,1fr));gap:8px}}
@media (min-width:768px) and (max-width:1199px){.demo-tiles:has([data-tile="chat"]:not([hidden])){grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:767px){.summer .site-footer nav a{min-width:44px}}
.tile[hidden]{display:none}
.summer .demo-card[data-card="sam"]{border-style:dashed;border-color:var(--muted)}
/* Room above the Friday summary for the ornaments to land without touching the Closed strip. */
.summer .demo-summary{margin-top:44px}
/* Desktop depth: resting cards sit on the one paper shadow; nothing floats higher than the sticky bar and the pop-up. */
@media (min-width:768px){
  .summer .guarantee{border-width:1.5px;border-top:6px solid var(--warm);box-shadow:var(--paper-shadow)}
  .summer .story-panel,.summer .calc-panel{box-shadow:var(--paper-shadow)}
  .summer .q0-option{background:var(--white)}
  .summer .sw-problems button[aria-pressed="true"]{box-shadow:inset 4px 0 0 var(--ink),var(--paper-shadow)}
}
/* Tickets with no value keep their name level with the others; more room above the summary on phones for the ornaments. */
.summer .demo-card{justify-content:flex-start}
@media (max-width:767px){.summer .demo-summary{margin-top:44px}.summer .beats{scroll-padding-inline:var(--gutter)}}

/* Round 4 (J8): the seven-stage process strip above the switcher heading. Static by default (no JS, reduced motion);
   with motion allowed it plays once as it comes into view: each segment of the amber line draws to the next stage
   while the stages fade up 140 ms apart, amber then ink. Transform, opacity and colour only, about 1.6 s. */
.proc{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin:0 0 40px;padding:0;list-style:none}
.proc li{position:relative;padding:22px 8px 0 0;font:700 15px/1.2 var(--display);letter-spacing:-.005em;color:var(--ink)}
.proc li::before{content:"";position:absolute;left:0;top:0;width:8px;height:8px;border:2px solid var(--amber);border-radius:50%;background:var(--paper)}
.proc li::after{content:"";position:absolute;left:12px;right:0;top:5px;height:2px;background:var(--amber);transform-origin:left}
.proc li:last-child::after{display:none}
@media (max-width:767px){
  .summer .proc{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:10px;margin:-30px 0 20px}
  .summer .proc li{padding-top:18px;font-size:13px;white-space:nowrap}
  .summer .proc li:nth-child(4)::after{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .js .summer .proc:not(.is-in){opacity:1;transform:none}
  .js .summer .proc>li{transition:opacity 320ms var(--ease) calc(var(--i,0) * 140ms + 100ms),transform 320ms var(--ease) calc(var(--i,0) * 140ms + 100ms),color 450ms var(--ease) calc(var(--i,0) * 140ms + 300ms)}
  .js .summer .proc:not(.is-in)>li{opacity:0;transform:translateY(6px);color:var(--amber)}
  .js .summer .proc>li::after{transition:transform 260ms var(--ease) calc(var(--i,0) * 140ms + 180ms)}
  .js .summer .proc:not(.is-in)>li::after{transform:scaleX(0)}
}

/* Round 4 desktop (F63, F64): 1024 px and up only, phones and tablets unchanged.
   F63 section bands rotate paper, mist, sand, cold down the page so neighbours always differ and mist never meets cold:
   teaser (sand, unchanged) | switcher paper | your summer mist | leak start sand | board cold | calculators paper | look mist | guides sand | promises cold | story paper | questions mist | final (unchanged).
   F64 board columns show the first 3 tickets; "+N more" counts the hidden ones and follows the cards as the week plays (CSS only). */
@media (min-width:1024px){
  .summer .sw,.summer #calculators,.summer .story{background:var(--paper)}
  .summer #your-summer,.summer .look,.summer #faq{background:var(--mist)}
  .summer .leak-start,.summer .guides{background:var(--warm)}
  .summer .demo-section,.summer .promises{background:var(--cold)}
  .summer .leak-start,.summer .story{border-block:0}
  /* The Sam card (after-hours assistant, never counted) always shows and takes one of the 3 places, so "+N more" counts hidden jobs only and adds up with the badge. */
  .summer .demo-cols .demo-col-body>.demo-card:not([data-card="sam"]):nth-child(n+4 of .demo-card:not([data-card="sam"])),.summer .demo-cols .demo-col-body:has(>[data-card="sam"])>.demo-card:not([data-card="sam"]):nth-child(n+3 of .demo-card:not([data-card="sam"])){display:none}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])))::after{display:block;padding:4px 2px 0;font:600 14px/1.4 var(--body);color:var(--ink)}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(1 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(1 of .demo-card:not([data-card="sam"])))::after{content:"+1 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(2 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(2 of .demo-card:not([data-card="sam"])))::after{content:"+2 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(3 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(3 of .demo-card:not([data-card="sam"])))::after{content:"+3 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(4 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(4 of .demo-card:not([data-card="sam"])))::after{content:"+4 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(5 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(5 of .demo-card:not([data-card="sam"])))::after{content:"+5 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(6 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(6 of .demo-card:not([data-card="sam"])))::after{content:"+6 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(7 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(7 of .demo-card:not([data-card="sam"])))::after{content:"+7 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(8 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(8 of .demo-card:not([data-card="sam"])))::after{content:"+8 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(9 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(9 of .demo-card:not([data-card="sam"])))::after{content:"+9 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(10 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(10 of .demo-card:not([data-card="sam"])))::after{content:"+10 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(11 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(11 of .demo-card:not([data-card="sam"])))::after{content:"+11 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(12 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(12 of .demo-card:not([data-card="sam"])))::after{content:"+12 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(13 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(13 of .demo-card:not([data-card="sam"])))::after{content:"+13 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(14 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(14 of .demo-card:not([data-card="sam"])))::after{content:"+14 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(15 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(15 of .demo-card:not([data-card="sam"])))::after{content:"+15 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(16 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(16 of .demo-card:not([data-card="sam"])))::after{content:"+16 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(17 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(17 of .demo-card:not([data-card="sam"])))::after{content:"+17 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(18 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(18 of .demo-card:not([data-card="sam"])))::after{content:"+18 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(19 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(19 of .demo-card:not([data-card="sam"])))::after{content:"+19 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(20 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(20 of .demo-card:not([data-card="sam"])))::after{content:"+20 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(21 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(21 of .demo-card:not([data-card="sam"])))::after{content:"+21 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(22 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(22 of .demo-card:not([data-card="sam"])))::after{content:"+22 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(23 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(23 of .demo-card:not([data-card="sam"])))::after{content:"+23 more"}
  .summer .demo-cols .demo-col-body:has(>.demo-card:not([data-card="sam"]):nth-child(4 of .demo-card:not([data-card="sam"])):nth-last-child(24 of .demo-card:not([data-card="sam"])))::after,.summer .demo-cols .demo-col-body:has(>[data-card="sam"]):has(>.demo-card:not([data-card="sam"]):nth-child(3 of .demo-card:not([data-card="sam"])):nth-last-child(24 of .demo-card:not([data-card="sam"])))::after{content:"+24 more"}
}