:root{--cream:#F1EBE8;--danger:#7A1A12;--ink:#241F1C;--muted:#6E655E;--ink-soft:#4A423C;--rule:#A9A099;--line:#E4DBD5;--bg:#FBF8F6;--panel:#fff;--accent:#C9402F;--accent-bright:#EE5A4E;--on-accent:#FFFFFF}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.65 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
.wrap{max-width:920px;margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:660px}
/* the demo, its screenshot and four cards need room the 660px column cannot give */
.wrap.wide{max-width:1440px}
section{padding:76px 0}
.band{background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
body > nav{position:sticky;top:0;z-index:20;background:rgba(251,248,246,.86);backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--line)}
.nav{max-width:920px;margin:0 auto;padding:12px 24px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;color:var(--ink)}
.navlinks a{margin-left:22px;color:var(--ink-soft);text-decoration:none;font-size:15px}
.navlinks a:hover{color:var(--ink)}
.hero{padding:56px 0 68px;text-align:center}
.hero .wrap{max-width:1040px}
.herogrid{display:grid;grid-template-columns:1fr 1.05fr;gap:0 48px;align-items:center;text-align:left}
.herogrid h1{margin:0 0 16px}
.herogrid .lede{max-width:none;margin:0 0 32px}
.hero .demo{max-width:none;margin:0 0 16px;text-align:left}
.herohint{margin:0;font-size:18px;line-height:1.55;color:var(--ink-soft)}
.herocta{max-width:none;margin:0}
.btn.btn-full{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;padding:16px 22px;font-size:17px;margin-bottom:12px;text-decoration:none}
.btn.btn-full:last-child{margin-bottom:0}
.btn-full img,.btn-full svg{flex:none;display:block}
.accentrule{border:0;height:3px;width:56px;background:var(--accent-bright);border-radius:2px;margin:34px auto 26px}
.herogrid .accentrule{margin:30px 0 22px}
.herogrid .heroblurb{max-width:none;margin:26px 0 0}
.heroblurb{max-width:680px;margin:0 auto;font-size:19px;line-height:1.6;color:var(--ink-soft)}
h1{font-size:52px;line-height:1.08;letter-spacing:-.025em;margin:0 0 18px;font-weight:660}
.lede{font-size:20px;color:var(--ink-soft);max-width:600px;margin:0 auto 32px}
.ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 26px;border-radius:11px;font-weight:560;font-size:16px;text-decoration:none;border:1px solid var(--line);background:#fff;color:var(--ink)}
.btn-primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.is-disabled{opacity:.42;cursor:default}
.soon{margin-top:18px;font-size:15px;color:var(--ink-soft)}
.eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);font-weight:640;margin:0 0 14px}
.big{font-size:27px;line-height:1.32;letter-spacing:-.015em;margin:0 0 18px;font-weight:600}
h3{font-size:17px;margin:0 0 6px}
.muted{color:var(--ink-soft)}.small{font-size:15px}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin:30px 0 0}
/* Two across, and each card shows the app doing the thing the card describes.
   That is what replaced the scroll-to-demo jump. */
.card{flex:1 1 calc((100% - 20px)/2);max-width:calc((100% - 20px)/2)}
.card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:20px}
.cardtext{min-width:0}
.cardshot{display:block;min-width:0;border:1px solid var(--line);border-radius:11px;overflow:hidden;background:#FAF7F2;line-height:0}
.cardshot img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.card .cardpill{z-index:2}
.card{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px}
.card p{margin:0;color:var(--ink-soft);font-size:15.5px}
.demo{margin:12px 0 12px;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg)}
.demostage{position:relative;min-height:262px;overflow:hidden;background:#fff}
.menubar{position:absolute;top:0;left:0;right:0;height:22px;background:#F4F1EF;border-bottom:1px solid rgba(90,79,70,.13);pointer-events:none}

/* Drop-zone shown while the Dock is being dragged to a new edge */
.edgehint{position:absolute;left:auto;right:auto;top:auto;bottom:auto;border-radius:14px;background:rgba(238,90,78,.12);border:1.5px dashed rgba(238,90,78,.55);opacity:0;pointer-events:none;transition:opacity .14s ease}
.edgehint.on{opacity:1}
.edgehint.e-bottom{left:10px;right:10px;bottom:8px;height:78px}
.edgehint.e-left{left:8px;top:10px;bottom:10px;width:78px}
.edgehint.e-right{right:8px;top:10px;bottom:10px;width:78px}

.minidock{position:absolute;left:0;top:0;transform-origin:0 0;display:flex;align-items:flex-end;gap:10px;background:rgba(238,234,231,.92);border:1px solid rgba(90,79,70,.10);border-radius:20px;padding:10px 14px;box-shadow:0 8px 22px rgba(90,79,70,.13);cursor:grab;touch-action:none;transition:left .24s cubic-bezier(.22,.7,.3,1),top .24s cubic-bezier(.22,.7,.3,1),transform .24s cubic-bezier(.22,.7,.3,1)}
.minidock.vertical{flex-direction:column;align-items:center}
.minidock.dragging{cursor:grabbing;transition:none;z-index:3;box-shadow:0 20px 42px rgba(90,79,70,.26)}
.minidock.resizing{transition:none}
.minidock.resizing .tiles i{transition:none}
.minidock.pinned{cursor:default}
/* Refused: the Dock is shoved and springs back rather than resizing. Uses the
   standalone `translate` property, not `transform`, because place() writes an
   inline transform:scale() that a transform keyframe would clobber mid-shake. */
.minidock.blocked{animation:nudge .46s cubic-bezier(.36,.07,.19,.97)}
@keyframes nudge{
  0%{translate:0 0;box-shadow:0 8px 22px rgba(90,79,70,.13)}
  12%{translate:-7px 0}
  20%{box-shadow:0 0 0 3px rgba(249,78,56,.55),0 8px 22px rgba(90,79,70,.13)}
  30%{translate:6px 0}
  48%{translate:-4px 0}
  66%{translate:3px 0}
  75%{box-shadow:0 0 0 3px rgba(249,78,56,.55),0 8px 22px rgba(90,79,70,.13)}
  84%{translate:-2px 0}
  100%{translate:0 0;box-shadow:0 8px 22px rgba(90,79,70,.13)}
}
.tiles{display:flex;align-items:flex-end;gap:9px}
.minidock.vertical .tiles{flex-direction:column;align-items:center}
.tiles i{display:block;width:var(--s,48px);height:var(--s,48px);border-radius:calc(var(--s,48px)*.24);background:var(--c);transition:width .16s ease,height .16s ease,border-radius .16s ease}
.divider{width:2px;align-self:stretch;min-height:40px;background:rgba(0,0,0,.16);cursor:ns-resize;border-radius:2px;position:relative;touch-action:none}
.divider::after{content:"";position:absolute;inset:-12px -10px}
.minidock.vertical .divider{width:auto;height:2px;min-height:0;min-width:40px;cursor:ew-resize}
.minidock.vertical .divider::after{inset:-10px -12px}

.democtl{padding:16px 18px 12px;border-top:1px solid var(--line);background:#fff}
.democtl.is-locked{opacity:.5}
.democtl.is-locked input[type="range"]{cursor:not-allowed}
.range-row{display:flex;align-items:baseline;justify-content:space-between;gap:16px}
.range-row label{font-size:15.5px;font-weight:540}
.range-value{font-variant-numeric:tabular-nums;font-size:14px;color:var(--muted)}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;height:40px;margin:0;padding:0;background:transparent;cursor:pointer}
input[type="range"]:focus{outline:none}
input[type="range"]:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:999px}
input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(to right,var(--accent) 0 var(--range-fill,0%),var(--line) var(--range-fill,0%) 100%)}
input[type="range"]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}
input[type="range"]::-moz-range-progress{height:8px;border-radius:999px;background:var(--accent)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;margin-top:-11px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.18)}
input[type="range"]::-moz-range-thumb{width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.18)}
input[type="range"]:active::-webkit-slider-thumb{background:var(--accent)}
input[type="range"]:active::-moz-range-thumb{background:var(--accent)}
.range-hint{text-align:center;font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:.7;margin:2px 0 0}

.demobar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid var(--line);background:#fff;flex-wrap:wrap}
.switches{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.switch{display:flex;align-items:center;gap:10px;cursor:pointer;user-select:none}
.switch input{position:absolute;opacity:0;width:0;height:0}
.track{width:44px;height:26px;border-radius:14px;background:#D6CEC8;position:relative;transition:background .18s}
.knob{position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .18s}
.switch input:checked + .track{background:#34C759}
.switch input:checked + .track .knob{transform:translateX(18px)}
.lbl{font-size:15.5px;font-weight:540}
.readout{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto;margin:24px 0 14px}
table{width:100%;border-collapse:collapse;font-size:15.5px;min-width:520px}
th,td{text-align:left;padding:13px 14px;border-bottom:1px solid var(--line)}
/* Pin the feature names. Without this the row labels scroll away and the
   ticks on the right become unreadable. border-collapse drops per-cell
   borders on sticky cells, so the divider is drawn with a shadow. */
thead th:first-child,tbody td:first-child{position:sticky;left:0;z-index:2;background:var(--panel)}
thead th:first-child{z-index:3}
.tablewrap.is-scrolled thead th:first-child,
.tablewrap.is-scrolled tbody td:first-child{box-shadow:8px 0 8px -8px rgba(90,79,70,.22)}
th{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
thead th:not(:first-child),tbody td:not(:first-child){text-align:center;width:190px}
.pricetablehead{display:none}
td.y{color:#1E9E43;font-weight:640}
td.n{color:#C9C1BB}
details{border-bottom:1px solid var(--line);padding:16px 0}
summary{cursor:pointer;font-weight:570;list-style:none}
summary::-webkit-details-marker{display:none}
summary::before{content:"+";display:inline-block;width:18px;color:var(--muted)}
details[open] summary::before{content:"\2212"}
details p{margin:10px 0 0 18px;color:var(--ink-soft);font-size:16px}
/* ---- "Why I Built Still Dock" ---- */
.builder{display:grid;grid-template-columns:1fr 320px;grid-template-areas:"head photo" "body photo";column-gap:44px;align-items:start}
.builderhead{grid-area:head;font-size:34px;line-height:1.15;letter-spacing:-.02em;font-weight:660;margin:0 0 18px;text-transform:none;color:var(--ink)}
.builderphoto{grid-area:photo;margin:0;position:sticky;top:88px}
.builderphoto img{display:block;width:100%;height:auto;border-radius:18px;box-shadow:0 14px 34px rgba(90,79,70,.20)}
.builderbody{grid-area:body}
.builderbody p{margin:0 0 16px;font-size:17px;color:var(--ink-soft)}
.builderbody a{color:var(--accent)}
.buildersign{font-weight:640;color:var(--ink) !important;margin-top:22px !important}
@media (max-width:760px){
  .builder{grid-template-columns:1fr;grid-template-areas:"head" "photo" "body";row-gap:22px}
  .builderphoto{position:static;max-width:260px}
  .builderhead{font-size:29px;margin:0}
}

/* ---- Terminal vs app ---- */
.cmds{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:24px 0 26px}
.cmdlabel{margin:0 0 7px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;font-weight:660;color:var(--muted)}
.cmds pre{margin:0 0 18px;background:#231F1D;border-radius:10px;padding:14px 16px}
.cmds pre code{display:block;color:#F2ECE8;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:break-word}
.cmds > p.small{margin:0}
.cmds code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px}
.cmds > p.small code{background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:1px 5px}
.diyhead{font-size:19px;font-weight:620;margin:30px 0 12px}
.diylist{margin:0 0 26px;padding-left:22px;color:var(--ink-soft)}
.diylist li{margin:11px 0}
.diylist strong{color:var(--ink);font-weight:600}
.diycta{margin-top:36px}
.ctas-left{justify-content:flex-start;margin:22px 0 14px}

/* ---- pricing ---- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:0 0 56px}
.plan{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:26px 26px 28px;display:flex;flex-direction:column}
.plan-best{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.planflag{display:inline-block;align-self:flex-start;font-size:11.5px;text-transform:uppercase;letter-spacing:.09em;font-weight:660;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:5px 11px;margin-bottom:16px}
.planflag-quiet{background:var(--line);color:var(--muted)}
.plan h2{font-size:22px;font-weight:640;letter-spacing:-.01em;margin:0 0 4px;text-transform:none;color:var(--ink)}
.planwhere{margin:0 0 18px;color:var(--ink-soft);font-size:15px}
.planrows{margin:0 0 22px}
.planrow{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 12px;padding:13px 14px;border:1px solid var(--line);border-radius:11px;margin-bottom:8px;background:var(--panel)}
.planrow-best{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel))}
.rowname{font-size:15.5px;font-weight:580}
.rowname em{font-style:normal;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--accent);font-weight:660;margin-left:7px}
.rowprice{font-size:24px;font-weight:660;letter-spacing:-.02em}
.rowtrial{flex-basis:100%;font-size:13.5px;font-weight:600;color:#1E9E43}
.planlist{list-style:none;margin:0 0 24px;padding:0;font-size:15.5px;color:var(--ink-soft)}
.planlist li{position:relative;padding-left:24px;margin:9px 0}
.planlist li::before{content:"✓";position:absolute;left:0;color:#1E9E43;font-weight:660}
.plan .btn{margin-top:auto;text-align:center}
.currency-row{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 22px}
/* an author display: rule beats the hidden attribute, so restate it */
.currency-row[hidden]{display:none}
.currency-row label{font-size:14px;font-weight:600;color:var(--ink-soft)}
.currency-row select{font:inherit;font-size:14px;padding:7px 10px;border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink)}
.storenote{margin:-8px 0 20px}
.planfoot{margin:0 0 34px}
.pricetablehead{margin:0 0 4px}
.tablewrap{margin-top:0}
@media (max-width:700px){.plans{grid-template-columns:1fr}}

/* ---- legal pages (privacy, terms) ---- */
.legalhead{padding:52px 0 8px}
.backlink{display:inline-block;margin-bottom:22px;font-size:15px;color:var(--ink-soft);text-decoration:none}
.backlink:hover{color:var(--ink)}
.legalhead h1{font-size:40px;margin:0 0 10px}
.legalmeta{color:var(--ink-soft);font-size:15px;margin:0}
.legal{padding:20px 0 76px}
.legal h2{font-size:21px;line-height:1.3;letter-spacing:-.01em;text-transform:none;color:var(--ink);font-weight:620;margin:38px 0 10px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:16.5px;font-weight:600;margin:22px 0 6px}
.legal p{margin:0 0 14px;color:var(--ink-soft);font-size:16.5px}
.legal ul{margin:0 0 14px;padding-left:22px;color:var(--ink-soft);font-size:16.5px}
.legal li{margin:6px 0}
.legal a{color:var(--accent)}
.legal strong{color:var(--ink);font-weight:600}
.callout{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 22px;margin:0 0 30px}
.callout p{margin:0;color:var(--ink);font-size:17px}
.callout p + p{margin-top:10px;color:var(--ink-soft);font-size:16px}
.legal .hr{border:0;border-top:1px solid var(--line);margin:34px 0}

footer{padding:56px 0 64px;border-top:1px solid var(--line);color:var(--ink-soft);font-size:15px}
footer a{color:var(--ink-soft);text-decoration:none}
footer a:hover{color:var(--ink)}
.footcols{display:grid;grid-template-columns:repeat(5,1fr);gap:32px}
.footcol h2{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:660;margin:0 0 14px}
.footcol ul{list-style:none;margin:0;padding:0}
.footcol li{margin:0 0 11px}
.footcol a{font-size:15px}
.footbase{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:44px;padding-top:22px;border-top:1px solid var(--line);font-size:14px}
@media (max-width:860px){.footcols{grid-template-columns:repeat(3,1fr);gap:30px 24px}}
@media (max-width:640px){h1{font-size:38px}section{padding:56px 0}
.nav{flex-wrap:nowrap;justify-content:space-between;padding:10px 18px}
.navright{display:flex;align-items:center;gap:14px}
.navlinks{position:absolute;top:100%;left:0;right:0;display:none;flex-direction:column;gap:2px;padding:6px 18px 14px;background:var(--panel);border-bottom:1px solid var(--line);box-shadow:0 10px 24px rgba(90,79,70,.10)}
.navlinks.is-open{display:flex}
.navlinks a{margin-left:0;font-size:16px;padding:9px 0}
.demostage{min-height:214px}
.switches{gap:14px;width:100%}
.demobar{gap:10px}
.footcols{grid-template-columns:repeat(2,1fr)}
.btn.btn-full{font-size:15.5px;padding:15px 14px;gap:9px}}
@media (max-width:860px){
  .hero .wrap{max-width:920px}
  .herogrid{display:flex;flex-direction:column;text-align:center;gap:0}
  .heroleft,.heroright{display:contents}
  .herogrid h1{order:1}
  .herogrid .lede{order:2;max-width:600px;margin:0 auto 4px}
  /* the tabs belong with the demo they switch, not floating above the headline.
     Without an explicit order they default to 0 and lead the page. */
  .heroright .dtabs{order:3;max-width:640px;margin:28px auto 0}
  .heroright .demo{order:4;max-width:640px;margin:10px auto 16px}
  .herohint{order:5;max-width:620px;margin:0 auto 28px}
  .herocta{order:6;max-width:640px;margin:0 auto}
  .herogrid .accentrule{order:7;margin:30px auto 22px}
  .herogrid .heroblurb{order:8;max-width:620px;margin:26px auto 0}
}
@media (prefers-color-scheme:dark){:root{--cream:#232020;--danger:#FFB4A8;--ink:#EFE9E5;--muted:#A79D96;--ink-soft:#C8BEB6;--line:#3A3431;--bg:#151313;--panel:#1C1A19;--accent:#F2695E;--accent-bright:#F2695E;--on-accent:#231412}
.btn{background:#2A2725;border-color:#3A3431;color:var(--ink)}
.btn-primary{background:#EFE9E5;color:#191716;border-color:#EFE9E5}
body > nav{background:rgba(21,19,19,.86)}
.demostage{background:linear-gradient(180deg,#26221F,#1D1A18)}
.minidock{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}
.demobar,.democtl{background:#1C1A19}
.track{background:#463F3A}
.edgehint{background:rgba(90,169,255,.12);border-color:rgba(90,169,255,.5)}
.minidock{box-shadow:0 8px 22px rgba(0,0,0,.34)}
.minidock.dragging{box-shadow:0 20px 42px rgba(0,0,0,.5)}
.divider{background:rgba(255,255,255,.28)}
input[type="range"]::-webkit-slider-thumb{background:#2A2725}
input[type="range"]::-moz-range-thumb{background:#2A2725}
/* dark-mode twin of the refusal shake; keep the two in step */
@keyframes nudge{
  0%{translate:0 0;box-shadow:0 8px 22px rgba(0,0,0,.34)}
  12%{translate:-7px 0}
  20%{box-shadow:0 0 0 3px rgba(249,78,56,.62),0 8px 22px rgba(0,0,0,.34)}
  30%{translate:6px 0}
  48%{translate:-4px 0}
  66%{translate:3px 0}
  75%{box-shadow:0 0 0 3px rgba(249,78,56,.62),0 8px 22px rgba(0,0,0,.34)}
  84%{translate:-2px 0}
  100%{translate:0 0;box-shadow:0 8px 22px rgba(0,0,0,.34)}
}
td.n{color:#4A433E}}

/* buy buttons */
.buyrow{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.buyrow .btn{width:100%;text-align:center;cursor:pointer;font:inherit;font-weight:560}
.buyrow .btn:disabled{opacity:.6;cursor:default}
.buynote{margin:10px 0 0;text-align:center}

/* ---- guides ---- */
.legal pre{margin:0 0 18px;background:#231F1D;border-radius:10px;padding:14px 16px}
.legal pre code{display:block;color:#F2ECE8;font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;white-space:pre-wrap;overflow-wrap:break-word}
.legal :not(pre) > code{background:var(--panel);border:1px solid var(--line);border-radius:5px;padding:1px 5px;font:13.5px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.legal ol{margin:0 0 14px;padding-left:22px;color:var(--ink-soft);font-size:16.5px}
.legal ol li{margin:6px 0}
.legal details{margin:0}
.hublead{font-size:18px;color:var(--ink-soft);margin:0 0 30px}
.guidecard{display:block;text-decoration:none;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:22px 24px;margin:0 0 14px;transition:border-color .15s ease}
.guidecard:hover{border-color:var(--accent)}
.guidecard h2{margin:0 0 8px;font-size:20px;font-weight:640;color:var(--ink);text-transform:none;letter-spacing:-.01em}
.guidecard p{margin:0;font-size:16px;color:var(--ink-soft)}

/* selectable plan rows + single checkout button */
.planrow.selectable{cursor:pointer;transition:border-color .14s ease,background .14s ease}
.planrow.selectable:hover{border-color:var(--accent)}
.planrow.selectable:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.planrow.is-selected{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--panel));box-shadow:inset 0 0 0 1px var(--accent)}
#checkout{margin-top:4px}
.paylink{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
th.tablehead{font-size:12px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:660;text-align:left;white-space:normal}

/* pricing hero merges into the cards panel: one white surface, no divider */
.hero-flat{background:var(--panel);padding:52px 0 0}
.hero-flat + .band{border-top:0;padding-top:30px}
.hero-flat .lede{margin-bottom:0}

/* ---- feature demos (hide & show, contents, multiple displays) ---- */
.ftabs{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 14px}
.ftab{font:inherit;font-size:14.5px;font-weight:560;padding:8px 15px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft);cursor:pointer;transition:background .14s,border-color .14s,color .14s}
.ftab:hover{border-color:var(--accent)}
.ftab.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.ftab:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* The section is wide so the cards can be two across, but the demo itself
   should stay the size it always was rather than stretching to fill it. */
.fdemo{max-width:700px;margin-left:auto;margin-right:auto;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--bg)}
.fstage{padding:18px}
.fscene[hidden]{display:none}
.fscene{display:flex;flex-direction:column;gap:14px}

.fscreen{position:relative;height:392px;border-radius:12px;overflow:hidden;background:#fff;border:1px solid rgba(90,79,70,.12)}
.fscreens{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fscreens .fscreen{height:250px}

.fdock{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);display:flex;gap:8px;padding:8px 10px;border-radius:15px;background:rgba(238,234,231,.92);border:1px solid rgba(90,79,70,.10);box-shadow:0 8px 22px rgba(90,79,70,.13);opacity:0;transition:opacity .2s ease,transform .26s cubic-bezier(.22,.7,.3,1)}
.fscreen.has-dock .fdock{opacity:1}
.fscreen.is-hidden .fdock{transform:translateX(-50%) translateY(72px)}
.fdock i{display:block;width:32px;height:32px;border-radius:9px;background:var(--c);transform:translate3d(0,0,0);transition:opacity .2s ease,transform .2s ease}
.fdock i.is-dragging{opacity:.55;cursor:grabbing}
.fdock i.is-gone{opacity:0;transform:translate3d(0,-26px,0) scale(.4);pointer-events:none;width:0;margin-left:-8px;visibility:hidden;transition:opacity .18s ease,transform .18s ease,width .18s ease,margin-left .18s ease,visibility 0s linear .18s}
.fscene[data-scene="contents"] .fdock i{cursor:grab;touch-action:none}
.fdock.blocked{animation:nudge .34s ease}

.fswitch{align-self:flex-start}
.frow{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.fnote{font-size:14.5px;color:var(--ink-soft)}
.fbtn{font:inherit;font-size:14px;font-weight:560;padding:7px 13px;border-radius:9px;border:1px solid var(--line);background:var(--panel);color:var(--ink);cursor:pointer}
.fbtn:hover{border-color:var(--accent)}
.fbar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 18px;border-top:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.fhint{font-size:14px;color:var(--muted)}
.fhint.is-blocked{color:#C6402A;font-weight:560}
@media (max-width:560px){.fscreens{grid-template-columns:1fr}.fscreens .fscreen{height:170px}.fscreen{height:420px}}
.cellnote{display:block;font-size:13px;font-weight:400;color:var(--ink-soft);margin-top:2px}
.tablefoot{margin:14px 0 0}
table sup{font-size:11px}

/* ---- mobile nav ---- */
.hamburger{display:flex;flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px;padding:0 6px;border:0;background:none;cursor:pointer}
.hamburger span{display:block;height:2px;border-radius:2px;background:var(--ink)}
/* Download is the nav's one call to action, so it reads as a button rather than
   another link. One sits in the desktop link row, one beside the hamburger on
   mobile, and each is hidden where the other applies. */
.navdl{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;line-height:1;
  color:var(--on-accent);background:var(--accent);border:1px solid var(--accent);border-radius:999px;
  padding:9px 18px;text-decoration:none;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,transform .1s ease}
.navdl:hover{background:#0058B8;border-color:#0058B8;color:#fff}
.navdl:active{transform:translateY(1px)}
.navdl.is-downloading{opacity:.72;pointer-events:none}
.navlinks a.navdl{margin-left:22px;color:#fff;padding:9px 18px}
.navlinks a.navdl:hover{color:#fff}
@media (max-width:640px){.navdl-in{display:none}}
@media (min-width:641px){.navright{display:none}}

/* ---- Finder "nose", the vertical line that makes the icon readable ---- */
.tiles i.finder,.fdock i.finder{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50.9 0 C39.8 24.3 35.2 52.9 39.8 74.3 C43.5 89.3 51.9 95.7 60.2 100 L100 100 L100 0 Z' fill='%23FBFBFC'/%3E%3C/svg%3E");background-size:100% 100%;background-repeat:no-repeat;background-position:center}

/* the same apps/Trash divider the hero Dock has */
.fdiv{width:2px;align-self:stretch;margin:2px 3px;background:rgba(0,0,0,.16);border-radius:2px}

/* centred panel headings */
.panelhead{text-align:center;margin:0 0 26px}
.panelhead .big{margin:0}
#locks .ftabs{justify-content:center}

/* accent rule under each card title */
.card h3{margin:0 0 10px;padding-bottom:9px;position:relative}
.card h3::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:3px;border-radius:2px;background:var(--rule)}

/* the standout card */
.card-star{}
.cardpill{position:absolute;top:14px;right:14px;font-size:10.5px;font-weight:660;text-transform:uppercase;letter-spacing:.07em;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:4px 9px}
.card-star h3{padding-right:118px}

/* the comparison grid sits in its own card */
.glance{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:8px 26px 22px}
.glance .tablefoot{margin:14px 0 0}

.diysub{font-size:18px;color:var(--ink-soft);margin:0 0 16px}

/* 4 across, then 3, then 2. Two stays all the way down to the smallest phone. */
@media (max-width:1180px){.card{flex-basis:calc((100% - 20px)/2);max-width:calc((100% - 20px)/2)}}
@media (max-width:860px){.card{flex-basis:100%;max-width:100%}}
/* one per row on a phone: two leaves the copy six lines deep and the
   'Most popular' pill wider than the title it has to clear */
@media (max-width:560px){.card{flex-basis:100%;max-width:100%;grid-template-columns:1fr;gap:16px}
.card .cardshot{order:2}}

/* ---- iCloud backup scene ---- */
.icloudscreen{display:flex;align-items:center;justify-content:center;padding:22px 22px 96px}
.icstart{position:relative;z-index:3;display:flex;align-items:center;justify-content:center}
.icstart[hidden]{display:none}
.fbtn-primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fbtn-primary:hover{border-color:var(--accent);filter:brightness(1.05)}

.icsheet{position:relative;z-index:3;width:100%;max-width:330px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:0 16px 40px rgba(90,79,70,.20);padding:18px 20px 16px;text-align:left}
.icsheet[hidden]{display:none}
.icicon{display:block;border-radius:11px;margin:0 0 12px}
.icsheet h4{margin:0 0 6px;font-size:16px;font-weight:640}
.icsheet p{margin:0 0 12px;font-size:14px;color:var(--ink-soft)}
.icsheet input{width:100%;font:inherit;font-size:15px;padding:8px 11px;border:1px solid var(--line);border-radius:9px;background:var(--bg);color:var(--ink)}
.icsheet input:focus{outline:2px solid var(--accent);outline-offset:1px}
.icbtns{display:flex;gap:9px;justify-content:flex-end;margin-top:14px}

.iclist{position:relative;z-index:3;width:100%;max-width:330px;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 26px rgba(90,79,70,.14);overflow:hidden;text-align:left}
.iclist[hidden]{display:none}
.icrow{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 14px;font-size:14.5px;color:var(--ink)}
.icrow + .icrow{border-top:1px solid var(--line)}
.icrow-action{color:var(--ink-soft)}
.icchev{color:var(--muted)}
.fbar.is-hidden{display:none}

/* ---- Touch ID scene ---- */
.tidscreen{display:flex;align-items:center;justify-content:center;padding:20px 20px 96px}
.tidpanel{width:100%;max-width:290px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;text-align:left}
.tidlabel{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:660;margin:0 0 10px}
.tidrow{justify-content:flex-start;gap:12px}

.tidsheet{position:absolute;left:50%;top:calc(50% - 40px);transform:translate(-50%,-50%);z-index:4;width:min(300px,88%);background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 20px 50px rgba(90,79,70,.26);padding:18px 22px 16px;text-align:left;z-index:4}
.tidsheet[hidden]{display:none}
.tidmark{position:relative;width:50px;height:50px;margin:0 0 12px}
.tidprint{width:50px;height:50px;display:block}
.tidmark img{position:absolute;right:-4px;bottom:-4px;border-radius:7px;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.tidsheet h4{margin:0 0 8px;font-size:16px;font-weight:660}
.tidsheet p{margin:0 0 10px;font-size:14px;color:var(--ink-soft)}
.tidwide{display:block;width:100%;margin-top:8px;text-align:center;border-radius:999px;padding:9px 14px}

/* ---- hero footer: pointer to the full demo section ---- */
.herofoot{text-align:center;max-width:660px;margin:92px auto 0}
.herofoot-h{font-size:28px;font-weight:660;letter-spacing:-.015em;margin:0}
.herofoot .accentrule{margin:20px auto;background:var(--rule)}
.herofoot-p{font-size:19px;color:var(--ink-soft);margin:0}
.herofoot-p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:560}
/* prose in the DIY band had no link style, so links fell back to browser blue */
#terminal p a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;font-weight:560}

/* ---- cards linked to their demo tab ---- */
.card[data-scene],.card[data-jump]{cursor:pointer;transition:border-color .14s ease,background .14s ease}
.card[data-scene]:hover,.card[data-jump]:hover{border-color:var(--accent)}
.card[data-scene]:focus-visible,.card[data-jump]:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.card.is-active{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}

/* ---- profiles scene ---- */
.profscreen{display:flex;align-items:center;justify-content:center;padding:20px 20px 96px}
.ickeys{color:var(--muted);font-size:13.5px;letter-spacing:.06em}

/* ---- launch at login scene ---- */
.loginscreen{position:relative}
.menubar .mbicon{position:absolute;right:12px;top:4px;border-radius:4px;opacity:.85}
.menupop{position:absolute;top:30px;right:14px;width:250px;background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 14px 34px rgba(90,79,70,.22);padding:6px;z-index:4;text-align:left}
.mrow{display:flex;align-items:center;gap:7px;width:100%;font:inherit;font-size:14px;color:var(--ink);padding:6px 9px;border:0;background:none;border-radius:7px;text-align:left}
.mrow-btn{cursor:pointer}
.mrow-btn:hover{background:var(--accent);color:#fff}
.mrow.is-dim{color:var(--muted)}
.mtick{width:12px;display:inline-block}
.mtick[hidden]{visibility:hidden;display:inline-block}
.msep{height:1px;background:var(--line);margin:5px 8px}

/* ---- quit protection scene ---- */
.quitscreen{position:relative}
/* anchored to the Dock, not to the middle, so the taller tabbed window clears them */
.qkeys{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);display:flex;gap:14px;z-index:3}
.qkey{display:flex;flex-direction:column;align-items:center;gap:5px;font:inherit;cursor:pointer;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 20px;box-shadow:0 3px 0 var(--line)}
.qkey:hover{border-color:var(--accent)}
.qkey:active{transform:translateY(2px);box-shadow:0 1px 0 var(--line)}
.qsym{font-size:20px;font-weight:660;color:var(--ink)}
.qcap{font-size:12.5px;color:var(--muted)}
.qtoast{position:absolute;left:50%;bottom:88px;transform:translateX(-50%);background:rgba(36,31,28,.92);color:#fff;font-size:14px;font-weight:560;padding:9px 16px;border-radius:999px;z-index:5}
.qtoast[hidden]{display:none}
.fbar2{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.fscreen.is-quit .fdock{opacity:0;transform:translateX(-50%) translateY(72px)}

/* ---- menu bar lock glyph, mirroring the real menu bar item ---- */
.mblock{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:15px;height:15px;color:var(--ink);display:block}
.mblock svg{position:absolute;inset:0;width:15px;height:15px}
.mblock .mb-closed{opacity:0}
.menubar.is-locked .mblock .mb-open{opacity:0}
.menubar.is-locked .mblock .mb-closed{opacity:1}
.mblock svg{transition:opacity .16s ease}

/* ---- size + position scenes ---- */
.fdock i{width:var(--fs,32px);height:var(--fs,32px);border-radius:calc(var(--fs,32px)*.26);transition:width .16s ease,height .16s ease,border-radius .16s ease}
.szlabel{font-size:15px;font-weight:560;white-space:nowrap}
.frow input[type="range"]{flex:1;min-width:140px;height:34px}
.szval{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.poedges{display:flex;gap:8px;flex-wrap:wrap}
.poedge.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.fscreen.edge-left .fdock,.fscreen.edge-right .fdock{flex-direction:column;left:auto;right:auto;bottom:auto;top:50%;transform:translateY(-50%)}
.fscreen.edge-left .fdock{left:12px}
.fscreen.edge-right .fdock{right:12px}

/* ---- ⌘W close guard ---- */
.qwin{position:absolute;left:50%;top:56px;transform:translateX(-50%);width:min(300px,78%);background:var(--panel);border:1px solid var(--line);border-radius:11px;box-shadow:0 10px 26px rgba(90,79,70,.16);overflow:hidden;z-index:2;transition:opacity .2s ease,transform .2s ease}
.qwin.is-gone{opacity:0;transform:translateX(-50%) scale(.94)}
.qwinbar{display:flex;align-items:center;gap:6px;padding:8px 11px;background:#F4F1EF;border-bottom:1px solid var(--line)}
.qdot{width:10px;height:10px;border-radius:50%}
.qdot.d1{background:#F9655B}.qdot.d2{background:#F9BD4E}.qdot.d3{background:#57C452}
.qwintitle{margin-left:6px;font-size:12.5px;font-weight:560;color:var(--ink-soft)}
/* a real tab strip, so a closed tab reads as one tab gone, not the whole app */
.qtabs{display:flex;gap:4px;padding:6px 7px;background:#F4F1EF;border-bottom:1px solid var(--line)}
.qtab{flex:1 1 0;min-width:0;font-size:11.5px;font-weight:560;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:7px;padding:5px 4px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .18s ease,transform .18s ease,flex-grow .18s ease}
.qtab.is-on{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.qtab.is-shut{flex-grow:0;flex-basis:0;opacity:0;transform:scale(.8);padding-left:0;padding-right:0;border-width:0;margin-left:-4px}
.qwinbody{padding:16px 14px;font-size:14px;color:var(--muted);text-align:center}
.qsheet{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6}
.qsheet .tidwide{margin-top:8px}

/* anchor targets must clear the sticky nav, or a jump lands under it */
section[id],header[id]{scroll-margin-top:74px}
/* the close-guard sheet sits above the Dock, not over it */
.qsheet{top:calc(50% - 38px)}

/* scene: permanent lock. A Terminal window plus three ways to try to undo it. */
.pmwin{top:46px;width:min(268px,80%)}
.pmbody{padding:13px 12px;text-align:center}
.pmbody code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;line-height:1.6;color:var(--ink-soft);word-break:break-word}
.pmtries{position:absolute;left:50%;bottom:84px;transform:translateX(-50%);display:flex;flex-wrap:wrap;justify-content:center;gap:8px;width:calc(100% - 28px);z-index:3;transition:opacity .22s ease}
.pmtry{font-size:13px;padding:8px 13px}
.fscreen.is-wiped .fdock,.fscreen.is-wiped .pmwin,.fscreen.is-wiped .pmtries{opacity:0}
.fscreen.is-wiped .fdock{transform:translateX(-50%) translateY(72px)}
.paynote{margin:10px 0 0;text-align:center;font-size:13px;color:var(--muted)}
/* both cards end on a button and a note, so pushing the button down lines them up.
   The line-height is pinned because one card's CTA is a <button> and the other a <span>. */
.plan>.btn{margin-top:auto;line-height:1.2}
/* a 302 to a file gives the browser nothing to show, so the button says it itself */
.btn.is-downloading{opacity:.72;pointer-events:none}
.heroblurb a{color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.heroblurb a:hover{color:var(--accent)}


/* Only shown when the comparison table actually overflows its column,
   which is a runtime question, so JS sets .can-scroll rather than a breakpoint. */
.scrollhint{display:none}
/* absolute, so it cannot change the first column's width or height: it sits in
   the gap between the two headers rather than becoming part of either */
th.tablehead{position:relative}
.tablewrap.can-scroll .scrollhint{display:block;position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.12em;color:var(--rule);white-space:nowrap;pointer-events:none}
.tablewrap.can-scroll .scrollhint::after{content:" \2192"}

/* reviews: the form the email links to, and the public list */
.rvstars{border:0;padding:0;margin:0 0 18px}
.rvstars legend{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:660;padding:0}
.rvstarrow{display:flex;gap:4px;margin-top:8px}
.rvstar{font-size:30px;line-height:1;background:none;border:0;padding:0 2px;cursor:pointer;color:var(--line)}
.rvstar.is-on{color:#F5A623}
.rvstar:hover{color:#F5A623}
.rvlabel{display:block;margin:18px 0 7px;font-weight:560;font-size:15px}
.rvinput{width:100%;font:inherit;font-size:16px;color:var(--ink);background:var(--panel);border:1px solid var(--line);border-radius:11px;padding:12px 14px}
.rvinput:focus{outline:2px solid var(--accent);outline-offset:1px}
textarea.rvinput{resize:vertical;line-height:1.55}
#rvSubmit{margin-top:22px}

.rvitem{border-bottom:1px solid var(--line);padding:22px 0}
.rvitem:last-child{border-bottom:0}
.rvhead{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.rvscore{color:#F5A623;font-size:16px;letter-spacing:1px;white-space:nowrap}
.rvdim{color:var(--line)}
.rvtitle{margin:0;font-size:18px}
.rvbody{margin:10px 0 8px;white-space:pre-wrap}
.rvmeta{margin:0;font-size:14px;color:var(--muted)}
.rvverified{color:#1E9E43;font-weight:560}

/* press kit */
.pressquote{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--rule);border-radius:0 11px 11px 0;padding:14px 18px;margin:0 0 12px}
.presstable{width:100%;margin:0 0 14px;min-width:0}
.presstable td{padding:11px 0;vertical-align:top}
.presstable td:first-child{width:190px;color:var(--muted);font-size:14px;text-align:left}
.pressicons{display:flex;gap:26px;flex-wrap:wrap;margin:0 0 8px}
.pressicons figure{margin:0;text-align:center}
.pressicons img{display:block;border-radius:22px;background:var(--panel)}
.pressicons figcaption{margin-top:9px;font-size:14px}
.presshot{margin:0 0 18px}
.presshot img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:12px}
.presshot figcaption{margin-top:8px;font-size:14px;color:var(--muted)}
@media (max-width:560px){.presstable td:first-child{width:130px}}

/* "Message Me" under the founder story */
.signrow{margin-top:22px}
.signrow .buildersign{margin:0 0 14px}
.msgbtn{padding:11px 22px;font-size:15px;cursor:pointer;background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.msgbtn:hover{background:#0058B8;border-color:#0058B8}
/* a card, so the fields read as a panel rather than floating on the band */
.msgform{margin:18px 0 0;max-width:520px;background:var(--cream);border:1px solid var(--line);border-radius:14px;padding:20px 22px 22px}
.msgform[hidden]{display:none}
.msgform .rvlabel:first-child{margin-top:0}
.msgform .rvinput{background:var(--panel)}
.msgform #msgSend{margin-top:20px}
.msghp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msgdone{margin:0;padding:16px 18px;background:var(--panel);border:1px solid var(--line);border-radius:12px}

/* hero demo: two tabs, because the lede names two features */
.dtabs{display:flex;gap:8px;margin:30px 0 0}
.dtab{flex:1;font:inherit;font-size:14px;font-weight:560;cursor:pointer;padding:9px 10px;border-radius:999px;border:1px solid var(--line);background:var(--panel);color:var(--ink-soft)}
.dtab:hover{border-color:var(--rule)}
.dtab.is-on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
/* Both panes share one grid cell, so the box is always as tall as the taller
   one and switching tabs never changes the page height. */
.dstack{display:grid}
.dstack>.dpane{grid-area:1/1;display:flex;flex-direction:column;min-width:0}
.dpane.is-off{visibility:hidden;pointer-events:none}
/* the shorter pane's stage absorbs the leftover height instead of leaving a gap */
.dpane[data-pane="quit"] .hqstage{flex:1}

/* the Cmd Q pane, scaled to the hero stage rather than the lower demo's */
.hqstage{position:relative;overflow:hidden}
.hqwin{top:12%;width:min(250px,80%)}
.hqwin .qwinbody{padding:12px;font-size:13px}
.hqwin .qtab{font-size:10.5px;padding:4px 3px}
.hqkeys{bottom:14%;gap:11px}
.hqkeys .qkey{padding:11px 15px}
.hqkeys .qsym{font-size:17px}
.hqkeys .qcap{font-size:12px}
.hqsheet{top:50%;width:min(250px,84%);padding:16px 18px}
.hqsheet h4{font-size:15px;margin:8px 0 6px}
.hqsheet p{font-size:12.5px;line-height:1.45;margin:0 0 4px}
.hqsheet .icicon{width:34px;height:34px}
.hqsheet .tidwide{margin-top:7px;padding:9px 14px;font-size:14px}
.hqstage .qtoast{bottom:16px}
.hqstage.is-quit .hqwin,.hqstage.is-quit .hqkeys{opacity:0}

/* A trial reviewer is labelled differently from a purchaser — same prominence, different word. */
.rvtrial{color:var(--ink-soft);font-weight:600}

/* the free command generator */
.genform{margin:0 0 26px}
.genset{border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:16px 20px 18px;margin:0 0 14px}
.genset legend{padding:0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);font-weight:660}
.genrow{display:grid;grid-template-columns:22px 1fr;column-gap:12px;align-items:start;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.genrow:last-child{border-bottom:0}
.genrow input{width:19px;height:19px;margin-top:2px;accent-color:var(--accent)}
.genname{font-weight:600;font-size:16px}
.genflag{display:inline-block;margin-left:8px;font-style:normal;font-size:11px;font-weight:660;text-transform:uppercase;letter-spacing:.06em;color:var(--on-accent);background:var(--accent);border-radius:999px;padding:3px 8px;vertical-align:2px}
.gendesc{grid-column:2;font-size:14.5px;color:var(--muted);margin-top:2px}
.gentoggle{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.genradio{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;background:var(--bg);font-size:15px}
.genradio input{accent-color:var(--accent)}
.genradio:has(input:checked){border-color:var(--accent);color:var(--accent);font-weight:560}
.genout{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;overflow-x:auto}
.genout code{font-size:13.5px;line-height:1.75;white-space:pre;color:var(--ink)}
.gencopied{margin-left:12px;font-size:14px;color:#1E9E43;font-weight:560}
.otherapps{margin:10px 0 16px;font-size:15px;color:var(--muted)}
.otherapps a{color:var(--accent)}

/* ---- Referral code ---- */
/* Collapsed by default. A discount field sitting open on a pricing page invites everyone who
   hasn't got a code to go looking for one, and to leave to find it. This exists so the wording
   can be ours: Stripe's own box on the checkout page says "promotion code" and is not
   configurable, so a code entered here is resolved server-side and arrives already applied. */
.refcode{border-bottom:0;padding:12px 0 0}
.refcode summary{font-size:13px;font-weight:500;color:var(--muted);text-align:center}
/* [open] too, or the FAQ's "−" marker wins on specificity once the field is expanded. */
.refcode summary::before,.refcode[open] summary::before{content:none}
.refcode summary:hover{color:var(--ink-soft)}
.refcode input{width:100%;margin-top:10px;padding:11px 13px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--ink);font:inherit;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
/* Uppercase what they type, not the prompt telling them to type it. */
.refcode input::placeholder{text-transform:none;letter-spacing:0;color:var(--muted)}
.refcode input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.refcode-note{margin:8px 0 0;font-size:13px;color:var(--muted)}
.refcode-note.is-bad{color:var(--danger)}

/* The hero autoplay's fake pointer. Lives inside .demo so its coordinates are
   relative to the real controls at any width, rather than baked-in offsets. */
.demo{position:relative}
.autocur{position:absolute;left:0;top:0;z-index:6;pointer-events:none;opacity:0;
  transition:transform .6s cubic-bezier(.33,.02,.24,1),opacity .3s ease;
  filter:drop-shadow(0 2px 4px rgba(36,31,28,.34))}
.autocur.is-on{opacity:1}
.autocur svg{display:block;transform:translate(-3px,-2px);transition:transform .15s ease}
.autocur.is-drag svg{transform:translate(-3px,-2px) scale(.9)}
.autocur .autoring{position:absolute;left:0;top:0;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;border:2px solid var(--accent);opacity:0;transform:scale(.3)}
.autocur.is-tap .autoring{animation:autotap .42s ease-out}
@keyframes autotap{
  0%{opacity:.85;transform:scale(.3)}
  100%{opacity:0;transform:scale(1.5)}
}