/*
Gesta marketing site — index.html page styles.
Shared by every language copy of this page; edit here, not in the page.
*/
/* ============ the tape: timecode rail + entries ============ */
.row{display:grid;grid-template-columns:112px 1fr;column-gap:36px}
.gut{position:relative;font-family:var(--mono)}
.gut::before{content:"";position:absolute;left:6px;top:0;bottom:0;width:1px;background:var(--border)}
.tc{position:sticky;top:84px;display:block;padding:2px 0 2px 24px;font-size:12px;letter-spacing:.08em;color:var(--faint)}
.tc::before{content:"";position:absolute;left:3px;top:7px;width:7px;height:7px;border-radius:50%;
background:var(--faint);box-shadow:0 0 0 4px var(--bg)}
.tc .lbl{display:block;margin-top:3px;font-size:12px;color:var(--fg);letter-spacing:.12em;text-transform:uppercase}
.tc.hot::before{background:var(--fg)}
.entry{padding:76px 0;border-top:1px solid var(--border-2)}
/* a beat inside a module: no rule above it, so the three security beats
read as one chapter rather than three separate sections */
.entry.sub{padding:10px 0 64px;border-top:none}
.row:first-of-type .entry{border-top:none}
@media(max-width:760px){
.row{grid-template-columns:1fr;column-gap:0}
.gut::before{display:none}
.tc{position:static;padding:0;margin-bottom:10px}
.tc::before{display:none}
.tc .lbl{display:inline;margin-left:8px}
.entry{padding:52px 0}
.entry.sub{padding:8px 0 44px}
}
/* beat heading — one step down from h2.sec, so a module keeps one title */
h3.subsec{font-size:clamp(20px,2.6vw,25px);font-weight:600;letter-spacing:-.02em;line-height:1.15;margin:12px 0 0;max-width:32ch}
/* the first beat sits under its module head, inside the same entry */
.beat{margin-top:54px}
/* hero */
.hero{padding:88px 0 84px;position:relative}
.hero::before{content:"";position:absolute;inset:-60px -400px 0;
background:radial-gradient(52% 46% at 34% 0%, oklch(1 0 0 / .05), transparent 70%);pointer-events:none}
h1.head{font-size:clamp(40px,6.8vw,76px);font-weight:700;letter-spacing:-.042em;line-height:.99;margin:26px 0 0;max-width:15ch}
h1.head .punch{position:relative;white-space:nowrap}
h1.head .punch::after{content:"";position:absolute;left:0;right:0;bottom:.03em;height:3px;background:var(--fg)}
.sub{color:var(--muted);font-size:clamp(16px,2vw,18px);max-width:56ch;margin:28px 0 0}
.sub b{color:var(--fg);font-weight:500}
/* hero installer — terminal-like, but quieter than the product evidence UI */
.installer{margin-top:40px;display:grid;grid-template-columns:minmax(0,1fr) auto;border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--panel);max-width:82ch;overflow:hidden}
.installer-command{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:14px;padding:15px 18px}
.installer-prompt{font-family:var(--mono);font-size:14px;line-height:1.75;color:var(--faint);user-select:none}
.installer-cmd{min-width:0;display:block;overflow-x:auto;font-family:var(--mono);font-size:13px;color:var(--fg);line-height:1.75;scrollbar-width:thin}
.installer-cmd span{display:block;width:max-content;white-space:pre}
.installer-cta{display:flex;align-items:center;padding:0 18px;border-left:1px solid var(--border);font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);white-space:nowrap;transition:background .15s,color .15s}
.installer-cta:hover{background:var(--panel-2);color:var(--fg)}
@media(max-width:600px){
.installer{grid-template-columns:1fr;max-width:100%}
.installer-command{gap:10px;padding:15px 14px 17px}
.installer-cmd{font-size:12px}
.installer-cta{justify-content:center;min-height:42px;border-left:0;border-top:1px solid var(--border)}
}
/* incident / forensic replay (signature) */
.stakes{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:start}
@media(max-width:960px){.stakes{grid-template-columns:1fr;gap:32px}}
.stakes .note{color:var(--muted);font-size:16px;margin:18px 0 0;max-width:44ch}
.stakes .note b{color:var(--fg);font-weight:500}
.evidence{border:1px solid var(--border);border-radius:14px;background:var(--panel);overflow:hidden}
.ev-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
height:40px;padding:0 14px;border-bottom:1px solid var(--border-2);font-family:var(--mono);font-size:12px}
.ev-top .file{color:var(--muted)}
.ev-top .tag{color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.chain{list-style:none;margin:0;padding:18px 20px 10px;font-family:var(--mono);font-size:14px}
.chain li{position:relative;padding:7px 0 7px 26px;color:var(--muted)}
.chain li::before{content:"";position:absolute;left:5px;top:13px;width:7px;height:7px;border-radius:50%;
background:var(--faint);box-shadow:0 0 0 3px var(--panel)}
.chain li::after{content:"";position:absolute;left:8px;top:18px;bottom:-4px;width:1px;background:var(--border)}
.chain li:last-child::after{display:none}
.chain li .t{display:inline-block;min-width:46px;color:var(--faint)}
.chain li .x{color:var(--fg)}
.chain li.danger{color:var(--danger);font-weight:500}
.chain li.danger .x{color:var(--danger);font-weight:600}
.chain li.danger::before{background:var(--danger)}
.chain li .flag{margin-left:10px;font-size:12px;color:var(--fg);letter-spacing:.04em}
.chain.rv li{opacity:0;transform:translateX(-6px);transition:opacity .5s ease,transform .5s ease}
.chain.rv.on li{opacity:1;transform:none}
.chain.rv.on li:nth-child(1){transition-delay:.05s}.chain.rv.on li:nth-child(2){transition-delay:.15s}
.chain.rv.on li:nth-child(3){transition-delay:.25s}.chain.rv.on li:nth-child(4){transition-delay:.35s}
.chain.rv.on li:nth-child(5){transition-delay:.5s}.chain.rv.on li:nth-child(6){transition-delay:.65s}
.chain.rv.on li:nth-child(7){transition-delay:.78s}
@media(prefers-reduced-motion:reduce){.chain.rv li{opacity:1;transform:none}}
.ev-foot{border-top:1px solid var(--border-2);padding:14px 20px;font-size:14px;color:var(--muted)}
.ev-foot .dwell{font-family:var(--mono);color:var(--fg)}
.ev-foot b{color:var(--fg);font-weight:500}
/* incident replay — both cards run on one clock, 02:40 to 04:40. The left
card stalls at 02:47 on a question nothing can answer; the right closes at
02:48 and its clock stops while the left keeps running. The asymmetry is
the argument, so nothing here counts damage. */
.repbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.repbar .track{flex:1;min-width:120px;height:1px;background:var(--border);position:relative}
.repbar .track i{position:absolute;top:-2px;left:0;width:5px;height:5px;border-radius:50%;background:var(--fg)}
.repbar .btn{height:32px;padding:0 12px;font-size:12px;text-transform:none;letter-spacing:0}
.rep-root{margin-top:16px}
.ev-clk{color:var(--muted);letter-spacing:.04em;font-variant-numeric:tabular-nums;transition:color .3s}
.ev-clk.stop{color:var(--fg)}
.rep-chain li{opacity:.26;transition:opacity .45s ease,color .45s ease}
.rep-chain li.on{opacity:1}
.rep-chain li::before{background:var(--border);transition:background .35s ease}
.rep-chain li.on::before{background:var(--faint)}
.rep-chain li::after{transform:scaleY(0);transform-origin:top;transition:transform .5s ease}
.rep-chain li.on::after{transform:scaleY(1)}
.rep-chain li.pending,.rep-chain li.pending .x{color:var(--fg);font-weight:500}
.rep-chain li.pending.on::before{background:var(--panel);box-shadow:0 0 0 3px var(--panel),inset 0 0 0 1.5px var(--fg);animation:unres 1.6s ease-in-out infinite}
@keyframes unres{50%{opacity:.22}}
.rep-chain li .flag{opacity:0;transition:opacity .5s ease .5s}
.rep-chain li.on .flag{opacity:1}
.cur-sm{width:6px;height:12px;margin-left:6px;vertical-align:-1px}
.rep .ev-foot{opacity:0;transition:opacity .55s ease}
.rep-root.done .rep .ev-foot{opacity:1}
@media(prefers-reduced-motion:reduce){
.rep-chain li,.rep-chain li .flag,.rep .ev-foot{opacity:1}
.rep-chain li::after{transform:scaleY(1)}
}
/* evidence duo — scene 2 (cloud log vs session record) and scene 3 */
.ctxprompt{margin:30px 0 0;font-family:var(--mono);font-size:14px;color:var(--fg);border:1px solid var(--border);border-radius:var(--radius);padding:12px 16px;background:var(--panel)}
.ctxprompt .c{color:var(--faint);margin-right:8px}
.ctxduo{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:16px;align-items:stretch}
.ctxduo .evidence{display:flex;flex-direction:column}
.ctxduo .ev-foot{margin-top:auto}
@media(max-width:960px){.ctxduo{grid-template-columns:1fr}}
.gapclose{margin-top:30px;font-size:clamp(18px,1.54vw,20px);color:var(--fg);max-width:58ch}
.gapclose .hl{border-bottom:1px solid var(--fg)}
.gapclose.tight{margin-top:24px}
/* the measurement note under scene 1's ledger */
.method{margin-top:60px}
h2.sec.small{font-size:clamp(22px,3.2vw,32px)}
/* the position — stays/leaves two-row panel */
.posrow{display:grid;grid-template-columns:180px 1fr;gap:16px;padding:14px 16px;border-bottom:1px solid var(--border-2);font-size:14px}
.posrow:last-child{border-bottom:none}
.posrow .k{font-family:var(--mono);color:var(--faint);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.posrow .v{color:var(--fg)}
@media(max-width:600px){.posrow{grid-template-columns:1fr;gap:4px}}
/* console — metrics + ledger (signature) */
.metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;margin-top:34px;border:1px solid var(--border);border-radius:12px;overflow:hidden;background:var(--border-2)}
.metric{background:var(--panel);padding:18px 20px}
.metric .n{font-size:26px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.metric .l{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:5px}
@media(max-width:860px){.metrics{grid-template-columns:repeat(2,1fr)}}
.ledger{margin-top:16px;border:1px solid var(--border);border-radius:14px;overflow:hidden;background:var(--panel)}
.ledbar{display:flex;align-items:center;gap:7px;height:40px;padding:0 14px;border-bottom:1px solid var(--border-2)}
.ledbar .d{width:10px;height:10px;border-radius:50%;background:var(--border)}
.ledbar .u{font-family:var(--mono);font-size:12px;color:var(--faint);margin-left:8px}
/* Geometry follows the design system's Table: 8px vertical / 16px between
cells, and a 24px outer gutter so the table's edges line up with the panel
header above it and the note row below. At 16px the table visibly fails to
align with its own card. */
.lrow{display:grid;grid-template-columns:1.7fr .8fr .6fr .8fr .7fr;column-gap:16px;padding:8px 24px;border-bottom:1px solid var(--border-2);font-size:14px;align-items:center;transition:background .15s}
.lrow.c4{grid-template-columns:1.6fr .7fr .8fr .9fr}
.lrow:not(.h):hover{background:var(--panel-2)}
.lrow:last-child{border-bottom:none}
/* The header is a row of column names, not an eyebrow: the system sets it in
the body face at body size, medium weight, full foreground. */
.lrow.h{min-height:40px;color:var(--fg);font-family:var(--sans);font-size:14px;font-weight:500;text-transform:none;letter-spacing:0}
.lrow .act{font-family:var(--mono);color:var(--fg)}
/* without this the work-type text and the numeric run before it read as one crowded block */
.lrow .wtype{padding-left:32px}
.lrow .why{display:block;font-family:var(--sans);font-size:12px;color:var(--faint);margin-top:3px}
.lrow .sid{font-family:var(--mono);color:var(--muted);font-size:12px}
.badge{font-family:var(--mono);font-size:12px;border:1px solid var(--border);border-radius:6px;padding:2px 8px;color:var(--muted);display:inline-block}
.badge.allow{color:var(--fg);border-color:oklch(1 0 0 / .28)}
.badge.review{color:var(--muted)}
.badge.block{color:var(--danger-chip-fg);background:var(--danger-bg);border-color:var(--danger-border);font-weight:600}
.ledcap{margin-top:14px;font-size:14px;color:var(--muted)}
@media(max-width:860px){.lrow,.lrow.c4{grid-template-columns:1.4fr .8fr}.lrow .usr,.lrow .sid,.lrow.h .usr,.lrow.h .sid{display:none}}
/* token-efficiency card (scene 1 — mirrors console Team Overview) */
.lrow.c6{grid-template-columns:1.3fr .6fr .8fr .7fr .9fr 1fr}
.effhead{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:22px;padding:20px;border-bottom:1px solid var(--border-2)}
.effhead .kpi .n{font-size:34px;font-weight:600;letter-spacing:-.025em;font-variant-numeric:tabular-nums;margin-top:12px}
.effhead .kpi .n small{font-size:14px;font-weight:400;color:var(--muted);letter-spacing:0;margin-left:7px}
.effhead .kpi .tr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:10px}
.effhead .side{display:flex;gap:34px}
.effhead .side .n{font-size:20px;font-weight:600;font-variant-numeric:tabular-nums}
.effhead .side .l{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:4px}
@media(max-width:860px){
.lrow.c6{grid-template-columns:1.5fr .7fr .9fr}
.lrow .wmx,.lrow.h .wmx{display:none}
.effhead{flex-direction:column;align-items:flex-start}
}
/* install */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:36px}
@media(max-width:860px){.steps{grid-template-columns:1fr}}
.step{border:1px solid var(--border);border-radius:var(--radius);padding:24px;background:var(--panel)}
.step .n{font-family:var(--mono);font-size:12px;color:var(--faint)}
.step h4{font-size:16px;font-weight:600;margin:12px 0 0}
.step p{color:var(--muted);font-size:14px;margin:8px 0 0}
.step code{font-family:var(--mono);font-size:14px;color:var(--fg);overflow-wrap:anywhere}
.install-box{margin-top:16px;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel);padding:16px;font-family:var(--mono);font-size:14px;line-height:1.8;max-width:74ch}
.install-box .c{color:var(--muted)}
.install-box .ok{color:var(--fg);margin-right:8px}
.install-box .sp{height:12px}
/* session end / cta */
.endcap{font-family:var(--mono);font-size:12px;color:var(--faint);letter-spacing:.08em;margin-top:6px}
.endcap .ok{color:var(--fg)}
.ctablock h2{font-size:clamp(30px,4.6vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.02;margin:16px 0 0;max-width:18ch}
.ctablock p{color:var(--muted);font-size:16px;margin:18px 0 0;max-width:50ch}