/* Insights: article index, articles, and charts. Base tokens, header and footer come from ../legal/legal.css. */
:root{--s1:#0E9F62;--s2:#4F6BD8;--s3:#C77A1A;--grid:#E6ECE8}
html[data-theme="dark"]{--s1:#22AE73;--s2:#7489E0;--s3:#C4863A;--grid:#222725}

.ihead{padding:56px 0 36px;max-width:780px}
.ihead h1{font-size:clamp(40px,5.4vw,66px);line-height:1.02;letter-spacing:-.045em;font-weight:780;margin:0 0 14px}
.ihead .lede{font-size:19px;line-height:1.6;color:var(--pencil);margin:0}
.kicker{display:inline-flex;align-items:center;gap:8px;margin:0 0 18px;font-size:14px;color:var(--pencil)}
.kicker b{font-weight:650;color:var(--mint-ink)}
.back{display:flex;width:fit-content;align-items:center;gap:6px;margin:0 0 26px;font-size:15px;color:var(--pencil);text-decoration:none}
.back:hover{color:var(--ink)}

/* Index: one featured article, then a grid. */
.feature{display:grid;grid-template-columns:1.05fr .95fr;gap:0;border-radius:26px;overflow:hidden;background:var(--card);border:1px solid var(--rule);text-decoration:none;color:inherit;margin-bottom:22px;transition:border-color .2s,box-shadow .2s}
.feature:hover,.card:hover{border-color:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}
.feature .txt{padding:38px 40px;display:flex;flex-direction:column;gap:12px}
.feature h2{font-size:clamp(28px,3vw,38px);line-height:1.1;letter-spacing:-.035em;margin:0}
.feature p{margin:0;color:var(--pencil);font-size:17px}
.feature .art{background:var(--tint);border-left:1px solid var(--rule);display:grid;place-items:center;padding:28px}
.feature .art .thumb{height:130px}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;padding-bottom:100px}
.card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--card);border:1px solid var(--rule);text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s}
.card .art{height:150px;background:var(--tint);border-bottom:1px solid var(--rule);display:grid;place-items:center}
.card .txt{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font-size:20px;line-height:1.25;letter-spacing:-.02em}
.card p{margin:0;color:var(--pencil);font-size:15.5px;line-height:1.5}
.meta{display:flex;gap:12px;font-size:13.5px;color:var(--pencil)}
.meta .tag{font-weight:650;color:var(--mint-ink)}
.more{margin-top:auto;padding-top:8px;font-weight:600;font-size:15px;color:var(--ink)}
.thumb{height:96px;width:auto;max-width:80%;display:block}
.thumb rect{rx:3}

/* Notice shown on any page or chart that uses example numbers. */
.sample{display:flex;gap:12px;align-items:flex-start;padding:14px 18px;border-radius:14px;border:1.5px dashed var(--s3);background:color-mix(in srgb,var(--s3) 8%,transparent);font-size:15px;line-height:1.5;margin:0 0 34px}
.sample svg{flex:none;width:20px;height:20px;margin-top:1px;fill:none;stroke:var(--s3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sample b{font-weight:650}

/* Article body */
.article{max-width:780px;padding-bottom:110px}
.article h2{font-size:clamp(26px,2.6vw,32px);line-height:1.15;letter-spacing:-.03em;margin:56px 0 14px}
.article p,.article li{font-size:17px;line-height:1.7;color:var(--pencil)}
.article strong{color:var(--ink)}
.article a{color:var(--mint-ink);text-underline-offset:3px}
.article ol,.article ul{padding-left:22px}
.article li{margin-bottom:8px}

/* Stat tiles: a number with a small label. */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:8px 0 10px}
.stat{padding:18px 18px 16px;border-radius:18px;background:var(--card);border:1px solid var(--rule)}
.stat b{display:block;font-size:34px;font-weight:760;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.stat span{display:block;margin-top:6px;font-size:14px;line-height:1.35;color:var(--pencil)}

/* Charts */
figure.chart{margin:26px 0 8px;padding:22px 22px 16px;border-radius:22px;background:var(--card);border:1px solid var(--rule);position:relative}
figure.chart figcaption{margin:0 0 4px;font-size:18px;font-weight:650;letter-spacing:-.015em;color:var(--ink)}
figure.chart .sub{margin:0 0 14px;font-size:14px;color:var(--pencil)}
.legend{display:flex;flex-wrap:wrap;gap:16px;margin:0 0 12px;font-size:14px;color:var(--pencil)}
.legend span{display:inline-flex;align-items:center;gap:7px}
.legend i{width:12px;height:12px;border-radius:3px;background:var(--c)}
.chart svg{display:block;width:100%;height:auto;overflow:visible}
.chart .gl{stroke:var(--grid);stroke-width:1}
.chart .ax{fill:var(--pencil);font:500 12.5px var(--sans)}
.chart .lab{fill:var(--ink);font:550 13.5px var(--sans)}
.chart .val{fill:var(--ink);font:650 12.5px var(--sans);font-variant-numeric:tabular-nums}
.chart .bar{transition:opacity .15s}
.chart svg:hover .bar{opacity:.45}
.chart svg .bar:hover,.chart svg .bar.hot{opacity:1}
.chart .stamp{position:absolute;top:18px;right:18px;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:700;color:var(--s3);border:1.5px solid var(--s3)}
.tip{position:fixed;z-index:50;pointer-events:none;padding:8px 11px;border-radius:10px;background:var(--ink);color:var(--bg);font:500 13px/1.4 var(--sans);box-shadow:0 10px 24px -10px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);transition:opacity .12s,transform .12s;max-width:240px}
.tip.on{opacity:1;transform:none}
.tip b{font-weight:700}

/* Small multiples: one panel per category, each with its own unit. */
.multiples{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:18px 0 6px}
.panel{padding:18px 18px 12px;border-radius:18px;background:var(--card);border:1px solid var(--rule)}
.panel h3{margin:0;font-size:16px;letter-spacing:-.01em}
.panel p{margin:2px 0 10px;font-size:13.5px;color:var(--pencil)}
.panel .win{display:inline-flex;align-items:center;gap:6px;margin-top:4px;font-size:13px;font-weight:650;color:var(--mint-ink)}
.panel .win::before{content:"";width:12px;height:7px;border-left:2.2px solid currentColor;border-bottom:2.2px solid currentColor;transform:rotate(-45deg) translateY(-2px)}

/* Data tables: the accessible view of every chart. */
details.data{margin:10px 0 0}
details.data summary{cursor:pointer;font-size:14px;font-weight:600;color:var(--pencil);padding:6px 0}
table.t{width:100%;border-collapse:collapse;font-size:14.5px;margin:8px 0 4px}
table.t th,table.t td{padding:10px 8px;border-bottom:1px solid var(--rule);text-align:right;font-variant-numeric:tabular-nums}
table.t th:first-child,table.t td:first-child{text-align:left}
table.t thead th{font-size:13px;color:var(--pencil);font-weight:600}
.scroll{overflow-x:auto}

.method{margin:22px 0 0;padding:22px 24px;border-radius:18px;background:var(--tint);border:1px solid var(--rule)}
.method h3{margin:0 0 8px;font-size:17px}
.method p,.method li{font-size:15.5px}

@media (max-width:900px){
  .feature{grid-template-columns:1fr}
  .feature .art{border-left:0;border-top:1px solid var(--rule);order:-1}
  .feature .txt{padding:26px 24px}
  .cards{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .multiples{grid-template-columns:1fr}
  .ihead{padding:36px 0 26px}
}

/* GrindMate vs Competitor article */
.stats.s3{grid-template-columns:repeat(3,1fr)}
.stat.hl{border:2px solid var(--mint);box-shadow:0 0 0 5px var(--mint-soft)}
.stat.hl b{color:var(--mint-ink)}
table.vs td,table.vs th{text-align:left}
.chart table.vs td svg{display:inline-block;width:17px;height:17px}
table.vs td svg{width:17px;height:17px;vertical-align:-3px;margin-right:7px;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
table.vs .ok{stroke:var(--mint-ink)}
table.vs .no{stroke:var(--pencil)}
table.vs td:nth-child(2){color:var(--ink);font-weight:600}
.adv{position:relative;margin-top:64px;padding-left:64px}
.adv h2{margin-top:0}
.adv-n{position:absolute;left:0;top:-2px;width:44px;height:44px;border-radius:13px;display:grid;place-items:center;background:var(--mint);color:#000;font-weight:760;font-size:19px}
.layers{list-style:none;padding:0;margin:22px 0;display:grid;gap:8px;counter-reset:l}
.layers li{position:relative;display:grid;gap:2px;margin:0;padding:14px 18px 14px 56px;border-radius:14px;background:var(--card);border:1px solid var(--rule);counter-increment:l}
.layers li::before{content:counter(l);position:absolute;left:16px;top:50%;width:26px;height:26px;margin-top:-13px;border-radius:8px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--rule);font-size:13px;font-weight:700;color:var(--mint-ink)}
.layers li:nth-child(2){margin-left:14px}.layers li:nth-child(3){margin-left:28px}.layers li:nth-child(4){margin-left:42px;border-color:var(--mint)}
.layers b{color:var(--ink);font-size:16px}
.layers span{font-size:15px;line-height:1.45}
.flows{display:grid;gap:12px;margin:22px 0}
.flow{padding:16px 18px;border-radius:16px;background:var(--card);border:1px solid var(--rule)}
.flow.gm{border-color:var(--mint)}
.flow .who{margin:0 0 10px;font-size:14px;font-weight:650;color:var(--ink)}
.flow ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.flow li{margin:0;padding:8px 12px;border-radius:10px;background:var(--tint);border:1px solid var(--rule);font-size:14.5px;line-height:1.3;color:var(--ink)}
.flow li.end{background:var(--mint);border-color:var(--mint);color:#000;font-weight:600}
.flow.cm li.end{background:var(--tint);border-color:var(--rule);color:var(--ink);font-weight:400}
.flow li.miss{border-style:dashed;color:var(--pencil);background:none}
.flow .arr{flex:none;width:18px;height:18px;fill:none;stroke:var(--pencil);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.trio div{display:grid;gap:4px;padding:16px;border-radius:14px;background:var(--card);border:1px solid var(--rule)}
.trio b{color:var(--ink)}
.trio span{font-size:14.5px;line-height:1.45;color:var(--pencil)}
@media (max-width:700px){
  .stats.s3{grid-template-columns:1fr 1fr}
  .stats.s3 .hl{grid-column:1 / -1}
  .adv{padding-left:0;padding-top:58px}
  .layers li:nth-child(n){margin-left:0}
  .trio{grid-template-columns:1fr}
}

/* GrindMate vs traditional AI assistants: cover, yes/no table, scripted figures. */
:root{--no:#C93C3C}
html[data-theme="dark"]{--no:#F07B7B}

/* Cover: dark matchup poster, GrindMate lit in mint against other AI assistants in dark grey.
   HTML layers; only transform/opacity animate, with 3D transforms so each layer moves at sub-pixel precision
   (tiny 2D moves snap to whole pixels and look like a low frame rate). */
.vsc{position:relative;display:grid;grid-template-columns:1fr 1fr;width:100%;height:100%;aspect-ratio:640/340;background:#121517;overflow:hidden;container-type:inline-size;isolation:isolate}
.vsc::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(135deg,#0E4A32,#051510);clip-path:polygon(0 0,56% 0,47% 100%,0 100%)}
.vsc .side.r::before{content:"";position:absolute;inset:0 0 0 -12%;z-index:-2;background:linear-gradient(225deg,#2A2F33,#121517);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.vsc::after{content:"";position:absolute;top:-6%;bottom:-6%;left:51.5%;width:2px;transform:translateX(-50%) rotate(10deg);background:linear-gradient(transparent,#5BF0B0 30%,#5BF0B0 70%,transparent);box-shadow:0 0 14px 3px rgba(41,213,139,.45)}
.vsc .side{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.1cqw;text-align:center}
.vsc .side b{font:750 4.1cqw/1.1 var(--sans);letter-spacing:-.03em}
.vsc .side small{font:550 2.2cqw/1.2 var(--sans)}
.vsc .l b{color:#FFFFFF}.vsc .l small{color:#5BF0B0}
.vsc .r b{color:#C9CFD2}.vsc .r small{color:#8E979B}
.vsc .halo{position:absolute;left:50%;top:44%;width:48cqw;height:48cqw;margin:-24cqw 0 0 -24cqw;border-radius:50%;background:radial-gradient(closest-side,rgba(41,213,139,.5),rgba(41,213,139,0));z-index:-1}
.vsc .lt{display:block;width:24cqw;height:24cqw;margin-bottom:1.4cqw;padding:.7cqw;border-radius:6.4cqw;background:#29D58B;box-shadow:0 2.4cqw 6cqw -2cqw rgba(41,213,139,.6)}
.vsc .lt img{width:100%;height:100%;border-radius:5.7cqw;object-fit:cover;display:block}
.vsc .icons{display:grid;grid-template-columns:repeat(2,11.5cqw);gap:2.2cqw;margin-bottom:2.6cqw}
.vsc .ic{display:grid;place-items:center;width:11.5cqw;height:11.5cqw;border-radius:3.2cqw;background:#2B3034;box-shadow:inset 0 0 0 1.5px #3C4247}
.vsc .ic svg{width:58%;height:58%;display:block;overflow:visible}
.vsc .ic path,.vsc .ic circle,.vsc .ic rect{fill:none;stroke:#9AA3A8;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vsc .ic .dot{fill:#9AA3A8;stroke:none}
.vsc .vs{position:absolute;left:51.5%;top:44%;display:grid;place-items:center;width:12cqw;height:12cqw;margin:-6cqw 0 0 -6cqw;border-radius:50%;background:#FFFFFF;font:850 4.3cqw/1 var(--sans);letter-spacing:-.04em;color:#0F1A14;box-shadow:0 0 0 .6cqw #29D58B,0 0 5cqw 1cqw rgba(41,213,139,.35)}
.feature .art.cover-art{padding:0;place-items:stretch;background:#121517}
.cover-wrap{margin:0 0 30px;border-radius:24px;overflow:hidden}
.vsc .lt,.vsc .ic,.vsc .vs,.vsc .halo{will-change:transform;backface-visibility:hidden;transform:translate3d(0,0,0)}
.vsc .ic:nth-child(2n){transform:translate3d(0,3cqw,0)}
.feature .vsc .lt,.feature .vsc .ic,.feature .vsc .vs,.feature .vsc .halo{will-change:auto}
/* The covers move only inside the article; on the Insights index they stay still. */
@media (prefers-reduced-motion:no-preference){
  .cover-wrap .vsc .lt{animation:bob 3.6s ease-in-out infinite}
  .cover-wrap .vsc .halo{animation:glow 3.6s ease-in-out infinite}
  .cover-wrap .vsc .ic{animation:bob 4s ease-in-out infinite;animation-delay:calc(var(--k) * -1s)}
  .cover-wrap .vsc .ic:nth-child(2n){animation-name:bob2}
  .cover-wrap .vsc .vs{animation:pulse 2.4s ease-in-out infinite}
}
@keyframes bob{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-2cqw,0)}}
@keyframes bob2{0%,100%{transform:translate3d(0,3cqw,0)}50%{transform:translate3d(0,1cqw,0)}}
@keyframes pulse{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,0,0) scale(1.08)}}
@keyframes glow{0%,100%{opacity:1;transform:translate3d(0,0,0) scale(1)}50%{opacity:.6;transform:translate3d(0,0,0) scale(1.1)}}

table.yn-t th,table.yn-t td{vertical-align:middle}
table.yn-t th:first-child{text-align:left}
table.yn-t thead th:not(:first-child),table.yn-t td{text-align:center;width:22%}
table.yn-t tbody th{font-weight:600;color:var(--ink);font-size:15.5px}
table.yn-t tbody th small{display:block;font-weight:500;font-size:12.5px;color:var(--pencil);margin-top:2px}
table.yn-t thead th:nth-child(2){color:var(--mint-ink)}
table.yn-t tbody td:nth-child(2){background:linear-gradient(var(--done-bg),var(--done-bg))}
.yn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:50%;vertical-align:middle}
.chart .yn svg{width:16px;height:16px;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;display:block}
.yn.y{background:var(--mint);box-shadow:0 4px 12px -4px rgba(15,140,85,.55)}.yn.y svg{stroke:#04291A}
.yn.n{background:color-mix(in srgb,var(--no) 12%,var(--card));box-shadow:inset 0 0 0 1.5px color-mix(in srgb,var(--no) 45%,transparent)}.yn.n svg{stroke:var(--no);width:15px;height:15px;stroke-width:3.2}
.def{margin:12px 0 0;font-size:13.5px;line-height:1.5;color:var(--pencil)}

/* Figure shell: stage, a status line that narrates each step, Replay */
figure.anim{position:relative;margin:22px 0;padding:20px 20px 16px;border-radius:20px;background:var(--card);border:1px solid var(--rule);overflow:hidden}
.anim .foot{display:flex;align-items:center;gap:12px;margin-top:16px;padding-top:12px;border-top:1px solid var(--rule)}
.anim .status{flex:1;margin:0;min-height:1.5em;font-size:14.5px;font-weight:550;color:var(--ink)}
.anim .status::before{content:"";display:inline-block;width:8px;height:8px;margin-right:9px;border-radius:50%;background:var(--mint);vertical-align:1px}
.replay{flex:none;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;border:1px solid var(--rule);background:var(--card);color:var(--pencil);font:600 13px var(--sans);cursor:pointer}
.replay:hover{color:var(--ink);border-color:var(--line-c)}
.replay svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.anim .who{display:flex;align-items:center;gap:10px;margin:0 0 10px;font-size:14.5px;font-weight:650;color:var(--ink)}
.anim .who .ct{margin-left:auto;font-size:13px;font-weight:600;color:var(--pencil);font-variant-numeric:tabular-nums}
.anim .who .tag{display:none;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700}
.anim .done .who .tag{display:inline-block}
.anim .gm .tag{background:var(--mint);color:#000}
.anim .ai .tag{background:var(--ink);color:var(--bg)}

/* 1. Step race: a track per tool, the line fills as steps complete */
.race .lane{padding:14px 16px;border-radius:14px;border:1px solid var(--rule);background:var(--tint);margin-bottom:10px;transition:border-color .3s}
.race .lane.gm.done{border-color:var(--mint)}
.race ol{position:relative;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),1fr);gap:6px}
.race ol::before,.race ol::after{content:"";position:absolute;left:9px;right:9px;top:9px;height:3px;border-radius:3px;background:var(--rule)}
.race ol::after{background:var(--c);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s var(--ease)}
.race .gm{--c:var(--mint)}.race .ai{--c:var(--s2)}
.race li{position:relative;z-index:1;display:grid;justify-items:start;gap:8px;margin:0;font-size:13px;line-height:1.3;color:var(--pencil)}
.race li::before{content:"";width:21px;height:21px;border-radius:50%;background:var(--card);border:2.5px solid var(--rule);box-sizing:border-box;transition:background-color .25s,border-color .25s,transform .25s var(--ease)}
.race li.on{color:var(--ink)}
.race li.on::before{background:var(--c);border-color:var(--c);transform:scale(1.12)}

/* 2. One request vs five */
.batch .cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.batch .col{padding:14px;border-radius:14px;background:var(--tint);border:1px solid var(--rule);transition:border-color .3s}
.batch .col.gm.done{border-color:var(--mint)}
.batch ol{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.batch li{display:flex;align-items:center;gap:10px;margin:0;padding:8px 10px;border-radius:9px;background:var(--card);border:1px solid var(--rule);font-size:13.5px;color:var(--pencil);transition:color .2s,border-color .2s}
.batch li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:2px solid var(--line-c);box-sizing:border-box}
.batch li.busy{color:var(--ink)}
.batch li.busy::before{border-color:var(--c) transparent var(--c) var(--c);animation:spin .7s linear infinite}
.batch li.ok{color:var(--ink)}
.batch li.ok::before{background:var(--c) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;border-color:var(--c)}
.batch .gm{--c:var(--mint-ink)}.batch .ai{--c:var(--s2)}
@keyframes spin{to{transform:rotate(360deg)}}

/* 3. Layers: tiles light up as each layer sweeps */
.layers .page{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px;border-radius:14px;background:var(--tint);border:1px solid var(--rule);overflow:hidden}
.layers .tile{position:relative;height:44px;border-radius:10px;background:var(--card);border:1.5px solid var(--rule);display:flex;align-items:center;gap:8px;padding:0 10px;font-size:13px;color:var(--pencil);transition:background-color .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.layers .tile::before{content:"";width:12px;height:12px;border-radius:4px;background:var(--rule);transition:background-color .25s}
.layers .tile.hit{border-color:var(--mint);color:var(--ink);transform:scale(1.03)}
.layers .tile.hit::before{background:var(--mint)}
.layers .page::after{content:"";position:absolute;top:0;bottom:0;left:-25%;width:25%;background:linear-gradient(90deg,transparent,rgba(41,213,139,.28),transparent);opacity:0}
.layers.sweeping .page::after{animation:sweep2 .9s ease-in-out}
@keyframes sweep2{0%{opacity:1;left:-25%}100%{opacity:1;left:100%}}
.layers .bar2{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.layers .lp{padding:6px 12px;border-radius:999px;font-size:13px;font-weight:650;color:var(--pencil);background:var(--tint);border:1px solid var(--rule);transition:all .25s}
.layers .lp.on{background:var(--mint);border-color:var(--mint);color:#000}
.layers .lp.past{color:var(--mint-ink);border-color:var(--done-border);background:var(--done-bg)}
.layers .ct{margin-left:auto;font-size:13.5px;font-weight:650;color:var(--ink);font-variant-numeric:tabular-nums}

/* 4. Image question */
.img .iq{display:grid;grid-template-columns:180px 1fr;gap:18px;align-items:center;padding:16px;border-radius:14px;background:var(--tint);border:1px solid var(--rule)}
.img .pw{position:relative;padding:8px}
.img .plot{display:block;width:100%;height:auto}
.img .axis{fill:none;stroke:var(--line-c);stroke-width:2}
.img .curve{fill:none;stroke:var(--s2);stroke-width:3;stroke-linecap:round}
.img .peak{fill:var(--mint);opacity:0;transition:opacity .3s}
.img .frame{position:absolute;inset:0;border-radius:10px;opacity:0;transform:scale(1.08);transition:opacity .3s,transform .4s var(--ease);background:linear-gradient(var(--mint),var(--mint)) 0 0/18px 3px no-repeat,linear-gradient(var(--mint),var(--mint)) 0 0/3px 18px no-repeat,linear-gradient(var(--mint),var(--mint)) 100% 0/18px 3px no-repeat,linear-gradient(var(--mint),var(--mint)) 100% 0/3px 18px no-repeat,linear-gradient(var(--mint),var(--mint)) 0 100%/18px 3px no-repeat,linear-gradient(var(--mint),var(--mint)) 0 100%/3px 18px no-repeat,linear-gradient(var(--mint),var(--mint)) 100% 100%/18px 3px no-repeat,linear-gradient(var(--mint),var(--mint)) 100% 100%/3px 18px no-repeat}
.img .frame.on{opacity:1;transform:none}
.img .frame.read{background-color:rgba(41,213,139,.10)}
.img .frame.read + svg .peak{opacity:1}
.img b{display:block;color:var(--ink);font-size:15px;margin-bottom:8px}
.img ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.img li{margin:0;padding:7px 10px;border-radius:8px;background:var(--card);border:1px solid var(--rule);font-size:14px;color:var(--ink);transition:background-color .35s,border-color .35s}
.img li.ans.on{background:var(--mint-soft);border-color:var(--mint);font-weight:600}
.img .extra{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:12px}
.img .extra p{margin:0 6px 0 0;font-size:13.5px;color:var(--pencil)}
.img .extra ol{display:contents;list-style:none}
.img .extra li{padding:6px 10px;font-size:13px;color:var(--pencil);background:var(--tint);opacity:.35;transition:opacity .3s,border-color .3s,color .3s}
.img .extra li.on{opacity:1;color:var(--ink);border-color:var(--s2)}

/* 5. Matching */
.bind .twin{position:relative;display:grid;gap:10px;padding-top:34px}
.bind .qq{display:flex;align-items:center;gap:10px;padding:14px 16px;border-radius:12px;background:var(--tint);border:1.5px solid var(--rule);font-size:15px;color:var(--ink);transition:border-color .25s,background-color .25s}
.bind .slot{margin-left:auto;width:64px;height:34px;border-radius:9px;border:1.5px dashed var(--line-c)}
.bind .mark{width:92px;font-size:12.5px;font-weight:700;opacity:0;transition:opacity .25s}
.bind .qq.nope{border-color:var(--no);background:color-mix(in srgb,var(--no) 7%,var(--tint))}
.bind .qq.nope .mark.x{opacity:1;color:var(--no)}
.bind .qq.yes{border-color:var(--mint);background:var(--done-bg)}
.bind .qq.yes .mark.v{opacity:1;color:var(--mint-ink)}
.bind .mark.v{display:none}.bind .qq.yes .mark.v{display:block}.bind .qq.yes .mark.x{display:none}
.bind .fly{position:absolute;left:0;top:0;z-index:2;width:52px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--mint);color:#000;font-weight:750;box-shadow:0 8px 18px -8px rgba(15,90,55,.6);opacity:0;transition:transform .6s var(--ease),opacity .25s}
.bind .fly.in{opacity:1}

@media (prefers-reduced-motion:reduce){
  .anim *{animation:none!important;transition-duration:1ms!important}
}
@media (max-width:700px){
  .batch .cols{grid-template-columns:1fr}
  .img .iq{grid-template-columns:1fr}
  .layers .page{grid-template-columns:repeat(2,1fr)}
  .race li{font-size:12px}
  .bind .mark{width:auto}
}

/* Building GrindMate: cost cards, pull quote, two-card index */
.why{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:22px 0}
.why div{display:grid;gap:6px;align-content:start;padding:18px;border-radius:16px;background:var(--card);border:1px solid var(--rule)}
.why b{font-size:16.5px;color:var(--ink)}
.why span{font-size:15px;line-height:1.5;color:var(--pencil)}
.why svg{width:26px;height:26px;fill:none;stroke:var(--mint-ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.article .quote{margin:26px 0;padding:22px 26px;border-left:4px solid var(--mint);border-radius:0 16px 16px 0;background:var(--done-bg);font-size:19px;line-height:1.55;color:var(--ink);font-weight:550}
.cards2{display:grid;gap:22px;padding-bottom:100px}
.cards2 .feature{margin-bottom:0}


/* Building GrindMate: the faceless figure (no eyes, no mouth). Resting pose: arms crossed.
   Cover entrance: darkness, the ceiling light flickers on, the figure steps out of the dark, then folds its arms.
   The side figure folds its arms when it scrolls into view. */
.fig{display:block;width:100%;height:auto;overflow:visible}
.fig .shadow{fill:rgba(0,0,0,.35)}
.fig .body,.fig .head{transform-box:fill-box;will-change:transform}
.fig .body{transform-origin:50% 100%}
.fig .head{transform-origin:50% 90%}
.fig .fl,.fig .fr{transform-box:view-box}
.fig .fl{transform-origin:41px 184px;transform:rotate(-104deg)}
.fig .fr{transform-origin:159px 184px;transform:rotate(104deg)}
@media (prefers-reduced-motion:no-preference){
  .cover-wrap .myst span.beam{animation:lighton 1.1s steps(1,end) .35s both,flicker 6s ease-in-out 2s infinite}
  .cover-wrap .myst .fog{animation:fogin 1s ease-out 1s both}
  .cover-wrap .myst .motes{animation:fogin 1s ease-out 1.2s both}
  .cover-wrap .myst .fig{animation:emerge 1.1s cubic-bezier(.2,.7,.25,1) 1.25s both}
  .cover-wrap .myst .fig .fl{animation:crossL 1s cubic-bezier(.35,.1,.25,1) 2.45s both}
  .cover-wrap .myst .fig .fr{animation:crossR 1s cubic-bezier(.35,.1,.25,1) 2.6s both}
  .cover-wrap .myst .fig .body{animation:breathe 4.2s ease-in-out 3.7s infinite}
  .cover-wrap .myst .fig .head{animation:nod 8.4s ease-in-out 3.9s infinite}
  .stand[data-inview] .fig .fl{transform:rotate(0deg)}
  .stand[data-inview] .fig .fr{transform:rotate(0deg)}
  .stand.in .fig .fl{animation:crossL 1s cubic-bezier(.35,.1,.25,1) .3s both}
  .stand.in .fig .fr{animation:crossR 1s cubic-bezier(.35,.1,.25,1) .45s both}
  .stand.in .fig .body{animation:breathe 4.2s ease-in-out 1.6s infinite}
  .stand.in .fig .head{animation:nod 8.4s ease-in-out 1.8s infinite}
}
@keyframes lighton{0%{opacity:0}18%{opacity:.55}26%{opacity:.05}40%{opacity:.75}48%{opacity:.15}62%{opacity:.85}100%{opacity:.75}}
@keyframes fogin{from{opacity:0}to{opacity:1}}
@keyframes emerge{from{opacity:0;transform:translate3d(0,3cqw,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes crossL{from{transform:rotate(0deg)}to{transform:rotate(-104deg)}}
@keyframes crossR{from{transform:rotate(0deg)}to{transform:rotate(104deg)}}
@keyframes breathe{0%,100%{transform:translate3d(0,0,0) scale(1,1)}50%{transform:translate3d(0,-1.5px,0) scale(1.012,1.018)}}
@keyframes nod{0%,100%{transform:rotate(0deg)}30%{transform:rotate(-2.5deg)}60%{transform:rotate(1.5deg)}}

.builder{display:grid;grid-template-columns:minmax(0,1fr) 220px;gap:32px;align-items:center}
.stand{position:relative;padding:22px 26px 8px;border-radius:24px;background:radial-gradient(70% 60% at 50% 45%,rgba(41,213,139,.28),transparent 70%),linear-gradient(#0E1311,#060807);overflow:hidden}
.stand::after{content:"";position:absolute;left:0;right:0;bottom:0;height:30%;background:repeating-linear-gradient(90deg,rgba(41,213,139,.12) 0 1px,transparent 1px 22px);transform:perspective(160px) rotateX(55deg);transform-origin:bottom;opacity:.7}
.stand .fig{position:relative;z-index:1;width:100%}

/* Building GrindMate: mystical cover, the same figure in a beam of light */
.myst{position:relative;width:100%;height:100%;aspect-ratio:640/340;background:radial-gradient(120% 90% at 50% 0%,#0C2219 0%,#040605 60%);overflow:hidden;container-type:inline-size;isolation:isolate}
.myst .beam{position:absolute;left:57%;top:-10%;width:60cqw;height:120%;margin-left:-30cqw;background:linear-gradient(rgba(91,240,176,.5),rgba(41,213,139,.12) 55%,transparent 85%);clip-path:polygon(40% 0,60% 0,100% 100%,0 100%);filter:blur(1.2cqw);z-index:-1;opacity:.75}
.myst .fog{position:absolute;left:-3%;right:-17%;bottom:-8%;height:40%;background:radial-gradient(50% 60% at 50% 70%,rgba(41,213,139,.30),transparent 70%);z-index:-1}
.myst .floor{position:absolute;left:-20%;right:-20%;bottom:0;height:34%;background:repeating-linear-gradient(90deg,rgba(91,240,176,.16) 0 1px,transparent 1px 4.4cqw),repeating-linear-gradient(0deg,rgba(91,240,176,.12) 0 1px,transparent 1px 3cqw);transform:perspective(40cqw) rotateX(62deg);transform-origin:bottom;-webkit-mask-image:linear-gradient(transparent,#000 60%);mask-image:linear-gradient(transparent,#000 60%);z-index:-1}
.myst .fig{position:absolute;left:57%;bottom:2.5%;width:26cqw;margin-left:-13cqw}
.myst .fig .shadow{fill:rgba(41,213,139,.25)}

.myst .motes i{position:absolute;left:var(--x);bottom:8%;width:calc(.7cqw * var(--s));height:calc(.7cqw * var(--s));border-radius:50%;background:#7DF5C1;box-shadow:0 0 1.2cqw #29D58B;opacity:.55}
.myst .mlabel{position:absolute;left:4.5cqw;bottom:4.5cqw;display:grid;gap:.6cqw}
.myst .mlabel b{font:750 3.8cqw/1 var(--sans);letter-spacing:-.03em;color:#FFFFFF}
.myst .mlabel small{font:550 1.9cqw/1.2 var(--sans);color:#5BF0B0}
.myst .mlogo{position:absolute;right:4.5cqw;top:4.5cqw;width:7cqw;height:7cqw;border-radius:2cqw;box-shadow:0 0 0 .4cqw rgba(41,213,139,.6),0 0 3cqw rgba(41,213,139,.45)}
@media (prefers-reduced-motion:no-preference){
  .cover-wrap .myst .motes i{animation:mote 7s linear infinite;animation-delay:var(--d);will-change:transform,opacity}
  .cover-wrap .myst .beam{animation:flicker 6s ease-in-out infinite}
}
@keyframes mote{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.7}100%{transform:translate3d(1.5cqw,-38cqw,0);opacity:0}}
@keyframes flicker{0%,100%{opacity:.75}45%{opacity:.6}55%{opacity:.85}}

/* Building GrindMate: release pipeline */
.pipe{background:var(--card);background-image:repeating-linear-gradient(0deg,transparent 0 23px,color-mix(in srgb,var(--rule) 55%,transparent) 23px 24px),repeating-linear-gradient(90deg,transparent 0 23px,color-mix(in srgb,var(--rule) 55%,transparent) 23px 24px)}
.pipe-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;font-size:14px}
.pipe-head b{color:var(--ink)}
.pipe-head .dotr{width:9px;height:9px;border-radius:50%;background:var(--line-c)}
.pipe.running .pipe-head .dotr{background:#E2A33A;box-shadow:0 0 0 4px rgba(226,163,58,.2)}
.pipe.passed .pipe-head .dotr{background:var(--mint);box-shadow:0 0 0 4px var(--mint-soft)}
.pipe-head .pct{margin-left:auto;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
.pipe .track{height:6px;border-radius:6px;background:var(--rule);overflow:hidden;margin-bottom:16px}
.pipe .track .fill{display:block;height:100%;width:100%;background:var(--mint);transform-origin:left;transform:scaleX(var(--p,0));transition:transform .5s cubic-bezier(.22,.8,.24,1)}
.pipe .stages{display:grid;grid-template-columns:1fr 1fr 1.55fr 1fr 1fr;gap:10px}
.stg{position:relative;padding:12px;border-radius:14px;background:var(--card);border:1.5px solid var(--rule);transition:border-color .3s,box-shadow .3s}
.stg:not(:last-child)::after{content:"";position:absolute;top:26px;right:-11px;width:10px;height:2px;background:var(--rule)}
.stg.run{border-color:#E2A33A;box-shadow:0 0 0 4px rgba(226,163,58,.15)}
.stg.ok{border-color:var(--mint)}
.stg.ok:not(:last-child)::after{background:var(--mint)}
.stg .sh{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center;margin-bottom:10px}
.stg .sn{grid-row:span 2;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--tint);border:1px solid var(--rule);font-weight:750;font-size:13px;color:var(--pencil)}
.stg.ok .sn{background:var(--mint);border-color:var(--mint);color:#000}
.stg.run .sn{border-color:#E2A33A;color:var(--ink)}
.stg .sh b{font-size:14.5px;color:var(--ink)}
.stg .state{font-size:11.5px;font-weight:650;color:var(--pencil)}
.stg.run .state{color:#C98A22}
.stg.ok .state{color:var(--mint-ink)}
.stg ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.stg li{display:grid;grid-template-columns:14px 1fr auto;gap:7px;align-items:center;margin:0;font-size:12.5px;line-height:1.3;color:var(--pencil)}
.stg li i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line-c);box-sizing:border-box;transition:background-color .2s,border-color .2s}
.stg li.busy i{border-color:#E2A33A transparent #E2A33A #E2A33A;animation:spin .7s linear infinite}
.stg li.ok{color:var(--ink)}
.stg li.ok i{border-color:var(--mint);background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5' fill='none' stroke='%2304291A' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat}
.stg li em{font-style:normal;font-size:11.5px;font-weight:650;color:var(--pencil);font-variant-numeric:tabular-nums}
.stg li.ok em{color:var(--mint-ink)}
.pipe .loop{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:13.5px;color:var(--pencil)}
.pipe .loop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){
  .pipe .stages{grid-template-columns:1fr 1fr}
  .stg:not(:last-child)::after{display:none}
}
@media (max-width:700px){
  .builder{grid-template-columns:1fr}
  .stand{max-width:240px;margin:0 auto}
  .pipe .stages{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){.fig *{animation:none!important}}

/* 3D figure canvases */
.myst canvas.fig3d{position:absolute;left:57%;bottom:0;width:48cqw;height:96%;transform:translateX(-50%);display:block}
.stand canvas.fig3d{position:relative;z-index:1;display:block;width:100%;aspect-ratio:240/300}

/* ===== world map cover + vertical release timeline ===== */
/* Cyber world map: static dot-matrix land image; only the overlay (waves, arcs, pings) moves. */
.wmap{position:relative;width:100%;height:100%;aspect-ratio:640/340;background:radial-gradient(80% 75% at 54% 28%,#0B2A1D 0%,#030605 72%);overflow:hidden;container-type:inline-size;isolation:isolate}
.wmap .land{position:absolute;inset:0;width:100%;height:100%;display:block}
.wmap .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(41,213,139,.06) 0 1px,transparent 1px 3px);pointer-events:none}
.wmap .arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wmap .arc{fill:none;stroke:#5BF0B0;stroke-width:1.3;stroke-linecap:round;stroke-dasharray:1 2;stroke-dashoffset:0;opacity:.8}
.wmap .hub,.wmap .ping{position:absolute;border-radius:50%;background:#7DF5C1;box-shadow:0 0 1.4cqw #29D58B}
.wmap .hub{width:1.7cqw;height:1.7cqw;margin:-.85cqw 0 0 -.85cqw}
.wmap .hub::after{content:"";position:absolute;inset:-1.4cqw;border-radius:50%;border:2px solid rgba(91,240,176,.7)}
.wmap .ping{width:1.05cqw;height:1.05cqw;margin:-.525cqw 0 0 -.525cqw}
.wmap .ping::after{content:"";position:absolute;inset:-1.1cqw;border-radius:50%;border:1.5px solid rgba(91,240,176,.8);opacity:0}
.wmap .wave{position:absolute;width:0;height:0}
.wmap .wave i{position:absolute;left:-60cqw;top:-60cqw;width:120cqw;height:120cqw;border-radius:50%;border:1.5px solid rgba(91,240,176,.55);box-shadow:0 0 2cqw rgba(41,213,139,.25) inset;opacity:0;transform:scale(0)}
.wmap .mlabel{position:absolute;left:4.5cqw;bottom:4.5cqw;display:grid;gap:.6cqw}
.wmap .mlabel b{font:750 3.8cqw/1 var(--sans);letter-spacing:-.03em;color:#FFFFFF}
.wmap .mlabel small{font:550 1.9cqw/1.2 var(--sans);color:#5BF0B0}
.wmap .mlogo{position:absolute;right:4.5cqw;top:4.5cqw;width:7cqw;height:7cqw;border-radius:2cqw;box-shadow:0 0 0 .4cqw rgba(41,213,139,.6),0 0 3cqw rgba(41,213,139,.45)}
.feature .art.cover-art .wmap{min-height:100%}
@media (prefers-reduced-motion:no-preference){
  .cover-wrap .wmap .ping{animation:popin .35s cubic-bezier(.3,1.6,.5,1) calc(.1s + var(--k) * .09s) both}
  .cover-wrap .wmap .route{animation:fadein .8s ease-out calc(.5s + var(--r) * .04s) both}
  .cover-wrap .wmap .comet{animation:travel var(--dur) linear var(--del) infinite}
  .cover-wrap .wmap .clab{animation:fadein .5s ease-out calc(.2s + var(--k) * .09s) both}
  .cover-wrap .wmap .ping::after{animation:pulse2 2.6s ease-out calc(.5s + var(--k) * .37s) infinite}
}
@keyframes wave{0%{transform:scale(0);opacity:.9}70%{opacity:.25}100%{transform:scale(1);opacity:0}}
@keyframes pulse2{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}
@keyframes draw{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes popin{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}

/* Release timeline: one checkpoint per row, a rail on the left, plain sentence + checks on the right. */
.pipe .stages{display:grid;grid-template-columns:1fr;gap:0;position:relative;padding-left:4px}
.pipe .stages::before{content:"";position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--rule)}
.stg{display:grid;grid-template-columns:36px 1fr;column-gap:16px;padding:12px 0;border:0;background:none;box-shadow:none;border-radius:0}
.stg:not(:last-child)::after{display:none}
.stg.run,.stg.ok{border:0;box-shadow:none}
.stg .sh{display:contents}
.stg .sn{grid-row:1 / span 3;position:relative;z-index:1;width:36px;height:36px;border-radius:50%;font-size:14px;background:var(--card);border:2px solid var(--rule)}
.stg.run .sn{border-color:#E2A33A;box-shadow:0 0 0 5px rgba(226,163,58,.16)}
.stg.ok .sn{background:var(--mint);border-color:var(--mint)}
.stg .sh b{grid-column:2;grid-row:1;font-size:17px;line-height:1.2;align-self:end;display:flex;align-items:center;gap:10px}
.stg .state{grid-column:2;grid-row:1;justify-self:end;align-self:center;padding:3px 10px;border-radius:999px;font-size:12px;background:var(--tint);border:1px solid var(--rule)}
.stg.run .state{background:rgba(226,163,58,.12);border-color:rgba(226,163,58,.45)}
.stg.ok .state{background:var(--done-bg);border-color:var(--done-border)}
.stg .why{grid-column:2;grid-row:2;margin:3px 0 8px;font-size:14.5px;line-height:1.45;color:var(--pencil)}
.stg ul{grid-column:2;grid-row:3;display:flex;flex-wrap:wrap;gap:6px}
.stg li{display:inline-flex;grid-template-columns:none;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:var(--tint);border:1px solid var(--rule);font-size:13px}
.stg li.ok{background:var(--done-bg);border-color:var(--done-border)}
.stg li em{margin-left:2px}
@media (max-width:900px){.pipe .stages{grid-template-columns:1fr}}

/* ===== city labels + work calendar ===== */
.wmap .clab{position:absolute;font:650 max(8px,1.45cqw)/1 var(--sans);letter-spacing:.01em;color:#C8FBE4;white-space:nowrap;pointer-events:none;text-shadow:0 0 .5cqw #000,0 0 1.2cqw rgba(41,213,139,.55)}
.wmap .clab.r{transform:translate(1.25cqw,-50%)}
.wmap .clab.l{transform:translate(calc(-100% - 1.25cqw),-50%)}
.wmap .clab.t{transform:translate(-50%,calc(-100% - 1.1cqw))}
.wmap .clab.b{transform:translate(-50%,1.1cqw)}
@keyframes fadein{from{opacity:0}to{opacity:1}}

/* Work calendar: three months, each day a square that fills with that day's hours. */
.cal-head{display:flex;align-items:baseline;gap:12px;margin-bottom:16px}
.cal-head .big{font:800 44px/1 var(--sans);letter-spacing:-.04em;color:var(--ink);font-variant-numeric:tabular-nums}
.cal.passed .cal-head .big{color:var(--mint-ink)}
.cal-head .lbl{font-size:15px;font-weight:600;color:var(--pencil)}
.cal .months{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cal .mo b{display:block;margin-bottom:8px;font-size:14px;color:var(--pencil);transition:color .2s}
.cal .mo.cur b{color:var(--ink)}
.cal .wk,.cal .days{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal .wk{margin-bottom:4px}
.cal .wk span{font-size:11px;font-weight:600;text-align:center;color:var(--pencil)}
.cal .days i{aspect-ratio:1;border-radius:5px}
.cal .days .d{background:var(--tint);border:1px solid var(--rule);transition:background-color .25s,border-color .25s,transform .25s cubic-bezier(.3,1.6,.5,1)}
.cal .days .d.on{transform:scale(1)}
.cal .days .d:not(.on){transform:scale(.82)}
.cal .days .d.on[data-l="1"],.cal .legend i[data-l="1"]{background:color-mix(in srgb,var(--mint) 35%,var(--card));border-color:transparent}
.cal .days .d.on[data-l="2"],.cal .legend i[data-l="2"]{background:color-mix(in srgb,var(--mint) 68%,var(--card));border-color:transparent}
.cal .days .d.on[data-l="3"],.cal .legend i[data-l="3"]{background:var(--mint);border-color:transparent}
.cal .legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:13px;color:var(--pencil)}
.cal .legend span{display:inline-flex;align-items:center;gap:6px}
.cal .legend i{width:12px;height:12px;border-radius:3px;background:var(--tint);border:1px solid var(--rule)}
@media (max-width:620px){.cal .months{grid-template-columns:1fr;gap:14px;max-width:300px}.cal-head .big{font-size:38px}}
@media (prefers-reduced-motion:reduce){.cal .days .d{transition:none}}
.article .world{margin:0 0 18px;font-size:17px;line-height:1.6;color:var(--ink);font-weight:550;max-width:62ch}

/* ===== city mesh ===== */
.wmap .route{fill:none;stroke:#29D58B;stroke-width:.8;stroke-opacity:.34}
/* a short bright dash; dashoffset .18 -> -1 carries it from the route's start to its end, then it waits off the line */
.wmap .comet{fill:none;stroke:#A6FCD8;stroke-width:1.8;stroke-linecap:round;stroke-dasharray:.18 3;stroke-dashoffset:.18}
@keyframes travel{0%{stroke-dashoffset:.18}55%,100%{stroke-dashoffset:-1}}