/*
 * The final landing (design lab, 13 Oct 26): the styles of every section below the hero, the features included, and
 * the reduced-motion line that must come last. index.html holds the colour and type tokens, the header and the hero
 * inline (the first paint) and links this file right after its <style>, so these rules keep their order: they were
 * the tail of that <style> until the page passed the 1000-line house rule (WO-F7). Every colour is a token of
 * index.html's theme blocks, as before.
 */
/* sections */
.sec{padding:clamp(64px,8vw,112px) 0;border-top:1px solid var(--line)}
.sec h2{margin:0 0 12px;font-size:calc(clamp(28px,3.4vw,40px) * var(--display-scale));line-height:calc(1.1 * var(--display-lh))}
.sub{margin:0 0 clamp(28px,4vw,48px);color:var(--ink-2);max-width:60ch}
.gap{margin-top:clamp(20px,3vw,36px)}
.split{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,88px);align-items:start}
.split>.stick{position:sticky;top:96px}
.how-cta{margin-top:28px}
@media (max-width:860px){.split{grid-template-columns:minmax(0,1fr)}.split>.stick{position:static}.how-cta{display:none}}
/* what Fly names lights up: a violet ring that fades in, then settles */
.lit{position:relative;isolation:isolate}
.lit>.glow{position:absolute;inset:-5px;border-radius:inherit;box-shadow:0 0 0 2px var(--violet),0 16px 36px -18px rgba(var(--glow-rgb),.55);opacity:0;pointer-events:none;z-index:-1}

/* customers, the live landing's strip */
.cust{padding:clamp(48px,6vw,76px) 0 clamp(40px,5vw,64px);border-top:1px solid var(--line)}
.cust h2{margin:0 0 10px;font-size:calc(clamp(26px,3vw,36px) * var(--display-scale));line-height:calc(1.12 * var(--display-lh))}
.cust .sub{margin:0}
.cs{overflow:hidden;margin-top:24px;padding:10px 0 14px;-webkit-mask:linear-gradient(90deg,transparent,var(--paper) 8%,var(--paper) 92%,transparent);mask:linear-gradient(90deg,transparent,var(--paper) 8%,var(--paper) 92%,transparent)}
.cs-in{display:flex;width:max-content}
.cs ul{list-style:none;margin:0;padding:0 14px 0 0;display:flex;gap:14px}
.cs-card{display:flex;align-items:center;gap:12px;width:264px;padding:10px 14px 10px 10px;border:1px solid var(--line);border-radius:16px;background:var(--card)}
.cs-logo{flex:none;display:flex;width:88px;height:56px;padding:6px;border-radius:10px;background:var(--white);box-shadow:inset 0 0 0 1px var(--line)}
.cs-logo img{width:100%;height:100%;object-fit:contain}
.cs-txt{min-width:0;display:grid;gap:3px}
.cs-txt b{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font:600 14px/1.25 var(--sans);color:var(--ink)}
.cs-txt span{font:400 12.5px/1.2 var(--sans);color:var(--violet-2)}
@media (max-width:600px){.cs-card{width:228px;gap:10px}.cs-logo{width:72px;height:48px}}

/* how it works: steps */
.steps{list-style:none;margin:0;padding:0}
.steps li{position:relative;display:grid;grid-template-columns:44px minmax(0,1fr);gap:18px;padding-bottom:30px}
.steps li:last-child{padding-bottom:0}
.steps .glow{inset:-10px -14px 18px -14px;border-radius:16px}
.steps .end .glow{inset:-10px -14px -10px -14px}
.num{position:relative;width:44px;height:44px}
.num span{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;font:var(--sans-weight-ui) 18px/1 var(--sans)}
.num .o{border:2px solid var(--line);color:var(--ink-2);background:var(--card)}
.num .f{background:var(--violet);color:var(--white)}
.seg{position:absolute;left:21px;top:48px;bottom:4px;width:2px;border-radius:2px;background:var(--line)}
.seg i{position:absolute;inset:0;border-radius:2px;background:var(--violet)}
.steps h3{margin:9px 0 4px;font-size:calc(21px * var(--display-scale));line-height:1.25}
.steps p{margin:0;color:var(--ink-2)}
.steps .end .num{display:grid;place-items:center}
.steps .end .num b{width:16px;height:16px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 6px var(--violet-soft)}
.steps .end h3{margin-top:10px;font-size:calc(19px * var(--display-scale))}

/* here is my day: the day band, then the jobs */
.day{display:flex;flex-direction:column;margin:0 0 clamp(32px,4.5vw,52px)}
.dchips{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.dc{position:relative;padding:10px 12px 12px;border:1px solid var(--line);border-radius:14px;background:var(--card);font-size:14px;line-height:1.38;color:var(--ink-2)}
.dc b{font-weight:var(--sans-weight-ui);color:var(--ink)}
.dc::after{content:'';position:absolute;left:50%;top:100%;width:2px;height:17px;margin-left:-1px;background:linear-gradient(var(--line),transparent)}
.dc .ok{position:absolute;right:-7px;top:-7px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--green-soft);color:var(--green-ink);box-shadow:0 0 0 2px var(--paper)}
.dc .ok svg{width:12px;height:12px}
.dc .glow{inset:-4px;border-radius:17px}
.band{position:relative;height:120px;border-radius:20px;overflow:hidden;background:linear-gradient(90deg,#161C4A 0%,#1E2560 19%,#33357A 26.5%,#8C5A8E 31%,#E99A7E 34%,#F8D6B0 37.5%,#D6EAF8 42%,#EAF4FC 58%,#D5E8F6 73%,#F6D3AE 79.5%,#E59A86 83.5%,#7E5A93 87.5%,#33357A 91%,#161C4A 100%)}
.band .st{position:absolute;width:2px;height:2px;border-radius:50%;background:#fff;opacity:.7}
.band .st.b{width:3px;height:3px;opacity:.85}
.band .moon{position:absolute;left:calc(16.6% - 10px);top:64%;width:20px;height:20px;border-radius:50%;box-shadow:inset -6px 3px 0 0 #F6EDD0;rotate:-18deg}
.band .sun{position:absolute;left:calc(50% - 17px);top:10px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle,#FFE9B0 0 38%,#FFC86B 40% 52%,rgba(255,200,107,.35) 60%,rgba(255,200,107,0) 72%)}
.pms{position:absolute;inset:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.pm{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding-top:8px}
.pm i{position:relative;width:16px;height:16px;border-radius:50%;background:var(--white);box-shadow:0 0 0 3px rgba(var(--violet-rgb),.9)}
.pm i b{position:absolute;inset:0;border-radius:50%;background:var(--violet)}
.pm span{font:600 max(12px,calc(13.5px * var(--display-scale)))/1 var(--serif);font-weight:calc(var(--display-weight) + 40);color:var(--white-ink)}
.pm.dk span{color:var(--white)}
.phw{position:absolute;inset:0;translate:-100% 0;pointer-events:none;background:linear-gradient(90deg,transparent 55%,rgba(var(--white-rgb),.16))}
.phw i{position:absolute;right:-1px;top:0;bottom:0;width:2px;background:var(--white);box-shadow:0 0 0 1px rgba(var(--violet-rgb),.45),0 0 16px 5px rgba(var(--violet-rgb),.5)}
.band-cap{margin:10px 0 0;font-size:13.5px;color:var(--ink-3)}
.jobs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.job{display:flex;flex-direction:column;align-items:flex-start;padding:22px 20px 24px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.jic{display:grid;place-items:center;width:44px;height:44px;margin-bottom:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.jic svg{width:22px;height:22px}
.job h3{margin:0;font-size:calc(21px * var(--display-scale));line-height:1.2}
.cad{display:inline-flex;align-items:center;height:24px;margin:8px 0 10px;padding:0 9px;border-radius:999px;background:var(--pill-bg);border:1px solid var(--pill-line);font:600 12.5px/1 var(--sans);color:var(--pill-ink)}
.job p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.job.s98{justify-content:center;background:var(--violet-soft);border-color:var(--violet-line)}
.bar98{display:flex;align-self:stretch;min-height:64px;border-radius:14px;overflow:hidden;font:600 14px/1.3 var(--sans)}
.bar98 .f{flex:98;display:flex;align-items:center;padding:8px 12px;background:var(--violet-deep);color:var(--white)}
.bar98 .y{flex:2;min-width:46px;display:flex;align-items:center;justify-content:center;background:var(--orange);color:var(--on-orange)}
.job.s98 p{margin-top:12px;color:var(--ink)}
@media (max-width:1020px){.jobs{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
  .dchips{order:3;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin:16px 0 0}
  .dc::after{display:none}
  .band{height:88px;border-radius:16px}
  .band-cap{order:2}
  .pms{gap:4px}
  .pm{gap:8px;padding-top:6px}
  .pm i{width:12px;height:12px;box-shadow:0 0 0 2.5px rgba(var(--violet-rgb),.9)}
  .pm span{font-size:max(11px,calc(11px * var(--display-scale)))}
  .band .sun{left:calc(50% - 12px);top:6px;width:24px;height:24px}
  .band .moon{width:14px;height:14px;left:calc(16.6% - 7px);box-shadow:inset -4px 2px 0 0 #F6EDD0}
}
@media (max-width:520px){.jobs{gap:10px}.job{padding:16px 14px 18px;border-radius:18px}.jic{width:40px;height:40px;margin-bottom:12px}.job h3{font-size:calc(19px * var(--display-scale))}.job p{font-size:15px}.bar98{font-size:13px}.bar98 .f{padding:8px 10px}.bar98 .y{min-width:38px}}

/* features (Anand, 13 Oct 26: "Stress on some of these features in a separate features section too with relevant
   animations so the users know Fly is doing so much"): four rows, the text beside an animation that plays once on view
   (motion.js), alternating sides, stacked on a phone. Every colour a token; the two sample photos are the hero's own
   (.ph1, .ph2) and the framed posts the hero calendar's (.cal, .cd, .th) */
.fts{display:grid;gap:clamp(44px,6vw,88px)}
.ft{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(24px,5vw,72px);align-items:center}
.ft:nth-child(even){grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.ft:nth-child(even) .ft-t{order:2}
.ft h3{margin:0 0 12px;font-size:calc(clamp(22px,2.2vw,28px) * var(--display-scale));line-height:calc(1.15 * var(--display-lh))}
.ft p{margin:0;color:var(--ink-2);max-width:34em}
.fa{position:relative;min-height:320px;padding:22px;border:1px solid var(--line);border-radius:24px;background:var(--card);box-shadow:0 1px 3px rgba(var(--shadow-rgb),.08),0 24px 48px -30px rgba(var(--shadow-rgb),.32);overflow:hidden}
/* 1: a brand frame slides onto a photo, then the month fills week by week */
.fa1{display:flex;align-items:center;justify-content:center;gap:clamp(18px,3vw,36px)}
.f1-demo{display:flex;flex-direction:column;align-items:center;gap:12px;flex:none}
.f1-pic{position:relative;display:block;width:150px;height:180px}
.f1-ph{position:absolute;inset:8px 8px 30px;height:auto;border-radius:6px}
.f1-fr{position:absolute;inset:0;border:8px solid transparent;border-bottom-width:30px;border-radius:14px;background:linear-gradient(135deg,var(--violet),var(--orange)) border-box;-webkit-mask:linear-gradient(var(--ink) 0 0) padding-box,linear-gradient(var(--ink) 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.f1-fr b{position:absolute;left:-2px;right:-2px;bottom:-25px;display:flex;align-items:center;gap:6px;height:20px;font:var(--sans-weight-ui) 13px/1 var(--sans);color:var(--white)}
.f1-fr b i{flex:none;width:12px;height:12px;border-radius:50%;background:var(--white);box-shadow:0 0 0 2px rgba(var(--violet-rgb),.6)}
.f1-cal .cal{grid-template-columns:repeat(7,38px) 18px;gap:5px}
.f1-cal .cd{height:34px}
.f1-cal .cal-m{margin-bottom:8px}
.cal>.wk{display:grid;place-items:center;color:var(--green-ink)}
.wk svg{width:15px;height:15px}
/* 2: views, calls and rank drawn; rank slips, its keyword drops into the next post, the line turns up */
.fa2{height:330px;min-height:0;padding:0}
.f2-chip{position:absolute;top:16px;right:20px;z-index:2;background:var(--red-soft);color:var(--red-ink);box-shadow:0 10px 22px -12px rgba(var(--shadow-rgb),.55)}
.f2-ch{position:absolute;left:20px;top:46px;width:calc(100% - 40px);height:156px;overflow:visible}
.f2-ch .ln{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1px 1px}
.f2-ch .ln.b{stroke:var(--blue)}.f2-ch .ln.r{stroke:var(--red)}.f2-ch .ln.g{stroke:var(--green)}
.f2-dip,.f2-top{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%}
.f2-dip{left:calc(20px + (100% - 40px) * .9);top:calc(46px + 156px * 70 / 120);background:var(--red);box-shadow:0 0 0 4px var(--red-soft)}
.f2-top{left:calc(100% - 20px);top:calc(46px + 156px * 34 / 120);background:var(--green);box-shadow:0 0 0 4px var(--green-soft)}
.f2-leg{position:absolute;left:20px;top:214px;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.f2-leg span::before{content:'';display:inline-block;width:16px;height:3px;margin:0 7px 0 0;border-radius:2px;vertical-align:middle;background:var(--blue)}
.f2-leg .r::before{background:var(--red)}.f2-leg .g::before{background:var(--green)}
.f2-slot{position:absolute;left:20px;right:20px;top:244px;height:68px;display:flex;align-items:center;gap:12px;padding:0 14px;border:1.5px dashed var(--line);border-radius:14px}
.f2-slot>b{font:var(--sans-weight-ui) 15px/1.3 var(--sans)}
.f2-th{flex:none;width:46px;height:40px}
/* 3: five fields of the profile, each keyword lit and ticked, then updated today */
.fa3{display:flex;flex-direction:column;gap:12px}
.f3-hd b{display:block;font:var(--sans-weight-ui) 18px/1.2 var(--sans)}
.f3-hd span{font-size:14px;color:var(--ink-2)}
.f3-fs{list-style:none;margin:0;padding:0}
.f3-fs li{display:grid;grid-template-columns:116px minmax(0,1fr) 22px;gap:12px;align-items:center;padding:9px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.35}
.f3-k{font-size:13.5px;font-weight:600;color:var(--ink-2)}
.f3-fs mark{position:relative;isolation:isolate;background:none;color:inherit;font-weight:var(--sans-weight-ui)}
.f3-fs mark i{position:absolute;inset:-1px 0;z-index:-1;border-radius:4px;background:var(--yellow-soft);box-shadow:inset 0 -2px 0 var(--yellow);transform-origin:0 50%}
.f3-fs .ok{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--green-soft);color:var(--green-ink)}
.f3-fs .ok svg{width:13px;height:13px}
.f3-up{align-self:flex-start}
/* 4: the website assembles, articles publish one by one, the live switch flips on */
.fa4{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:center}
.f4-br{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--paper)}
.f4-bar{display:flex;align-items:center;gap:5px;height:26px;padding:0 10px;border-bottom:1px solid var(--line);background:var(--surface)}
.f4-bar i{width:7px;height:7px;border-radius:50%;background:var(--line)}
.f4-bar span{flex:1;height:12px;margin-left:8px;border-radius:6px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.f4-pg{display:grid;gap:8px;padding:10px}
.f4-hd{display:flex;align-items:center;gap:8px}
.f4-hd b{display:flex;align-items:center;gap:6px;margin-right:auto;font:var(--sans-weight-ui) 12px/1 var(--sans)}
.f4-hd b i{width:12px;height:12px;border-radius:50%;background:linear-gradient(135deg,var(--violet),var(--orange))}
.f4-hd span{width:24px;height:5px;border-radius:3px;background:var(--line)}
.f4-hero{height:84px;border-radius:9px}
.f4-sv{display:flex;flex-wrap:wrap;gap:6px}
.f4-sv i{display:inline-flex;align-items:center;height:22px;padding:0 9px;border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:11.5px;font-style:normal;font-weight:600}
.f4-map{position:relative;height:54px;border-radius:9px;background:var(--map-ground);overflow:hidden}
.f4-map i{position:absolute;background:var(--map-street)}
.f4-map i:first-child{left:-10%;right:-10%;top:44%;height:7px;rotate:-6deg}
.f4-map i:nth-child(2){top:-30%;bottom:-30%;left:58%;width:6px;rotate:14deg}
.f4-map b{position:absolute;left:58%;top:34%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--violet)}
.f4-side{display:grid;gap:14px}
.f4-arts{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.f4-arts li{display:grid;justify-items:start;gap:6px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card)}
.f4-arts b{font:var(--sans-weight-ui) 14px/1.3 var(--sans)}
.f4-arts .chipk{height:24px;font-size:12.5px}
.f4-sw{display:flex;align-items:center;gap:10px;font:var(--sans-weight-ui) 14.5px/1.3 var(--sans)}
.sw{position:relative;flex:none;width:42px;height:24px;border-radius:999px;background:var(--track);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.sw b{position:absolute;inset:0;background:var(--green)}
.sw i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--white);box-shadow:0 1px 3px rgba(var(--shadow-rgb),.4)}
/* feature 1 side by side needs about 540 px: under 1100 px its photo and Scheduled sit in a row above the month */
@media (max-width:1100px){
  .fa1{flex-direction:column;align-items:center}
  .f1-demo{flex-direction:row;justify-content:center;gap:16px}
  .f1-pic{width:118px;height:142px}
  .f1-ph{inset:7px 7px 26px}
  .f1-fr{border-width:7px 7px 26px}
  .f1-fr b{bottom:-22px;font-size:12px}
}
@media (max-width:860px){
  .ft,.ft:nth-child(even){grid-template-columns:minmax(0,1fr)}
  .ft:nth-child(even) .ft-t{order:0}
  .fa{min-height:0}
}
@media (max-width:560px){
  .fa{padding:18px;border-radius:20px}
  .fa1{align-items:stretch}
  .f1-cal .cal{grid-template-columns:repeat(7,minmax(0,1fr)) 16px;gap:4px}
  .f1-cal .cd{height:30px}
  .fa2{padding:0}
  .f2-chip{left:16px;right:auto;font-size:13px}
  .f2-ch{left:16px;width:calc(100% - 32px)}
  .f2-dip{left:calc(16px + (100% - 32px) * .9)}
  .f2-top{left:calc(100% - 16px)}
  .f2-leg{left:16px}
  .f2-slot{left:16px;right:16px}
  .f3-fs li{grid-template-columns:minmax(0,1fr) 22px;row-gap:2px}
  .f3-k{grid-column:1 / -1;font-size:13px}
  .fa4{grid-template-columns:minmax(0,1fr)}
}

/* results: the rank map and the three outcomes */
.res{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:center}
.map{position:relative;width:100%;max-width:600px;aspect-ratio:520/440;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--map-ground)}
.map .ground{position:absolute;inset:0;width:100%;height:100%}
.map .kw{position:absolute;left:14px;top:14px;z-index:2;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 10px;border-radius:999px;background:var(--card);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.2),0 4px 12px -6px rgba(var(--shadow-rgb),.4);font-size:14px;font-weight:600;white-space:nowrap}
.map .kw svg{width:15px;height:15px;color:var(--ink-2)}
.map .sample{position:absolute;right:14px;top:16px;z-index:2}
.pts{position:absolute;left:12%;right:12%;top:15%;bottom:19%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));place-items:center}
.pt{position:relative;width:38px;height:38px}
.pt b{position:absolute;inset:0;display:grid;place-items:center;border-radius:50%;font:var(--sans-weight-ui) 15px/1 var(--sans)}
.pt .o{background:var(--pt-bg);color:var(--pt-ink);box-shadow:inset 0 0 0 1px var(--pt-line)}
.pt .o.w{font-size:12.5px}
.pt .n{background:var(--pt-new-bg);color:var(--pt-new-ink);box-shadow:inset 0 0 0 2px var(--green),0 4px 10px -4px rgba(var(--green-ink-rgb),.45)}
.pin{position:absolute;left:50%;top:50%;width:24px;height:30px;margin:-50px 0 0 -12px;filter:drop-shadow(0 4px 4px rgba(var(--shadow-rgb),.35))}
.pin svg{display:block;width:100%;height:100%}
.pin-l{position:absolute;left:50%;top:50%;margin-top:24px;translate:-50% 0;padding:2px 8px;border-radius:999px;background:var(--card);box-shadow:0 1px 3px rgba(var(--shadow-rgb),.35);font:600 11.5px/1.35 var(--sans);color:var(--ink);white-space:nowrap}
.med{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 16px;border-radius:16px;background:var(--med-bg);box-shadow:0 1px 2px rgba(var(--shadow-rgb),.18)}
.med span{font-weight:600;color:var(--ink-2)}
.med b{font:600 calc(40px * var(--display-scale))/1.1 var(--serif);font-weight:calc(var(--display-weight) + 40);color:var(--ink);font-variant-numeric:tabular-nums}
.otiles{display:grid;gap:14px}
.otile{display:grid;grid-template-columns:52px minmax(0,1fr);gap:16px;align-items:start;padding:18px 20px 20px 18px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
.otile svg{display:block;width:52px;height:52px}
.otile .rbg{stroke:var(--ring-track)}
.otile h3{margin:2px 0 2px;font-size:calc(22px * var(--display-scale));line-height:1.15}
.ofig{margin:0 0 6px;font:var(--sans-weight-ui) 16.5px/1.3 var(--sans);color:var(--ink)}
.otile p:last-child{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.otile.b .rfg{stroke:var(--blue)}.otile.b .glyph{stroke:var(--blue-ink)}.otile.b h3{color:var(--blue-ink)}
.otile.g .rfg{stroke:var(--green)}.otile.g .glyph{stroke:var(--green-ink)}.otile.g h3{color:var(--green-ink)}
.otile.r .rfg{stroke:var(--red)}.otile.r .glyph{stroke:var(--red-ink)}.otile.r h3{color:var(--red-ink)}
.rnote{margin:clamp(22px,3vw,34px) 0 0;font-size:15px;color:var(--ink-2)}
@media (max-width:900px){.res{grid-template-columns:minmax(0,1fr)}.map{max-width:none}}
@media (max-width:560px){.map{aspect-ratio:9/10;border-radius:20px}.pts{left:9%;right:9%;top:16%;bottom:19%}.pt{width:30px;height:30px}.pt b{font-size:13px}.pt .o.w{font-size:11px}.pin{width:18px;height:23px;margin:-38px 0 0 -9px}.pin-l{margin-top:18px;font-size:10.5px;padding:1px 6px}.med b{font-size:calc(34px * var(--display-scale))}.map .kw{font-size:13px;height:30px}.otile{grid-template-columns:44px minmax(0,1fr);gap:12px;padding:16px}.otile svg{width:44px;height:44px}}

/* asks */
.thread{list-style:none;margin:0;padding:clamp(16px,2.6vw,30px);display:grid;gap:14px;border-radius:24px;background:var(--thread-bg);border:1px solid var(--thread-line)}
.ask{transform-origin:0 100%;max-width:460px;padding:14px 16px 16px;border-radius:18px 18px 18px 6px;background:var(--card);border:1px solid var(--ask-line)}
.ask .from{display:block;font-size:14px;font-weight:600;color:var(--violet-2)}
.ask p{margin:2px 0 12px}
.ask .qr{max-width:320px}
.ask .qr>span{height:40px;font-size:15px}
.ask .qr>span.solo{flex:0 1 auto;padding:0 18px}

/* modes */
.modes{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));padding:6px;border:1px solid var(--line);border-radius:24px;background:var(--surface)}
.mode{position:relative;z-index:1;padding:22px 24px 24px}
.mode h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 6px;font-size:calc(22px * var(--display-scale))}
.mode p{margin:0;color:var(--ink-2)}
.usual{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;background:var(--usual-bg);color:var(--usual-ink);font:600 14px/1 var(--sans);letter-spacing:0}
.hl-x{position:absolute;z-index:0;top:6px;bottom:6px;left:6px;width:calc((100% - 12px) / 3);border-radius:18px;background:var(--card);border:1.5px solid var(--violet)}
.after{margin:20px 0 0;color:var(--ink-2)}
@media (max-width:760px){.modes{grid-template-columns:minmax(0,1fr)}.mode{padding:18px 18px 20px}.hl-x{display:none}.mode.mid{border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--violet)}}

/* price */
.pbox{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:end;padding:clamp(22px,4vw,48px);border:1px solid var(--line);border-radius:24px;background:var(--pbox-bg)}
.amt{display:inline-block;margin:0;font:600 calc(clamp(56px,7.4vw,96px) * var(--display-scale))/1 var(--serif);font-weight:calc(var(--display-weight) + 40);letter-spacing:-.02em}
.amt .glow{inset:-6px -14px;border-radius:16px}
.per{margin:12px 0 0;color:var(--ink-2)}
.dayp{margin:4px 0 0;font-size:15px;color:var(--ink-2)}
/* the yearly plan, highlighted, and the volume tiers, quieter (Anand, 13 Oct 26, as the React landing's price card) */
.yearly{display:inline-block;margin:14px 0 0;padding:8px 12px;border-radius:12px;background:var(--violet-soft);color:var(--violet-2);font-size:15px;line-height:1.4}
.yearly b{font-weight:var(--sans-weight-ui)}
.tiers{margin:10px 0 0;max-width:30em;font-size:14px;line-height:1.45;color:var(--ink-3)}
.pbox ul{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:12px}
.pbox li{display:flex;align-items:center;gap:10px}
.pbox li .glow{inset:-5px -10px;border-radius:12px}
.pbox li svg{width:18px;height:18px;flex:none;color:var(--violet-2)}
@media (max-width:760px){.pbox{grid-template-columns:minmax(0,1fr);border-radius:20px}.pbox .btn{width:100%}}

/* how-to guides (WO-I1, Anand, 14 Oct 26: the landing links to the guides hub): a short block before the questions,
   the heading at the customers' size, each guide a chip, "All guides" a plain link */
.guides{padding:clamp(48px,6vw,76px) 0}
.guides h2{margin:0 0 10px;font-size:calc(clamp(26px,3vw,36px) * var(--display-scale));line-height:calc(1.12 * var(--display-lh))}
.guides .sub{margin:0 0 22px}
.gl{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0;padding:0;list-style:none}
.gl a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font:var(--sans-weight-ui) 15.5px/1.2 var(--sans);text-decoration:none;transition:border-color .2s,color .2s}
.gl a:hover{border-color:var(--violet);color:var(--violet-2)}
.gl a.all{padding:0 6px;border-color:transparent;background:none;color:var(--violet-2);text-decoration:underline;text-underline-offset:3px}

/* faq, close, footer, dock */
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:60px;padding:8px 0;cursor:pointer;list-style:none;font:var(--sans-weight-ui) 18.5px/1.3 var(--sans)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';flex:none;font:400 26px/1 var(--sans);color:var(--ink-2)}
.faq details[open] summary::after{content:'\2212'}
.faq details p{margin:0 0 20px;color:var(--ink-2);max-width:64ch}
/* the close: a full-width violet band, centred, at least 70vh; a white button and three outline chips */
.ready{display:flex;align-items:center;min-height:70vh;padding:clamp(72px,9vw,120px) 0;background:var(--close-bg);color:var(--white);text-align:center}
.ready .wrap{width:100%}
.ready h2{margin:0 0 18px;font-size:calc(clamp(44px,6.4vw,84px) * var(--display-scale));line-height:calc(1.02 * var(--display-lh));color:var(--white)}
.ready .line{margin:0 auto 34px;max-width:32em;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--close-line)}
.ready .btn{background:var(--white);color:var(--white-ink)}
.ready .btn:hover{background:var(--close-btn-hover)}
.ready .btn .glow{inset:-6px;border-radius:999px;box-shadow:0 0 0 3px rgba(var(--white-rgb),.92),0 18px 40px -16px rgba(var(--close-shadow-rgb),.55)}
.ready-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.ready-chips li{display:inline-flex;align-items:center;min-height:36px;padding:0 16px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--close-chip-line);font-size:15px;font-weight:600;color:var(--white)}
/* the footer (Anand, 14 Oct 26: "enhance the footer now with links to content that is relevant to link from the agent
   landing page"): the brand line with the logo, four columns of links (two below 900 px, one below 560 px), each column
   titled in the display face at the page's display scale, the links in the body face with a 44 px tap target each,
   the copyright under a rule; the bottom padding keeps the last line clear of the dock and Fly's tile */
.foot{border-top:1px solid var(--line);padding:clamp(44px,6vw,72px) 0 96px;font-size:15px;color:var(--ink-2);background:var(--footer-bg)}
.f-brand{display:flex;align-items:center;gap:10px;margin:0 0 clamp(24px,3.4vw,40px);font:var(--sans-weight-ui) 19px/1.2 var(--sans);letter-spacing:-.01em;color:var(--ink)}
.f-brand img{width:32px;height:32px;border-radius:8px}
.f-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px clamp(24px,3vw,48px)}
.f-col h3{margin:0 0 6px;font-size:calc(18px * var(--display-scale));line-height:calc(1.3 * var(--display-lh));color:var(--ink)}
.f-col ul{margin:0;padding:0;list-style:none}
.f-col a{display:inline-flex;align-items:center;min-height:44px;padding:4px 0;font:500 15.5px/1.3 var(--sans);color:var(--ink-2);text-decoration:none;transition:color .2s}
.f-col a:hover{color:var(--violet-2);text-decoration:underline;text-underline-offset:3px}
.f-copy{margin:clamp(24px,3.4vw,40px) 0 0;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
@media (max-width:900px){.f-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.f-cols{grid-template-columns:minmax(0,1fr);gap:24px}}
.dock{position:fixed;left:12px;right:12px;bottom:12px;z-index:40;display:none;transform:translateY(150%);transition:transform .45s var(--ease)}
.dock.is-shown{transform:none}
.dock .btn{width:100%;box-shadow:0 16px 40px -14px rgba(var(--shadow-2-rgb),.6)}
@media (max-width:760px){.dock{display:block}}
/* what an AI agent for Google Business Profile is, how Fly compares, and the rules on every mode (Anand, 15 Oct 26:
   "create content for optimal SEO ... and optimal AEO so that AI Engines recommend and show Fly's Agent"; drawn again
   16 Oct 26: "the new sections ... are not looking great - pls beautify them"). The question and its definition sit
   in the sticky column; the six facts are one spec card, each with a Google-colour tile (the landing's data colours);
   Google's own words carry the four-colour Google edge, the one loud thing here; the table raises Fly's column as a
   card with a violet edge and stacks into one card per row on a phone; the rules are one strip under the modes */
/* the definition section, drawn a third time (Anand, 16 Oct 26: "add some flair and some little animations that
   suite our overall page ... make it easy to read through"): one loud thing, Fly's loop (reads, decides, does) with
   the violet spark going round it every few seconds and each step lighting as it passes; Google's words marked with a
   highlighter as the section comes into view; five short facts in one strip that rise in turn */
.what-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,80px);align-items:center}
.what-l h2{margin:0 0 18px}
.def{margin:0 0 22px;max-width:31em;font-size:clamp(18px,1.6vw,21px);line-height:1.6;color:var(--ink)}
.why{position:relative;margin:0;max-width:36em;padding:16px 20px 16px 26px;border:1px solid var(--line);border-radius:18px;background:var(--card);color:var(--ink-2);font-size:15.5px;line-height:1.65;overflow:hidden}
.why::before{content:'';position:absolute;left:0;top:0;bottom:0;width:5px;background:linear-gradient(var(--blue) 0 25%,var(--red) 25% 50%,var(--yellow) 50% 75%,var(--green) 75% 100%)}
.why b{color:var(--ink);font-weight:var(--sans-weight-ui)}
.why .gq{color:var(--ink);font-weight:600;background:linear-gradient(transparent 56%,rgba(251,188,4,.34) 56%) no-repeat 0 0/100% 100%;transition:background-size .9s var(--ease)}
.why .gq+.gq{transition-delay:.45s}
.why .src{display:block;margin-top:8px;font-size:13.5px;color:var(--ink-3)}
.why a{color:var(--violet-2);font-weight:var(--sans-weight-ui);text-underline-offset:3px}
.what.is-armed .why .gq{background-size:0 100%}
.what.is-in .why .gq{background-size:100% 100%}
/* the loop */
.loop{position:relative;justify-self:center;width:min(100%,420px);aspect-ratio:1}
.loop-in{position:absolute;inset:0}
.loop-in::before{content:'';position:absolute;inset:4%;border-radius:50%;background:radial-gradient(closest-side,var(--violet-soft) 0%,rgba(var(--violet-rgb),.06) 70%,transparent 100%)}
.loop-ring{position:absolute;inset:16%;border:2px dashed var(--violet-line);border-radius:50%}
.loop-orbit{position:absolute;inset:16%;animation:loop-spin 9s linear infinite}
.loop-dot{position:absolute;left:50%;top:0;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--violet);box-shadow:0 0 0 6px rgba(var(--violet-rgb),.16),0 0 22px rgba(var(--violet-rgb),.65)}
.loop-node{position:absolute;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:118px;padding:10px 14px;border:1px solid var(--line);border-radius:16px;background:var(--card);box-shadow:0 12px 28px -18px rgba(var(--shadow-rgb),.45);font-size:13px;line-height:1.3;color:var(--ink-2);text-align:center;white-space:nowrap;transform:translate(-50%,-50%);animation:loop-lit 9s var(--ease) infinite}
.loop-node b{font:var(--display-weight) calc(17px * var(--display-scale))/1.2 var(--serif);letter-spacing:var(--display-tracking);color:var(--ink)}
.loop-node.n1{left:50%;top:16%}
.loop-node.n2{left:81.2%;top:68%;animation-delay:3s}
.loop-node.n3{left:18.8%;top:68%;animation-delay:6s}
.loop-mid{position:absolute;left:50%;top:50%;display:flex;flex-direction:column;align-items:center;gap:4px;transform:translate(-50%,-50%);font-size:13.5px;color:var(--ink-2);text-align:center;white-space:nowrap}
.loop-mid b{font:var(--display-weight) calc(24px * var(--display-scale))/1.1 var(--serif);letter-spacing:var(--display-tracking);color:var(--violet-2)}
@keyframes loop-spin{to{transform:rotate(1turn)}}
@keyframes loop-lit{0%,10%{border-color:var(--violet);box-shadow:0 0 0 3px rgba(var(--violet-rgb),.16),0 16px 34px -16px rgba(var(--glow-rgb),.6)}22%,100%{border-color:var(--line);box-shadow:0 12px 28px -18px rgba(var(--shadow-rgb),.45)}}
/* the facts: one strip, five across */
.facts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:clamp(36px,4.5vw,56px) 0 0;padding:6px;border:1px solid var(--line);border-radius:22px;background:var(--card)}
.facts>div{position:relative;padding:16px 14px 16px 62px;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.facts>div+div{box-shadow:inset 1px 0 var(--line)}
.facts>div::before{content:'';position:absolute;left:14px;top:16px;width:36px;height:36px;border-radius:11px}
.facts>div::after{content:'';position:absolute;left:23px;top:25px;width:18px;height:18px;-webkit-mask:center/18px 18px no-repeat;mask:center/18px 18px no-repeat}
.facts>div:nth-child(1)::before{background:var(--blue-soft)}.facts>div:nth-child(1)::after{background:var(--blue-ink);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v4M15 3v4M7 7h10v4a5 5 0 0 1-10 0z'/%3E%3Cpath d='M12 16v5'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3v4M15 3v4M7 7h10v4a5 5 0 0 1-10 0z'/%3E%3Cpath d='M12 16v5'/%3E%3C/svg%3E")}
.facts>div:nth-child(2)::before{background:var(--green-soft)}.facts>div:nth-child(2)::after{background:var(--green-ink);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E")}
.facts>div:nth-child(3)::before{background:var(--violet-soft)}.facts>div:nth-child(3)::after{background:var(--violet-2);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h9M17 7h3M4 17h3M11 17h9'/%3E%3Ccircle cx='15' cy='7' r='2'/%3E%3Ccircle cx='9' cy='17' r='2'/%3E%3C/svg%3E")}
.facts>div:nth-child(4)::before{background:var(--yellow-soft)}.facts>div:nth-child(4)::after{background:var(--yellow-ink);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 3 5 14h6l-1 7 8-11h-6z'/%3E%3C/svg%3E")}
.facts>div:nth-child(5)::before{background:var(--red-soft)}.facts>div:nth-child(5)::after{background:var(--red-ink);-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M16 7l3 3'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8' cy='15' r='4'/%3E%3Cpath d='m11 12 9-9M16 7l3 3'/%3E%3C/svg%3E")}
.facts dt{font-size:13px;font-weight:600;color:var(--ink-3)}
.facts dd{margin:2px 0 0;font:var(--sans-weight-ui) 15.5px/1.35 var(--sans);color:var(--ink)}
.what.is-armed .facts>div{opacity:0;transform:translateY(10px)}
.what.is-in .facts>div{opacity:1;transform:none}
.what.is-in .facts>div:nth-child(2){transition-delay:.08s}
.what.is-in .facts>div:nth-child(3){transition-delay:.16s}
.what.is-in .facts>div:nth-child(4){transition-delay:.24s}
.what.is-in .facts>div:nth-child(5){transition-delay:.32s}
.fit-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:24px}
.fit-h,.rules-h{margin:0;font-size:calc(19px * var(--display-scale));line-height:1.25}
.fit{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fit li{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 15px;border:1px solid var(--line);border-radius:999px;background:var(--card);font:600 14.5px/1.2 var(--sans);color:var(--ink)}
.fit li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--violet)}
.rules-h{margin:28px 0 12px}
.rules{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:6px;border:1px solid var(--line);border-radius:22px;background:var(--card);list-style:none}
.rules li{position:relative;padding:16px 16px 16px 46px;color:var(--ink-2);font-size:15px;line-height:1.5}
.rules li+li{box-shadow:inset 1px 0 var(--line)}
.rules li::before{content:'';position:absolute;left:16px;top:18px;width:20px;height:20px;border-radius:50%;background:var(--green-soft)}
.rules li::after{content:'';position:absolute;left:22px;top:23px;width:8px;height:5px;border-left:2px solid var(--green-ink);border-bottom:2px solid var(--green-ink);transform:rotate(-45deg)}
@media (max-width:1100px){.rules{grid-template-columns:repeat(2,minmax(0,1fr))}.rules li+li{box-shadow:none}.rules li:nth-child(n+3){box-shadow:inset 0 1px var(--line)}}
@media (max-width:620px){.rules{grid-template-columns:minmax(0,1fr)}.rules li:nth-child(n+2){box-shadow:inset 0 1px var(--line)}}
.tbl{overflow-x:auto;margin-top:8px;padding:0 4px 6px}
.tbl:focus-visible{outline:2px solid var(--violet);outline-offset:3px;border-radius:12px}
.tbl table{width:100%;min-width:720px;border-collapse:separate;border-spacing:0;font-size:15.5px;line-height:1.5}
.tbl th,.tbl td{padding:16px 20px;border-top:1px solid var(--line);text-align:left;vertical-align:top}
.tbl thead th{border-top:0;padding-top:18px;padding-bottom:14px;font:var(--sans-weight-ui) 15px/1.3 var(--sans);color:var(--ink-2)}
.tbl tbody th{width:21%;font-weight:var(--sans-weight-ui);color:var(--ink)}
.tbl td{color:var(--ink-2)}
.tbl .f{background:var(--card);color:var(--ink);box-shadow:inset 1.5px 0 var(--violet),inset -1.5px 0 var(--violet)}
.tbl thead .f{border-radius:18px 18px 0 0;background:var(--violet);color:#fff;font:var(--display-weight) calc(17px * var(--display-scale))/1.25 var(--serif);letter-spacing:var(--display-tracking);box-shadow:none}
.tbl tbody tr:last-child .f{border-radius:0 0 18px 18px;box-shadow:inset 1.5px 0 var(--violet),inset -1.5px 0 var(--violet),inset 0 -1.5px var(--violet),0 24px 40px -28px rgba(var(--glow-rgb),.55)}
.tbl tbody tr:first-child td,.tbl tbody tr:first-child th{border-top-color:transparent}
.cmp .after{max-width:72ch;margin-top:24px}
.cmp .more{margin:10px 0 0;max-width:72ch;color:var(--ink-2)}
.cmp .more a{color:var(--violet-2);font-weight:var(--sans-weight-ui);text-underline-offset:3px}
.upd{display:inline-flex;align-items:center;gap:8px;margin:16px 0 0;padding:6px 12px;border-radius:999px;background:var(--green-soft);font-size:14px;color:var(--green-ink)}
.upd::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--green)}
@media (max-width:1100px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.facts>div+div{box-shadow:none}.facts>div:nth-child(n+3){box-shadow:inset 0 1px var(--line)}.facts>div:nth-child(5){grid-column:1/-1}}
@media (max-width:900px){.what-grid{grid-template-columns:minmax(0,1fr)}.loop{width:min(100%,360px)}}
@media (max-width:560px){.facts{grid-template-columns:minmax(0,1fr)}.facts>div:nth-child(n+2){box-shadow:inset 0 1px var(--line)}.loop-node{min-width:96px;padding:8px 10px;font-size:12px}.loop-node b{font-size:calc(15px * var(--display-scale))}}
@media (max-width:760px){
  .tbl{overflow:visible;padding:0}
  .tbl table{min-width:0}
  .tbl thead{display:none}
  .tbl tr{display:block;margin:0 0 12px;padding:16px;border:1px solid var(--line);border-radius:20px;background:var(--card)}
  .tbl th,.tbl td{display:block;width:auto;padding:0;border:0}
  .tbl tbody th{width:auto;margin:0 0 10px;font-size:16px}
  .tbl td{padding:10px 12px;border-radius:12px;background:var(--paper)}
  .tbl td+td{margin-top:6px}
  .tbl td::before{content:attr(data-tool);display:block;margin:0 0 2px;font:700 12.5px/1.3 var(--sans);color:var(--ink-3)}
  .tbl .f,.tbl tbody tr:last-child .f{border-radius:12px;background:var(--violet-soft);box-shadow:none}
  .tbl .f::before{color:var(--violet-2)}
}

@media (prefers-reduced-motion:reduce){.loop-orbit,.loop-node{animation:none}.what.is-armed .facts>div{opacity:1;transform:none}.what.is-armed .why .gq{background-size:100% 100%}}
@media (prefers-reduced-motion:reduce){.dock,.btn,.top,.presenter,.presenter .p-cap{transition:none}.is-typing::after{animation:none}.cs{overflow-x:auto;-webkit-mask:none;mask:none}.cs ul.cs-dup{display:none}}