/* Halyard public site. Direction: Felt Tip x Cutout (Hoist) plus a Corporate view.
   Layers, always in this order: paper (cut shapes), marker (SVG filter), words (never filtered). */

:root {
  --ink: #191919;
  --paper: #FFF7E8;
  --sky: #A9D3F5;
  --yellow: #FFDF43;
  --pink: #F6A0C8;
  --blue: #2864F0;
  --blue-600: #1F55D6;
  --mint: #70D9B2;
  --coral: #FF6248;
  --legal-ground: #EFE6D4;
  --muted-on-paper: #5A554C;
  --f-disp: 'Darumadrop One', 'Arial Rounded MT Bold', sans-serif;
  --f-ui: 'Atkinson Hyperlegible', system-ui, sans-serif;
  --f-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --f-corp: Inter, system-ui, sans-serif;
  /* Corporate view tokens (dark) */
  --c-bg: #0B0B0C; --c-bg2: #131316; --c-bg3: #1B1B1F; --c-fg: #F4F4F5; --c-mut: #A1A1AA;
  --c-bd: #26262A; --c-bd2: #3A3A40; --c-acc: #2864F0; --c-acc2: #7FA3FF;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--f-ui); }
html[data-mode="corp"] body { background: var(--c-bg); }
a { color: var(--blue-600); }
a:hover { color: var(--ink); }
img, svg { max-width: 100%; }
:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* Mode switch: Hoist is the default and the no-JS view. */
html[data-mode="corp"] .v-hoist { display: none !important; }
html:not([data-mode="corp"]) .v-corp { display: none !important; }
html:not(.js) .mode-switch { display: none !important; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--yellow); color: var(--ink); padding: 10px 14px; font-weight: 700; border: 2px solid var(--ink); }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.svg-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Hoist type and paper ---------- */
.disp { font-family: var(--f-disp); font-weight: 400; }
.ui { font-family: var(--f-ui); }
.mono { font-family: var(--f-mono); }
.mk { filter: url(#marker); }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 56px); }
.cutA { clip-path: polygon(0.5% 6%, 30% 0%, 64% 4%, 99% 0.5%, 100% 88%, 70% 100%, 36% 95%, 1% 100%); }
.cutB { clip-path: polygon(2% 0%, 98% 5%, 100% 96%, 40% 100%, 0% 92%); }
.cutC { clip-path: polygon(0% 3%, 52% 0%, 100% 2%, 98% 100%, 2% 98%); }
.hy { background: repeating-linear-gradient(-36deg, #F2B705 0 4px, #FFE27A 4px 10px); }
.hp { background: repeating-linear-gradient(52deg, #F28DBB 0 6px, transparent 6px 10px); }
.hb { background: repeating-linear-gradient(40deg, #2864F0 0 5px, transparent 5px 9px); }
.hm { background: repeating-linear-gradient(-30deg, #45C496 0 7px, transparent 7px 11px); }
.fill { position: absolute; inset: 0; }
.box { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.eyebrow { font-family: var(--f-mono); font-size: 13px; font-weight: 600; letter-spacing: 0.1em; }
.h2 { margin: 0; font-size: clamp(44px, 6vw, 84px); line-height: 0.95; }
.h3 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: 0.95; }
.copy { font-size: 18px; line-height: 1.55; margin: 0; max-width: 46ch; }
.spec { font-family: var(--f-mono); font-size: 13px; line-height: 20px; }
.rel { position: relative; }
.tilt-1 { transform: rotate(-1deg); }
.tilt-15 { transform: rotate(-1.5deg); }
.tilt1 { transform: rotate(1deg); }

/* The button: paper plate, yellow cut, marker outline, level words. */
.btn { position: relative; display: inline-flex; text-decoration: none; color: var(--ink); padding: 16px 26px; }
.btn:hover { color: var(--ink); }
.btn .plate { position: absolute; left: 7px; top: 7px; right: -7px; bottom: -7px; background: var(--ink); }
.btn .face { position: absolute; inset: 0; background: var(--yellow); }
.btn .label { position: relative; font-family: var(--f-disp); }
.btn-sm { padding: 10px 20px; }
.btn-md { padding: 12px 20px; }

.blob { position: relative; width: 72px; height: 72px; flex: none; display: flex; align-items: center; justify-content: center; }
.blob svg { position: relative; }
.blob .n { position: relative; font-family: var(--f-disp); font-size: 32px; }

/* Header */
.h-header { position: relative; display: flex; align-items: center; gap: 14px 24px; flex-wrap: wrap; padding: 14px 22px; }
.h-logo { position: relative; font-family: var(--f-disp); font-size: 40px; color: var(--ink); text-decoration: none; transform: rotate(-3deg); }
.h-logo span { color: #F28DBB; } /* logotype, exempt from text contrast */
.h-nav { position: relative; display: flex; gap: 8px 22px; flex-wrap: wrap; font-weight: 700; font-size: 16px; }
.h-nav a { color: var(--ink); text-decoration: none; }
.h-nav a:hover { text-decoration: underline; }
.mode-switch { position: relative; margin-left: auto; display: flex; gap: 6px; }
.mode-switch button { height: 36px; padding: 0 12px; font: 700 14px var(--f-ui); border: 2px solid var(--ink); cursor: pointer; color: var(--ink); background: transparent; }
.mode-switch button[aria-pressed="true"] { background: var(--yellow); }

/* Hero */
.hero { position: relative; background: var(--sky); padding-bottom: 72px; }
.hero-grid { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; padding-top: 44px; }
.hero-text { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 26px; }
.hero h1 { margin: 0; font-size: clamp(46px, 7vw, 104px); line-height: 0.9; transform: rotate(-2deg); transform-origin: left; overflow-wrap: break-word; }
.hl { position: relative; display: inline-block; }
.hl .hy { position: absolute; left: -8px; right: -10px; top: 20%; bottom: 2%; }
.hl .w { position: relative; }
.hero-art { --pl: 4px; --hs: 230px; --hl: 24px; flex: 1 1 460px; min-width: 0; max-width: 640px; position: relative; display: flex; flex-direction: column; padding: 48px 12px 0 var(--pl); }
.bubble { position: relative; flex: 0 0 auto; margin: 96px 8px 0 auto; width: 200px; height: 124px; transform: rotate(6deg); }
.bubble .hp { position: absolute; inset: 10px; border-radius: 50%; }
.bubble .t { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 20px; line-height: 1.05; }
/* Hero workflow: a simplified editor window drawn in one inline SVG (crisp at any DPR, scales with the
   column). The markup ships in the end state; site.js steps through the classes s-sel, s-deb, s-hdr,
   s-run, s-done and s-graded on a loop. Reduced motion and no-JS keep the end state. */
.hw-slot { position: relative; z-index: 1; }
.hw-frame { position: relative; z-index: 1; transform: rotate(1deg); }
.hw-frame .hw-pause { position: absolute; top: 2.75%; right: 1.6%; transform: translateY(-50%); z-index: 2; margin: 0; padding: 2px 8px; font: 600 10px/1.3 Inter, system-ui, sans-serif; color: #ddd; background: #383838; border: 1px solid #4a4a4a; border-radius: 4px; cursor: pointer; }
.hw-frame .hw-pause:hover { background: #474747; color: #fff; }
.hw-frame .hw-pause:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* Corporate view: the same mock (moved here by site.js), flat, no Hoist, rope or bubble. */
.c .c-hw.w { padding-top: 56px; }
.c-hw .hw-slot { max-width: 880px; margin: 0 auto; aspect-ratio: 640 / 400; }
.c-hw .hw-frame { transform: none; }
.c-hw .hw-plate { display: none; }
.c-hw .hw { border-radius: 12px; box-shadow: 0 0 0 1px var(--c-bd2), 0 30px 80px rgba(0, 0, 0, .55); }
.hw-plate { position: absolute; left: 10px; top: 10px; right: -10px; bottom: -10px; background: var(--ink); border-radius: 12px; }
.hw { position: relative; display: block; width: 100%; height: auto; border-radius: 10px; }
.hw-under { position: relative; display: flex; align-items: flex-start; margin-top: calc(var(--hs) * -.24); }
.hw-rope { position: absolute; top: 0; left: calc(var(--pl) + var(--hl) + var(--hs) * .1333 - 8px); width: 16px; height: 64px; }
.hw-hoist { position: relative; flex: 0 0 auto; width: var(--hs); height: calc(var(--hs) * 420 / 360); margin-left: var(--hl); }
.hw-hoist-body { transform-box: fill-box; transform-origin: 0 50%; }
.hw text { font-family: Inter, system-ui, sans-serif; fill: #ddd; }
.hw .m { font-family: var(--f-mono); }
.hw .hw-t7 { font-size: 7.4px; }
.hw .hw-t8 { font-size: 8px; }
.hw .hw-t9 { font-size: 9px; }
.hw .hw-dim { fill: #999; }
.hw .hw-b { font-weight: 600; fill: #e8e8e8; }
.hw .hw-tl { font-size: 5.5px; fill: #777; }
.hw .hw-h1 { font-size: 12px; font-weight: 600; fill: #eee; }
.hw .hw-h2 { font-size: 6.5px; font-weight: 600; letter-spacing: .6px; fill: #888; }
.hw .hw-cn { font-size: 7.5px; font-weight: 500; fill: #fff; }
.hw .hw-badge { font-size: 7px; font-weight: 700; fill: #191919; }
.hw .hw-badge-s { font-size: 6px; }
.hw .hw-pill-t { font-size: 7.5px; fill: #6dca6e; }
.hw .hw-btn-t { font-size: 7.4px; font-weight: 600; fill: #fff; }
.hw-cb { fill: #2a2a2a; stroke: #555; }
.hw-sel { fill: #2a2a2a; stroke: #3a3a3a; }
.hw-th { fill: #222; }
.hw-th-on { fill: #2b2f3a; }
.hw-tr { fill: #181818; stroke: #222; }
.hw-clip { fill: #4C5FA8; stroke: #2C3A70; }
.hw-aclip { fill: #2F6B52; }
.hw-music { fill: #34507A; }
.hw-hdrclip { fill: #B8477A; stroke: #7A2A50; }
.hw-selbox { fill: rgba(255, 255, 255, .14); stroke: var(--yellow); stroke-width: 2; opacity: 0; }
.hw-pill-bg { fill: #1e3a1f; }
.hw-btn-bg { fill: url(#hwBtn); stroke: #1f5b94; }
.hw-bar { transform-box: fill-box; transform-origin: 0 50%; }
.hw-ck, .hw-deb-opts, .hw-hdr-opts, .hw-est, .hw-est-hdr, .hw-prog, .hw-new, .hw-rich, .hw-mon-tag, .hw-cur, .hw-ripple { opacity: 0; }
.hw-new { transform: translateY(-14px); }
.hw.s-sel .hw-selbox { opacity: 1; }
.hw.s-deb .hw-ck-deb, .hw.s-deb .hw-deb-opts, .hw.s-deb .hw-est { opacity: 1; }
.hw.s-deb .hw-g1 { transform: translateY(24px); }
.hw.s-deb .hw-hdr-hint { opacity: 0; }
.hw.s-hdr .hw-ck-hdr, .hw.s-hdr .hw-hdr-opts, .hw.s-hdr .hw-est-hdr { opacity: 1; }
.hw.s-hdr .hw-g2 { transform: translateY(24px); }
.hw.s-run .hw-prog, .hw.s-done .hw-prog { opacity: 1; }
.hw.s-run .hw-pill-bg { fill: #1f2c3a; }
.hw.s-run .hw-pill-t { fill: #6db1ca; }
.hw.s-run .hw-btn-bg { fill: #2a2a2a; stroke: #333; }
.hw.s-run .hw-btn-t { fill: #777; }
.hw.s-done .hw-new { opacity: 1; transform: none; }
.hw.s-graded .hw-rich, .hw.s-graded .hw-mon-tag { opacity: 1; }
.hw.s-live .hw-cur { opacity: 1; }
.hw.s-dip .hw-ui { opacity: 0; }
.hw-ripple { fill: none; stroke: var(--yellow); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; }
.hw-cur-i { transform-box: fill-box; transform-origin: 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .hw-ck, .hw-deb-opts, .hw-hdr-opts, .hw-est, .hw-est-hdr, .hw-hdr-hint, .hw-prog, .hw-selbox, .hw-mon-tag { transition: opacity .2s ease; }
  .hw-g1, .hw-g2 { transition: transform .3s cubic-bezier(.2, .8, .2, 1); }
  .hw-new { transition: transform .5s cubic-bezier(.3, 1.6, .5, 1), opacity .15s ease; }
  .hw-rich { transition: opacity 1.2s ease; }
  .hw-ui { transition: opacity .35s ease; }
  .hw-cur { transition: transform .9s cubic-bezier(.45, .05, .25, 1), opacity .3s ease; }
  .hw-cur.click .hw-ripple { animation: hw-rip .45s ease-out; }
  .hw-cur.click .hw-cur-i { animation: hw-press .22s ease-out; }
  .hw.hw-instant *, .hw.hw-instant { transition: none !important; }
  .hero-art.hw-cheer .hw-hoist-body { animation: hoist-cheer 1.1s ease-in-out; }
  .hero-art.hw-cheer .bubble { animation: bubble-pop .5s ease-out; }
}
@keyframes hoist-cheer { 20% { transform: rotate(-7deg); } 45% { transform: rotate(5deg); } 70% { transform: rotate(-3deg); } }
@keyframes bubble-pop { 40% { transform: rotate(6deg) scale(1.08); } }
@keyframes hw-rip { from { opacity: .9; transform: scale(.3); } to { opacity: 0; transform: scale(1.7); } }
@keyframes hw-press { 50% { transform: scale(.82); } }
.torn { position: absolute; left: 0; bottom: -1px; width: 100%; height: 40px; }

/* Feature rows */
.feat { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; }
.feat.rev { flex-direction: row-reverse; }
.ftext { flex: 1 1 340px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.fcmp { flex: 1.6 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.cmp-frame { position: relative; padding: 10px; }
.cmp { --p: 50; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); user-select: none; }
.cmp > svg, .cmp .layer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.cmp .layer { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--p) * 1%) 0 0); pointer-events: none; }
.cmp input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 2; }
.cmp .knobwrap { position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 1%); width: 4px; margin-left: -2px; background: var(--paper); box-shadow: 0 0 0 2px var(--ink); pointer-events: none; }
.cmp .knob { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: var(--yellow); border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; }
.cmp input:focus-visible ~ .knobwrap .knob { outline: 3px solid var(--blue); outline-offset: 3px; }
.tag { position: absolute; top: 12px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; padding: 3px 8px; pointer-events: none; z-index: 1; }
.tag.l { left: 12px; background: var(--paper); color: var(--ink); }
.tag.r { right: 12px; background: var(--mint); color: var(--ink); }
.cap { font-family: var(--f-mono); font-size: 12px; line-height: 18px; }

/* Timeline strip */
.tl { position: relative; padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; background: #1E1E1E; color: #F2ECE0; }
.tl-row { position: relative; height: 56px; display: flex; align-items: stretch; }
.tl-unused { flex: 3; border: 2px dashed #6A655C; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: #B9B1A3; padding: 0 4px; }
.tl-handle { flex: 0.6; border: 2px solid var(--ink); outline: 2px solid var(--yellow); outline-offset: -2px; }
.tl-clip { flex: 4; background: var(--blue); border: 2px solid var(--paper); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 12px; font-weight: 600; color: var(--paper); padding: 0 4px; }
.tl-key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12px; }
.sw { display: inline-block; width: 12px; height: 12px; vertical-align: -2px; }

/* Panels and tables */
.panel { position: relative; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.ruled { border: 2px solid var(--ink); background: #FFFFFF; overflow-x: auto; }
.ruled table { width: 100%; border-collapse: collapse; min-width: 560px; font-size: 17px; }
.ruled th { background: var(--ink); color: var(--paper); text-align: left; padding: 14px 18px; }
.ruled td { padding: 14px 18px; border-top: 2px solid var(--ink); vertical-align: top; }
.ruled tr.hi td { background: #FFF0B8; }
.pill { font-family: var(--f-mono); font-size: 12px; border: 1.5px solid var(--ink); padding: 1px 5px; margin-left: 6px; white-space: nowrap; }
.fps { display: flex; flex-wrap: wrap; gap: 12px; }
.fps div { border: 2px solid var(--ink); padding: 10px 16px; display: flex; flex-direction: column; gap: 2px; }
.fps b { font-size: 20px; }
.fps .mono { font-size: 13px; }
.speeds { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 28px; }
.credits, .factgrid { border: 2px solid var(--ink); background: #FFFFFF; padding: 24px 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 20px 32px; }
.credits h3, .factgrid h3 { margin: 0 0 6px; font-size: 18px; }
.credits p, .factgrid p { margin: 0; font-size: 16px; line-height: 1.5; }
.credits .num { font-family: var(--f-mono); font-size: 22px; font-weight: 600; }

/* Dark band */
.dark { position: relative; padding: 88px 0; margin-bottom: -1px; }
.dark .wrap { position: relative; color: var(--paper); display: flex; flex-direction: column; gap: 28px; }
.code { display: block; background: #2A2A2A; color: var(--paper); border: 2px solid var(--paper); padding: 14px 16px; font-size: 14px; line-height: 21px; overflow-x: auto; margin: 0; }
.code.nw { white-space: nowrap; }

.nolist { margin: 0; padding: 0; list-style: none; }
.steps { display: flex; flex-direction: column; gap: 20px; }
.steps li { display: flex; gap: 18px; align-items: flex-start; }
.steps li > span:last-child { font-size: 18px; line-height: 1.5; padding-top: 12px; }

.prompt-pre { position: relative; margin: 0; background: var(--ink); color: #F2ECE0; padding: 18px; font-size: 13px; line-height: 20px; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy-btn { height: 34px; padding: 0 14px; background: var(--yellow); border: 2px solid var(--ink); font: 700 14px var(--f-ui); color: var(--ink); cursor: pointer; }

/* Footer (shared by every page) */
.site-foot { position: relative; padding: 44px 0 48px; }
.site-foot .bg { position: absolute; inset: 0; background: var(--yellow); }
.foot-in { position: relative; display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: flex-end; }
.foot-in a { color: var(--ink); }
.foot-legal { display: flex; flex-wrap: wrap; gap: 10px 18px; font-size: 15px; font-weight: 700; }
.foot-meta { flex-basis: 100%; margin: 0; font-size: 15px; line-height: 1.5; display: flex; flex-wrap: wrap; gap: 6px 18px; }


/* ---------- Legal template (WebFlows) ---------- */
.legal-body { background: var(--legal-ground); }
.legal-shell { max-width: 1328px; margin: 0 auto; padding: clamp(16px, 4vw, 56px); }
.legal-card { position: relative; background: var(--paper); }
.legal-card .ol { position: absolute; inset: 0; border: 3px solid var(--ink); filter: url(#rough-sm); pointer-events: none; }
.bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; padding: 16px 28px; border-bottom: 3px solid var(--ink); }
.bar-logo { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.bar-logo .disp { font-size: 26px; }
.bar nav { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 15px; font-weight: 700; }
.bar nav a { color: var(--ink); text-decoration: none; }
.bar nav a[aria-current="page"], .bar nav a:hover { text-decoration: underline; }
.legal-cols { display: flex; gap: 56px; padding: 44px 56px 56px; }
.toc { width: 240px; flex: none; display: flex; flex-direction: column; gap: 10px; font-size: 15px; align-self: flex-start; position: sticky; top: 24px; }
.toc a { color: var(--ink); }
.lab { font-family: var(--f-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.08em; }
.legal { flex: 1; min-width: 0; max-width: 68ch; display: flex; flex-direction: column; gap: 16px; font-size: 17px; line-height: 1.6; }
.legal p, .legal ul, .legal ol { margin: 0; }
.legal ul, .legal ol { padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; }
.legal h1 { margin: 0; font-family: var(--f-disp); font-weight: 400; font-size: clamp(52px, 8vw, 72px); line-height: 0.9; }
.legal h2 { margin: 16px 0 0; font-size: 24px; line-height: 1.25; scroll-margin-top: 16px; }
.legal .meta { font-family: var(--f-mono); font-size: 13px; }
.short { background: var(--yellow); border: 3px solid var(--ink); padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; }
.short b { font-size: 17px; }
.legal table { width: 100%; border-collapse: collapse; font-size: 16px; }
.legal th, .legal td { text-align: left; padding: 10px 12px; border: 2px solid var(--ink); vertical-align: top; }
.legal th { background: var(--ink); color: var(--paper); }
.legal .tablewrap { overflow-x: auto; }
.legal .tablewrap table { min-width: 520px; }
.dashed { border: 2px dashed var(--ink); padding: 16px; font-family: var(--f-mono); font-size: 14px; line-height: 21px; }
.simple-main { padding: 64px 56px 72px; display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.simple-main h1 { margin: 0; font-family: var(--f-disp); font-weight: 400; font-size: clamp(48px, 8vw, 72px); line-height: 0.9; }
.simple-main h2 { margin: 12px 0 0; font-family: var(--f-disp); font-weight: 400; font-size: clamp(36px, 6vw, 52px); line-height: 0.95; scroll-margin-top: 16px; }
.simple-main h3 { margin: 12px 0 0; font-size: 22px; line-height: 1.25; }
.simple-main p { margin: 0; font-size: 18px; line-height: 1.55; }

/* ---------- Corporate view ---------- */
.c { font-family: var(--f-corp); -webkit-font-smoothing: antialiased; background: var(--c-bg); color: var(--c-fg); }
.c a { color: inherit; }
.c .m { font-family: var(--f-mono); }
.c .w { max-width: 1200px; margin: 0 auto; padding: 0 40px; }
.c :focus-visible { outline-color: var(--c-acc2); }
.kbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 6px; font-size: 15px; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer; font-family: inherit; }
.c .kbtn.pri { background: var(--c-acc); color: #FFFFFF; }
.c .kbtn.ghost { background: transparent; color: var(--c-fg); border-color: var(--c-bd2); }
.c .kbtn.inv { background: var(--c-fg); color: var(--c-bg); }
.eb { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.kh2 { margin: 0; font-size: clamp(32px, 4.4vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 600; }
.seg { display: inline-flex; border: 1px solid var(--c-bd); border-radius: 8px; padding: 3px; gap: 2px; background: var(--c-bg2); }
.seg button { height: 32px; padding: 0 14px; border-radius: 6px; border: 0; background: transparent; color: var(--c-mut); font: 600 14px var(--f-corp); cursor: pointer; }
.seg button[aria-pressed="true"] { background: var(--c-fg); color: var(--c-bg); }
.card { border: 1px solid var(--c-bd); border-radius: 12px; background: var(--c-bg2); padding: 28px; }
.mut { color: var(--c-mut); }
.acc2 { color: var(--c-acc2); }
.c-head { border-bottom: 1px solid var(--c-bd); background: var(--c-bg); }
.c-head .w { min-height: 68px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 32px; padding-top: 12px; padding-bottom: 12px; }
.c-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; font-size: 20px; letter-spacing: -0.02em; }
.c-nav { display: flex; flex-wrap: wrap; gap: 8px 28px; font-size: 15px; font-weight: 500; color: var(--c-mut); }
.c-nav a { text-decoration: none; }
.c-nav a:hover { color: var(--c-fg); }
.c-head-r { margin-left: auto; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 16px; }
.c-hero { padding: 96px 0 72px; }
.c-hero h1 { margin: 0; font-size: clamp(40px, 6.5vw, 72px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; max-width: 15ch; }
.c-cmp { border: 1px solid var(--c-bd); border-radius: 14px; overflow: hidden; background: var(--c-bg2); }
.c-cmp-bar { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 8px 16px; border-bottom: 1px solid var(--c-bd); flex-wrap: wrap; }
.dot { width: 11px; height: 11px; border-radius: 50%; background: var(--c-bd2); }
.c-cmp-img { position: relative; height: clamp(220px, 40vw, 460px); }
.c-tag { position: absolute; top: 14px; font-size: 12px; padding: 4px 8px; border-radius: 4px; }
.c-feat { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 24px; }
.c-feat .card { flex: 1 1 300px; display: flex; flex-direction: column; gap: 14px; }
.c-feat h3 { margin: 0; font-size: 24px; letter-spacing: -0.02em; }
.c-feat p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--c-mut); }
.c-price { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 16px; }
.c-price .card { flex: 1 1 230px; background: var(--c-bg); display: flex; flex-direction: column; gap: 10px; }
.c-price .amt { font-family: var(--f-mono); font-size: 26px; }
.badge { font-family: var(--f-mono); font-size: 11px; padding: 3px 8px; border-radius: 4px; font-weight: 500; }
.c-code { display: block; background: #0B0B0C; color: #F4F4F5; border: 1px solid #26262A; border-radius: 10px; padding: 18px 20px; font-size: 14px; line-height: 22px; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }
.q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0; background: transparent; border: 0; border-top: 1px solid var(--c-bd); color: var(--c-fg); font: 600 18px var(--f-corp); text-align: left; cursor: pointer; }
.faq-a { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--c-mut); max-width: 62ch; }
.c-foot { border-top: 1px solid var(--c-bd); padding: 56px 0 40px; }
.c-foot-cols { display: flex; gap: 32px 64px; flex-wrap: wrap; font-size: 15px; line-height: 2.1; color: var(--c-mut); }
.c-foot-cols div { display: flex; flex-direction: column; }
.c-foot-cols a { text-decoration: none; }
.c-foot-cols a:hover { text-decoration: underline; }

/* ---------- Small screens ---------- */
@media (max-width: 800px) {
  .legal-cols { flex-direction: column; gap: 28px; padding: 28px 20px 40px; }
  .toc { width: auto; position: static; }
  .simple-main { padding: 40px 20px 48px; }
  .bar { padding: 14px 20px; }
}
@media (max-width: 600px) {
  .bubble { width: 150px; height: 100px; margin-top: 56px; }
  .bubble .t { font-size: 16px; }
  .hero-art { --pl: 0px; --hs: 150px; --hl: 10px; padding-right: 0; padding-top: 44px; }
  .hw-frame { transform: none; margin: 0 -8px; }
  .hw-plate { left: 6px; top: 6px; right: -6px; bottom: -6px; }
  .hw-frame .hw-pause { padding: 0 5px; font-size: 7px; line-height: 1.25; border-radius: 3px; }
  .c .c-hw.w { padding-top: 40px; }
  .c-hw .hw-slot { margin: 0 -8px; }
  .c-hw .hw-frame { margin: 0; }
  .h-logo { font-size: 34px; }
  .mode-switch { margin-left: 0; }
  .feat { gap: 28px; }
  .fcmp { flex-basis: 100%; }
  .tag { font-size: 10px; top: 8px; padding: 2px 6px; }
  .tag.l { left: 8px; } .tag.r { right: 8px; }
  .c .w { padding: 0 16px; }
  .c-hero { padding: 56px 0 48px; }
  .c-head-r { margin-left: 0; }
  .card { padding: 22px; }
  .panel { padding: 22px; }
  .dark { padding: 64px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  /* Paper snaps, marker never animates. */
  .btn .face, .btn .plate { transition: transform 90ms cubic-bezier(.3, 1.5, .5, 1); }
  .btn:hover .face { transform: translate(-2px, -2px); }
}

/* The fine print under the credits box: plain, large, no effects (this is billing). */
.fineprint { margin-top: 24px; padding: 28px 32px; border: 2px solid #191919; background: #FFFFFF; color: #191919; font-family: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; }
.fineprint h3 { margin: 0 0 14px; font-size: 24px; font-weight: 700; color: inherit; }
.fineprint ul { margin: 0; padding-left: 24px; display: flex; flex-direction: column; gap: 12px; }
.fineprint li { font-size: 18px; line-height: 1.6; color: inherit; }
.fineprint a { color: inherit; text-decoration: underline; }
.fineprint.corp { background: #131316; color: #F4F4F5; border: 1px solid #3A3A40; margin-top: 8px; }

/* ---------- Demo videos (before and after) ---------- */
/* Footage is 2.40:1. Stills show without JS; site.js swaps in looping videos. */
.vcmp { aspect-ratio: 12 / 5; }
.vcmp > img, .vcmp > video, .vcmp .layer > img, .vcmp .layer > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.vcmp.has-video > img, .vcmp.has-video .layer > img { visibility: hidden; }
.vcmp .knobwrap { z-index: 1; }
.vtools { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: center; }
.vtools [hidden] { display: none !important; }
.vbtn { min-height: 36px; padding: 0 14px; font: 700 14px var(--f-ui); color: var(--ink); background: var(--paper); border: 2px solid var(--ink); cursor: pointer; }
.vbtn[data-vfull] { background: var(--yellow); }
.vbtn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.vview { display: inline-flex; gap: 0; }
.vview .vbtn + .vbtn { border-left: 0; }
.cap a { color: inherit; }

/* Corporate dressing for the same slider. */
.c-fig { margin: 0; display: flex; flex-direction: column; gap: 12px; }
.c-fig .cmp { background: #000; }
.c-fig .knobwrap { background: #FFFFFF; box-shadow: none; width: 2px; margin-left: -1px; }
.c-fig .knob { background: #FFFFFF; border: 0; color: #0B0B0C; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.c-fig .tag { font-family: var(--f-mono); border-radius: 4px; top: 14px; }
.c-fig .tag.l { background: #000000; color: #FFFFFF; }
.c-fig .tag.r { background: #FFFFFF; color: #000000; }
.c-fig .vbtn { font-family: var(--f-corp); font-weight: 600; border-radius: 6px; border: 1px solid var(--c-bd2); background: transparent; color: var(--c-fg); }
.c-fig .vbtn[data-vfull] { background: var(--c-fg); color: var(--c-bg); border-color: var(--c-fg); }
.c-fig .vbtn[aria-pressed="true"] { background: var(--c-fg); color: var(--c-bg); }
.c-fig .vview .vbtn:first-child { border-radius: 6px 0 0 6px; }
.c-fig .vview .vbtn:last-child { border-radius: 0 6px 6px 0; }
.c-cap { font-size: 13px; line-height: 1.55; max-width: 90ch; }
.c-demos { display: flex; flex-direction: column; gap: 40px; margin-top: 32px; }

/* Full resolution viewer */
html.vv-open { overflow: hidden; }
.vv { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #111111; color: #F2ECE0; display: flex; flex-direction: column; font-family: var(--f-ui); }
.vv:not([open]) { display: none; }
.vv::backdrop { background: #111111; }
.vv-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 10px 16px; border-bottom: 2px solid #2A2A2A; }
.vv-title { margin: 0 auto 0 0; font: 700 16px var(--f-ui); }
.vv-zoom { display: inline-flex; }
.vv-zoom button, .vv-btn { min-height: 36px; padding: 0 14px; font: 700 14px var(--f-ui); color: #F2ECE0; background: transparent; border: 2px solid #F2ECE0; cursor: pointer; }
.vv-zoom button + button { border-left: 0; }
.vv-zoom button[aria-pressed="true"] { background: var(--yellow); color: var(--ink); }
.vv-close { background: var(--yellow); color: var(--ink); border-color: var(--yellow); }
.vv :focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
.vv-stage { position: relative; flex: 1; min-height: 0; overflow: hidden; background: #000; touch-action: none; user-select: none; }
.vv-stage.can-pan { cursor: grab; }
.vv-stage.panning { cursor: grabbing; }
.vv-canvas { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.vv-canvas video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vv-canvas.px video { image-rendering: pixelated; }
.vv-before { position: absolute; inset: 0; }
.vv-tag { position: absolute; top: 10px; font-family: var(--f-mono); font-size: 12px; font-weight: 600; padding: 3px 8px; pointer-events: none; }
.vv-tag.l { left: 10px; background: var(--paper); color: var(--ink); }
.vv-tag.r { right: 10px; background: var(--mint); color: var(--ink); }
.vv-split { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.6); pointer-events: none; }
.vv-knob { position: absolute; top: 50%; left: 50%; width: 48px; height: 48px; margin: -24px 0 0 -24px; border-radius: 50%; background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); display: flex; align-items: center; justify-content: center; font-weight: 700; cursor: ew-resize; pointer-events: auto; touch-action: none; }
.vv-hint { margin: 0; padding: 8px 16px 10px; font-size: 13px; line-height: 1.4; color: #B9B1A3; }
@media (max-width: 600px) {
  .vv-title { flex-basis: 100%; font-size: 14px; }
  .vv-tag { font-size: 10px; }
  .vbtn { font-size: 13px; padding: 0 10px; }
}
/* Tags never cross the middle: on narrow frames they wrap instead. */
.vcmp .tag { max-width: calc(50% - 16px); line-height: 1.3; }
.vv-tag { max-width: calc(50% - 30px); line-height: 1.3; }
@media (max-width: 600px) {
  .vcmp .tag, .vv-tag { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* Zoom: both sides scale the same way around the same point; the split line stays put. */
.vcmp > img, .vcmp > video, .vcmp .layer > img, .vcmp .layer > video { transform: scale(var(--z, 1)); transform-origin: var(--fx, 50%) var(--fy, 50%); }
@media (prefers-reduced-motion: no-preference) {
  .vcmp > img, .vcmp > video, .vcmp .layer > img, .vcmp .layer > video { transition: transform 200ms ease; }
}
/* Nothing filters, blends or overlays the videos. */
.vzoomset { display: inline-flex; }
.vzoomset .vbtn + .vbtn { border-left: 0; }
.c-fig .vzoomset .vbtn:first-child { border-radius: 6px 0 0 6px; }
.c-fig .vzoomset .vbtn:last-child { border-radius: 0 6px 6px 0; border-left: 0; }

/* Fixed crop (data-crop): both sides show the same region of the frame. */
.vcmp.crop > img, .vcmp.crop > video, .vcmp.crop .layer > img, .vcmp.crop .layer > video {
  right: auto; bottom: auto; object-fit: fill; transform: none;
  width: calc(100% / var(--cw)); height: calc(100% / var(--ch));
  left: calc(-100% * var(--cx) / var(--cw)); top: calc(-100% * var(--cy) / var(--ch));
}

/* ---------- HDR exposure control (exposure.js) ---------- */
/* Ships hidden in the markup; exposure.js only unhides it once WebGL2, the manifest fetch and
   the RGBE decode have all worked, so a visitor without them keeps the plain before/after
   slider untouched. */
.exp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; visibility: hidden; }
.vcmp.exp-active .exp-canvas { visibility: visible; }
.vcmp.exp-active > img, .vcmp.exp-active > video, .vcmp.exp-active .layer { visibility: hidden; }
.exp { display: flex; flex-direction: column; gap: 10px; margin-top: 2px; }
.exp[hidden] { display: none; }
.exp.exp-disabled { opacity: 0.45; pointer-events: none; }
.exp-copy { margin: 0; font-family: var(--f-mono); font-size: 13px; line-height: 19px; color: var(--muted-on-paper); max-width: 70ch; }
.exp-hist-wrap { position: relative; }
.exp-hist-cv { display: block; width: 100%; height: 86px; background: #15120B; }
.exp-band { position: absolute; top: 0; bottom: 0; left: 0; width: 25%; cursor: ew-resize; touch-action: none; border-left: 2px solid var(--yellow); border-right: 2px solid var(--yellow); }
.exp-band:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.exp-legend { display: flex; gap: 16px; font-family: var(--f-mono); font-size: 12px; color: var(--muted-on-paper); }
.exp-key { display: inline-flex; align-items: center; min-height: 32px; padding: 0 2px; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.exp-key[aria-pressed="false"] { opacity: 0.4; text-decoration: line-through; }
.exp-key:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.exp-sw { display: inline-block; width: 10px; height: 10px; margin-right: 5px; vertical-align: -1px; }
.exp-sw.b { background: transparent; border: 2px solid #141414; box-sizing: border-box; }
.exp-sw.a { background: var(--blue); }
.exp-strip { display: flex; gap: 6px; flex-wrap: wrap; }
.exp-thumb { padding: 0; line-height: 0; border: 2px solid var(--ink); background: transparent; cursor: pointer; }
.exp-thumb img { display: block; width: 64px; height: 36px; }
.exp-thumb[aria-pressed="true"] { border-color: var(--blue); box-shadow: 0 0 0 2px var(--yellow); }
.exp-controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.exp-readout { font-family: var(--f-mono); font-weight: 700; font-size: 14px; min-width: 60px; }

/* Corporate dressing for the same control. */
.c-fig .exp-copy, .c-fig .exp-legend { color: var(--c-mut); font-family: var(--f-corp); }
.c-fig .exp-hist-cv { background: #000000; border-radius: 6px; }
.c-fig .exp-sw.b { background: transparent; border-color: var(--c-fg); }
.c-fig .exp-sw.a { background: var(--c-acc); }
.c-fig .exp-band { border-color: var(--c-acc2); }
.c-fig .exp-thumb { border: 1px solid var(--c-bd2); border-radius: 4px; overflow: hidden; }
.c-fig .exp-thumb[aria-pressed="true"] { border-color: var(--c-acc2); box-shadow: 0 0 0 2px var(--c-acc); }
.c-fig .exp-readout { font-family: var(--f-mono); }

@media (max-width: 600px) {
  .exp-hist-cv { height: 64px; }
  .exp-thumb img { width: 48px; height: 27px; }
  .exp-copy { font-size: 12px; }
}