/* Gantry: mission control behind frosted glass. Tokens from Chad's DESIGN (6).md, with text brightened for legibility
   (body ~85% white, secondary #a6a6ab) per Chad's rule that words read clearly on dark. No orange anywhere. */
@font-face { font-family: 'Inter'; src: url('/assets/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
:root {
  --void: #0b0c0e; --graphite: #131416; --charcoal: #1f1f21; --smoke: #3c3d3e;
  --text: #d9d9dc; --head: #ffffff; --muted: #b8b8bd; --faint: #9c9ca2; --bone: #f2f2f2; --ink: #26272a;
  --blue: #3b82f6; --arc: #60a5fa; --ring: #93c5fd; --mint: #4ade80; --coral: #f87171;
  --line: rgba(255, 255, 255, .085); --line-2: rgba(255, 255, 255, .14); --soft: rgba(255, 255, 255, .055);
  --r-sm: 8.77px; --r: 12px; --r-lg: 16px; --pill: 10px;
  --card: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 .5px rgba(255, 255, 255, .07), 0 20px 44px rgba(0, 0, 0, .14), 0 4px 10px rgba(0, 0, 0, .08);
  --panel: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 .5px rgba(255, 255, 255, .07), 0 16px 36px rgba(0, 0, 0, .18);
  --max: 1080px; --gap: 96px; --ease: cubic-bezier(.2, .7, .2, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--void); color: var(--text); font: 440 15px/1.55 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; font-feature-settings: 'ss01' on, 'ss03' on, 'cv11' on; letter-spacing: -0.012em; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--head); }
p a, .lede a, .src a, .muted a, .fine a { color: var(--arc); }
p a:hover { color: var(--ring); }
h1, h2, h3, h4 { color: var(--head); font-weight: 400; margin: 0; }
h1 { font-size: clamp(40px, 6.2vw, 64px); line-height: .98; letter-spacing: -0.028em; }
h2 { font-size: clamp(28px, 4vw, 42px); line-height: 1.12; letter-spacing: -0.024em; }
h3 { font-size: 17px; font-weight: 480; letter-spacing: -0.02em; }
.h-sm { font-size: 20px; font-weight: 450; letter-spacing: -0.02em; margin: 6px 0 14px; }
p { margin: 0 0 12px; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 0 20px; }
.muted { color: var(--muted); }
.mono { font-family: ui-monospace, 'SF Mono', Menlo, monospace; font-size: 12px; letter-spacing: 0; color: var(--muted); }
.lede { font-size: 18px; line-height: 1.5; color: var(--muted); font-weight: 450; letter-spacing: -0.02em; max-width: 640px; }
.fine { font-size: 13px; color: var(--faint); margin-top: 10px; }
.center { text-align: center; justify-content: center; margin-left: auto; margin-right: auto; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.eyebrow .ic { color: var(--blue); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 3px rgba(74, 222, 128, .14), 0 0 8px rgba(74, 222, 128, .55); display: inline-block; flex: none; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--bone); color: var(--ink); padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px; }
.ic { flex: none; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 18px; border-radius: var(--pill); font-weight: 450; font-size: 14px; line-height: 1; font-family: inherit; letter-spacing: -0.02em; border: 0; cursor: pointer; transition: background .2s, transform .2s var(--ease), color .2s; white-space: nowrap; }
.btn-bone { background: var(--bone); color: var(--ink); box-shadow: 0 1px 4px rgba(0, 0, 0, .1), 0 0 1px rgba(0, 0, 0, .1); }
.btn-bone:hover { background: #fff; color: #111; transform: translateY(-1px); }
.btn-ghost { background: var(--soft); color: var(--head); box-shadow: inset 0 0 0 .5px var(--line); }
.btn-ghost:hover { background: rgba(255, 255, 255, .1); }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.btn-danger { background: rgba(248, 113, 113, .1); color: var(--coral); box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .35); }
.cta-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; }

/* nav */
.nav { position: sticky; top: 0; z-index: 50; height: 68px; transition: background .25s, box-shadow .25s, backdrop-filter .25s; }
.nav.scrolled { background: rgba(11, 12, 14, .72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 .5px 0 rgba(255, 255, 255, .07); }
.nav-in { max-width: calc(var(--max) + 40px); margin: 0 auto; padding: 0 20px; height: 68px; display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; gap: 9px; color: var(--head); font-size: 16px; font-weight: 500; letter-spacing: -0.02em; }
.nav-links { display: flex; align-items: center; gap: 4px; margin: 0 auto; }
.nl, .dd-btn { color: rgba(255, 255, 255, .86); font-weight: 440; font-size: 14px; line-height: 1; font-family: inherit; padding: 9px 12px; border-radius: 8px; background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; letter-spacing: -0.02em; }
.nl:hover, .dd-btn:hover, .dd.open .dd-btn { background: var(--soft); color: var(--head); }
.is-active { color: var(--head); }
.nav-cta { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.dd { position: relative; }
.dd-panel { position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(6px); background: rgba(19, 20, 22, .96); backdrop-filter: blur(16px); border-radius: 14px; box-shadow: var(--panel); padding: 8px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .22s var(--ease); }
.dd.open .dd-panel { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.dd-product { width: 420px; }
.dd-ports { width: 460px; }
.dd-item { display: flex; gap: 12px; padding: 10px 12px; border-radius: 10px; }
.dd-item:hover { background: var(--soft); }
.dd-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: rgba(59, 130, 246, .08); box-shadow: inset 0 0 0 .5px rgba(59, 130, 246, .25); flex: none; }
.dd-tx { display: flex; flex-direction: column; gap: 2px; }
.dd-nm { color: var(--head); font-size: 14px; font-weight: 460; display: flex; align-items: center; gap: 8px; }
.dd-ln { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.pill-s { font-style: normal; font-size: 10px; font-weight: 500; letter-spacing: 0; padding: 1px 6px; border-radius: 5px; color: var(--muted); box-shadow: inset 0 0 0 .5px var(--line-2); }
.pill-s.live { color: var(--mint); box-shadow: inset 0 0 0 .5px rgba(74, 222, 128, .45); }
.dd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 4px; }
.dd-mini { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; font-size: 13.5px; color: var(--text); }
.dd-mini small { color: var(--faint); font-size: 12px; }
.dd-mini:hover { background: var(--soft); }
.dd-row { display: flex; gap: 4px; padding: 6px 4px 2px; border-top: .5px solid var(--line); margin-top: 4px; }
.dd-row a { font-size: 13px; padding: 7px 10px; border-radius: 8px; color: var(--muted); }
.dd-row a:hover { background: var(--soft); color: var(--head); }
.nav-burger { display: none; width: 38px; height: 38px; border-radius: 10px; background: var(--soft); border: 0; position: relative; cursor: pointer; }
.nav-burger span { position: absolute; left: 11px; right: 11px; height: 1.5px; background: #fff; transition: transform .25s; }
.nav-burger span:first-child { top: 15px; } .nav-burger span:last-child { top: 22px; }
.nav-burger[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav-mobile { display: grid; align-content: start; gap: 2px; padding: 8px 16px 18px; background: var(--void); border-bottom: .5px solid var(--line); height: calc(100dvh - 68px); overflow-y: auto; }
.nav-mobile a { padding: 12px 6px; font-size: 16px; color: var(--head); border-bottom: .5px solid var(--line); }
.nav-mobile a.btn-bone { color: var(--ink); border-bottom: 0; margin-top: 10px; }
.nav-mobile .btn { margin-top: 12px; border: 0; }

/* hero */
.hero { padding-top: 48px; }
.hero-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: 40px; align-items: end; }
.hero-l h1 { max-width: 640px; font-size: clamp(38px, 5vw, 58px); line-height: 1.02; }
.hero-r .lede { font-size: 17.5px; }
.harbour { position: relative; margin-top: 44px; height: clamp(320px, 50vw, 560px); }
.harbour canvas { width: 100%; height: 100%; display: block; }
.harbour::before, .harbour::after { content: ''; position: absolute; left: 0; right: 0; height: 70px; pointer-events: none; z-index: 1; }
.harbour::before { top: 0; background: linear-gradient(var(--void), rgba(11, 12, 14, 0)); }
.harbour::after { bottom: 0; background: linear-gradient(rgba(11, 12, 14, 0), var(--void)); }
.harbour-key { position: absolute; left: 0; right: 0; bottom: 6px; display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text); z-index: 2; }
.harbour-key i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; }
.k-work { background: var(--blue); box-shadow: 0 0 8px rgba(59, 130, 246, .7); }
.k-wait { background: transparent; box-shadow: inset 0 0 0 1.2px var(--ring); }
.scene-label { position: absolute; z-index: 2; pointer-events: none; transform: translate(-50%, -100%); white-space: nowrap; font-size: 11.5px; color: var(--head); background: rgba(11, 12, 14, .82); padding: 4px 8px; border-radius: 7px; box-shadow: inset 0 0 0 .5px var(--line-2); transition: opacity .3s; }
.scene-label small { color: var(--muted); margin-left: 6px; }
.scene-label::after { content: ''; position: absolute; left: 50%; top: 100%; width: .5px; height: 18px; background: rgba(255, 255, 255, .35); }

/* sections */
.sec { margin-top: var(--gap); }
.sec-tight { margin-top: 28px; }
.sec-head { max-width: 760px; margin-bottom: 36px; }
.sec-head h2 { margin-bottom: 14px; }
.page-hero { padding-top: 56px; padding-bottom: 28px; }
.page-hero h1 { font-size: clamp(34px, 5vw, 52px); line-height: 1.04; max-width: 900px; margin-bottom: 16px; }
.crumbs { font-size: 13px; color: var(--faint); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.checked { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); margin-top: 6px; }
.stat-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.stat-row > span { background: var(--graphite); box-shadow: var(--card); border-radius: 10px; padding: 9px 13px; font-size: 13.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; }
.stat-row em { font-style: normal; color: var(--head); font-weight: 480; }

/* cards and panels */
.panel, .term-card, .board, .plan, .who-card, .fact, .clock-card, .calc, .inline-cta, .hub-block { background: var(--graphite); border-radius: var(--r); box-shadow: var(--card); }
.panel { padding: 22px 24px; margin-top: 18px; }
.panel h3 { margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.panel h3 .ic { color: var(--blue); }
.panel.warn { box-shadow: var(--card), inset 0 0 0 .5px rgba(248, 113, 113, .3); }
.grid2 { display: grid; grid-template-columns: 1.2fr 1fr; gap: 18px; align-items: start; }
.grid2 > *, .split > *, .tabs > *, .app-shell > *, .calc > *, .feat-grid > * { min-width: 0; }
.grid2 > div > .panel:first-child, .grid2 > .panel { margin-top: 0; }
.mt { margin-top: 22px; }
.term-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.term-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; transition: transform .3s var(--ease), box-shadow .3s; }
.term-card:hover { transform: translateY(-2px); box-shadow: var(--card), inset 0 0 0 .5px rgba(59, 130, 246, .45); }
.tc-top { display: flex; flex-direction: column; } .tc-top b { color: var(--head); font-weight: 460; font-size: 14.5px; } .tc-top small { color: var(--faint); font-size: 12.5px; }
.tc-nums { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.tc-nums em, .bd-nums em { font-style: normal; color: var(--head); font-size: 22px; font-weight: 400; letter-spacing: -0.03em; margin-right: 5px; }
.tc-note { font-size: 12.5px; color: var(--coral); display: flex; gap: 6px; align-items: flex-start; line-height: 1.4; }
.tc-note.quiet { color: var(--faint); }
.boards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.board { padding: 20px 22px; display: flex; flex-direction: column; gap: 14px; transition: transform .3s var(--ease), box-shadow .3s; }
.board:hover { transform: translateY(-2px); box-shadow: var(--card), inset 0 0 0 .5px rgba(59, 130, 246, .45); }
.bd-head { display: flex; justify-content: space-between; align-items: flex-start; } .bd-head b { color: var(--head); font-weight: 460; font-size: 16px; display: block; } .bd-head small { color: var(--faint); font-size: 12.5px; } .bd-head .ic { color: var(--faint); }
.bd-nums { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; font-size: 12px; color: var(--muted); }
.bd-nums span { display: flex; flex-direction: column; }
.bd-next { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--muted); border-top: .5px solid var(--line); padding-top: 12px; }
.bd-next b { color: var(--text); font-weight: 460; }
.bd-note { font-size: 12.5px; color: var(--coral); display: flex; gap: 6px; }
.hub-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 18px; }
.hub-links a { display: flex; gap: 12px; align-items: flex-start; background: var(--graphite); box-shadow: var(--card); border-radius: var(--r); padding: 16px 18px; }
.hub-links .ic { color: var(--blue); margin-top: 2px; }
.hub-links b { color: var(--head); font-weight: 460; display: block; } .hub-links small { color: var(--muted); font-size: 12.5px; }
.hub-block { padding: 20px 22px 8px; margin-bottom: 16px; }
.hb-head { display: flex; align-items: baseline; gap: 10px; }
.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 24px; margin: 22px 0 0; box-shadow: var(--card), inset 0 0 0 .5px rgba(59, 130, 246, .3); }
.inline-cta b { color: var(--head); font-weight: 460; font-size: 16px; } .inline-cta p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.empty { padding: 26px; text-align: center; color: var(--muted); font-size: 14px; border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--line); }

/* tables */
.tt { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.tt-search { display: flex; align-items: center; gap: 8px; background: var(--charcoal); border-radius: 9px; padding: 0 10px; height: 34px; color: var(--faint); flex: 1; min-width: 200px; max-width: 320px; box-shadow: inset 0 0 0 .5px var(--line); }
.tt-search input { background: none; border: 0; color: var(--head); font: inherit; font-size: 13.5px; width: 100%; outline: none; }
.chips { display: flex; gap: 4px; flex-wrap: wrap; }
.sort-sel { display: none; align-items: center; gap: 8px; font-size: 12.5px; color: var(--muted); margin-left: auto; }
.sort-sel select { background: var(--charcoal); color: var(--head); border: 0; box-shadow: inset 0 0 0 .5px var(--line-2); border-radius: 8px; height: 30px; padding: 0 8px; font-family: inherit; font-size: 13px; }
.chip { height: 30px; padding: 0 11px; border-radius: 8px; background: none; color: var(--muted); border: 0; box-shadow: inset 0 0 0 .5px var(--line); font-weight: 440; font-size: 12.5px; font-family: inherit; cursor: pointer; }
.chip.on, .chip:hover { color: var(--head); background: var(--soft); box-shadow: inset 0 0 0 .5px var(--line-2); }
.tbl-wrap { overflow-x: auto; border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--line); -webkit-overflow-scrolling: touch; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.tbl th { text-align: left; font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px 12px; border-bottom: .5px solid var(--line); white-space: nowrap; background: rgba(255, 255, 255, .015); position: sticky; top: 0; }
.tbl th[data-sort] { cursor: pointer; user-select: none; }
.tbl th[data-sort]:hover { color: var(--head); }
.tbl th.asc::after { content: ' ↑'; color: var(--blue); } .tbl th.desc::after { content: ' ↓'; color: var(--blue); }
.tbl td { padding: 10px 12px; border-bottom: .5px solid rgba(255, 255, 255, .05); vertical-align: top; color: var(--text); }
.tbl tbody tr { transition: background .15s; }
.tbl tbody tr:hover { background: rgba(255, 255, 255, .03); }
.tbl tr[data-href] { cursor: pointer; }
.tbl .r { text-align: right; font-variant-numeric: tabular-nums; }
.tbl .strong { color: var(--head); font-weight: 460; }
.tbl .strong a:hover { color: var(--arc); }
.tbl .sub { display: block; font-size: 12px; color: var(--faint); margin-top: 2px; }
.tbl .sub.risk, .risk { color: var(--coral); }
.tbl .muted { font-size: 12.5px; }
.st { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 500; padding: 2px 7px; border-radius: 5.26px; letter-spacing: 0; white-space: nowrap; }
.st i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; }
.st-live { color: var(--mint); box-shadow: inset 0 0 0 .5px rgba(74, 222, 128, .5); background: rgba(74, 222, 128, .06); }
.st-wait { color: var(--ring); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .4); }
.st-done { color: var(--muted); box-shadow: inset 0 0 0 .5px var(--line-2); }
.st-warn { color: var(--coral); box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .45); }
.shift { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 500; margin-left: 6px; padding: 0 5px; border-radius: 4px; }
.shift.late { color: var(--coral); background: rgba(248, 113, 113, .08); } .shift.early { color: var(--mint); background: rgba(74, 222, 128, .07); }
.blk { display: inline-block; font-size: 12px; margin: 0 6px 4px 0; padding: 1px 6px; border-radius: 5px; box-shadow: inset 0 0 0 .5px var(--line-2); color: var(--head); }
.blk em { font-style: normal; color: var(--muted); }
.src { font-size: 12.5px; color: var(--faint); margin-top: 10px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.notices { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.notices li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--head); }
.notices li .ic { color: var(--coral); margin-top: 3px; }
.notices em { font-style: normal; color: var(--faint); font-size: 12.5px; margin-left: auto; white-space: nowrap; padding-left: 10px; }
.ptab-list { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: .5px solid var(--line); }
.ptab { background: none; border: 0; color: var(--muted); font-weight: 440; font-size: 14px; font-family: inherit; padding: 10px 12px; cursor: pointer; position: relative; }
.ptab.on { color: var(--head); } .ptab.on::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -.5px; height: 1.5px; background: #fff; }
.ptab-panel { display: none; } .ptab-panel.on { display: block; animation: fade .35s var(--ease); }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.fc-panel { display: flex; gap: 24px; justify-content: space-between; flex-wrap: wrap; }
.fc-panel > div:first-child { max-width: 480px; }
.fc-stats { display: flex; gap: 12px; flex-wrap: wrap; }
.fc-stats > div { background: var(--charcoal); border-radius: 10px; padding: 12px 14px; min-width: 200px; }
.fc-stats span { display: block; font-size: 12px; color: var(--faint); } .fc-stats b { color: var(--head); font-weight: 450; font-size: 14px; }
.timeline, .hist, .kv { list-style: none; margin: 0; padding: 0; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: 2px 14px; padding: 10px 0; border-bottom: .5px solid var(--line); font-size: 13.5px; }
.timeline time, .hist time { color: var(--faint); font-size: 12.5px; }
.timeline b { color: var(--head); font-weight: 460; } .timeline span { grid-column: 2; color: var(--muted); font-size: 13px; }
.hist li { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: .5px solid rgba(255, 255, 255, .04); }
.hist b { color: var(--head); font-weight: 450; }
.kv li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: .5px solid var(--line); font-size: 13.5px; }
.kv span { color: var(--muted); } .kv b { color: var(--head); font-weight: 450; text-align: right; } .kv small { display: block; color: var(--faint); font-weight: 400; font-size: 12px; }

/* home sections */
.clocks { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.clock-card { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.cc-k { display: flex; gap: 8px; align-items: center; font-size: 13px; color: var(--muted); margin-bottom: 8px; } .cc-k .ic { color: var(--blue); }
.clock-card b { color: var(--head); font-weight: 400; font-size: 30px; letter-spacing: -0.03em; } .clock-card b small { font-size: 13px; color: var(--muted); letter-spacing: -0.01em; }
.clock-card p { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.calc { margin-top: 14px; padding: 24px; display: grid; grid-template-columns: 1.6fr 1fr; gap: 24px; align-items: center; box-shadow: var(--card), inset 0 0 0 .5px rgba(59, 130, 246, .3); }
.calc h3 { margin-bottom: 14px; }
.calc-row { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 12px; }
.calc label { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; color: var(--muted); }
.calc select, .field input, .field select, .field textarea { background: var(--charcoal); color: var(--head); border: 0; box-shadow: inset 0 0 0 .5px var(--line-2); border-radius: 9px; height: 38px; padding: 0 10px; font: inherit; font-size: 14px; }
.calc input[type=range] { accent-color: var(--blue); margin-top: 10px; }
.calc output { color: var(--head); font-size: 13px; }
.calc-out { text-align: right; } .calc-out span { color: var(--muted); font-size: 13px; display: block; }
.calc-out b { display: block; color: var(--head); font-weight: 400; font-size: 44px; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.calc-out small { color: var(--faint); font-size: 12.5px; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; position: relative; }
.steps::before { content: ''; position: absolute; top: 15px; left: 0; height: .5px; background: linear-gradient(90deg, rgba(59, 130, 246, .9), rgba(59, 130, 246, .1)); width: var(--draw, 0%); transition: width 1.6s var(--ease); }
.steps li { padding: 0 24px 0 0; }
.step-n { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--void); box-shadow: inset 0 0 0 .5px rgba(59, 130, 246, .6); color: var(--arc); font-size: 12px; position: relative; margin-bottom: 18px; }
.steps b { color: var(--head); font-weight: 460; font-size: 17px; display: block; margin-bottom: 6px; } .steps p { color: var(--muted); font-size: 14px; }
.tabs { display: grid; grid-template-columns: 300px 1fr; gap: 18px; background: var(--graphite); border-radius: var(--r); box-shadow: var(--card); padding: 18px; }
.tab-list { display: flex; flex-direction: column; gap: 4px; }
.tab { display: flex; gap: 12px; text-align: left; background: none; border: 0; padding: 14px; border-radius: 10px; cursor: pointer; color: var(--text); font-family: inherit; }
.tab b { display: block; color: var(--head); font-weight: 460; font-size: 14.5px; } .tab small { color: var(--muted); font-size: 12.5px; line-height: 1.4; display: block; margin-top: 2px; }
.tab.on { background: var(--soft); box-shadow: inset 0 0 0 .5px var(--line-2); }
.tab-ic { color: var(--blue); margin-top: 2px; }
.tab-panel { display: none; } .tab-panel.on { display: block; animation: fade .4s var(--ease); }
.win { background: var(--void); border-radius: 10px; box-shadow: inset 0 0 0 .5px var(--line-2), 0 30px 60px rgba(0, 0, 0, .35); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-bottom: .5px solid var(--line); font-size: 12px; color: var(--muted); }
.win-dots i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #2a2b2e; margin-right: 4px; }
.win-tabs { margin-left: auto; display: flex; gap: 4px; } .win-tabs b { font-weight: 440; padding: 3px 8px; border-radius: 6px; } .win-tabs b.on { background: var(--soft); color: var(--head); }
.win-body { padding: 8px; min-height: 260px; }
.mini-board { display: grid; gap: 4px; }
.mb-row { display: grid; grid-template-columns: 1.4fr .7fr .7fr 2fr; gap: 10px; padding: 11px 12px; border-radius: 8px; background: var(--graphite); font-size: 12.5px; color: var(--muted); align-items: center; }
.mb-row b { color: var(--head); font-weight: 460; }
.al-list { display: grid; gap: 6px; }
.al { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: start; padding: 12px; border-radius: 9px; background: var(--graphite); box-shadow: inset 0 0 0 .5px var(--line); }
.al-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--blue); background: rgba(59, 130, 246, .08); }
.sev-high .al-ic { color: var(--coral); background: rgba(248, 113, 113, .08); }
.al-tx b { display: block; color: var(--head); font-weight: 460; font-size: 13.5px; } .al-tx span { color: var(--muted); font-size: 12.5px; }
.al time { color: var(--faint); font-size: 12px; white-space: nowrap; }
.al.read { opacity: .62; }
.ft { padding: 6px; } .ft-head { display: flex; justify-content: space-between; padding: 8px 6px 12px; } .ft-head b { color: var(--head); font-weight: 460; } .ft-head span { color: var(--muted); font-size: 12.5px; }
.ft-row { display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 10px; padding: 11px 8px; border-top: .5px solid var(--line); font-size: 12.5px; color: var(--muted); }
.fc { padding: 14px; color: var(--muted); font-size: 13.5px; }
.fc-bars { display: grid; gap: 10px; margin-top: 14px; }
.fc-bars > div { display: grid; grid-template-columns: 70px 1fr 90px; gap: 10px; align-items: center; font-size: 12.5px; }
.fc-bars i { height: 6px; border-radius: 3px; background: var(--charcoal); position: relative; overflow: hidden; }
.fc-bars i::after { content: ''; position: absolute; inset: 0; width: var(--w); background: var(--blue); border-radius: 3px; }
.fc-bars em { font-style: normal; color: var(--faint); }
.pad { padding: 18px; }
.who { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.who-card { padding: 22px; } .who-card b { display: block; color: var(--head); font-weight: 460; font-size: 16px; margin: 14px 0 6px; } .who-card p { color: var(--muted); font-size: 13.5px; margin: 0; }
.who-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: var(--blue); background: rgba(59, 130, 246, .08); box-shadow: inset 0 0 0 .5px rgba(59, 130, 246, .25); }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.fact { padding: 22px; display: flex; flex-direction: column; transition: transform .3s var(--ease); }
.fact:hover { transform: translateY(-2px); }
.fact b { color: var(--head); font-weight: 400; font-size: 28px; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 10px; } .fact p { color: var(--muted); font-size: 13.5px; flex: 1; }
.src-l { font-size: 12px; color: var(--arc); display: inline-flex; gap: 4px; align-items: center; }
.plans { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.plan { padding: 22px; display: flex; flex-direction: column; gap: 6px; }
.plan.feat { box-shadow: var(--card), inset 0 0 0 .5px rgba(59, 130, 246, .55); }
.plan-nm { color: var(--head); font-size: 15px; font-weight: 460; display: flex; gap: 8px; align-items: center; }
.plan-pr { color: var(--head); font-weight: 400; font-size: 34px; letter-spacing: -0.03em; } .plan-pr small { font-size: 13px; color: var(--muted); letter-spacing: -0.01em; }
.plan ul { list-style: none; padding: 0; margin: 10px 0 18px; display: grid; gap: 8px; font-size: 13.5px; flex: 1; }
.plan li { display: flex; gap: 8px; } .plan li .ic { color: var(--mint); margin-top: 3px; }
.faq { display: grid; gap: 8px; max-width: 860px; }
.faq details { background: var(--graphite); border-radius: 10px; box-shadow: var(--card); padding: 0 20px; }
.faq summary { cursor: pointer; list-style: none; padding: 18px 0; color: var(--head); font-size: 15.5px; font-weight: 450; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .ic { color: var(--muted); transition: transform .3s var(--ease); }
.faq details[open] summary .ic { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 18px; margin: 0; }
.final { text-align: center; padding: 72px 20px 10px; }
.final h2 { font-size: clamp(32px, 5vw, 52px); margin-bottom: 14px; } .final .lede { margin: 0 auto; }

/* prose (guides, legal, product) */
.prose { max-width: 720px; font-size: 16px; line-height: 1.7; }
.prose h2 { font-size: 26px; margin: 40px 0 12px; } .prose h3 { margin: 24px 0 8px; }
.prose ul, .prose ol { padding-left: 20px; } .prose li { margin-bottom: 6px; }
.prose table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 16px 0; }
.prose th, .prose td { text-align: left; padding: 9px 10px; border-bottom: .5px solid var(--line); }
.prose th { color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
.prose strong { color: var(--head); font-weight: 500; }
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 28px; }
.feat-grid > div { background: var(--graphite); box-shadow: var(--card); border-radius: var(--r); padding: 20px; }
.feat-grid b { display: block; color: var(--head); font-weight: 460; margin: 12px 0 6px; } .feat-grid p { color: var(--muted); font-size: 13.5px; margin: 0; }
.feat-grid .ic { color: var(--blue); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; margin-top: 40px; }

/* forms and app */
.auth { max-width: 420px; margin: 56px auto 0; background: var(--graphite); box-shadow: var(--panel); border-radius: var(--r-lg); padding: 30px; }
.auth h1 { font-size: 30px; margin-bottom: 8px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; font-size: 13px; color: var(--muted); }
.field input, .field select { width: 100%; }
.field textarea { height: 80px; padding: 10px; }
.form-err { color: var(--coral); font-size: 13.5px; margin-bottom: 12px; }
.form-ok { color: var(--mint); font-size: 13.5px; margin-bottom: 12px; }
.app-shell { display: grid; grid-template-columns: 220px 1fr; gap: 24px; padding-top: 28px; }
.side { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 84px; align-self: start; }
.side a { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 9px; color: var(--muted); font-size: 14px; }
.side a .ic { color: var(--faint); }
.side a:hover, .side a.on { background: var(--soft); color: var(--head); } .side a.on .ic { color: var(--blue); }
.side .cnt { margin-left: auto; font-size: 11px; color: var(--coral); }
.app-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.app-head h1 { font-size: 34px; }
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--graphite); box-shadow: var(--card); border-radius: var(--r); padding: 16px 18px; }
.kpi span { font-size: 12.5px; color: var(--muted); display: block; } .kpi b { color: var(--head); font-weight: 400; font-size: 28px; letter-spacing: -0.03em; }
.kpi.risk b { color: var(--coral); }
.typeahead { position: relative; }
.ta-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--graphite); box-shadow: var(--panel); border-radius: 10px; margin-top: 4px; z-index: 5; max-height: 280px; overflow: auto; }
.ta-list button { display: flex; justify-content: space-between; width: 100%; text-align: left; background: none; border: 0; color: var(--text); padding: 10px 12px; font: inherit; font-size: 13.5px; cursor: pointer; border-bottom: .5px solid var(--line); }
.ta-list button:hover, .ta-list button.hi { background: var(--soft); color: var(--head); }
.ta-list small { color: var(--faint); }
.risk-box { display: grid; gap: 10px; }
.risk-part { background: var(--charcoal); border-radius: 10px; padding: 14px; }
.risk-part b { color: var(--head); font-weight: 450; } .risk-part p { margin: 4px 0 0; font-size: 12.5px; color: var(--muted); }
.big-risk { color: var(--head); font-size: 40px; font-weight: 400; letter-spacing: -0.035em; }
.big-risk.on { color: var(--coral); }
.badge-demo { font-size: 12px; color: var(--ring); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .4); padding: 2px 8px; border-radius: 6px; }
.ta-list .ta-item { flex-direction: column; gap: 2px; }
.ta-list .ta-item b { color: var(--head); font-weight: 460; } .ta-list .ta-item span { color: var(--faint); font-size: 12px; }
.ta-list .ta-item.on { background: var(--soft); }
.ta-empty { padding: 12px; font-size: 13px; color: var(--muted); }
.num-check { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.nc { font: 12px/1 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--head); background: var(--charcoal); border-radius: 7px; padding: 6px 8px; display: inline-flex; gap: 8px; align-items: center; }
.nc i { font: 11.5px/1 'Inter', system-ui, sans-serif; font-style: normal; }
.nc.ok i { color: var(--mint); } .nc.digit i, .nc.format i { color: var(--coral); }
.stages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; position: relative; }
.stage { display: flex; flex-direction: column; gap: 10px; font-size: 12.5px; color: var(--faint); position: relative; }
.stage i { height: 3px; border-radius: 3px; background: var(--charcoal); margin-right: 6px; position: relative; overflow: hidden; }
.stage.done { color: var(--muted); } .stage.done i { background: var(--blue); }
.stage.now { color: var(--head); } .stage.now i { background: linear-gradient(90deg, var(--blue), var(--ring)); box-shadow: 0 0 10px rgba(59, 130, 246, .55); }
.cta-row form { display: inline; }
body.app .footer { margin-top: 64px; }

/* footer */
.foot { margin-top: 120px; background: #111214; border-top: .5px solid rgba(255, 255, 255, .07); padding: 48px 0 28px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1.2fr 1.1fr .8fr; gap: 24px; }
.foot h2 { font-size: 11px; font-weight: 500; color: var(--faint); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; }
.foot h2.mt { margin-top: 18px; }
.foot a { display: block; font-size: 13px; color: var(--muted); padding: 3px 0; } .foot a:hover { color: var(--head); }
.foot a.logo { display: inline-flex; font-size: 15px; color: var(--head); }
.foot-brand p { font-size: 13px; margin-top: 12px; max-width: 280px; }
.live-dot-line { display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12.5px; }
.foot-legal { margin-top: 36px; padding-top: 20px; border-top: .5px solid rgba(255, 255, 255, .06); font-size: 12px; color: var(--faint); display: flex; justify-content: space-between; gap: 24px; }
.foot-legal p { max-width: 760px; margin: 0; }

/* motion: full from 720 px, calm on phones, none if the visitor asks */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; } .reveal.d2 { transition-delay: .16s; } .reveal.d3 { transition-delay: .24s; }
@media (max-width: 719px) { .reveal { transform: none; transition: opacity .5s ease; } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .steps::before { width: 100%; transition: none; } * { scroll-behavior: auto !important; } }

/* responsive */
@media (max-width: 980px) {
  .nav-links { display: none; } .nav-burger { display: block; } .nav-cta .nl { display: none; }
  .hero-grid { grid-template-columns: 1fr; gap: 10px; }
  .term-strip, .clocks { grid-template-columns: 1fr 1fr; }
  .who, .facts, .plans { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; } .foot-brand { grid-column: 1 / -1; }
  .tabs { grid-template-columns: 1fr; } .tab-list { flex-direction: row; overflow-x: auto; } .tab { min-width: 220px; }
  .grid2, .split { grid-template-columns: 1fr; }
  .app-shell { grid-template-columns: 1fr; } .side { position: static; flex-direction: row; overflow-x: auto; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .feat-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 15px; } .wrap, .nav-in { padding: 0 16px; }
  .term-strip, .clocks, .who, .facts, .plans, .boards, .hub-links, .feat-grid { grid-template-columns: 1fr; }
  .bd-nums { grid-template-columns: 1fr 1fr; }
  .calc { grid-template-columns: 1fr; } .calc-row { grid-template-columns: 1fr 1fr; } .calc-row label:last-child { grid-column: 1 / -1; } .calc-out { text-align: left; }
  .steps { grid-template-columns: 1fr; gap: 26px; } .steps::before { display: none; }
  .inline-cta { flex-direction: column; align-items: flex-start; }
  .mb-row { grid-template-columns: 1fr 1fr; } .ft-row { grid-template-columns: 1fr; gap: 2px; }
  .foot-legal { flex-direction: column; } .harbour { margin-top: 26px; }
  .harbour-key { gap: 10px; font-size: 12px; }
  .timeline li, .hist li { grid-template-columns: 1fr; }
  .nav-cta .btn-bone { height: 34px; padding: 0 12px; font-size: 13px; }
  .page-hero { padding-top: 32px; }
  /* tables become cards: one row = one card with labelled fields; sorting moves to the Sort select */
  .tbl { min-width: 0; font-size: 13.5px; }
  .tbl thead { display: none; }
  .tbl, .tbl tbody { display: block; }
  .tbl tbody tr { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; padding: 14px; border-bottom: .5px solid var(--line); }
  .tbl td { display: block; padding: 0; border: 0; min-width: 0; }
  .tbl td[data-label]::before { content: attr(data-label); display: block; font-size: 10.5px; font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--faint); margin-bottom: 3px; }
  .tbl td:first-child { grid-column: 1 / -1; font-size: 15px; } .tbl td:first-child::before { display: none; }
  .tbl .r { text-align: left; }
  .sort-sel { display: inline-flex !important; }
  .stages { grid-template-columns: 1fr; gap: 10px; } .stage { flex-direction: row; align-items: center; } .stage i { width: 22px; flex: none; margin: 0; }
  .grid2[style] { grid-template-columns: 1fr !important; }
  .app-head h1 { font-size: 28px; } .auth { padding: 22px; margin-top: 28px; }
}
@media (min-width: 981px) { .nav-mobile { display: none !important; } }

/* Visual layer, rebuilt 3 Nov 2026 against the live reference (default.com) the design file describes:
   a frame of hairlines down the page, whisper-weight display type fading white to grey, one large live canvas,
   product windows that play, a lit closing panel and a dot-matrix wordmark. Loads after site.css. */

:root { --max: 1240px; --fog: #858687; --ash: #9d9e9f; --chalk: #cececf; --steel: #8a8a92; --hair: rgba(255, 255, 255, .08); --hair-2: rgba(255, 255, 255, .12); --g1: #121316; --g2: #17181b; }
html, body { overflow-x: clip; } body { position: relative; }
/* the frame: two hairlines at the content edges, the whole height of the page */
body::before, body::after { content: ''; position: absolute; top: 0; bottom: 0; width: .5px; background: var(--hair); pointer-events: none; z-index: 0; }
body::before { left: max(20px, calc(50% - 620px)); } body::after { right: max(20px, calc(50% - 620px)); }
main, .foot { position: relative; z-index: 1; }
.wrap { max-width: calc(var(--max) + 40px); }
.nav-in { max-width: calc(var(--max) + 40px); height: 72px; }
.nav { background: linear-gradient(rgba(11, 12, 14, .7), rgba(11, 12, 14, 0)); }
.nav.scrolled { background: rgba(11, 12, 14, .72); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 .5px 0 rgba(255, 255, 255, .07); }
.logo { font-size: 17px; font-weight: 450; letter-spacing: -0.03em; }
.nl, .dd-btn { font-size: 14px; color: rgba(255, 255, 255, .86); }

/* ---------- type ---------- */
.display, .display-2, .display-3 { font-weight: 400; color: #fff; background: linear-gradient(100deg, #ffffff 0%, #ffffff 38%, #a3a4a8 78%, #7d7e83 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.display { font-size: clamp(46px, 5.6vw, 76px); line-height: .95; letter-spacing: -0.032em; margin: 0; }
.display-2 { font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.03em; margin: 0; }
.display-3 { font-size: clamp(30px, 3.3vw, 44px); line-height: 1.04; letter-spacing: -0.028em; margin: 0; }
.dim { opacity: 1; }
/* Safari drops gradient-clipped text inside a span with its own opacity, so the grey half gets its own gradient */
.display .dim, .display-2 .dim, .display-3 .dim { background: linear-gradient(100deg, #c4c5c9 0%, #8e8f94 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.lede2 { font-size: 18px; line-height: 1.5; color: var(--ash); letter-spacing: -0.02em; font-weight: 440; margin: 0 0 22px; max-width: 440px; }
.lede3 { font-size: 16px; line-height: 1.55; color: var(--ash); letter-spacing: -0.018em; margin: 0; max-width: 420px; }
.kicker { font-size: 14px; color: var(--fog); margin: 0 0 18px; letter-spacing: -0.02em; }
.center-head { text-align: center; } .center-head .display-2 { max-width: 760px; margin: 0 auto; }
.link-arrow { font-size: 14px; color: rgba(255, 255, 255, .9); display: inline-flex; gap: 6px; align-items: center; } .link-arrow:hover { color: #fff; }
.link-arrow .ic { transition: transform .3s var(--ease); } .link-arrow:hover .ic { transform: translateX(3px); }

/* ---------- sections ---------- */
.sec2 { position: relative; padding-top: 112px; }
.sec2::before { content: ''; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%); height: .5px; background: var(--hair); }
.center-head.sec2 { padding-bottom: 56px; }
.row-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; } .row-head .kicker { margin: 0; }
.split-head { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: end; margin-bottom: 40px; } .split-head .lede3 { justify-self: end; }

/* ---------- hero ---------- */
.hero2 { padding-top: 104px; }
.hero2-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 48px; align-items: end; }
.hero2-r { justify-self: end; padding-bottom: 6px; }
.reads { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; margin: 56px auto 40px; color: var(--fog); }
.reads-k { font-size: 13px; color: var(--steel); margin-right: 6px; }
.reads-i { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 480; letter-spacing: -0.02em; color: #7e7f84; transition: color .25s; }
.reads-i .ic { color: #6b6c71; } .reads-i:hover { color: #fff; } .reads-i:hover .ic { color: var(--blue); }

/* the live canvas */
.canvas { position: relative; height: 660px; border-radius: 20px; overflow: hidden; isolation: isolate;
  background: radial-gradient(900px 420px at 52% 78%, rgba(59, 130, 246, .07), transparent 70%), #0c0d0f;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 .5px rgba(255, 255, 255, .09), 0 100px 106px rgba(0, 0, 0, .05), 0 42px 44px rgba(0, 0, 0, .04), 0 22px 24px rgba(0, 0, 0, .03); }
.canvas::before { content: ''; position: absolute; inset: 0; z-index: 0; background-image: radial-gradient(rgba(255, 255, 255, .075) .9px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(#000, transparent 55%); mask-image: linear-gradient(#000, transparent 55%); pointer-events: none; }
.canvas::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(11, 12, 14, .55) 100%); }
.canvas .harbour { position: absolute; inset: 0; height: auto; margin: 0; z-index: 1; opacity: 0; transition: opacity 1.4s ease .2s; }
.canvas .harbour.ready { opacity: 1; }
.canvas .harbour::before, .canvas .harbour::after { display: none; }
.canvas .harbour canvas { width: 100%; height: 100%; display: block; }
.harbour-phone { display: none; }
.canvas-top { position: absolute; top: 18px; left: 20px; right: 20px; z-index: 5; display: flex; justify-content: space-between; align-items: center; }
.live-pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 9px; background: rgba(15, 16, 18, .82); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); backdrop-filter: blur(10px); font-size: 12.5px; color: #fff; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 6px rgba(74, 222, 128, .8); }
.live-pill em { width: .5px; height: 12px; background: rgba(255, 255, 255, .2); margin: 0 2px; }
.live-pill { color: #fff; } .live-pill::first-line { color: var(--mint); }
.canvas-checked { font-size: 12px; color: var(--ash); height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 9px; background: rgba(15, 16, 18, .82); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1); backdrop-filter: blur(10px); }

.scene-label { position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none; transform: none; opacity: 0; transition: opacity .5s; white-space: nowrap; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 9px; background: rgba(13, 14, 16, .8); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .13); font-size: 11.5px; color: var(--ash); }
.scene-label b { color: #fff; font-weight: 480; }
.scene-label::after { content: ''; position: absolute; left: 50%; top: 100%; width: .5px; height: 26px; background: linear-gradient(rgba(255, 255, 255, .4), rgba(255, 255, 255, 0)); }
.scene-label.hl { box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .45); }
.scene-label.yours { background: rgba(14, 26, 48, .86); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .7), 0 0 24px rgba(59, 130, 246, .35); color: #cfe0ff; }
.scene-label.yours i { width: 7px; height: 7px; border-radius: 2px; background: var(--blue); box-shadow: 0 0 8px rgba(59, 130, 246, .9); }
.scene-label.yours::after { background: linear-gradient(rgba(147, 197, 253, .8), rgba(147, 197, 253, 0)); }

/* flow nodes, left */
.flow { position: absolute; z-index: 5; left: 24px; top: 74px; width: 292px; display: flex; flex-direction: column; align-items: stretch; }
.node { background: rgba(16, 17, 20, .95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 11px; padding: 11px 13px 12px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 .5px rgba(255, 255, 255, .1); display: flex; flex-direction: column; gap: 3px; transform: translateY(3px); transition: transform .6s var(--ease), box-shadow .6s; }
.node > * { opacity: .42; transition: opacity .6s var(--ease); } .node.on > *, .node.done > * { opacity: 1; }
.node b { font-size: 13px; font-weight: 480; color: #fff; letter-spacing: -0.02em; } .node small { font-size: 11.5px; color: var(--fog); line-height: 1.4; }
.node-k { font-size: 10.5px; font-weight: 500; color: var(--arc); display: inline-flex; align-items: center; gap: 5px; letter-spacing: .01em; }
.node-k.trig { color: var(--mint); } .node-k.ok { color: var(--mint); }
.node.on { opacity: 1; transform: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 .5px rgba(147, 197, 253, .55), 0 0 28px rgba(59, 130, 246, .18); }
.node.done { opacity: .92; transform: none; }
.wire { align-self: center; width: 1px; height: 18px; position: relative; background: repeating-linear-gradient(rgba(255, 255, 255, .25) 0 3px, transparent 3px 6px); }
.wire::after { content: ''; position: absolute; left: -2px; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: #2a2c31; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .25); }
.wire.on { background: repeating-linear-gradient(var(--arc) 0 3px, transparent 3px 6px); background-size: 1px 6px; animation: wireflow .6s linear infinite; }
@keyframes wireflow { to { background-position: 0 6px; } }

/* the container card, right */
.boxcard { position: absolute; z-index: 5; right: 24px; top: 74px; width: 336px; background: rgba(20, 21, 24, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 14px; padding: 16px 18px 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 .5px rgba(255, 255, 255, .11), 0 24px 48px rgba(0, 0, 0, .35); }
.bc-head { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding-bottom: 13px; border-bottom: .5px solid var(--hair); }
.bc-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--ring); background: rgba(59, 130, 246, .12); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .3); }
.bc-head b { display: block; font-size: 15px; font-weight: 450; color: #fff; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; } .bc-head small { font-size: 11.5px; color: var(--fog); }
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 5.26px; letter-spacing: .01em; white-space: nowrap; }
.badge i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; }
.badge.blue { color: var(--arc); box-shadow: inset 0 0 0 .5px rgba(96, 165, 250, .6); background: rgba(59, 130, 246, .08); }
.badge.red { color: var(--coral); box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .6); background: rgba(248, 113, 113, .08); }
.badge.green { color: var(--mint); box-shadow: inset 0 0 0 .5px rgba(74, 222, 128, .6); background: rgba(74, 222, 128, .07); }
.bc-rows { display: grid; gap: 0; padding: 6px 0; }
.bc-rows div { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-bottom: .5px solid rgba(255, 255, 255, .04); } .bc-rows span { color: var(--fog); } .bc-rows b { color: var(--chalk); font-weight: 450; }
.bc-meter { margin-top: 10px; padding: 14px; border-radius: 11px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 .5px var(--hair); }
.bc-meter span { font-size: 11.5px; color: var(--fog); display: block; } .bc-meter b { display: block; font-size: 34px; font-weight: 400; letter-spacing: -0.035em; color: #fff; font-variant-numeric: tabular-nums; margin: 2px 0; } .bc-meter small { font-size: 11.5px; color: var(--ash); }
.bc-meter.red b { color: var(--coral); }
.bc-days { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin-top: 12px; }
.bc-days i { height: 22px; border-radius: 5px; position: relative; }
.bc-days i.f { box-shadow: inset 0 0 0 .5px rgba(96, 165, 250, .55); background: rgba(59, 130, 246, .08); }
.bc-days i.c { box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .45); background: rgba(248, 113, 113, .07); }
.bc-days i.f.p { background: rgba(59, 130, 246, .3); } .bc-days i.c.p { background: rgba(248, 113, 113, .42); }
.bc-days i.now::after { content: ''; position: absolute; inset: -3px; border-radius: 7px; box-shadow: 0 0 0 1px #fff; animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .9; } 50% { opacity: .25; } }
.bc-key { display: flex; gap: 14px; margin: 8px 0 14px; font-size: 11px; color: var(--fog); } .bc-key i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.bc-key i.f { box-shadow: inset 0 0 0 .5px rgba(96, 165, 250, .8); } .bc-key i.c { background: rgba(248, 113, 113, .55); }
.bc-btn { width: 100%; height: 36px; font-size: 13.5px; }
.boxcard { opacity: 0; transform: translateY(10px); transition: opacity .8s var(--ease) .5s, transform .8s var(--ease) .5s; }
.canvas.in .boxcard, .no-motion .boxcard { opacity: 1; transform: none; }

/* ---------- bento of product windows ---------- */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.fcard { grid-column: span 2; position: relative; background: linear-gradient(180deg, #131417, #0f1012); border-radius: 18px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 0 0 .5px rgba(255, 255, 255, .1); overflow: hidden; display: flex; flex-direction: column; min-height: 470px; }
.fcard.big { grid-column: span 3; min-height: 520px; }
.fcard header { position: relative; padding: 30px 32px 0; z-index: 2; }
.fc-label { font-size: 14px; color: var(--fog); display: block; margin-bottom: 8px; letter-spacing: -0.02em; }
.fcard h3, .fcard .fc-h { font-size: 22px; line-height: 1.2; font-weight: 400; color: #fff; letter-spacing: -0.025em; max-width: 330px; text-wrap: balance; }
.fc-go { position: absolute; right: 26px; top: 26px; width: 36px; height: 36px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); transition: background .25s, transform .3s var(--ease); }
.fc-go .ic { transform: rotate(-45deg); } .fcard:hover .fc-go { background: rgba(255, 255, 255, .1); transform: translate(2px, -2px); }
.fc-win { position: relative; flex: 1; padding: 28px 30px 30px; display: flex; align-items: flex-start; justify-content: center; }
.fc-win:has(.notes) { padding-bottom: 0; -webkit-mask-image: linear-gradient(#000 78%, transparent 100%); mask-image: linear-gradient(#000 78%, transparent 100%); }
.fc-win > * { width: 100%; max-width: 470px; }
.win-empty { color: var(--fog); font-size: 13px; text-align: center; padding: 40px 0; }

/* pointer light on cards */
.lit::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity .4s; background: radial-gradient(520px circle at var(--mx, 50%) var(--my, 0%), rgba(147, 197, 253, .07), transparent 42%); }
.lit:hover::before { opacity: 1; }

/* alerts window */
.notes { display: grid; gap: 8px; }
.note { display: grid; grid-template-columns: 30px 1fr auto; gap: 11px; align-items: start; padding: 12px 13px; border-radius: 12px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04), 0 0 0 .5px rgba(255, 255, 255, .08); opacity: 0; transform: translateY(-10px) scale(.98); transition: opacity .55s var(--ease), transform .55s var(--ease), box-shadow .5s; }
.note.in { opacity: 1; transform: none; }
.note.hot { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 .5px rgba(147, 197, 253, .6), 0 0 22px rgba(59, 130, 246, .16); }
.note-ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; color: var(--ring); background: rgba(59, 130, 246, .12); }
.note.sev-high .note-ic { color: var(--coral); background: rgba(248, 113, 113, .1); }
.note-tx b { display: block; font-size: 13px; font-weight: 450; color: #fff; letter-spacing: -0.015em; line-height: 1.35; } .note-tx small { display: block; font-size: 11.5px; color: var(--fog); margin-top: 2px; line-height: 1.4; }
.note time { font-size: 11px; color: var(--steel); white-space: nowrap; }

/* free-time window */
.ftw-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-bottom: 18px; }
.ftw-head b { display: block; font-size: 14px; font-weight: 450; color: #fff; } .ftw-head small { font-size: 11.5px; color: var(--fog); }
.ftw-total { text-align: right; } .ftw-total small { display: block; } .ftw-total b { font-size: 28px; font-weight: 400; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: #fff; transition: color .3s; }
.ftw-total b.red { color: var(--coral); }
.ftw-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0 0 12px; font-size: 11.5px; color: var(--ash); }
.ftw-legend span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.ftw-legend .lg-c { width: 9px; height: 9px; border-radius: 2px; background: rgba(248, 113, 113, .6); box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .8); }
.ftw-legend .lg-t { width: 0; height: 11px; border-left: 1px dashed var(--ring); }
.ftw-chart { position: relative; height: 196px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; align-items: end; padding: 24px 0 22px; border-bottom: .5px solid var(--hair); }
.bar { position: relative; height: 100%; display: flex; align-items: flex-end; }
.bar i { display: block; width: 100%; height: var(--h); border-radius: 5px 5px 2px 2px; transform-origin: bottom; transform: scaleY(0); transition: transform .9s var(--ease), background .3s, box-shadow .3s; transition-delay: calc(var(--k, 0) * 50ms); }
.in .bar i, .no-motion .bar i { transform: none; }
.bar.f i { box-shadow: inset 0 0 0 .5px rgba(96, 165, 250, .6); background: rgba(59, 130, 246, .1); }
.bar.c i { box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .5); background: rgba(248, 113, 113, .12); }
.bar.c.hit i { background: linear-gradient(rgba(248, 113, 113, .75), rgba(248, 113, 113, .35)); }
.bar.f.hit i { background: rgba(59, 130, 246, .35); }
.bar span { position: absolute; bottom: -20px; left: 0; right: 0; text-align: center; font-size: 10.5px; color: var(--steel); }
.ftw-mark { position: absolute; top: 2px; bottom: 22px; left: calc(var(--x) - 3px); width: 0; border-left: 1px dashed rgba(147, 197, 253, .6); }
.ftw-mark span { position: absolute; top: -2px; left: 0; transform: translateX(-50%); font-size: 10px; line-height: 1; color: var(--ring); white-space: nowrap; background: #121316; padding: 3px 6px; border-radius: 5px; box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .45); }
.ftw-cursor { position: absolute; top: 24px; bottom: 22px; width: 1px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .7); left: 0; opacity: 0; transition: left .5s var(--ease), opacity .3s; }
.ftw-axis { margin-top: 12px; text-align: center; font-size: 11px; color: var(--steel); }
.ftw-src { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--steel); }

/* stack-date gantt */
.gantt { position: relative; padding-top: 22px; }
.g-axis { position: absolute; top: 0; left: 112px; right: 0; height: 16px; } .g-axis span { position: absolute; left: var(--x); font-size: 10.5px; color: var(--steel); transform: translateX(2px); }
.g-axis span::before { content: ''; position: absolute; left: -2px; top: 16px; height: 210px; width: .5px; background: rgba(255, 255, 255, .05); }
.g-row { display: grid; grid-template-columns: 112px 1fr; align-items: center; height: 38px; }
.g-name { font-size: 12px; color: var(--chalk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-right: 10px; }
.g-track { position: relative; height: 100%; }
.g-bar { position: absolute; top: 11px; height: 16px; left: var(--a); width: calc(var(--b) - var(--a)); border-radius: 5px; transform-origin: left; transform: scaleX(0); transition: transform 1s var(--ease); transition-delay: calc(var(--i) * 90ms + 150ms); }
.in .g-bar, .no-motion .g-bar { transform: none; }
.g-bar.firm { background: rgba(59, 130, 246, .32); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .7); }
.g-bar.prov { background: repeating-linear-gradient(135deg, rgba(147, 197, 253, .14) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .45); }
.g-bar.soon { box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .7); background: rgba(248, 113, 113, .2); }
.g-pill { position: absolute; top: 9px; left: calc(var(--b) + 6px); font-style: normal; font-size: 10.5px; color: var(--coral); white-space: nowrap; background: rgba(248, 113, 113, .08); box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .5); padding: 2px 6px; border-radius: 5px; opacity: 0; transition: opacity .5s 1.2s; }
.in .g-pill, .no-motion .g-pill { opacity: 1; }
.g-now { position: absolute; top: 16px; bottom: -6px; left: calc(112px + (100% - 112px) * var(--x) / 100%); width: 1px; background: var(--arc); box-shadow: 0 0 10px rgba(96, 165, 250, .8); }
.g-now span { position: absolute; bottom: -18px; left: -14px; font-size: 10px; color: var(--arc); }

/* berthing window */
.berths { display: grid; gap: 6px; }
.bt-row { display: grid; grid-template-columns: 1fr auto 58px; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 11px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .07); transition: box-shadow .5s, background .5s; }
.bt-ship b { display: block; font-size: 13px; font-weight: 450; color: #fff; } .bt-ship small { font-size: 11px; color: var(--fog); }
.bt-time { text-align: right; font-size: 12.5px; color: var(--chalk); font-variant-numeric: tabular-nums; position: relative; }
.bt-time s { display: block; font-size: 11px; color: var(--steel); text-decoration-color: rgba(248, 113, 113, .8); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .5s; }
.bt-row .shift { justify-self: end; font-style: normal; margin: 0; }
.shift.none { color: var(--steel); background: none; font-size: 10.5px; }
.shift.next { color: var(--arc); background: rgba(59, 130, 246, .08); box-shadow: inset 0 0 0 .5px rgba(96, 165, 250, .5); font-size: 10.5px; white-space: nowrap; }
.bt-row.next { box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .4); background: rgba(59, 130, 246, .04); }
.bt-row.ch.go { background: rgba(59, 130, 246, .06); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .55), 0 0 22px rgba(59, 130, 246, .12); }
.bt-row.ch.go .bt-time s { max-height: 18px; opacity: 1; }
.bt-row.ch .shift { opacity: 0; transform: scale(.7); transition: opacity .4s .3s, transform .5s var(--ease) .3s; } .bt-row.ch.go .shift { opacity: 1; transform: none; }

/* forecast window */
.fc-ship b { display: block; font-size: 13.5px; font-weight: 450; color: #fff; } .fc-ship small { font-size: 11.5px; color: var(--fog); }
.fc-line { position: relative; height: 34px; margin: 18px 0 8px; border-bottom: .5px solid var(--hair); }
.fc-plan { position: absolute; left: 0; top: 10px; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #fff; }
.fc-gap { position: absolute; left: 6px; top: 15px; height: 2px; width: 0; background: linear-gradient(90deg, rgba(255, 255, 255, .4), var(--coral)); transition: width 1.4s var(--ease) .3s; }
.in .fc-gap, .no-motion .fc-gap { width: calc(var(--w) - 6px); }
.fc-act { position: absolute; left: 0; top: 9px; width: 14px; height: 14px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 12px rgba(59, 130, 246, .9); transition: left 1.4s var(--ease) .3s; }
.in .fc-act, .no-motion .fc-act { left: calc(var(--x) - 7px); }
.fc-lab { display: flex; justify-content: space-between; font-size: 11.5px; color: var(--fog); } .fc-lab .shift { margin-left: 4px; }
.fc-prog { display: grid; gap: 7px; margin-top: 22px; }
.fc-prog div { display: grid; grid-template-columns: 62px 1fr 30px; gap: 10px; align-items: center; font-size: 11.5px; color: var(--chalk); }
.fc-prog i { height: 4px; border-radius: 3px; background: rgba(255, 255, 255, .06); position: relative; overflow: hidden; }
.fc-prog i::after { content: ''; position: absolute; inset: 0; width: 0; background: var(--blue); border-radius: 3px; transition: width 1.2s var(--ease) .5s; }
.in .fc-prog i::after, .no-motion .fc-prog i::after { width: var(--w); }
.fc-prog em { font-style: normal; color: var(--steel); font-size: 11px; text-align: right; }
.fc-note { font-size: 11px; color: var(--steel); margin: 12px 0 0; }

/* ---------- terminal tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 16px; padding: 22px; border-radius: 16px; background: linear-gradient(180deg, #131417, #101113); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 .5px rgba(255, 255, 255, .09); transition: transform .35s var(--ease), box-shadow .35s; min-height: 150px; }
.tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 .5px rgba(147, 197, 253, .45); }
.tile-ic { width: 28px; height: 28px; border-radius: 7px; display: grid; place-items: center; color: #fff; background: var(--c); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), 0 2px 8px rgba(0, 0, 0, .3); }
.tile b { font-size: 19px; line-height: 1.2; font-weight: 400; color: #fff; letter-spacing: -0.025em; display: flex; gap: 6px; align-items: baseline; }
.tile b .ic { flex: none; transition: transform .3s var(--ease); } .tile:hover b .ic { transform: translateX(3px); }
.tile small { margin-top: auto; font-size: 12.5px; color: var(--fog); display: flex; align-items: center; gap: 7px; }
.dot-s { width: 6px; height: 6px; border-radius: 50%; background: var(--steel); } .dot-s.on { background: var(--mint); box-shadow: 0 0 6px rgba(74, 222, 128, .8); }

/* ---------- costs ---------- */
.costs { display: grid; grid-template-columns: 1.15fr 1fr; gap: 10px; }
.calc2 { position: relative; overflow: hidden; border-radius: 18px; background: linear-gradient(180deg, #131417, #0f1012); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .055), 0 0 0 .5px rgba(255, 255, 255, .1); padding: 28px 30px; display: flex; flex-direction: column; }
.c2-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.c2-ctl { display: flex; gap: 8px; } .c2-ctl label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--steel); }
.c2-ctl select { height: 32px; border-radius: 9px; background: rgba(255, 255, 255, .05); color: #fff; border: 0; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .12); padding: 0 28px 0 10px; font-family: inherit; font-size: 13px; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, #9d9e9f 50%), linear-gradient(135deg, #9d9e9f 50%, transparent 50%); background-position: calc(100% - 14px) 14px, calc(100% - 10px) 14px; background-size: 4px 4px; background-repeat: no-repeat; }
.c2-num { margin: 26px 0 6px; } .c2-num b { display: block; font-size: clamp(48px, 5vw, 68px); font-weight: 400; letter-spacing: -0.04em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; } .c2-num small { display: block; margin-top: 10px; font-size: 13px; color: var(--ash); }
.c2-bars { display: grid; grid-template-columns: repeat(14, 1fr); gap: 5px; align-items: end; height: 130px; margin: 22px 0 18px; }
.c2-bars i { display: block; border-radius: 4px 4px 2px 2px; height: var(--h); transition: height .5s var(--ease), background .3s, box-shadow .3s; }
.c2-bars i.f { box-shadow: inset 0 0 0 .5px rgba(96, 165, 250, .5); background: rgba(59, 130, 246, .08); }
.c2-bars i.c { box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .35); background: rgba(248, 113, 113, .08); }
.c2-bars i.on.c { background: linear-gradient(rgba(248, 113, 113, .8), rgba(248, 113, 113, .35)); }
.c2-bars i.on.f { background: rgba(59, 130, 246, .32); }
.c2-slider { display: flex; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ash); margin-top: auto; } .c2-slider output { color: #fff; }
.c2-slider input { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: linear-gradient(90deg, var(--blue) var(--p, 50%), rgba(255, 255, 255, .12) var(--p, 50%)); border-radius: 2px; outline: none; }
.c2-slider input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--bone); box-shadow: 0 0 0 4px rgba(59, 130, 246, .25), 0 2px 6px rgba(0, 0, 0, .4); cursor: grab; }
.c2-slider input::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--bone); }
.facts2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fact2 { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, #131417, #0f1012); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 .5px rgba(255, 255, 255, .09); transition: box-shadow .35s; }
.fact2:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 .5px rgba(147, 197, 253, .4); }
.fact2 b { font-size: 34px; font-weight: 400; letter-spacing: -0.035em; color: #fff; line-height: 1; } .fact2 b small { font-size: 15px; color: var(--fog); letter-spacing: -0.01em; }
.fact2 p { margin: 0; font-size: 13px; color: var(--ash); line-height: 1.45; }
.fact2 .src-l { margin-top: auto; font-size: 12px; color: var(--fog); display: inline-flex; gap: 5px; align-items: center; } .fact2 .src-l .ic { transform: rotate(-45deg); }

/* ---------- plans ---------- */
.plans2 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.plan2 { position: relative; overflow: hidden; display: flex; flex-direction: column; padding: 24px; border-radius: 18px; background: linear-gradient(180deg, #131417, #0f1012); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 .5px rgba(255, 255, 255, .09); }
.plan2.feat { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 .5px rgba(147, 197, 253, .5), 0 0 40px rgba(59, 130, 246, .08); background: radial-gradient(400px 160px at 50% 0%, rgba(59, 130, 246, .1), transparent 70%), linear-gradient(180deg, #141619, #0f1012); }
.p2-top { display: flex; justify-content: space-between; align-items: center; } .p2-nm { font-size: 14px; color: var(--chalk); }
.p2-pr { display: block; margin: 22px 0 6px; font-size: 38px; font-weight: 400; letter-spacing: -0.035em; color: #fff; } .p2-pr small { font-size: 13px; color: var(--fog); letter-spacing: -0.01em; margin-left: 6px; }
.p2-for { margin: 0 0 20px; font-size: 13px; color: var(--ash); min-height: 38px; }
.p2-btn { width: 100%; }
.plan2 ul { list-style: none; margin: 20px 0 0; padding: 18px 0 0; border-top: .5px solid var(--hair); display: grid; gap: 9px; }
.plan2 li { display: flex; gap: 9px; align-items: center; font-size: 13px; color: var(--chalk); } .plan2 li .ic { color: var(--arc); flex: none; }

/* ---------- questions ---------- */
.faq2 { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
.faq2-l { position: sticky; top: 110px; } .faq2-l .lede3 { margin-top: 14px; }
.faq2 .faq { border-top: .5px solid var(--hair); gap: 0; max-width: none; }
.faq2 details { border-bottom: .5px solid var(--hair); background: none; box-shadow: none; border-radius: 0; margin: 0; padding: 0; }
.faq2 summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 2px; font-size: 16px; color: #fff; letter-spacing: -0.02em; }
.faq2 summary::-webkit-details-marker { display: none; }
.faq2 summary .ic { color: var(--fog); transition: transform .35s var(--ease); flex: none; } .faq2 details[open] summary .ic { transform: rotate(45deg); }
.faq2 details p { margin: -4px 0 20px; font-size: 14px; color: var(--ash); line-height: 1.6; max-width: 620px; }

/* ---------- closing panel, lit from below ---------- */
.final2 { margin-top: 112px; }
.final2 { padding: 7px; border-radius: 26px; box-shadow: 0 0 0 .5px rgba(255, 255, 255, .1); max-width: calc(var(--max) - 80px); }
.final2-in { border-radius: 20px; padding: 120px 24px 130px; text-align: center; background: radial-gradient(70% 90% at 50% 120%, rgba(147, 160, 190, .28), transparent 70%), linear-gradient(180deg, #0b0c0e 0%, #0d0e10 40%, #26272a 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .04); }
.final2-in .lede3 { margin: 18px auto 28px; text-align: center; }

/* ---------- footer: columns and a dot-matrix wordmark ---------- */
.foot { margin-top: 112px; background: #0b0c0e; border-top: .5px solid rgba(255, 255, 255, .08); padding: 56px 0 0; }
.foot-grid { grid-template-columns: 1.8fr 1fr 1.2fr 1.1fr .8fr; }
.foot h2 { font-size: 12px; font-weight: 450; text-transform: none; letter-spacing: -0.01em; color: var(--steel); }
.foot a { font-size: 13.5px; color: #a3a4a8; padding: 4px 0; }
.foot-mark { display: block; width: 100%; height: 200px; margin-top: 56px; -webkit-mask-image: linear-gradient(#000 35%, rgba(0,0,0,.25)); mask-image: linear-gradient(#000 35%, rgba(0,0,0,.25)); }
.foot-legal { border-top: .5px solid rgba(255, 255, 255, .07); }

/* ---------- motion: rise from a soft blur, desktop only ---------- */
.js-motion .rv { opacity: 0; transform: translateY(18px); filter: blur(6px); transition: opacity .9s var(--ease), transform 1s var(--ease), filter .9s var(--ease); transition-delay: calc(var(--d, 0) * 80ms); }
.js-motion .rv.in { opacity: 1; transform: none; filter: none; }
.js-motion .rv.in.lit, .js-motion .rv.in.tile { transition-delay: 0s; }

/* ---------- widths ---------- */
@media (max-width: 1180px) { .flow { display: none; } .boxcard { right: 20px; } .bento .fcard.big { grid-column: span 6; } .bento .fcard { grid-column: span 3; } .bento .fcard:last-child { grid-column: span 6; } }
@media (max-width: 980px) {
  .hero2-grid, .split-head, .costs, .faq2 { grid-template-columns: 1fr; } .hero2-r, .split-head .lede3 { justify-self: start; }
  .tiles { grid-template-columns: 1fr 1fr; } .plans2 { grid-template-columns: 1fr 1fr; } .faq2-l { position: static; }
  .canvas { height: 600px; } .boxcard { width: 300px; }
}
@media (max-width: 719px) {
  body::before, body::after { display: none; }
  .hero2 { padding-top: 44px; } .display { font-size: 44px; } .lede2 { font-size: 16.5px; }
  .reads { gap: 14px 20px; margin: 32px auto 24px; } .reads-k { width: 100%; }
  .canvas { height: auto; border-radius: 16px; padding: 56px 12px 12px; }
  .canvas .harbour { position: relative; inset: auto; height: 240px; opacity: 1; margin: 0 -12px 12px; }
  .harbour-phone { display: block; position: absolute; inset: 0; background-size: cover; background-position: center; }
  .harbour-phone video { width: 100%; height: 100%; object-fit: cover; display: block; }
  .canvas .harbour canvas { display: none; }
  .canvas::after { display: none; }
  .boxcard { position: relative; right: auto; top: auto; width: auto; opacity: 1; transform: none; }
  .bento { grid-template-columns: 1fr; } .bento .fcard, .bento .fcard.big, .bento .fcard:last-child { grid-column: auto; min-height: 0; }
  .fcard header { padding: 24px 22px 0; } .fc-win, .fc-win:has(.notes) { padding: 22px 18px 24px; -webkit-mask-image: none; mask-image: none; }
  .tiles, .plans2, .facts2 { grid-template-columns: 1fr; } .sec2 { padding-top: 72px; }
  .final2-in { padding: 72px 18px 80px; }
  .g-row { grid-template-columns: 90px 1fr; } .g-axis { left: 90px; } .g-now { left: calc(90px + (100% - 90px) * var(--x) / 100%); }
  .bt-row { grid-template-columns: 1fr auto; } .bt-row .shift { grid-column: 2; }
}
@media (prefers-reduced-motion: reduce) { .js-motion .rv { opacity: 1; transform: none; filter: none; transition: none; } .wire.on { animation: none; } }

/* ---------- product pages ---------- */
.prod-hero { padding-top: 88px; } .prod-hero .kicker { display: flex; align-items: center; gap: 10px; } .prod-hero .split-head { margin-bottom: 48px; }
.pstage { position: relative; border-radius: 20px; overflow: hidden; padding: 84px 24px 56px; background: radial-gradient(800px 360px at 50% 100%, rgba(59, 130, 246, .08), transparent 70%), #0c0d0f; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 .5px rgba(255, 255, 255, .09); }
.pstage::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, .07) .9px, transparent 1.2px); background-size: 22px 22px; -webkit-mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); mask-image: radial-gradient(70% 80% at 50% 50%, #000, transparent); pointer-events: none; }
.pstage-top { position: absolute; top: 18px; left: 20px; right: 20px; display: flex; justify-content: space-between; gap: 12px; z-index: 2; }
.pstage-win { position: relative; z-index: 1; max-width: 640px; margin: 0 auto; padding: 26px; border-radius: 16px; background: rgba(18, 19, 22, .92); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 .5px rgba(255, 255, 255, .1), 0 40px 80px rgba(0, 0, 0, .35); }
.feat3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.f3 { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 24px; border-radius: 16px; background: linear-gradient(180deg, #131417, #101113); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 .5px rgba(255, 255, 255, .09); }
.f3 b { font-size: 17px; font-weight: 450; color: #fff; letter-spacing: -0.02em; margin-top: 8px; } .f3 p { margin: 0; font-size: 13.5px; color: var(--ash); line-height: 1.5; }
.clients { display: grid; gap: 4px; }
.cl-head, .cl-row { display: grid; grid-template-columns: 1.6fr .8fr .8fr 1.3fr; gap: 10px; align-items: center; padding: 9px 12px; }
.cl-head { font-size: 10px; font-weight: 500; color: var(--fog); text-transform: uppercase; letter-spacing: .06em; border-bottom: .5px solid var(--hair); }
.cl-row { border-radius: 10px; background: rgba(255, 255, 255, .025); box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .06); opacity: 0; transform: translateY(6px); transition: opacity .5s var(--ease), transform .5s var(--ease); transition-delay: calc(var(--i) * 120ms + 200ms); }
.in .cl-row, .no-motion .cl-row { opacity: 1; transform: none; }
.cl-row b { display: block; font-size: 13px; font-weight: 450; color: #fff; } .cl-row small { font-size: 11px; color: var(--fog); } .cl-row .num { font-size: 13px; color: var(--chalk); font-variant-numeric: tabular-nums; }
.code { border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 .5px var(--hair); background: #0e0f11; }
.code-bar { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-bottom: .5px solid var(--hair); font: 12px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--ash); } .code-bar b { color: var(--arc); font-weight: 500; }
.code pre { margin: 0; padding: 16px; font: 12.5px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--chalk); white-space: pre-wrap; } .code .k { color: #93c5fd; } .code .s { color: #4ade80; } .code .n { color: #f2f2f2; }
.page-hero h1 { font-weight: 400; background: linear-gradient(100deg, #fff 0%, #fff 40%, #a3a4a8 85%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.03em; }
.page-hero .lede { color: var(--ash); }
@media (max-width: 980px) { .feat3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 719px) { .feat3 { grid-template-columns: 1fr; } .pstage { padding: 64px 12px 16px; } .pstage-top { flex-direction: column; align-items: flex-start; } .pstage-win { padding: 16px; } .cl-head, .cl-row { grid-template-columns: 1.4fr .6fr .6fr; } .cl-head span:last-child, .cl-row > span:last-child { grid-column: 1 / -1; } }

/* ---------- guides ---------- */
.gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.gcard { position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: 18px; background: linear-gradient(180deg, #131417, #0f1012); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 0 0 .5px rgba(255, 255, 255, .09); transition: transform .35s var(--ease), box-shadow .35s; }
.gcard:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 0 0 .5px rgba(147, 197, 253, .45); }
.gc-pic { display: block; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: .5px solid var(--hair); } .gc-pic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease); } .gcard:hover .gc-pic img { transform: scale(1.03); }
.gc-tx { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 8px; } .gc-tx b { font-size: 19px; font-weight: 400; color: #fff; letter-spacing: -0.025em; display: flex; gap: 6px; align-items: baseline; } .gc-tx small { font-size: 13px; color: var(--ash); line-height: 1.5; }
.guide-hero .display-2 { max-width: 900px; margin: 14px 0 18px; } .guide-hero .lede3 { max-width: 680px; } .guide-hero .checked { margin-top: 14px; }
.guide-pic { margin: 8px 0 0; border-radius: 20px; overflow: hidden; box-shadow: inset 0 0 0 .5px rgba(255, 255, 255, .1), 0 40px 80px rgba(0, 0, 0, .3); } .guide-pic img { display: block; width: 100%; height: auto; }
.guide-body { display: grid; grid-template-columns: minmax(0, 720px); justify-content: center; margin-top: 64px; }
@media (max-width: 980px) { .gcards { grid-template-columns: 1fr; } }
.no-motion .note { opacity: 1; transform: none; }
@media (max-width: 719px) {
  .canvas-checked { display: none; } .live-pill { white-space: nowrap; font-size: 12px; }
  .bt-row { grid-template-columns: 1fr auto; } .bt-row .shift.none { display: none; } .bt-row .shift { grid-column: 2; justify-self: end; }
  .ftw-total b { font-size: 24px; }
}
body.app .foot-mark { display: none; }
.panel + .grid2 { margin-top: 18px; }
.stage em { font-style: normal; }

/* ---------- phones: no iOS focus zoom, thumb-sized targets ---------- */
@media (max-width: 719px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea, .tt-search input, .sort-sel select, .c2-ctl select { font-size: 16px !important; }
  .field input, .field select { height: 44px; } .field textarea { min-height: 96px; }
  input[type=checkbox] { width: 22px !important; height: 22px !important; accent-color: var(--blue); flex: none; }
  /* the label is the tap target for its checkbox: a full 44 px row */
  label:has(> input[type=checkbox]) { min-height: 44px; align-items: center !important; } label:has(> input[type=checkbox]) > input { margin-top: 0 !important; }
  .nav .logo { min-height: 44px; } .nav-burger { width: 44px; height: 44px; } .nav-cta .btn-bone { height: 40px; }
  .reads-i { padding: 10px 0; } .link-arrow { padding: 10px 0; }
  .hb-head h2 a, .hub-block h2 a { display: inline-block; padding: 10px 0; }
  .auth .field a, .auth label a { display: inline-block; padding: 4px 0; }
  .tt-search { height: 44px; } .chip { height: 38px; padding: 0 14px; } .sort-sel select { height: 38px; }
  .btn { height: 44px; } .side a { padding: 12px 14px; }
}

@media (max-width: 719px) {
  .nav, .nav.scrolled { background: #0b0c0e; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 .5px 0 rgba(255, 255, 255, .08); }
  .c2-top { flex-direction: column; align-items: stretch; } .c2-ctl { width: 100%; } .c2-ctl label { flex: 1; min-width: 0; } .c2-ctl label:first-child { flex: 1.6; } .c2-ctl select { width: 100%; }
  .calc2 { padding: 22px 18px; } .c2-bars { height: 110px; gap: 3px; }
}
@media (max-width: 719px) { .split-head { gap: 16px; margin-bottom: 28px; } .center-head.sec2 { padding-bottom: 36px; } .hero2-grid { gap: 22px; } }
@media (max-width: 980px) { .foot-grid { grid-template-columns: 1fr 1fr 1fr; } .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 719px) {
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px 16px; } .foot a { padding: 6px 0; }
  .ptab-list { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; margin-left: -16px; margin-right: -16px; padding: 0 16px; } .ptab-list::-webkit-scrollbar { display: none; } .ptab { white-space: nowrap; flex: none; }
  .tbl td.is-empty { display: none; }
  .tbl tbody tr { gap: 8px 14px; padding: 13px 14px; }
  .tbl td[data-label]::before { font-size: 10px; margin-bottom: 2px; }
}
@media (max-width: 719px) { .foot { margin-top: 64px; padding-top: 40px; } .final2 { margin-top: 64px; } }
@media (max-width: 719px) {
  /* container progress: one compact bar, only the current step named */
  .stages { grid-template-columns: repeat(5, 1fr) !important; gap: 4px !important; }
  .stage { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
  .stage i { width: auto !important; height: 4px !important; margin: 0 !important; }
  .stage em { display: none; } .stage.now em { display: block; white-space: nowrap; }
  .stages:has(.now) { padding-bottom: 2px; }
  /* app menu: one sticky row under the header */
  .app-shell { padding-top: 0; gap: 14px; }
  .side { position: sticky !important; top: 72px; z-index: 20; background: #0b0c0e; flex-direction: row !important; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 8px 16px; border-bottom: .5px solid var(--hair); }
  .side::-webkit-scrollbar { display: none; } .side a { white-space: nowrap; flex: none; padding: 10px 12px; font-size: 14px; }
  .kpi { padding: 14px; } .kpi span { font-size: 12px; } .kpi b { font-size: 24px; }
  .badge-demo { white-space: nowrap; display: inline-block; margin-top: 4px; }
  .app-head { margin-top: 18px; }
}

/* ---------- app: lists, inline forms, notes, contract terms ---------- */
.list { display: grid; gap: 0; margin-bottom: 12px; }
.li { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 12px 0; border-bottom: .5px solid var(--hair); }
.li > span:first-child { min-width: 0; } .li b { display: block; color: #fff; font-weight: 450; font-size: 14px; } .li small { display: block; color: var(--fog); font-size: 12px; margin-top: 2px; overflow-wrap: anywhere; }
.li code, .api-doc code, .fine code, .muted code { font: 12px ui-monospace, 'SF Mono', Menlo, monospace; color: var(--chalk); background: rgba(255, 255, 255, .05); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
.inline-form { display: flex; gap: 10px; align-items: flex-end; margin-top: 12px; } .inline-form .field { margin-bottom: 0; } .inline-form.tight { margin: 0; gap: 6px; align-items: center; } .inline-form.tight select { height: 30px; background: var(--charcoal); color: #fff; border: 0; border-radius: 7px; padding: 0 6px; }
.note-up { display: flex; gap: 8px; align-items: center; padding: 12px 14px; border-radius: 10px; background: rgba(59, 130, 246, .07); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .35); color: var(--chalk); font-size: 13.5px; margin: 12px 0; } .note-up .ic { color: var(--arc); flex: none; } .note-up a { color: var(--arc); }
.check { display: flex; gap: 10px; align-items: center; font-size: 14px; color: var(--text); margin: 0 0 12px; cursor: pointer; } .check input { width: 16px; height: 16px; accent-color: var(--blue); }
.terms { display: grid; gap: 4px; margin: 6px 0 16px; }
.terms-h, .terms-r { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr; gap: 10px; align-items: center; }
.terms-h { font-size: 11px; color: var(--fog); text-transform: uppercase; letter-spacing: .05em; padding-bottom: 4px; }
.terms-r span { font-size: 14px; color: var(--chalk); } .terms-r input { height: 36px; background: var(--charcoal); color: #fff; border: 0; box-shadow: inset 0 0 0 .5px var(--line-2); border-radius: 8px; padding: 0 10px; font: inherit; font-size: 14px; width: 100%; }
.code-k { font: 12.5px/1.6 ui-monospace, 'SF Mono', Menlo, monospace; color: var(--chalk); background: #0e0f11; border-radius: 10px; padding: 12px 14px; box-shadow: inset 0 0 0 .5px var(--hair); white-space: pre-wrap; overflow-wrap: anywhere; margin: 8px 0 0; }
.app-plans { grid-template-columns: repeat(3, 1fr); margin-top: 6px; }
.client-chips { margin: 0 0 12px; } .client-chips .chip { display: inline-flex; align-items: center; }
.board-page { padding-top: 64px; } .board-page .display-3 { margin: 6px 0 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 719px) {
  .inline-form { flex-direction: column; align-items: stretch; } .app-plans { grid-template-columns: 1fr; }
  .terms-h, .terms-r { grid-template-columns: 1fr 70px 1fr; gap: 8px; } .terms-r input { height: 44px; font-size: 16px; }
  .li { flex-wrap: wrap; } .check input { width: 20px; height: 20px; }
}
.visits { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 120px; margin-top: 10px; }
.visits div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: 4px; }
.visits i { display: block; width: 100%; height: var(--h); border-radius: 5px 5px 2px 2px; background: rgba(59, 130, 246, .35); box-shadow: inset 0 0 0 .5px rgba(147, 197, 253, .6); }
.visits b { font-size: 12px; font-weight: 450; color: #fff; } .visits small { font-size: 10.5px; color: var(--fog); }
.warn-note { background: rgba(248, 113, 113, .07); box-shadow: inset 0 0 0 .5px rgba(248, 113, 113, .45); } .warn-note .ic { color: var(--coral); }
/* links inside running text: colour and an underline, so they don't rely on colour alone */
.lede3 a, .lede2 a, .prose a, .fine a, .muted a, .note-up a, .faq2 details p a { color: var(--arc); text-decoration: underline; text-decoration-color: rgba(96, 165, 250, .45); text-underline-offset: 3px; }
.lede3 a:hover, .prose a:hover, .fine a:hover { text-decoration-color: var(--arc); }

/* sign-up: the form beside a live alerts window */
.auth-split { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 500px); gap: 24px; justify-content: center; align-items: start; margin-top: 56px; }
.auth-split .auth { margin: 0; max-width: none; }
.auth-side.fcard { grid-column: auto; min-height: 0; }
.auth-side .fc-win { padding: 22px 26px 0; max-height: 330px; overflow: hidden; }
.auth-pts { list-style: none; margin: 0; padding: 6px 32px 30px; display: grid; gap: 12px; color: var(--chalk); font-size: 14px; letter-spacing: -0.01em; position: relative; z-index: 2; }
.auth-pts li { display: flex; gap: 10px; align-items: center; } .auth-pts .ic { color: var(--arc); flex: none; }
.auth label a, .auth .fine a, .auth .muted a { color: var(--arc); text-decoration: underline; text-decoration-color: rgba(96, 165, 250, .45); text-underline-offset: 3px; }
@media (max-width: 939px) { .auth-split { grid-template-columns: minmax(0, 420px); margin-top: 28px; } .auth-side { display: none; } }
.plans2 + .fine { margin-top: 24px; }

/* the confirm-your-email note above every app screen */
.confirm-note { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .confirm-note span { flex: 1 1 260px; } .confirm-note form { margin: 0; }