/* Homepage: one world behind the page (painted sky and sea, live stars, gold lines), story sections pinned over it. */

.world{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--night) url(../assets/horizon.jpg) 50% 50%/cover no-repeat}
#sky,#lines{position:absolute;inset:0;width:100%;height:100%}
#sky{opacity:0;transition:opacity .9s}
.world.gl #sky{opacity:1}
.ship{position:absolute;left:0;top:0;width:var(--ship-w,120px);height:auto;transform-origin:50% 100%;will-change:transform;opacity:0;transition:opacity .8s}
.ship.on{opacity:1}
.veil{position:absolute;inset:0;background:var(--night);opacity:0}

main{position:relative;z-index:2}
.scene{position:relative}
.pin{position:fixed;inset:0;overflow:hidden;visibility:hidden;pointer-events:none}
.pin.on{visibility:visible}
.pin.on .actions,.pin.on .notify,.pin.on .small,.pin.on .chapters,.pin.on .app{pointer-events:auto}
.copy{position:absolute;left:0;right:0;margin:0 auto;padding:0 var(--gutter);text-align:center;will-change:opacity,transform}
.copy .lede{max-width:36rem;margin:22px auto 0}

/* 1. opening */
.s-open{height:160vh}
/* the words over the ship end a clear gap above its masts (--mast-top, --ship-gap: set by js/world.js layout) */
.copy-open,.copy-end{top:auto;bottom:calc(100% - var(--mast-top,62vh) + var(--ship-gap,48px))}
.copy-open .display{font-size:clamp(2.2rem,min(6.4vw,9vh),6.4rem)}
.copy-open .lede{max-width:33rem;color:#c9d2db}
.actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:34px}
.scroll-cue{position:absolute;left:50%;bottom:max(26px,env(safe-area-inset-bottom));transform:translateX(-50%);margin:0;display:flex;flex-direction:column;align-items:center;gap:10px;
  font:500 .62rem/1 var(--sans);letter-spacing:.3em;text-transform:uppercase;color:var(--mist);opacity:.75}
.scroll-cue span{width:1px;height:38px;background:linear-gradient(var(--gold),transparent);transform-origin:top;animation:cue 2.6s var(--ease) infinite}
@keyframes cue{0%{transform:scaleY(0);opacity:0}30%{opacity:1}70%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}

/* 2. sky */
.s-sky{height:210vh}
.copy-sky{top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;opacity:0}
.copy-sky .display{font-size:clamp(2.2rem,4.8vw,4.6rem);max-width:15ch;margin:0 auto}

/* 3. bear */
.s-bear{height:300vh}
.copy-bear-top{top:max(13vh,92px);top:max(13svh,92px);opacity:0}
.copy-bear-top .display{font-size:clamp(2.2rem,4.8vw,4.6rem)}
.copy-bear-low{bottom:calc(max(10vh,40px) + var(--cookie-h,0px));bottom:calc(max(10svh,40px) + var(--cookie-h,0px));opacity:0}
.copy-bear-low .lede{margin-top:0}
@media (min-width:701px) and (min-height:521px){.copy-bear-low{bottom:auto;top:calc(max(13vh,92px) + clamp(2.2rem,4.8vw,4.6rem) * 1.04 + 18px);top:calc(max(13svh,92px) + clamp(2.2rem,4.8vw,4.6rem) * 1.04 + 18px)}}

/* 4. demo */
.s-demo{height:820vh}
.demo-pin{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(84px + env(safe-area-inset-top)) var(--gutter) 18px}
.demo-head{width:100%;max-width:1240px;display:grid;grid-template-columns:1fr;align-items:end;gap:8px 24px;margin-bottom:10px;opacity:0;transition:opacity .6s}
.demo-head .eyebrow{grid-column:1/-1;margin:0}
.demo-title{font-size:clamp(1.7rem,2.6vw,2.6rem)}
.chapters{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:12px 0 0;padding:0}
/* each label sits over its star on the frame's top edge (drawn in world.js), so the frame itself shows where you are */
.chapters button{display:block;width:100%;min-height:36px;padding:0 4px 8px;background:none;border:0;cursor:pointer;text-align:center;
  font:500 .72rem/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);white-space:nowrap;transition:color .35s}
.chapters .s{display:none}
.chapters button:hover{color:var(--ivory)}
.chapters button.done{color:var(--gold-lo)}
.chapters button.on{color:var(--gold-hi)}

.app{position:relative;flex:1 1 auto;min-height:0;max-height:min(740px,100%);width:100%;max-width:1240px;display:flex;flex-direction:column;background:rgba(5,14,26,.93);
  border-radius:3px;will-change:opacity,transform;box-shadow:0 40px 120px -40px rgba(0,0,0,.9),inset 0 0 0 1px rgba(212,174,104,.08);
  opacity:0;transition:opacity .6s}
.app-top{display:flex;align-items:center;gap:12px;height:46px;flex:none;padding:0 18px;border-bottom:1px solid var(--hair)}
.app-mark{width:10px;height:10px;background:var(--gold);clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%)}
.app-name{font:500 .84rem/1 var(--sans);color:var(--ivory)}
.app-name em{font-style:normal;color:var(--dim);font-weight:400;margin-left:6px}
.app-status{margin-left:auto;display:inline-flex;align-items:center;gap:8px;font:500 .66rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.app-status::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.35}}
.app-body{position:relative;flex:1;min-height:0;overflow:hidden}
.demo-foot{margin:22px 0 0;min-height:1.6em;max-width:44rem;text-align:center;font-size:.92rem;color:var(--mist);opacity:0;transition:opacity .5s}

/* 2 to 4: the studio */
/* the finished tool, laid out like an ad manager: its pages as words across the top, the title, then the campaign's three
   ads at their true 300x600 shape on the left and, beside them, the reporting and the suggestion. No boxes inside the window. */
.studio{height:100%;display:flex;flex-direction:column;min-height:0}
.st-nav{display:flex;align-items:center;gap:clamp(16px,2vw,26px);flex:none;height:42px;padding:0 18px;border-bottom:1px solid var(--bx-line,var(--hair))}
.st-nav span{position:relative;padding:6px 0;font-size:.78rem;color:var(--dim)}
.st-nav span.on{color:var(--ivory)}
.st-nav span.on::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-hi) 50%,transparent)}
.st-main{flex:1;min-width:0;min-height:0;padding:16px clamp(16px,2vw,24px) 14px;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:clamp(10px,1.6vh,16px) clamp(18px,2.4vw,30px);overflow:hidden}
.st-title{grid-column:1/-1}
.st-title small{display:block;font:500 .58rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--dim)}
.st-title h3{font:300 clamp(1.25rem,1.8vw,1.6rem)/1.15 var(--serif);margin:6px 0 0}
.st-btn{margin-left:auto;padding:8px 13px;border-radius:2px;background:var(--gold);color:#1a1408;font:500 .6rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;font-style:normal}
/* the campaign's ads, as a real ad manager shows them: each 300x600 at its true shape, as tall as the window allows */
/* each ad is the smaller of a third of the space's width and half its height (less the caption), so the three always fit
   whole and never crowd the table beside them */
.ads{container-type:size;min-width:0;min-height:0;display:flex;gap:10px}
.ad{flex:none;width:min(calc((100cqw - 20px) / 3),calc((100cqh - 24px) / 2));display:flex;flex-direction:column;gap:7px}
.ad img{display:block;width:100%;height:auto;aspect-ratio:1/2;border-radius:2px;box-shadow:0 0 0 1px var(--bx-line,var(--hair))}
.ad footer{display:flex;align-items:baseline;gap:6px;font-size:.74rem;white-space:nowrap;overflow:hidden}
.ad footer b{font-weight:500;color:var(--ivory)}
.ad footer span{color:var(--dim)}
.ad footer span::before{content:"\00b7";margin-right:6px}
/* a caption never gets cut: when an ad is too narrow for "Shipwright · Number", it shows the job alone */
.ad{container-type:inline-size}
@container (max-width:140px){.ad footer span{display:none}}
.st-low{container-type:inline-size;display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;overflow:hidden}
/* a narrow column drops whole columns rather than cutting any: Impr. first, then CVR, then CTR; the ad, CPA and ROAS always show.
   Its four headline tiles go two by two */
@container (max-width:345px){.resp th:nth-child(2),.resp td:nth-child(2){display:none}}
@container (max-width:270px){.resp th:nth-child(4),.resp td:nth-child(4){display:none}}
@container (max-width:240px){.resp th:nth-child(3),.resp td:nth-child(3){display:none}}
@container (max-width:300px){.st-low .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}
.st-low .next{padding-top:14px;border-top:1px solid var(--bx-line,var(--hair))}
/* narrow screens stack: the ads in a row across the width, taking whatever height the parts under them leave */
@media (max-width:900px){
  .bx-preview .st-main{grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr) auto}
  .ads{justify-content:center}
}
/* reporting, read like a 2026 ads dashboard: headline numbers with their change on the prior 28 days, then each ad's
   CTR, CVR, CPA and ROAS (all made up, all computed from one set of spend, clicks, conversions and value) */
.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--bx-line,var(--hair));border:1px solid var(--bx-line,var(--hair));border-radius:2px}
.kpis div{display:flex;flex-direction:column;gap:4px;padding:9px 10px 8px;background:#06101d;min-width:0}
.kpis span{font:500 .52rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.kpis b{font:500 clamp(.92rem,1.2vw,1.1rem)/1.1 var(--sans);color:var(--ivory);font-variant-numeric:tabular-nums;white-space:nowrap}
.kpis i{font:500 .62rem/1 var(--sans);font-style:normal;color:var(--gold-hi);white-space:nowrap}
.kpis i.up::before{content:"\25B2 ";font-size:.5rem}.kpis i.down::before{content:"\25BC ";font-size:.5rem}
.resp-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.resp h4,.next h4{margin:0;font:500 .58rem/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.resp-head span{font-size:.66rem;color:var(--dim)}
.resp table{width:100%;border-collapse:collapse;font-size:.76rem;font-variant-numeric:tabular-nums}
.resp th,.resp td{padding:5px 3px;text-align:right;border-top:1px solid var(--hair);color:var(--mist);font-weight:400;white-space:nowrap}
.resp thead th{border-top:0;padding-top:2px;font:500 .5rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.resp thead th:first-child,.resp tbody th,.resp tfoot th{text-align:left;color:var(--ivory)}
.resp tbody th small{margin-left:5px;font-size:.66rem;color:var(--dim)}
.resp tr.best td:last-child,.resp tr.best td:nth-last-child(2){color:var(--gold-hi)}
.resp tr.worst td:last-child,.resp tr.worst td:nth-last-child(2){color:#8f97a1}
.resp tfoot th,.resp tfoot td{border-top:1px solid var(--bx-line2,rgba(212,174,104,.32));color:var(--ivory);font-weight:500}
.next h4{margin-bottom:10px}
.next p{margin:0;font:300 clamp(.9rem,1.05vw,1rem)/1.4 var(--serif);color:var(--ivory)}

/* 5. team: held in place like the bear; the stars rise in, then a spark carries the work round the loop, one role at a time */
.s-team{height:320vh}
.team-pin{display:flex;align-items:center;padding:calc(84px + env(safe-area-inset-top)) var(--gutter) 24px}
.team-wrap{width:100%;max-width:1240px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"copy chart" "roles chart";gap:28px clamp(30px,5vw,80px);align-items:start;will-change:opacity,transform}
.team-copy{grid-area:copy;opacity:0}
.team-copy .display{font-size:clamp(2.1rem,3.8vw,3.6rem)}
.team-copy .lede{margin-top:20px;max-width:32rem}
.team-chart{grid-area:chart;align-self:center}
/* the roles share one place; the one the spark has reached shows */
.roles{grid-area:roles;list-style:none;margin:0;padding:0;display:grid;max-width:36rem}
.roles li{grid-area:1/1;display:grid;grid-template-columns:minmax(0,1fr);gap:8px 20px;align-items:start;padding-top:16px;border-top:1px solid var(--hair);opacity:0;transform:translateY(10px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.roles li > div:first-child{display:flex;flex-direction:column;gap:8px}
.roles li.on{opacity:1;transform:none}
.roles b{font:500 .7rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.roles span{font:300 clamp(1.08rem,1.45vw,1.3rem)/1.4 var(--serif);color:var(--ivory)}
.roles em{font:500 .62rem/1.3 var(--sans);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
/* the second check, after the spark comes home: it takes the left column, and the two stars it is about stay lit */
.check-beat{grid-area:1/1/3/2;align-self:start;max-width:34rem;opacity:0;visibility:hidden}
.check-beat .display{font-size:clamp(1.9rem,3.2vw,3rem)}
.check-beat .lede{margin-top:16px}
/* the stars' own opacity follows the scroll every frame, so the beat dims what is inside them (which already eases) instead */
.team-svg .relay,.team-svg .relay-trail{transition:opacity .5s}
.team-svg.beat .node:not(.you):not(.n-reviewer) > *{opacity:.16!important}
.team-svg.beat .relay,.team-svg.beat .relay-trail{opacity:.12}
.team-svg.beat .you circle,.team-svg.beat .n-reviewer circle{transform:scale(1.45);opacity:1}
.team-svg.beat .you text,.team-svg.beat .n-reviewer text{opacity:1;fill:var(--ivory)}
.roles li.you b{color:var(--gold-hi)}
.team-svg{width:100%;height:auto;overflow:visible}
.team-svg .ring{opacity:0}
.team-svg .ring circle{fill:none;stroke:rgba(212,174,104,.32);stroke-width:.8;stroke-dasharray:1 6}
.team-svg .ticks{stroke:rgba(212,174,104,.4);stroke-width:1}
.team-svg .dust circle{fill:var(--mist);opacity:.55}
.team-svg .ring .ring-thin{stroke-dasharray:none;stroke:rgba(212,174,104,.1)}
.team-svg .relay-trail{fill:none;stroke:var(--gold);stroke-width:.8;stroke-opacity:0;stroke-dasharray:1 5}
.team-svg .relay{fill:none;stroke:var(--gold);stroke-width:1.2;stroke-opacity:.75}
.team-svg .node{opacity:0}
.team-svg .node circle{fill:var(--ivory);filter:drop-shadow(0 0 6px rgba(237,203,141,.8));transform:scale(.55);opacity:.45;transition:transform .5s cubic-bezier(.3,1.6,.5,1),opacity .4s}
.team-svg .node.you circle{fill:var(--gold-hi);filter:drop-shadow(0 0 10px rgba(237,203,141,.95))}
.team-svg .node.done circle{transform:scale(1);opacity:1}
.team-svg .node.on circle{transform:scale(1.45);opacity:1;filter:drop-shadow(0 0 12px rgba(237,203,141,1))}
.team-svg text{fill:var(--mist);font:400 15px/1 var(--sans);letter-spacing:.06em;text-anchor:middle;opacity:.4;transition:opacity .4s,fill .4s}
.team-svg text[text-anchor=end]{text-anchor:end}
.team-svg text[text-anchor=start]{text-anchor:start}
.team-svg .node.done text{opacity:.75}
.team-svg .node.on text{opacity:1;fill:var(--ivory)}
.team-svg .node.you text{fill:var(--gold-hi);font-weight:500}
.team-svg .pulse{fill:var(--gold-hi);filter:drop-shadow(0 0 8px var(--gold-hi));opacity:0}

/* your idea at the centre, and the line of each kind of work reaching out to it */
.team-svg .idea{opacity:0}
.team-svg .idea circle{fill:#fff4d8;filter:drop-shadow(0 0 16px rgba(237,203,141,.95))}
.team-svg .idea text{opacity:.95;fill:var(--ivory);font:italic 300 17px/1 var(--serif);letter-spacing:0}
.team-svg .spoke{stroke:var(--gold);stroke-width:.8;stroke-opacity:.1;transition:stroke-opacity .5s}
.team-svg .spoke.done{stroke-opacity:.55}
.team-svg.beat .spoke{stroke-opacity:.1}
/* the real line the app shows while that work is happening */
.roles em.st{display:flex;align-items:center;gap:9px;font:italic 300 1rem/1.3 var(--serif);letter-spacing:0;text-transform:none;color:var(--gold-hi)}
.roles em.st::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 10px var(--gold-hi);animation:st-pulse 1.6s ease-in-out infinite}
@keyframes st-pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.roles em.st::before{animation:none}}

@media (max-width:640px){.team-copy .display{font-size:1.85rem}.team-copy br{display:none}.team-copy .lede{margin-top:12px;font-size:1rem}.check-beat .display{font-size:1.85rem}.roles li{padding-top:12px}.roles span{font-size:1.02rem}.team-pin{padding-top:calc(76px + env(safe-area-inset-top));align-items:flex-start}}
@media (max-width:640px) and (max-height:700px){.team-copy .display{font-size:1.55rem}.team-copy .lede{font-size:.92rem}.team-chart{max-width:250px;margin:0 auto}.team-wrap{gap:12px}}

/* 7. return */
.s-end{height:260vh}
.copy-end{opacity:0}
.copy-end .display{font-size:clamp(2.2rem,min(5.8vw,8.5vh),5.6rem)}
.copy-end .lede{max-width:30rem}
.notify{display:flex;gap:10px;justify-content:center;max-width:30rem;margin:30px auto 0}
.notify input{flex:1;min-width:0;height:52px;padding:0 18px;border-radius:3px;border:1px solid var(--line2);background:rgba(4,11,22,.55);color:var(--ivory);
  font:400 1rem/1 var(--sans);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:border-color .25s,background-color .25s}
.notify input::placeholder{color:var(--dim)}
.notify input:focus{outline:0;border-color:var(--gold);background:rgba(4,11,22,.75)}
.notify .btn{min-height:52px}
.notify[data-state=error] input{border-color:#f0a07a}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.notify-msg{min-height:1.5em;margin:12px auto 0;font-size:.92rem;color:var(--gold-hi)}
.copy-end .small{margin-top:4px;color:var(--mist);text-shadow:0 1px 12px #040b16,0 0 2px #040b16}   /* mist, not dim: it sits on the brightest clouds */
.copy-end .lede{text-shadow:0 1px 18px rgba(4,11,22,.8)}

/* phones and short screens */
@media (max-width:900px){
  .demo-head{grid-template-columns:1fr;margin-bottom:14px}
  .chapters button{font-size:.62rem;letter-spacing:.1em}
  .chapters .l{display:none}.chapters .s{display:inline}
  /* each chapter shows the part that matters, at a readable size */
  .resp th,.resp td{padding:7px 3px;font-size:.76rem}
  .resp thead th{font-size:.5rem;letter-spacing:.08em}
  .team-pin{padding-top:calc(76px + env(safe-area-inset-top));padding-bottom:calc(16px + var(--cookie-h,0px))}
  .team-wrap{grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "chart" "roles";gap:clamp(10px,2.4vh,22px)}
  .team-copy .lede{margin-top:12px}
  .team-chart{max-width:min(520px,40vh * 1.36);width:100%;margin:0 auto}
  .roles{min-height:7.5em}
  .roles span{font-size:1rem}
  .roles li{grid-template-columns:minmax(0,1fr) 104px;gap:6px 14px}
  .art{padding:7px 8px;font-size:.62rem}.art-rows .sent{font-size:.74rem}.art-files p{font-size:.56rem}
  /* the second check splits round the constellation, so the stars stay in view: its words where the team's words were, its steps
     where the cards were (display:contents passes the beat's opacity down through inherit) */
  .check-beat{display:contents}.beat-head{opacity:inherit;grid-area:copy}
  .art-matrix{gap:4px 3px}.roles .art-matrix span{font-size:.56rem}.roles .art-matrix span:nth-child(-n+3){font-size:.42rem;letter-spacing:.04em}
  .check-beat .display{font-size:1.7rem}.check-beat .lede{font-size:.92rem;margin-top:10px}
}
@media (max-width:640px){
  .copy-open .lede{font-size:1rem}
  .actions .btn{flex:1 1 100%;max-width:22rem}
  .actions{flex-direction:column;align-items:center;gap:10px;margin-top:26px}
  .notify{flex-direction:column}
  .notify input{flex:none}   /* stacked, flex:1 would size it from zero: it keeps its 52 px */
  .demo-pin{padding-top:calc(72px + env(safe-area-inset-top));padding-bottom:calc(12px + var(--cookie-h,0px));padding-left:26px;padding-right:26px}
  .demo-head .eyebrow{display:none}
  .demo-head{margin-bottom:10px}
  .demo-title{font-size:1.5rem}
  .demo-foot{font-size:.84rem;margin-top:10px;line-height:1.45}
  /* studio: the three ads in a row, as tall as a phone can spare, the suggestion under them */
  .st-btn{display:none}
  .st-nav{display:none}
  .bx-preview .resp{display:none}
  .st-low .next{padding-top:12px}
  .ad footer{font-size:.7rem}
  .ad footer span{display:none}
  .app-name em{display:none}
  .st-main{padding:14px 16px}
  .st-title h3{font-size:1.15rem}
}
/* a short phone (an iPhone SE): the team scene fits under the bar, so the constellation and the beat's words give up some room */
@media (max-width:640px) and (max-height:760px) and (min-height:521px){
  .team-chart{max-width:min(520px,30vh * 1.36)}
  .team-copy .display,.check-beat .display{font-size:1.55rem}.team-copy .lede,.check-beat .lede{font-size:.86rem;margin-top:8px}
  .beat-steps{gap:6px}.beat-steps li{padding:7px 10px;gap:4px}.beat-steps span{font-size:.84rem;line-height:1.3}
  .roles span{font-size:.92rem}
}
/* a narrow and short window (a small tablet sideways, 800x600; not a phone held sideways, where the demo scrolls), or a short
   phone (an iPhone SE): only the title and the three ads, as large as the room allows */
@media (max-width:900px) and (max-height:760px) and (min-height:521px){
  .bx-preview .st-low,.st-nav,.bx-preview .st-title small,.bx-preview .ad footer{display:none}   /* the ads take the room */
  .bx-preview .st-title h3{margin:0}
  .bx-preview .next h4{margin-bottom:6px}
  .bx-preview .next p{font-size:.86rem;line-height:1.38}
}
@media (max-height:760px) and (min-width:901px){
  .demo-pin{padding-top:78px}
  .demo-head{margin-bottom:12px}
  .demo-head .eyebrow{display:none}
  .demo-title{font-size:1.6rem}
  .resp th,.resp td{padding:5px 6px}
}
/* short landscape screens (a phone held sideways): the demo is too short to pin, so its chapters stack and scroll normally */
@media (max-height:520px) and (orientation:landscape){
  .copy-open .display{font-size:2rem}.copy-open .lede{font-size:.95rem;margin-top:12px}
  .actions{margin-top:16px}.actions .btn{min-height:42px}.scroll-cue{display:none}
  .copy-sky .display,.copy-bear-top .display{font-size:2rem}
  .copy-bear-top{top:64px}
  @media (min-width:901px){.copy-bear-top{top:104px}}   /* a short desktop window keeps the full bar and its ornament */.copy-bear-low{display:none}
  .s-demo{height:auto}
  .demo-pin{position:relative;inset:auto;height:auto;overflow:visible;visibility:visible;pointer-events:auto;padding:96px var(--gutter) 60px}
  .demo-head{opacity:1!important;margin-bottom:16px}.demo-head .eyebrow{display:block}.chapters{display:none}
  .app{opacity:1!important;max-height:none}
  .app-body{overflow:visible}
  .app .ads,.app .resp,.app .resp table,.app .st-title{display:revert}
  .app .ads{display:flex;justify-content:center;height:300px}   /* the demo scrolls here, so the ads get a set height to size by */
  .demo-foot{display:none}
  .copy-end .small{display:none}.copy-end .display{font-size:2rem}.notify{flex-direction:row;margin-top:18px}.notify input{flex:1}
  .s-team{height:auto}
  .team-pin{position:relative;inset:auto;height:auto;overflow:visible;visibility:visible;padding:96px var(--gutter) 60px}
  .team-wrap{opacity:1!important;transform:none!important}.team-copy{opacity:1!important}
  .roles{display:grid;grid-template-columns:1fr 1fr;gap:14px 24px;max-width:none}
  .roles li{grid-area:auto;opacity:1;transform:none}.roles span{font:400 .9rem/1.5 var(--sans);color:var(--mist)}
  .check-beat{display:block;grid-area:auto;opacity:1!important;visibility:visible!important;margin-top:28px;max-width:none}
  @media (min-width:901px){.roles{grid-template-columns:1fr}}   /* in the left column of a wide short window, one card per row */
}

@media (prefers-reduced-motion:reduce){
  .scroll-cue span,.app-status::before{animation:none}
}

/* ---------- the demo window: Arctura's layout and steps, drawn in the site's own language ----------
   Midnight and gold, the site's serif (Gilda Display) for anything that is read as a title, Geist for the rest, hairline gold rules, square corners
   (2 to 3 px, like the site's buttons). Arctura's own colours (cyan, violet, green) and its pills are not used here. */
.bx{--bx-text:#ece7db;--bx-muted:#9aa7b4;--bx-line:rgba(212,174,104,.16);--bx-line2:rgba(212,174,104,.32);
  font-family:var(--sans);background:radial-gradient(90% 70% at 40% 45%,#0a1524 0%,#060c16 70%,#04080f 100%);overflow:hidden}
.bx-top{display:flex;align-items:center;gap:18px;height:42px;flex:none;padding:0 16px;border-bottom:1px solid var(--bx-line);font-size:.72rem;color:var(--bx-muted);white-space:nowrap}
.bx-mark{font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--bx-text);font-size:.68rem}
.bx-mark i{font-style:normal;margin-left:10px;padding:3px 6px 2px;border:1px solid var(--bx-line2);border-radius:2px;color:var(--gold);letter-spacing:.16em;font-size:.54rem}
.bx-crumb b{font-weight:400;margin:0 6px;opacity:.6}
/* project tabs: words with the site's underline and diamond, not a pill */
.bx-tabs{display:flex;gap:20px;margin-left:auto}
.bx-tabs span{position:relative;display:flex;align-items:center;gap:8px;padding:6px 0}
.bx-tabs span.on{color:var(--bx-text)}
.bx-tabs span.on::after{content:"";position:absolute;left:-4px;right:-4px;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold-hi) 50%,transparent)}
.bx-tabs i{width:5px;height:5px;background:var(--mist);transform:rotate(45deg)}.bx-tabs i.c2{background:var(--gold)}
.bx-tools{display:flex;gap:8px;margin-left:12px}.bx-tools span{padding:5px 10px;border:1px solid var(--bx-line);border-radius:2px}
.bx-body{position:relative;flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px)}
.bx-map{position:relative;min-width:0;overflow:hidden}
.bx-title{position:absolute;left:20px;top:16px;z-index:2}
.bx-title h3{margin:0;font:300 clamp(1.2rem,1.7vw,1.55rem)/1.15 var(--serif);color:var(--ivory)}
.bx-title p{margin:5px 0 0;font-size:.72rem;color:var(--bx-muted)}
.bx-galaxy{position:absolute;inset:0;width:100%;height:100%}
.bx-galaxy .ring{fill:none;stroke:var(--gold);stroke-opacity:.14;stroke-width:.8;stroke-dasharray:1 5}
#bxDust circle{fill:#f0e4c6}
.bx-spin{animation:bxspin 120s linear infinite}
@keyframes bxspin{to{transform:rotate(360deg)}}
.bx-lbl{fill:#cfc6b2;font:500 10px/1 var(--sans);letter-spacing:.22em;text-anchor:middle}
.bx-sub{fill:#8a96a3;font:italic 300 11px/1 var(--serif);text-anchor:middle}
.bx-node{opacity:0;transform-box:fill-box;transform-origin:center;transform:scale(.6);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.bx-node.on{opacity:1;transform:none}
.bx-node circle{animation:bxpulse 2.8s ease-in-out infinite}
@keyframes bxpulse{50%{opacity:.7}}
.edge{fill:none;stroke:#e6dcc4;stroke-width:1;stroke-opacity:0;stroke-dasharray:2 7;transition:stroke-opacity .5s;animation:bxflow 1.1s linear infinite}
.edge.rev{stroke:var(--gold)}
.edge.on{stroke-opacity:.7}
@keyframes bxflow{to{stroke-dashoffset:-18}}

.bx-chat{position:relative;display:flex;flex-direction:column;min-height:0;border-left:1px solid var(--bx-line);background:rgba(5,12,22,.8)}
.bx-log{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:14px;padding:16px 16px 6px;overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent,#000 16%);mask-image:linear-gradient(transparent,#000 16%)}
.m{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .45s var(--ease),opacity .4s var(--ease)}
.m.on{grid-template-rows:1fr;opacity:1}
.m>div{min-height:0;overflow:hidden}
.m b{display:block;margin-bottom:6px;font-weight:500;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase}
.m p{margin:0;font-size:.84rem;line-height:1.55;color:var(--bx-text)}
/* what you say: a quiet panel, square, set in from the left; what Arctura says sits on the page */
.m.you>div{margin-left:16%;padding:10px 12px;border:1px solid var(--bx-line);border-radius:2px;background:rgba(212,174,104,.045)}
.m.you b{color:var(--bx-muted)}
.m.ai b{color:var(--gold)}
.m.chk>div{padding:11px 12px;border:1px solid var(--bx-line2);border-radius:2px;background:rgba(212,174,104,.05)}
.m.chk b{color:var(--gold);letter-spacing:.14em}
.m.chk p{font:italic 300 .95rem/1.45 var(--serif);color:var(--ivory)}
.bx-plan{margin:10px 0 0;padding:0 0 0 18px;display:grid;gap:3px;font-size:.8rem;color:var(--bx-text)}
.bx-plan li,.bx-ticks li,.bx-effort,.bx-acts,.bx-fixed{opacity:0;transform:translateY(4px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.bx-plan li.on,.bx-ticks li.on,.bx-effort.on,.bx-acts.on,.bx-fixed.on{opacity:1;transform:none}
.bx-plan li::marker{color:var(--gold);font:500 .72rem var(--sans)}
.bx-plan em{margin-left:6px;font:italic 300 .78rem/1 var(--serif);color:var(--gold-hi)}
.bx-effort{display:flex;align-items:center;gap:0;margin-top:12px;font-size:.7rem;color:var(--bx-muted)}
.bx-effort span{margin-right:10px}
.bx-effort i{font-style:normal;padding:5px 10px;border:1px solid var(--bx-line);margin-left:-1px;color:var(--bx-text)}
.bx-effort i:first-of-type{border-radius:2px 0 0 2px}.bx-effort i:last-of-type{border-radius:0 2px 2px 0}
.bx-effort i.on{position:relative;z-index:1;background:rgba(212,174,104,.14);border-color:var(--gold);color:var(--gold-hi)}
/* Arctura's buttons, in the site's: a gold one for the step it suggests, a hairline one beside it */
.bx-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.pill{display:inline-flex;align-items:center;min-height:30px;padding:0 12px;border-radius:2px;border:1px solid var(--bx-line2);font:500 .6rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--bx-text);white-space:nowrap}
.pill.on{background:var(--gold);border-color:var(--gold);color:#1a1408}
.pill.hi{box-shadow:0 0 0 3px rgba(237,203,141,.18),0 0 24px rgba(237,203,141,.45)}
.bx-ticks{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-size:.8rem;color:var(--bx-text)}
.bx-ticks li{display:flex;align-items:center;gap:10px}
/* a hollow diamond that fills with gold when that part is done */
.bx-ticks li::before{content:"";flex:none;width:7px;height:7px;margin-left:2px;border:1px solid var(--bx-line2);transform:rotate(45deg);transition:background-color .3s,border-color .3s}
.bx-ticks li.on::before{background:var(--gold);border-color:var(--gold)}
.bx-fixed{margin-top:9px!important;font:500 .58rem/1.3 var(--sans)!important;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-hi)!important}
.bx-input{display:flex;align-items:center;margin:8px 12px 12px;padding:8px 8px 8px 14px;border:1px solid var(--bx-line);border-radius:2px;font-size:.8rem;color:#7d8996}
.bx-input i{margin-left:auto;font-style:normal;padding:6px 12px;border:1px solid var(--bx-line2);border-radius:2px;color:var(--gold-hi);font:500 .58rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase}

/* the finished tool opens over the map; the tool itself keeps the look it was given */
.bx-preview{position:absolute;inset:14px;z-index:3;display:flex;flex-direction:column;border:1px solid var(--bx-line2);border-radius:3px;overflow:hidden;background:#06101d;
  box-shadow:0 30px 80px -20px #000c;opacity:0;transform:translateY(22px) scale(.985);will-change:opacity,transform;transition:opacity .55s var(--ease),transform .7s var(--ease);font-family:var(--sans)}
.bx-preview.on{opacity:1;transform:none}
.pv-bar{display:flex;align-items:center;gap:12px;height:32px;flex:none;padding:0 12px;border-bottom:1px solid var(--bx-line);font:500 .66rem/1 var(--sans);color:var(--bx-muted)}
.pv-bar b{font-weight:500;color:var(--bx-text)}.pv-bar em{margin-left:auto;font-style:normal}
.pv-acts{display:none;gap:8px;padding:10px 12px;border-top:1px solid var(--bx-line)}
.bx-preview .studio{flex:1;min-height:0}
.bx-preview .st-main{gap:12px;padding:14px 18px 12px}
/* a short desktop window keeps the numbers (tiles and table) beside the ads and leaves the suggestion out: all three do not fit */
@media (max-height:880px) and (min-width:901px){.bx-preview .st-low .next{display:none}}

@media (max-width:900px){
  .bx-tabs,.bx-tools,.bx-crumb{display:none}
  .bx-body{grid-template-columns:1fr;grid-template-rows:38% minmax(0,1fr)}
  .bx-chat{border-left:0;border-top:1px solid var(--bx-line)}
  .bx-title{left:14px;top:10px}.bx-title h3{font-size:1rem}
  .bx-map{position:static}
  .bx-galaxy{height:38%}
  .bx-lbl{font-size:19px;letter-spacing:.14em}.bx-sub{display:none}
  .pv-acts{display:flex}
  .bx-preview{inset:8px}
}
@media (max-height:520px) and (orientation:landscape){
  .bx-body{min-height:520px;grid-template-columns:minmax(0,1fr) 300px;grid-template-rows:none}
  .bx-map{position:relative}
  .bx-chat{border-top:0;border-left:1px solid var(--bx-line)}
}
@media (prefers-reduced-motion:reduce){.bx-spin,.edge,.bx-node circle{animation:none}}