/* /download (G7): the file starts, and what comes next. Calm, as Wispr
   Flow's downloads page is: one column, room around it, one film. */

/* ---- which words show: a Mac, anything else, or no script (the head's class) ---- */
.say-other,.say-nojs{display:none}
html.notmac .say-other{display:revert}
html.notmac .say-mac,html.notmac .say-file{display:none}
html.nojs .say-nojs{display:revert}
html.nojs .say-mac{display:none}
html.notmac .ctas.say-other{display:flex}
html.notmac .micro>span:not(.say-other){display:none}
html.notmac .micro>span.say-other{border-left:0;margin-left:0;padding-left:0}

/* ---- the start: the icon, the headline, the link -------------------------- */
.dtop{padding:clamp(56px,8vw,112px) 0 clamp(32px,4vw,56px)}
.appicon{display:grid;place-items:center;width:88px;height:88px;margin:0 auto 32px;border-radius:21px;background:var(--key);box-shadow:inset 0 -3px 0 rgba(8,71,154,.6),var(--shadow-raised)}
.appicon svg{width:52px;height:46px}
.dl .h1{font-size:clamp(40px,5.4vw,76px);line-height:.98}
/* every line under the headline, since the one shown may not be the h1's next sibling */
.dtop .line{margin:24px auto 0}
.again{font-weight:600;color:var(--key);border-bottom:1.5px solid rgba(10,102,214,.35);padding-bottom:1px;transition:border-color 160ms ease}
.dtop .micro{margin-top:22px}
.dtop .ctas{margin-top:28px}

/* ---- what comes next: the film beside its four steps --------------------- */
.next{padding-top:clamp(32px,4vw,56px)}
.nextsplit{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;margin-top:clamp(36px,4vw,56px)}
/* side by side only where the film keeps its words legible (the review: 0.825 scale at 1024) */
@media (max-width:1100px){.nextsplit{grid-template-columns:minmax(0,1fr)}}
.steps4{list-style:none;margin:0;padding:0;display:grid;gap:22px}
.steps4 li{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;transition:opacity 260ms var(--ease-out)}
.steps4 .n{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;border:1.5px solid var(--line);font:700 15px/1 var(--display);color:var(--dim);transition:background-color 200ms ease,color 200ms ease,border-color 200ms ease}
.steps4 b{display:block;font:700 clamp(19px,1.5vw,22px)/1.2 var(--display);font-stretch:106%;letter-spacing:-.01em;color:var(--ink)}
.steps4 b+span{display:block;margin-top:4px;font-size:15.5px;line-height:1.45;color:var(--dim)}
/* in motion, the step the film is on is lit and the others wait */
html.motion .steps4[data-on] li{opacity:.42}
html.motion .steps4[data-on="0"] li:nth-child(1),html.motion .steps4[data-on="1"] li:nth-child(2),
html.motion .steps4[data-on="2"] li:nth-child(3),html.motion .steps4[data-on="3"] li:nth-child(4){opacity:1}
html.motion .steps4[data-on="0"] li:nth-child(1) .n,html.motion .steps4[data-on="1"] li:nth-child(2) .n,
html.motion .steps4[data-on="2"] li:nth-child(3) .n,html.motion .steps4[data-on="3"] li:nth-child(4) .n{background:var(--key);border-color:var(--key);color:#fff}

/* ---- the film: a 640 x 400 desk, scaled to its box (page.js) ------------- */
/* content-box: the desk's hairline is outside the 640:400 the stage is scaled to fill */
.dfilm{position:relative;box-sizing:content-box;aspect-ratio:640/400;border-radius:var(--r-card);box-shadow:var(--shadow-raised)}
.dstage{position:absolute;left:0;top:0;width:640px;height:400px;transform-origin:0 0;font-family:var(--ui);color:var(--ink);text-align:left}
/* the still and the start: the drag, drawn by this markup alone */
.fw{position:absolute;background:#fff;border:1px solid var(--edge-win);border-radius:11px;box-shadow:var(--shadow-float);overflow:hidden;background-clip:padding-box}
.fw .tb{position:relative;display:flex;align-items:center;gap:6px;height:30px;padding:0 11px;background:#F3F4F6;border-bottom:1px solid #E6E8EB}
.fw .tb i{width:10px;height:10px;border-radius:50%;background:#D9DCE0}
.fw .tb i:nth-child(1){background:#FF5F57}.fw .tb i:nth-child(2){background:#FEBC2E}.fw .tb i:nth-child(3){background:#28C840}
.fw .tb b{position:absolute;left:0;right:0;text-align:center;font:600 12px/30px var(--ui);color:#3A4250;pointer-events:none}
.fw .fc{position:relative;height:calc(100% - 30px)}
.fdl{left:34px;top:34px;width:330px;height:190px;opacity:.55}
.fvol{left:190px;top:178px;width:400px;height:198px}
/* where each icon sits, as Finder's icon view places them: AxiomForge.dmg
   alone in Downloads, in its first place; the app and Applications either
   side of the way between them */
#idmg{left:24px;top:26px}
#iapp{left:58px;top:40px}
#iapps{left:256px;top:40px}
/* an icon and its name, as Finder draws them */
.ico{position:absolute;display:grid;justify-items:center;gap:7px;width:108px;font:500 11.5px/1.25 var(--ui);text-align:center}
.ico .nm{padding:1px 5px;border-radius:4px}
.ico.sel .im{box-shadow:0 0 0 5px rgba(16,21,29,.08);border-radius:9px}
.ico.sel .nm{background:var(--key);color:#fff}
.im{position:relative;display:grid;place-items:center;width:56px;height:56px}
.ico.big .im{width:70px;height:70px}
.im.app{border-radius:24%;background:var(--key);box-shadow:inset 0 -3px 0 rgba(8,71,154,.55),0 4px 10px -4px rgba(16,21,29,.35)}
.im.app svg{width:58%;height:52%}
.im.app.sm{width:24px;height:24px;border-radius:6px;box-shadow:inset 0 -1.5px 0 rgba(8,71,154,.55)}
.im.dmg{height:40px;margin:8px 0;border-radius:7px;background:linear-gradient(#FDFDFD,#E3E6EA);border:1.5px solid #B9C0CA;box-shadow:0 3px 6px -3px rgba(16,21,29,.4)}
.im.dmg i{position:absolute;right:9px;bottom:8px;width:6px;height:6px;border-radius:50%;background:#7C8796}
/* Applications: a folder, with Finder's alias arrow */
.im.apps{background:linear-gradient(#8CC8FB,#5DAEF5);border-radius:6px 6px 9px 9px;height:54px;margin-top:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 3px 7px -3px rgba(16,21,29,.4)}
.im.apps::before{content:"";position:absolute;left:0;top:-8px;width:28px;height:12px;border-radius:5px 5px 0 0;background:#7DBDF8}
.im.apps .ga{width:30px;height:30px;margin-top:4px}
.im.apps .alias{position:absolute;left:-3px;bottom:-3px;width:17px;height:17px;filter:drop-shadow(0 1px 1px rgba(16,21,29,.35))}
.ico.hot .im.apps{filter:brightness(.88);box-shadow:0 0 0 4px rgba(10,102,214,.25),inset 0 1px 0 rgba(255,255,255,.5)}
.cp{display:block;width:70px;height:5px;border-radius:3px;background:#E6E8EB;overflow:hidden;opacity:0}
.cp i{display:block;height:100%;width:100%;background:var(--key);transform-origin:0 50%;transform:scaleX(0)}
.dragway{position:absolute;left:156px;top:68px;width:100px;height:26px}
.ghosticon{position:absolute;left:0;top:0;opacity:0;pointer-events:none;z-index:6}
.ghosticon .im{width:70px;height:70px;opacity:.85}
/* Spotlight, over everything, frosted as the panel is */
.spot{position:absolute;left:110px;top:84px;width:420px;border-radius:14px;border:1px solid var(--frost-border);background:rgba(246,246,246,.86);backdrop-filter:blur(20px) saturate(150%);-webkit-backdrop-filter:blur(20px) saturate(150%);box-shadow:var(--shadow-float);overflow:hidden;opacity:0;z-index:7}
.sbar{display:flex;align-items:center;gap:10px;height:50px;padding:0 16px;font:400 21px/1 var(--ui);color:var(--ink)}
.sbar svg{width:20px;height:20px;color:#7C8796;flex:none}
.sbar .caret{width:2px;height:24px;background:var(--key);margin-left:-8px}
.srow{display:flex;align-items:center;gap:10px;margin:0 8px 8px;padding:9px 10px;border-radius:9px;background:var(--key);color:#fff;font:500 13px/1 var(--ui)}
.srow b{font-weight:600}
.srow span:last-child{margin-left:auto;opacity:.8;font-size:12px}
/* macOS's first-open question, as an alert */
.gk{position:absolute;left:198px;top:62px;width:244px;display:grid;justify-items:center;gap:9px;padding:18px 16px 14px;border-radius:14px;background:rgba(250,250,250,.97);border:1px solid var(--frost-border);box-shadow:var(--shadow-stage),0 0 0 .5px rgba(16,21,29,.08);text-align:center;opacity:0;z-index:7}
.gk .im{width:52px;height:52px}
.gk b{font:700 12.5px/1.3 var(--ui)}
.gk>span{font:400 11px/1.35 var(--ui);color:var(--dim)}
.gk .gbt{display:grid;grid-template-columns:1fr 1fr;gap:8px;width:100%;margin-top:4px}
.gk .gbt i{font:500 12.5px/1 var(--ui);font-style:normal;padding:7px 0;border-radius:6px;background:#E6E8EB;color:var(--ink)}
.gk .gbt i.def{background:var(--key);color:#fff}
.gk .gbt i.press{filter:brightness(.85)}
/* setup's window: the steps along its top, Continue at its foot */
.fsetup{left:70px;top:22px;width:500px;height:356px;opacity:0;z-index:5}
.stp{display:flex;align-items:center;gap:8px;height:30px;padding:0 16px;border-bottom:1px solid #ECEEF2;font:600 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#A9AFB8;white-space:nowrap}
.stp i{flex:1;height:1px;background:#E2DEC9}
.stp span.on{color:var(--ink)}
/* a step setup has passed stays in key blue, as the app draws it */
.stp span.done{color:var(--key)}
.pages{position:relative;height:calc(100% - 30px - 30px - 46px)}
.pg{position:absolute;inset:0;display:grid;justify-items:center;align-content:center;gap:8px;padding:0 40px;text-align:center}
.pg img{width:84px;height:84px;border-radius:14px}
.pg .st{font:800 19px/1.15 var(--display);font-stretch:108%;letter-spacing:-.01em}
.pg .st .kc{font-size:.8em}
.pg .sub{font:400 11.5px/1.4 var(--ui);color:var(--dim);max-width:330px}
.pg0 .s1,.pg0 .pill{display:none}
.pg0.signed .s0,.pg0.signed .gbtn{display:none}
.pg0.signed .s1{display:inline}
.pg0.signed .pill{display:inline-flex}
/* Google's, then Microsoft's under it, one width, as setup draws them (decision 53) */
.gbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;width:208px;box-sizing:border-box;margin-top:6px;padding:8px 16px;border-radius:8px;background:#fff;border:1.5px solid var(--ink);font:600 12px/1 var(--ui)}
.gbtn img{width:14px;height:14px;border-radius:0}
/* Two buttons in a frame drawn for one (decision 53), spaced as setup spaces
   them: the pair close, the terms line a step further down. The drawing and
   the gaps give the room, so the page keeps its margins above and below. */
.pg0{gap:5px}
.pg0>img{width:58px;height:58px}
.pg0 .gbtn{padding:7px 16px}
.pg0 .gbtn+.gbtn{margin-top:1px}
.pg0 .terms{margin-top:7px}
.gbtn.press,.cont.press{transform:translateY(1px);filter:brightness(.92)}
.pill{align-items:center;gap:7px;margin-top:6px;padding:7px 14px;border-radius:999px;background:#EAF3EC;border:1.5px solid #A9CDB2;color:#2E6B3E;font:600 12px/1 var(--ui)}
.pill i{width:7px;height:7px;border-radius:50%;background:#2E6B3E}
.terms{font:400 10.5px/1.3 var(--ui);color:var(--dim)}
.pg0.signed .terms{display:none}
.pg1{opacity:0}
.ghostbtn{margin-top:6px;padding:7px 14px;border-radius:8px;border:1.5px solid var(--line);font:600 11.5px/1 var(--ui);color:var(--ink);background:#fff}
.sfoot{position:absolute;left:0;right:0;bottom:0;height:46px;display:flex;align-items:center;padding:0 14px;background:#FAFAF7;border-top:1px solid #ECEEF2}
.cont{padding:8px 16px;border-radius:8px;background:var(--ink);color:#fff;font:600 12px/1 var(--ui)}
/* greyed until there is an account, as setup's */
.cont.off{background:#C9CED6}
/* the keys pressed, under the desk's middle, as the hero shows them */
.dkeys{position:absolute;left:0;right:0;bottom:22px;display:flex;justify-content:center;z-index:8;pointer-events:none}
.dk{display:none;gap:6px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.9);box-shadow:var(--shadow-raised);font-size:19px}
.dk.on{display:inline-flex}
.dk .kc{min-width:1.6em}

/* the still: the drag, its way drawn as a dashed arrow, as a DMG's window
   often draws it; in motion the hand shows the way instead */
html.motion .dfilm:not(.xk-still) .dragway{opacity:0}

/* the pointer above every window; its arrow keeps its size (site.css caps every svg at its box's width, and the pointer's box has none, as kit.css lets .xk-win's keep theirs) */
.dstage svg,.dstage img{max-width:none}
.dstage .xk-pointer{z-index:9}

@media (hover:hover) and (pointer:fine){
  .again:hover{border-bottom-color:var(--key)}
}
@media (max-width:600px){
  .appicon{width:72px;height:72px;border-radius:17px;margin-bottom:24px}
  .appicon svg{width:42px;height:38px}
  .steps4{gap:18px}
  /* The film on a phone (G44, DECISIONS 2026-10-17): drawn whole and
     smaller, never cut, and it plays. The 640-point desk drew at 0.55 there,
     its words at 5 to 6 px; a phone gets a desk of its own, 420 x 400
     points, the same windows stacked closer, so at 360 it draws at 0.77:
     the file names and setup's words 8.8 px or more, the terms line 8.1,
     setup's step bar, chrome, 7.7 (page.js scales it to the box). It
     grows no larger than its own size, so from about 460 to 600 px it is
     420 points wide, centred, rather than words of 15 px at 600 (its
     width is set, less its hairline, since a centred grid item would
     otherwise shrink to its absolutely placed contents, to nothing). */
  .dfilm{aspect-ratio:420/400;width:min(calc(100% - 2px),420px);justify-self:center}
  .dstage{width:420px;height:400px}
  .fdl{left:16px;top:16px;width:300px;height:172px}
  .fvol{left:24px;top:156px;width:372px}
  #iapp{left:34px}
  #iapps{left:230px}
  .dragway{left:136px}
  .spot{left:20px;width:380px}
  .gk{left:88px}
  .fsetup{left:12px;top:18px;width:396px;height:364px}
}