/* Added 2026-11-13 with the wording pass: the "What you can make" scene, the Galileo and "Good to know" bands, and two small
   additions to the plans. Everything here uses the site's own colours, type and 3px corners (css/site.css). */

/* the opening line is longer now, so it gets a little more width */
.copy-open .lede{max-width:38rem}

/* ---------- 1b. what you can make: an open invitation, never a closed list ---------- */
.s-make{height:150vh}
.copy-make{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;align-items:center;padding-top:calc(72px + env(safe-area-inset-top));opacity:0}
.copy-make .eyebrow{margin-bottom:18px}
.copy-make .display{font-size:clamp(1.9rem,3.9vw,3.7rem);max-width:21ch}
.copy-make .lede{max-width:34rem;margin-top:22px;text-shadow:0 1px 18px rgba(4,11,22,.85)}
.range{list-style:none;margin:clamp(30px,6vh,62px) 0 0;padding:0;max-width:1100px;display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:10px 0;
  font:300 clamp(1.35rem,2.3vw,2.2rem)/1.2 var(--serif);color:var(--ivory);text-shadow:0 1px 20px rgba(4,11,22,.9)}
.range li{display:inline-flex;align-items:center;white-space:nowrap}
.range li:not(:last-child)::after{content:"";flex:none;width:6px;height:6px;margin:0 clamp(14px,1.9vw,30px);border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 4px rgba(237,203,141,.12),0 0 16px 2px rgba(237,203,141,.5)}
.range .open{font-style:italic;color:var(--gold-hi)}
@media (max-width:560px){
  .copy-make .lede{font-size:1rem;margin-top:16px}
  .range{margin-top:26px;gap:8px 0}
  .range li:not(:last-child)::after{width:5px;height:5px;margin:0 12px}
  .range .open{white-space:normal;flex-basis:100%;justify-content:center;text-align:center}
  .range li:nth-last-child(2)::after{display:none}
}
/* a phone held sideways is too short to hold it, so it scrolls in place like the team and the example */
@media (max-height:520px) and (orientation:landscape){
  .s-make{height:auto}
  .s-make .pin{position:relative;inset:auto;height:auto;overflow:visible;visibility:visible;pointer-events:auto;padding:96px 0 50px}
  .copy-make{position:relative;opacity:1!important;transform:none!important;padding-top:0}
  .copy-make .display{font-size:2rem}
}

/* ---------- bands after the plans: they scroll normally over the dimmed sky, each on its own dark ground ---------- */
.band{position:relative;z-index:3;padding:clamp(70px,13vh,150px) var(--gutter);color:var(--ivory);
  background:linear-gradient(rgba(4,11,22,0),rgba(4,11,22,.78) 14%,rgba(4,11,22,.78) 86%,rgba(4,11,22,0))}
.band-wrap{max-width:1240px;margin:0 auto}
.band .display{font-size:clamp(2.1rem,3.8vw,3.6rem)}
.band .lede{margin-top:20px;max-width:34rem}

/* ---------- 6. Galileo: holds on screen like the other scenes wherever it fits (js/home.js, galAt) ---------- */
.s-gal{height:300vh}
.gal-pin{display:flex;align-items:center;padding:calc(84px + env(safe-area-inset-top)) var(--gutter) 24px}
.gal{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);gap:clamp(34px,5.5vw,96px);align-items:center;color:var(--ivory);will-change:opacity,transform}
.gal .display{font-size:clamp(2.1rem,3.8vw,3.6rem)}
.gal .lede{margin-top:20px;max-width:34rem;text-shadow:0 1px 18px rgba(4,11,22,.85)}
.gal-points{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--line);max-width:34rem}
.gal-points li{padding:14px 0 15px;border-bottom:1px solid var(--hair)}
.gal-points b{display:block;font:400 1.02rem/1.3 var(--sans);color:var(--ivory);margin-bottom:4px}
.gal-points span{display:block;font:300 .96rem/1.55 var(--sans);color:var(--mist)}
.gal-rule{margin:26px 0 0;font:300 clamp(1.3rem,1.8vw,1.7rem)/1.25 var(--serif);color:var(--gold-hi)}
.gal-pane{border:1px solid var(--line2);border-radius:3px;background:radial-gradient(120% 90% at 50% 0%,#0c1f35,#06111f 70%);box-shadow:0 0 0 1px rgba(4,11,22,.9),0 40px 90px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(237,203,141,.16);overflow:hidden}
.gal-top{display:flex;align-items:center;gap:14px;padding:16px 20px 15px;border-bottom:1px solid var(--line)}
.gal-mark{flex:none;width:62px;height:auto;overflow:visible}
.gm-planet{fill:var(--gold)}
.gm-band{fill:none;stroke:#7b5a25;stroke-width:.9;stroke-linecap:round;opacity:.6}
.gm-moon{fill:var(--gold-hi)}
.gal-top b{font:400 1.24rem/1 var(--serif);color:var(--ivory)}
.gal-top span{margin-left:auto;font:500 .58rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.gal-log{display:grid;gap:16px;padding:22px 20px 20px}
.gm{max-width:88%}
.gm b{display:block;font:500 .58rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:7px}
.gm p{margin:0;font:300 .98rem/1.55 var(--sans);color:#ece7db}
.gm.you{justify-self:end;padding:12px 14px 13px;border:1px solid var(--hair);border-radius:3px;background:rgba(4,11,22,.5)}
.gm.you b{color:var(--dim)}
.gal-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px!important}
.gal-pane .pill{display:inline-flex;align-items:center;min-height:34px;padding:0 13px;border:1px solid var(--line2);border-radius:3px;font:500 .62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory)}
.gal-pane .pill.on{background:var(--gold);border-color:var(--gold);color:#1a1408}
.gal-box{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 14px 14px;padding:11px 12px 11px 14px;border:1px solid var(--hair);border-radius:3px}
.gal-box span{font:300 .9rem/1 var(--sans);color:var(--dim)}
.gal-box i{font:500 .58rem/1 var(--sans);font-style:normal;letter-spacing:.18em;text-transform:uppercase;color:var(--mist);padding:8px 10px 7px;border:1px solid var(--hair);border-radius:3px}
/* each line of the conversation waits for its place on the scroll */
.s-gal [data-g]{opacity:0;transform:translateY(8px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.s-gal [data-g].on{opacity:1;transform:none}
/* laptop heights: everything tightens so both columns still hold whole */
@media (min-width:981px) and (max-height:820px){
  .gal .display{font-size:clamp(2rem,3.2vw,2.7rem)}.gal .lede{margin-top:14px;font-size:1rem;line-height:1.55}
  .gal-points{margin-top:18px}.gal-points li{padding:9px 0 10px}.gal-points span{font-size:.9rem;line-height:1.45}
  .gal-rule{margin-top:16px;font-size:1.3rem}
  .gal-top{padding:12px 18px 11px}.gal-log{gap:11px;padding:16px 18px 14px}.gm p{font-size:.92rem;line-height:1.5}.gm.you{padding:9px 12px 10px}
  .gal-acts{margin-top:10px!important}.gal-box{margin:0 12px 12px;padding:8px 10px 8px 12px}
}
/* one column: the words hold first, then the conversation takes their place (home.js fades between them) */
@media (max-width:980px){
  .s-gal{height:390vh}
  .gal{grid-template-columns:minmax(0,1fr);gap:0;justify-items:center}
  .gal-copy,.gal-pane{grid-area:1/1;align-self:center;width:100%;max-width:560px}
}
@media (max-width:560px){
  .gal-pin{padding-top:calc(76px + env(safe-area-inset-top));padding-bottom:16px}
  .gal .display{font-size:2rem}.gal .lede{margin-top:14px;font-size:1rem;line-height:1.55}
  .gal-points{margin-top:20px}.gal-points li{padding:11px 0 12px}.gal-points span{font-size:.92rem;line-height:1.5}
  .gal-rule{margin-top:18px;font-size:1.25rem}
  .gal-top{padding:14px 16px 13px}.gal-top span{display:none}
  .gal-log{padding:18px 16px 16px}.gm{max-width:94%}.gm p{font-size:.94rem}
}
@media (max-width:560px) and (max-height:700px){.gal-points span{display:none}.gal-points li{padding:10px 0}.gal-points b{margin:0}}
@media (max-width:560px) and (max-height:700px){.gal-top{padding:10px 14px 9px}.gal-log{gap:9px;padding:13px 14px 11px}.gm{max-width:96%}.gm p{font-size:.88rem;line-height:1.42}.gm.you{padding:8px 11px 9px}.gal-acts{margin-top:9px!important}.gal-pane .pill{min-height:30px;padding:0 10px}.gal-box{margin:0 10px 10px;padding:7px 9px 7px 11px}.gal-box i{padding:6px 8px 5px}}
/* where it can't fit on the screen it scrolls in place, everything shown, on a dark ground like Good to know */
.s-gal.flow{height:auto;padding:clamp(70px,13vh,150px) 0 clamp(40px,8vh,90px);z-index:3;background:linear-gradient(rgba(4,11,22,0),rgba(4,11,22,.78) 14%,rgba(4,11,22,.78) 86%,rgba(4,11,22,0))}
.s-gal.flow .gal-pin{position:relative;inset:auto;height:auto;overflow:visible;visibility:visible;padding-top:0;padding-bottom:0}
.s-gal.flow .gal{opacity:1!important;transform:none!important}
.s-gal.flow .gal-copy,.s-gal.flow .gal-pane{opacity:1!important;visibility:visible!important}
.s-gal.flow [data-g]{opacity:1;transform:none}
@media (max-width:980px){.s-gal.flow .gal{gap:40px}.s-gal.flow .gal-copy,.s-gal.flow .gal-pane{grid-area:auto}}
@media (prefers-reduced-motion:reduce){.s-gal [data-g]{transition:none}}

/* ---------- 6b. good to know: a chart panel in the site's own hand (gold rule, an inner hairline, corner marks, numbered cells) ---------- */
.b-know{padding-top:clamp(60px,10vh,120px);padding-bottom:clamp(90px,16vh,190px)}
.know-frame{position:relative;margin-top:46px;padding:7px;border:1px solid var(--line2);border-radius:3px;background:rgba(4,11,22,.6);box-shadow:0 40px 90px -50px rgba(0,0,0,.9)}
/* the star at the top of the frame, as on the menu's ornament */
.know-frame::before{content:"";position:absolute;left:50%;top:-7px;width:120px;height:14px;transform:translateX(-50%);
  background:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 14'><rect x='34' y='0' width='52' height='14' fill='%23050d19'/><polygon points='60,1.5 68,7 60,12.5 52,7' fill='%23edcb8d'/><polygon points='60,4.5 63.5,7 60,9.5 56.5,7' fill='%23040b16'/><circle cx='43' cy='7' r='1.9' fill='%23edcb8d'/><circle cx='77' cy='7' r='1.9' fill='%23edcb8d'/></svg>") 50% 50%/120px 14px no-repeat}
.kc{position:absolute;width:9px;height:9px;background:var(--gold-hi);transform:rotate(45deg);box-shadow:0 0 0 3px var(--night),0 0 14px 2px rgba(237,203,141,.45)}
.kc.tl{left:-5px;top:-5px}.kc.tr{right:-5px;top:-5px}.kc.bl{left:-5px;bottom:-5px}.kc.br{right:-5px;bottom:-5px}
.know{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.know li{position:relative;padding:28px clamp(20px,2.2vw,34px) 32px;background:radial-gradient(130% 120% at 0% 0%,#0b1c30,#06111f 62%);transition:background-color .4s}
.know li::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 12% 0%,rgba(237,203,141,.1),transparent 70%);opacity:0;transition:opacity .45s var(--ease);pointer-events:none}
.know li:hover::before{opacity:1}
/* a small diamond where the rules cross */
.know li:nth-child(-n+2)::after{content:"";position:absolute;right:-4px;bottom:-4px;z-index:1;width:7px;height:7px;background:var(--gold);transform:rotate(45deg);box-shadow:0 0 0 2px #06111f}
.kn{display:flex;align-items:center;gap:12px;margin-bottom:18px;font:400 .82rem/1 var(--serif);font-style:normal;letter-spacing:.18em;color:var(--gold)}
.kn::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 0 4px rgba(237,203,141,.12),0 0 14px 2px rgba(237,203,141,.5)}
.kn::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line2),transparent)}
.know b{position:relative;display:block;font:300 clamp(1.4rem,1.7vw,1.65rem)/1.18 var(--serif);color:var(--ivory);margin-bottom:11px}
.know span{position:relative;display:block;font:300 .97rem/1.62 var(--sans);color:var(--mist)}
.know em{font-style:normal}
.know .hl{color:var(--gold-hi);font-weight:400}
.know .em{color:var(--ivory);font-weight:400}
.know-more{margin:30px 0 0}
.know-more a{font:400 .95rem/1 var(--sans);color:var(--gold-hi);text-decoration:underline;text-decoration-color:var(--line2);text-underline-offset:4px;transition:text-decoration-color .25s}
.know-more a::after{content:" \2192"}
.know-more a:hover{text-decoration-color:var(--gold-hi)}
@media (max-width:900px){.know{grid-template-columns:repeat(2,minmax(0,1fr))}.know li:nth-child(n)::after{display:none}}
@media (max-width:560px){.know-frame{margin-top:34px;padding:5px}.know{grid-template-columns:minmax(0,1fr)}.know li{padding:22px 18px 24px}.kn{margin-bottom:13px}.know b{font-size:1.32rem;margin-bottom:8px}}

/* ---------- plans: the label above the headline, and the line under the button ---------- */
.sc-head .eyebrow{margin-bottom:14px}
.sc-cta-note{margin:9px 0 0;font:300 .8rem/1.4 var(--sans);color:var(--dim);text-align:center}