/* Tokens the live hyrax.dev widgets read, scoped to this page so other pages are untouched. */
.v2 {
  --color-rock: #0C0B0A; --color-rockface: #1A1816; --color-stone: #3D3530; --color-bone: #F0E8D8;
  --color-signal: #E8552B; --color-signal-soft: #F47A4F; --color-tan: #C9A87C; --color-tan-soft: #E3CCA8;
  --color-line: rgba(240, 232, 216, 0.08); --color-line-strong: rgba(240, 232, 216, 0.16);
  --color-text-dim: rgba(240, 232, 216, 0.62); --color-text-faint: rgba(240, 232, 216, 0.58);
  --shadow-3: 0 0 0 0.5px rgba(255, 255, 255, 0.08), 0 4px 8px rgba(0, 0, 0, 0.5), 0 16px 48px rgba(0, 0, 0, 0.4);
  --nav-h: 0px; --color-field: #F2EBDD; --color-ink: #0C0B0A; --color-ink-dim: rgba(12, 11, 10, 0.68);
  --color-ink-faint: rgba(12, 11, 10, 0.46); --color-ink-line: rgba(12, 11, 10, 0.14);
}

.v2 {
  --paper: #F2EBDD; --ink: #0C0B0A; --ink-2: rgba(12, 11, 10, 0.68); --ink-3: rgba(12, 11, 10, 0.48);
  --rule: rgba(12, 11, 10, 0.12); --signal: #E8552B; --signal-ink: #C4401B; --bone: #F0E8D8;
  --sans: var(--font-geist), "Geist", system-ui, sans-serif; --mono: var(--font-geist-mono), "Geist Mono", ui-monospace, monospace;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; min-height: 100vh; position: relative;
}
.v2::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90; opacity: 0.2; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.4 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.v2 a { color: inherit; text-decoration: none; }
.v2 .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.v2 .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); }
.v2 .rv.in { opacity: 1; transform: none; }

/* ---------- type + buttons ---------- */
.v2 .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); display: inline-flex; align-items: center; gap: 10px; }
.v2 .eyebrow::before { content: ""; width: 7px; height: 7px; border: 1px solid currentColor; transform: rotate(45deg); }
.v2 .eyebrow.light { color: rgba(240, 232, 216, 0.6); }
.v2 .h2 { font-size: clamp(34px, 3.6vw, 50px); font-weight: 500; letter-spacing: -0.036em; line-height: 1.04; margin: 22px 0 0; text-wrap: balance; }
.v2 .h2.big { font-size: clamp(38px, 4.4vw, 62px); }
.v2 .h2 .dim, .v2 .dim { color: var(--ink-3); }
.v2 .lead { font-size: 18px; color: var(--ink-2); line-height: 1.62; margin: 22px 0 0; max-width: 540px; text-wrap: pretty; }
.v2 .proof { font-family: var(--mono); font-size: 12px; color: var(--ink-3); margin-top: 22px; letter-spacing: 0.01em; }
.v2 .btn { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px; border-radius: 999px; font-size: 15px; font-weight: 500; transition: transform 0.2s var(--ease), background 0.2s, border-color 0.2s; }
.v2 .btn:hover { transform: translateY(-1px); }
.v2 .btn.sm { height: 34px; padding: 0 15px; font-size: 13.5px; }
.v2 .btn.dark { background: var(--ink); color: var(--bone); }
.v2 .btn.bone { background: var(--bone); color: var(--ink); }
.v2 .btn.line { border: 1px solid rgba(12, 11, 10, 0.25); color: var(--ink); }
.v2 .btn.line:hover { border-color: var(--ink); }

/* ---------- announcement + floating rock nav (mark stays on rock) ---------- */
.v2 .announce { background: var(--ink); color: rgba(240, 232, 216, 0.72); font-size: 12.5px; text-align: center; padding: 9px 16px; }
.v2 .announce a { color: var(--bone); border-bottom: 1px solid rgba(240, 232, 216, 0.3); }
.v2 .v2-nav { position: sticky; top: 12px; z-index: 80; height: 0; }
.v2 .nav-pill { max-width: 1216px; margin: 0 auto; transform: translateY(0); height: 58px; display: flex; align-items: center; gap: 40px; padding: 0 12px 0 24px; border-radius: 16px;
  background: rgba(12, 11, 10, 0.94); backdrop-filter: blur(14px); color: var(--bone); box-shadow: 0 10px 30px -12px rgba(12, 11, 10, 0.4); }
.v2 .nav-pill .logo img { height: 22px; display: block; }
.v2 .nav-pill nav { display: flex; gap: 26px; font-size: 14px; color: rgba(240, 232, 216, 0.66); }
.v2 .nav-pill nav a:hover { color: var(--bone); }
.v2 .nav-r { margin-left: auto; display: flex; align-items: center; gap: 14px; font-size: 14px; }
.v2 .signin { color: rgba(240, 232, 216, 0.8); }

/* ---------- blueprint frame: rails + cells with corner marks ---------- */
  .v2 .frame { max-width: 1320px; margin: 0 auto; border-left: 1px solid var(--rule); border-right: 1px solid var(--rule); position: relative; }
.v2 .cell { position: relative; border-top: 1px solid var(--rule); padding: 104px 64px; }
.v2 .cell::before, .v2 .cell::after { content: ""; position: absolute; top: -6px; width: 11px; height: 11px;
  background: linear-gradient(var(--ink), var(--ink)) center / 1px 100% no-repeat, linear-gradient(var(--ink), var(--ink)) center / 100% 1px no-repeat; opacity: 0.45; }
.v2 .cell::before { left: -6px; } .v2 .cell::after { right: -6px; }
.v2 .split { display: grid; grid-template-columns: 1fr 1.08fr; gap: 72px; align-items: center; }

/* ---------- hero ---------- */
.v2 .hero { display: grid; grid-template-columns: 1.08fr 0.92fr; gap: 40px; align-items: center; padding-top: 132px; padding-bottom: 104px; border-top: 0; }
.v2 .hero::before, .v2 .hero::after { display: none; }
.v2 .hero h1 { font-size: clamp(44px, 5vw, 74px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; margin: 0; }
.v2 .typed { display: grid; }
.v2 .typed .ghost, .v2 .typed .live { grid-area: 1 / 1; }
.v2 .typed .ghost { visibility: hidden; }
.v2 .typed .live > span, .v2 .typed .ghost > span { display: block; }
.v2 .acc { color: var(--signal-ink); }
.v2 .caret { display: inline-block; position: relative; width: 3px; height: 0; margin-left: 4px; animation: v2blink 0.85s steps(2, jump-none) infinite; }
.v2 .caret::after { content: ""; position: absolute; left: 0; bottom: -0.08em; width: 3px; height: 0.82em; background: var(--signal); border-radius: 1px; }
.v2 .hero-sub .caret::after { width: 2px; }
@keyframes v2blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
.v2 .hero-sub { font-size: 20px; color: var(--ink-2); margin: 26px 0 0; min-height: 1.5em; letter-spacing: -0.01em; }
.v2 .ctas { display: flex; gap: 10px; margin-top: 38px; opacity: 0; transform: translateY(8px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); }
  .v2 .ctas.in { opacity: 1; transform: none; }
  .v2 .hero-art { display: flex; justify-content: center; }

  /* Product Hunt proof badge — sits below the hero actions, fades in with them.
     Bone card + hairline rule so it reads on the cream field; the PH mark is the
     only warm accent, the rank chip is the eye-anchor. */
  .v2 .ph-badge { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px;
    padding: 9px 9px 9px 13px; border: 1px solid var(--rule); border-radius: 12px;
    background: var(--bone); box-shadow: 0 6px 20px -14px rgba(12, 11, 10, 0.5);
    text-decoration: none; width: fit-content; }
  .v2 .ph-badge-mark { flex: none; }
  .v2 .ph-badge-text { display: flex; flex-direction: column; line-height: 1.25; }
  .v2 .ph-badge-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
  .v2 .ph-badge-title { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -0.01em; }
  .v2 .ph-badge-rank { flex: none; margin-left: 4px; font-family: var(--mono); font-size: 13px; font-weight: 500;
    color: var(--bone); background: var(--ink); border-radius: 8px; padding: 5px 9px; letter-spacing: 0.01em; }

/* the self-building codebase */
.v2 .iso-city { width: 100%; max-width: 520px; overflow: visible; }
.v2 .iso-b path { stroke: rgba(12, 11, 10, 0.62); stroke-width: 1; stroke-linejoin: round; transition: fill 0.6s ease; }
.v2 .iso-b .f-t { fill: #FBF7EF; } .v2 .iso-b .f-l { fill: #E4D7C0; } .v2 .iso-b .f-r { fill: #CDBC9E; }
.v2 .iso-b { opacity: 0; transform: translateY(-46px); transition: transform 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.15), opacity 0.45s ease; }
.v2 .iso-b.in { opacity: 1; transform: none; }
.v2 .iso-b .f-flag { fill: none; stroke: var(--signal); stroke-width: 1.4; stroke-dasharray: 4 3; opacity: 0; transition: opacity 0.3s; }
.v2 .iso-b.flag .f-flag { opacity: 1; animation: v2dash 0.9s linear infinite; }
.v2 .iso-b.flag .f-t.top { fill: #F6DCCF; }
@keyframes v2dash { to { stroke-dashoffset: -14; } }
.v2 .iso-b.in.lift { transform: translateY(-34px); opacity: 0; transition: transform 0.6s ease-in, opacity 0.6s ease-in; }
.v2 .iso-b.in.fresh { animation: v2drop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.2); }
 .v2 .iso-b.fresh .f-t.top { fill: var(--signal); }
 .v2 .iso-b.tap { cursor: pointer; }
 .v2 .iso-b.tap:active .f-t { fill: #F6DCCF; }
 /* The illustrated mascot pops up out of the block: it springs up from behind
    the top face with a little squash-and-stretch, holds while you read what it's
    doing, then drops back down. Drop-shadow grounds it so it doesn't look pasted
    on. transform-origin bottom-center keeps its feet planted on the block. */
 .v2 .iso-hyrax {
   pointer-events: none;
   transform-box: fill-box;
   transform-origin: center bottom;
   filter: drop-shadow(0 6px 6px rgba(12, 11, 10, 0.28));
   animation: v2mascotpop 2.6s cubic-bezier(0.22, 0.9, 0.3, 1.1) forwards;
 }
 @keyframes v2mascotpop {
   0% { transform: translateY(24px) scaleY(0.62) scaleX(1.04); opacity: 0; }
   10% { opacity: 1; }
   24% { transform: translateY(-6px) scaleY(1.05) scaleX(0.97); }
   34% { transform: translateY(0) scale(1); }
   48% { transform: translateY(-3px); }
   60% { transform: translateY(0); }
   82% { transform: translateY(0) scale(1); opacity: 1; }
   100% { transform: translateY(26px) scaleY(0.6); opacity: 0; }
 }
 @media (prefers-reduced-motion: reduce) {
   .v2 .iso-hyrax { animation-duration: 0.01ms; }
 }
.v2 .iso-b.fresh .f-l { fill: #F0A37F; } .v2 .iso-b.fresh .f-r { fill: #D9794F; }
@keyframes v2drop { from { transform: translateY(-40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- map ---------- */
.v2 .points { display: grid; grid-template-columns: 1fr 1fr; margin-top: 44px; border-top: 1px solid var(--rule); }
.v2 .point { padding: 22px 22px 22px 0; border-bottom: 1px solid var(--rule); cursor: default; }
.v2 .point:nth-child(2n) { padding-left: 22px; padding-right: 0; border-left: 1px solid var(--rule); }
.v2 .point .mini { width: 84px; height: 64px; color: var(--ink); margin-bottom: 10px; }
.v2 .point .mini svg { width: 100%; height: 100%; overflow: visible; }
.v2 .point h3 { font-size: 16px; font-weight: 500; margin: 0; letter-spacing: -0.01em; }
.v2 .point p { font-size: 14px; color: var(--ink-2); margin: 6px 0 0; line-height: 1.5; }
.v2 .point.play h3 { color: var(--signal-ink); }

/* ---------- why now ---------- */
.v2 .why { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: end; }
.v2 .why-r .lead { margin-top: 0; }
.v2 .built { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin: 28px 0 10px; }
.v2 .chips { display: flex; flex-wrap: wrap; gap: 8px; }
.v2 .chips span { font-family: var(--mono); font-size: 13px; border: 1px solid var(--rule); border-radius: 999px; padding: 6px 14px; background: rgba(255, 255, 255, 0.35); }

/* ---------- chapters ---------- */
 .v2 .chapter { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 56px; align-items: center; }
.v2 .chapter.flip .ch-copy { order: 2; }
 .v2 .chapter.flip { grid-template-columns: 1.3fr 0.7fr; }
.v2 .ch-num { font-family: var(--mono); font-size: 13px; color: var(--ink-3); display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.v2 .ch-num::after { content: ""; flex: 0 0 56px; height: 1px; background: var(--rule); }
.v2 .pill { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--rule); background: rgba(255, 255, 255, 0.45); }
.v2 .pill i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.v2 .pill.tan { color: #8A6A3E; } .v2 .pill.stone { color: #3D3530; } .v2 .pill.bone { color: #6E6254; }
.v2 .pill.signal { color: var(--signal-ink); } .v2 .pill.rock { color: #0C0B0A; }
.v2 .ch-h { font-size: clamp(32px, 3.2vw, 46px); font-weight: 500; letter-spacing: -0.032em; line-height: 1.06; margin: 18px 0 0; text-wrap: balance; }
.v2 .ch-p { font-size: 18px; color: var(--ink-2); line-height: 1.6; margin: 16px 0 0; max-width: 440px; }

/* tall textured panels on isometric paper, one small live card on each */
 .v2 .panel { position: relative; isolation: isolate; border-radius: 20px; min-height: 620px; padding: 40px 22px; display: flex; align-items: center; justify-content: center; overflow: hidden;
  background-color: var(--pbg); color: var(--pfg);
  box-shadow: inset 0 0 0 1px rgba(12, 11, 10, 0.08); }
.v2 .panel::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(70% 60% at 30% 20%, rgba(255, 255, 255, 0.22), transparent 70%); }
.v2 .panel.tall { min-height: 700px; }
.v2 .panel.tan { --pbg: #E1CFB1; --gl: rgba(12, 11, 10, 0.065); --pfg: #0C0B0A; }
.v2 .panel.bone { --pbg: #E9DFCC; --gl: rgba(12, 11, 10, 0.06); --pfg: #0C0B0A; }
.v2 .panel.stone { --pbg: #3D3530; --gl: rgba(240, 232, 216, 0.07); --pfg: #F0E8D8; }
.v2 .panel.signal { --pbg: #D4502A; --gl: rgba(255, 255, 255, 0.11); --pfg: #FBEFE6; }
.v2 .panel.rock { --pbg: #171412; --gl: rgba(240, 232, 216, 0.05); --pfg: #F0E8D8; }
.v2 .panel-art { position: absolute; right: -40px; bottom: -30px; width: 380px; height: 300px; opacity: 0.3; z-index: -1; animation: v2float 7s ease-in-out infinite; }
.v2 .chapter.flip .panel-art { right: auto; left: -40px; }
.v2 .panel-art svg { width: 100%; height: 100%; overflow: visible; }
@keyframes v2float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
 .v2 .panel-card { position: relative; width: 100%; max-width: 740px; border-radius: 14px; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 30px 80px -30px rgba(12, 11, 10, 0.55), 0 8px 24px -12px rgba(12, 11, 10, 0.35); }
.v2 .panel-card > * { margin: 0 !important; }

/* bigger, easier-to-follow cursors in the live widgets */
.v2 .pscur svg { transform: scale(1.5); transform-origin: 2px 2px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.45)); }

/* ---------- shape motion: .play (auto) or hover ---------- */
.v2 svg .map-edge { stroke-dasharray: 3 4; stroke-opacity: 0.5; transition: stroke-opacity 0.5s ease; }
.v2 .play .map-edge, .v2 .shape:hover .map-edge { stroke-dasharray: none; stroke-opacity: 0.95; }
.v2 svg .map-pin { transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); }
.v2 .play .map-pin, .v2 .shape:hover .map-pin { transform: translateY(-6px); }
.v2 svg .map-node { fill-opacity: 0.55; transition: fill-opacity 0.4s, fill 0.4s; }
.v2 .play .map-node, .v2 .shape:hover .map-node { fill-opacity: 1; }
.v2 .play .map-node.key, .v2 .shape:hover .map-node.key { fill: var(--signal); }
.v2 svg .audit-cube { transition: transform 0.55s var(--ease); }
.v2 svg .audit-cube circle { fill-opacity: 0.55; }
.v2 .play .c1, .v2 .shape:hover .c1 { transform: translate(-7px, -3px); }
.v2 .play .c2, .v2 .shape:hover .c2 { transform: translate(0, -7px); }
.v2 .play .c3, .v2 .shape:hover .c3 { transform: translate(7px, -3px); }
.v2 .play .c4, .v2 .shape:hover .c4 { transform: translate(7px, 3px); }
.v2 .play .c5, .v2 .shape:hover .c5 { transform: translate(-7px, 3px); }
.v2 .play .c6, .v2 .shape:hover .c6 { transform: translate(0, 7px); }
.v2 svg .verify-glow { stroke-opacity: 0.16; transition: stroke-opacity 0.5s, stroke-width 0.5s; }
.v2 svg .verify-line { stroke-opacity: 0.75; transition: stroke-opacity 0.5s, stroke-width 0.5s, stroke 0.5s; }
.v2 .play .verify-glow, .v2 .shape:hover .verify-glow { stroke-opacity: 0.4; stroke-width: 11; }
.v2 .play .verify-line, .v2 .shape:hover .verify-line { stroke-opacity: 1; stroke-width: 2.4; stroke: var(--signal); }
.v2 svg .learn-new { opacity: 0.35; transition: transform 0.65s cubic-bezier(0.34, 1.28, 0.64, 1), opacity 0.4s; }
.v2 svg .learn-new path { stroke-dasharray: 3 3; }
.v2 .play .learn-new, .v2 .shape:hover .learn-new { transform: translateY(22px); opacity: 1; }
.v2 .play .learn-new path, .v2 .shape:hover .learn-new path { stroke-dasharray: none; }
.v2 .play .learn-new .slab-top, .v2 .shape:hover .learn-new .slab-top { fill: var(--signal); fill-opacity: 0.85; }

/* ---------- verification ---------- */
.v2 .steps { list-style: none; padding: 0; margin: 40px 0 0; border-top: 1px solid var(--rule); max-width: 460px; }
.v2 .steps li { display: flex; align-items: center; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--rule); font-size: 17px; color: var(--ink-3); transition: color 0.35s; }
.v2 .steps .n { font-family: var(--mono); font-size: 12px; width: 22px; }
.v2 .steps .dot { margin-left: auto; width: 9px; height: 9px; border-radius: 50%; border: 1px solid rgba(12, 11, 10, 0.3); transition: all 0.35s; }
.v2 .steps li.done, .v2 .steps li.now { color: var(--ink); }
.v2 .steps li.done .dot { background: var(--ink); border-color: var(--ink); }
.v2 .steps li.now .dot { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 0 5px rgba(232, 85, 43, 0.18); }

/* ---------- blueprint diagram ---------- */
.v2 .bp-head { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: end; }
.v2 .bp-head .lead { margin: 0; }
.v2 .diagram { display: grid; grid-template-columns: repeat(5, 1fr); margin-top: 72px; }
.v2 .dnode { position: relative; text-align: center; padding: 0 8px; }
.v2 .dslab { width: 132px; height: 88px; overflow: visible; transition: transform 0.5s cubic-bezier(0.34, 1.4, 0.64, 1); }
.v2 .dslab path { stroke: rgba(12, 11, 10, 0.6); stroke-width: 1; transition: fill 0.4s; }
.v2 .dslab .d-top { fill: #FBF7EF; } .v2 .dslab .d-l { fill: #E4D7C0; } .v2 .dslab .d-r { fill: #CDBC9E; }
.v2 .dslab .d-n { font-family: var(--mono); font-size: 10px; fill: rgba(12, 11, 10, 0.55); }
.v2 .dnode.now .dslab { transform: translateY(-8px); }
.v2 .dnode.now .d-top { fill: var(--signal); } .v2 .dnode.now .d-n { fill: #fff; }
.v2 .dnode.done .d-top { fill: #EBDDC3; }
.v2 .d-t { font-size: 15px; font-weight: 500; margin-top: 14px; }
.v2 .d-s { font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); margin-top: 6px; }
.v2 .d-link { position: absolute; top: 44px; left: calc(50% + 70px); right: calc(-50% + 70px); height: 1px; background: repeating-linear-gradient(90deg, rgba(12, 11, 10, 0.3) 0 4px, transparent 4px 8px); }
.v2 .d-link i { position: absolute; left: 0; top: -1px; height: 3px; width: 0; background: var(--signal); border-radius: 2px; transition: width 1.05s linear; }
.v2 .dnode.done .d-link i { width: 100%; }
.v2 .integrations { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 72px; border-top: 1px solid var(--rule); }
.v2 .integrations div { padding: 24px 24px 0 0; }
.v2 .integrations div + div { padding-left: 24px; border-left: 1px solid var(--rule); }
.v2 .integrations h4 { margin: 0; font-size: 16px; font-weight: 500; }
.v2 .integrations p { margin: 6px 0 0; font-size: 14px; color: var(--ink-2); }

/* ---------- security tiles ---------- */
.v2 .tiles { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-top: 48px; }
.v2 .tile { border: 1px solid var(--rule); border-radius: 16px; padding: 22px 20px 24px; background: rgba(255, 255, 255, 0.35); transition: transform 0.4s var(--ease), background 0.4s; }
.v2 .tiles.in .tile { animation: v2rise 0.7s var(--ease) both; animation-delay: var(--d); }
@keyframes v2rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.v2 .tile:hover { transform: translateY(-4px); background: rgba(255, 255, 255, 0.6); }
.v2 .tile-mark svg { width: 34px; height: 34px; fill: none; stroke: var(--ink); stroke-width: 1; stroke-linejoin: round; }
.v2 .tile:hover .tile-mark svg path:first-child { fill: var(--signal); fill-opacity: 0.2; }
.v2 .tile h4 { margin: 18px 0 0; font-size: 15px; font-weight: 500; }
.v2 .tile p { margin: 6px 0 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; }

/* ---------- pricing ---------- */
.v2 .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 56px; }
.v2 .plan { border: 1px solid var(--rule); border-radius: 20px; padding: 36px; background: rgba(255, 255, 255, 0.4); }
.v2 .plan.dark { background: var(--ink); color: var(--bone); border-color: var(--ink); }
.v2 .pname { font-size: 15px; font-weight: 500; }
.v2 .price { font-size: 58px; font-weight: 500; letter-spacing: -0.035em; line-height: 1; margin-top: 18px; }
.v2 .price span { font-size: 16px; opacity: 0.55; margin-left: 4px; letter-spacing: 0; }
.v2 .pdesc { margin: 14px 0 0; font-size: 15px; opacity: 0.72; }
.v2 .plan ul { list-style: none; padding: 0; margin: 28px 0 32px; border-top: 1px solid var(--rule); }
.v2 .plan.dark ul, .v2 .plan.dark li { border-color: rgba(240, 232, 216, 0.12); }
.v2 .plan li { padding: 13px 0; border-bottom: 1px solid var(--rule); font-size: 15px; }
.v2 .plan li::before { content: "+"; font-family: var(--mono); color: var(--signal); margin-right: 10px; }
.v2 .plan li small { display: block; font-size: 13px; opacity: 0.6; margin-top: 3px; }
.v2 .note { font-size: 13px; color: var(--ink-3); margin-top: 22px; }

/* ---------- faq ---------- */
.v2 .faq { display: grid; grid-template-columns: 1fr 1.5fr; gap: 72px; }
.v2 details { border-bottom: 1px solid var(--rule); }
.v2 details:first-child { border-top: 1px solid var(--rule); }
.v2 summary { list-style: none; cursor: pointer; padding: 22px 0; font-size: 17px; display: flex; justify-content: space-between; }
.v2 summary::-webkit-details-marker { display: none; }
.v2 summary::after { content: "+"; font-family: var(--mono); color: var(--ink-3); transition: transform 0.3s; }
.v2 details[open] summary::after { transform: rotate(45deg); }
.v2 details p { margin: 0 0 24px; color: var(--ink-2); font-size: 15px; line-height: 1.65; max-width: 640px; }

/* ---------- closing, footer ---------- */
.v2 .cta { background: var(--ink); color: var(--bone); text-align: center; padding: 150px 64px; overflow: hidden; }
.v2 .cta::before, .v2 .cta::after { background: linear-gradient(var(--bone), var(--bone)) center / 1px 100% no-repeat, linear-gradient(var(--bone), var(--bone)) center / 100% 1px no-repeat; }
.v2 .cta h2 { font-size: clamp(44px, 5.4vw, 76px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.02; margin: 22px auto 0; max-width: 860px; position: relative; }
.v2 .cta > p { color: rgba(240, 232, 216, 0.7); font-size: 18px; margin: 22px 0 0; position: relative; }
.v2 .cta .btn { margin-top: 38px; position: relative; }
.v2 .cta .fine { font-size: 13px; color: rgba(240, 232, 216, 0.5); margin-top: 18px; }
.v2 .cta-art { position: absolute; left: 50%; top: 50%; width: 760px; height: 560px; transform: translate(-50%, -48%); color: var(--bone); opacity: 0.08; animation: v2float 8s ease-in-out infinite; }
.v2 .cta-art svg { width: 100%; height: 100%; }
.v2 .v2-foot { background: var(--ink); color: var(--bone); padding: 80px 0 32px; }
.v2 .foot-in, .v2 .foot-base { max-width: 1216px; margin: 0 auto; padding: 0 32px; }
.v2 .foot-in { display: grid; grid-template-columns: 1.6fr repeat(4, 1fr); gap: 32px; }
.v2 .fb img { height: 22px; }
.v2 .iru { font-family: var(--mono); font-size: 11px; color: rgba(240, 232, 216, 0.5); margin-top: 10px; }
.v2 .fb p { color: rgba(240, 232, 216, 0.7); font-size: 14px; margin: 14px 0 0; max-width: 260px; }
.v2 .fc h6 { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: rgba(240, 232, 216, 0.45); font-weight: 400; margin: 0 0 14px; }
.v2 .fc a { display: block; font-size: 14px; color: rgba(240, 232, 216, 0.72); padding: 4px 0; }
.v2 .foot-base { display: flex; justify-content: space-between; margin-top: 64px; padding-top: 20px; border-top: 1px solid rgba(240, 232, 216, 0.1); font-size: 13px; color: rgba(240, 232, 216, 0.5); }
.v2 .foot-base div { display: flex; gap: 20px; }
.v2 .mock-tag { position: fixed; right: 16px; bottom: 16px; z-index: 95; font-family: var(--mono); font-size: 11px; color: var(--bone); background: rgba(12, 11, 10, 0.85); padding: 6px 10px; border-radius: 6px; }

@media (max-width: 1000px) {
  .v2 { overflow-x: hidden; }
  .v2 .hero, .v2 .split, .v2 .why, .v2 .chapter, .v2 .bp-head, .v2 .faq { grid-template-columns: 1fr; }
  /* .chapter.flip (0,3,0) outweighs the .chapter reset above (0,2,0), so the
     flipped rows keep their 1.3fr/0.7fr desktop grid on phones and clip the
     mock off the right edge. Reset the flip grid at matching specificity. */
  .v2 .chapter.flip { grid-template-columns: 1fr; }
  .v2 .chapter.flip .ch-copy { order: 0; }
  .v2 .cell { padding: 72px 24px; }
  /* The floating nav (36px strip + inset pill) occupies ~150px at the top on
     phones; the shared .cell padding above would tuck the hero h1 under it, so
     the hero keeps a taller top pad to clear the nav. */
  .v2 .hero { padding-top: 160px; }
  .v2 .diagram, .v2 .tiles { grid-template-columns: 1fr 1fr; gap: 24px; }
  .v2 .d-link { display: none; }
  .v2 .integrations, .v2 .plans, .v2 .foot-in { grid-template-columns: 1fr 1fr; }
  .v2 .nav-pill nav { display: none; }
}
/* Phones: the two-column grids above can't shrink below their content's min
   width at ~390px and push the page wider than the viewport, so collapse them
   to a single column. */
@media (max-width: 640px) {
  .v2 .plans, .v2 .integrations, .v2 .diagram, .v2 .tiles { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .v2 *, .v2 *::before, .v2 *::after { animation: none !important; transition: none !important; }
  .v2 .rv, .v2 .iso-b { opacity: 1; transform: none; }
}