/* Product pages in the home page's look: full-screen sections in big type, the same fixed chrome
   (froog top left, the site's links top right, a dot per section on the right). Unlike home, the
   page scrolls normally: a section with more in it than fits a screen just grows. Loaded after
   site.css, whose components (rows, terminals, charts, the fleet) sit inside the sections. */
body.deck{--paper:#f2f2f2;--edge:clamp(16px,3.2vw,64px);--dotsw:40px;background:var(--paper);overflow-x:clip}
body.deck{font-family:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
html:has(body.deck){scroll-behavior:smooth;scroll-padding-top:72px}

/* Fixed chrome */
.deck-top{position:fixed;z-index:20;inset:0 0 auto;display:flex;align-items:baseline;justify-content:space-between;gap:24px;padding:calc(var(--edge) * .62) var(--edge) 14px;background:linear-gradient(var(--paper) 55%,color-mix(in srgb,var(--paper) 0%,transparent));pointer-events:none}
.deck-top>*{pointer-events:auto}
.deck .mark{font-size:13px;letter-spacing:.04em;color:var(--ink-strong);text-decoration:none}
.deck .links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px 25px;font-size:11px;line-height:1.5}
.deck .links a{color:var(--muted);text-decoration:none;transition:color .2s}
.deck .links a:hover,.deck .links a[aria-current]{color:var(--ink-strong)}
.deck .dots{position:fixed;z-index:20;right:calc(var(--edge) - 4px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:6px}
.deck .dots a{display:block;width:18px;height:18px;position:relative}
.deck .dots a::after{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--line-2);transition:background .3s,transform .3s}
.deck .dots a:hover::after{background:var(--muted)}
.deck .dots a[aria-current="true"]::after{background:var(--ink-strong);transform:scale(1.35)}
.deck .dots a span{position:absolute;right:26px;top:50%;transform:translateY(-50%);font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;color:var(--muted);opacity:0;pointer-events:none;transition:opacity .2s}
.deck .dots a:hover span{opacity:1}

/* Sections: a screen tall at least; the title on the left stays put while a long right side scrolls */
.ds{position:relative;min-height:100vh;min-height:100svh;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);column-gap:clamp(32px,5vw,112px);align-items:center;padding:calc(var(--edge) + 72px) calc(var(--edge) + var(--dotsw)) calc(var(--edge) + 40px) var(--edge);scroll-margin-top:0}
.ds+.ds::before{content:"";position:absolute;top:0;left:var(--edge);right:calc(var(--edge) + var(--dotsw));height:1px;background:var(--line-2)}
.ds-head{align-self:start;position:sticky;top:calc(var(--edge) + 72px);display:flex;flex-direction:column}
.ds.short .ds-head{align-self:center;position:static}
.deck .kicker{margin:0 0 clamp(12px,2.4vh,28px);font-size:11px;letter-spacing:.16em;color:var(--faint);text-transform:uppercase}
.ds-head h2{position:relative;margin:0;font-weight:400;font-size:clamp(34px,4.3vw,76px);line-height:.98;letter-spacing:-.03em;color:var(--ink-strong);max-width:13ch;text-wrap:balance}
.deck .what{max-width:52ch;margin:clamp(16px,3vh,32px) 0 0;font-size:clamp(14px,1.15vw,18px);line-height:1.6;color:var(--ink);text-wrap:pretty}
.deck .what code{padding:0 .3em;background:#e4e4e4;font-size:.92em}
.ds-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:clamp(18px,3.4vh,36px)}
.deck .more{display:inline-block;font-size:13px;color:var(--ink-strong);text-decoration:none;border-bottom:1px solid var(--line-2);padding-bottom:2px;transition:border-color .2s}
.deck .more:hover{border-color:var(--ink-strong)}
.ds-body{display:flex;flex-direction:column;gap:clamp(18px,3vh,32px);min-width:0;padding:4px 0}
/* site.css components, at home in the wider column */
.deck .ds-body .rows{margin:0}
.deck .ds-body .term,.deck .ds-body .chart,.deck .ds-body .cmp-wrap{margin:0}
.deck .ds-body .stats{margin:0}
.deck .ds-body .prose p{font-size:15px;line-height:1.6}

/* The first screen: the product's name in two big lines, what it is beside it */
.ds-hero{grid-template-columns:minmax(0,6fr) minmax(0,5fr);align-items:end;padding-bottom:calc(var(--edge) + 24px)}
.ds-hero .ds-head{position:static;align-self:end}
.deck .big.split{display:flex;flex-direction:column;width:max-content;margin:0;font-weight:400;font-size:min(13vw,24vh);line-height:.86;letter-spacing:-.03em;color:var(--ink-strong)}
.deck .big.split>span{display:block;position:relative;width:max-content}
.deck .big.split>span:last-child{align-self:flex-end}
.ds-hero .what{font-size:clamp(15px,1.35vw,21px)}
.deck .fact{display:flex;flex-wrap:wrap;gap:6px 28px;margin:clamp(14px,2.6vh,28px) 0 0;font-size:12px;color:var(--muted)}
.deck .fact span::before{content:"— ";color:var(--faint)}
.deck .tag-line{display:flex;align-items:center;flex-wrap:wrap;gap:4px 14px;margin:clamp(16px,3vh,30px) 0 0;padding-top:clamp(10px,1.8vh,16px);border-top:1px solid var(--ink-strong)}
.deck .tag-line b{flex:none;font-weight:400;font-size:clamp(28px,3.4vw,52px);letter-spacing:-.03em;line-height:1;color:var(--ink-strong)}
.deck .tag-line span{flex:1 1 22ch;font-size:12px;line-height:1.5;color:var(--muted)}
.deck .cta{display:flex;align-items:baseline;flex-wrap:wrap;gap:16px 28px;margin-top:clamp(20px,4vh,40px)}
.deck .go{display:inline-block;padding:14px 26px;background:var(--ink-strong);color:var(--paper);font-size:15px;letter-spacing:.02em;text-decoration:none;transition:background .2s}
.deck .go:hover{background:#333}
.deck .note{margin:clamp(14px,2.4vh,24px) 0 0;font-size:12px;color:var(--muted)}
.deck .note a{color:var(--ink-strong)}
.ds-hero .ds-vis{align-self:center;min-width:0}
.deck .cue{position:absolute;left:50%;bottom:calc(var(--edge) * .5);margin:0;transform:translateX(-50%);font-size:10px;letter-spacing:.2em;color:var(--faint);animation:dkcue 2.4s ease-in-out infinite}
@keyframes dkcue{50%{transform:translate(-50%,4px);opacity:.5}}
.deck .fleet{margin:0;padding:0}

/* The last screen: a big call to start, then the site's footer */
.ds-end{grid-template-columns:minmax(0,1fr);align-content:center}
.ds-end h2{font-size:min(9vw,15vh);max-width:none;line-height:.92}
.deck .sh{display:flex;align-items:center;gap:12px;max-width:min(100%,900px);margin:clamp(24px,5vh,48px) 0 0;padding:clamp(14px,2.2vh,22px) clamp(16px,1.6vw,24px);border:1px solid var(--ink-strong);font-size:clamp(13px,1.5vw,22px)}
.deck .sh code{flex:1;min-width:0;overflow-x:auto;white-space:nowrap;scrollbar-width:none;background:none;padding:0;font:inherit;color:var(--ink-strong)}
.deck .sh .pr{color:var(--faint);user-select:none}
.deck .copy-btn{flex:none;padding:6px 12px;border:1px solid var(--line-2);background:none;font:inherit;font-size:11px;letter-spacing:.06em;color:var(--muted);cursor:pointer}
.deck .copy-btn:hover{border-color:var(--ink-strong);color:var(--ink-strong)}
.deck .foot{margin:0;padding:40px calc(var(--edge) + var(--dotsw)) 36px var(--edge)}

/* Typing titles (deck.js) */
.deck [data-type]>.ghost{visibility:hidden}
.deck [data-type]>.live{position:absolute;inset:0}
/* Coming into view: the right side rises in after the title */
html.deck-js .ds:not(.in) .ds-body>*,html.deck-js .ds:not(.in) .ds-head>:not(.kicker):not(h1):not(h2){opacity:0;transform:translateY(18px)}
html.deck-js .ds .ds-body>*,html.deck-js .ds .ds-head>*{transition:opacity .6s ease,transform .8s cubic-bezier(.22,1,.36,1)}
html.deck-js .ds.in .ds-body>:nth-child(2){transition-delay:.08s}
html.deck-js .ds.in .ds-body>:nth-child(3){transition-delay:.16s}
html.deck-js .ds.in .ds-body>:nth-child(n+4){transition-delay:.24s}

@media (max-width:1000px){
  .ds,.ds-hero{grid-template-columns:minmax(0,1fr);row-gap:clamp(24px,4vh,40px);align-items:start;align-content:center}
  .ds-head{position:static}
  .deck .big.split{font-size:min(24vw,17vh)}
  .ds-head h2{max-width:16ch}
}
@media (max-width:640px){
  body.deck{--dotsw:14px}
  .deck-top{flex-direction:column;align-items:flex-start;gap:6px}
  .deck .links{justify-content:flex-start;gap:4px 16px;font-size:10.5px}
  .ds{padding-top:calc(var(--edge) + 92px);min-height:auto}
  .ds-hero{min-height:100svh}
  .deck .dots{display:none}
  .deck .cue{display:none}
}
@media (prefers-reduced-motion:reduce){.deck .cue{animation:none}html.deck-js .ds .ds-body>*,html.deck-js .ds .ds-head>*{transition:none;opacity:1;transform:none}html:has(body.deck){scroll-behavior:auto}}
.ds.short{min-height:72vh;min-height:72svh}
html.deck-scrolled .deck .cue{visibility:hidden;animation:none}
/* a section whose right side needs the room (Pricing's size cards) */
.ds.wide{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
@media (max-width:1000px){.ds.wide{grid-template-columns:minmax(0,1fr)}}
.deck .ds-body .price-list{margin:0}
.deck .ds-body .price-note{margin:0}