/* cadictate.com. Colours are the iPad app's (ipad/CADictate/WorkbenchStyle.swift) so the site and
   the app read as one thing; the drawing-sheet frame, labels and corner brackets come from
   engineering drawings. */
:root {
  --ink: #0a0b0e;          /* page */
  --canvas: #0e131c;       /* the app's model space */
  --panel: #151b24;
  --tile: #1c222c;
  --line: #263040;
  --line-soft: #1f2733;
  --primary: #ebf2fa;
  --secondary: #a1b3c7;
  --label: #8b97a8;
  --accent: #75d4f5;       /* the app's cyan */
  --violet: #a78bfa;       /* the logo */
  --defined: #5ccc75;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --wrap: 1280px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--ink); color: var(--primary); font: 18px/1.55 Figtree, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
a:hover { color: #fff; }
img { display: block; max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { margin: 0; }
h2 { font-weight: 300; font-size: clamp(36px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -.025em; }
h2 strong, h1 strong { font-weight: 600; }
.muted { color: var(--secondary); margin: 0; }
.kicker { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--label); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--primary); color: var(--ink); padding: 10px 14px; border-radius: 8px; }
.skip:focus { left: 8px; }

/* Everything sits over the blueprint canvas. */
#xray { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
header, main, footer { position: relative; z-index: 1; }

/* ---------- The wordmark: the logo is the C ----------
   The mark is cropped to its own edges (brand/logo-mark.png), so the gap to the A is set here
   and nowhere else: a hair of space, the way a C sits next to an A in the typeface. */
.wordmark { display: inline-flex; align-items: center; font-weight: 700; letter-spacing: -.03em; white-space: nowrap; }
.wordmark img { height: .98em; width: auto; margin-right: .035em; flex: none; }
.wordmark span { line-height: 1; }
.wm-nav { font-size: 20px; }
.wm-foot-small { font-size: 24px; }
.wm-giant { display: flex; justify-content: center; margin: 72px auto 32px; font-size: clamp(64px, 15.5vw, 212px); letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1.5px #2f3a4c; line-height: .9; user-select: none; }
.wm-giant img { height: .9em; margin-right: .03em; opacity: .28; }

/* ---------- Header ---------- */
.top { position: sticky; top: 14px; z-index: 10; display: flex; justify-content: center; padding: 14px 16px 0; }
.pill { display: flex; align-items: center; gap: 26px; padding: 8px 8px 8px 16px; border-radius: 999px; background: rgba(21,27,36,.72); border: 1px solid rgba(235,242,250,.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.pill-links { display: flex; gap: 22px; font-size: 15px; }
.pill-links a { color: var(--secondary); }
.pill-links a:hover { color: #fff; }
.pill-cta { background: var(--primary); color: var(--ink); font-weight: 600; font-size: 15px; padding: 9px 16px; border-radius: 999px; }
.pill-cta:hover { color: var(--ink); background: #fff; }

main { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

/* ---------- Drawing sheet frame ---------- */
.sheet { position: relative; border: 1px solid var(--line); }
.br { position: absolute; width: 16px; height: 16px; border: 0 solid var(--violet); }
.br.tl { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.br.tr { right: -1px; top: -1px; border-width: 2px 2px 0 0; }
.br.bl { left: -1px; bottom: -1px; border-width: 0 0 2px 2px; }
.br.br-r { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.lbl { position: absolute; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--label); }
.lbl.tl { left: 20px; top: 16px; } .lbl.tr { right: 20px; top: 16px; }
.lbl.bl { left: 20px; bottom: 14px; } .lbl.br-r { right: 20px; bottom: 14px; }

/* ---------- Hero ---------- */
.hero { margin-top: 48px; padding: 80px 48px 64px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; background: rgba(10,11,14,.55); }
.hero-copy { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.hero h1 { font-weight: 300; font-size: clamp(48px, 6.4vw, 80px); line-height: 1; letter-spacing: -.035em; }
.hero h1 strong { color: var(--accent); }
.lede { margin: 0; color: var(--secondary); max-width: 480px; }
.hero-more { margin: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 15px; color: var(--secondary); }
.hero-more a { text-decoration: underline; text-underline-offset: 4px; }
.hero-more span[aria-hidden] { color: #5b6677; }

.voicebar { display: flex; align-items: center; gap: 12px; width: min(520px, 100%); height: 58px; padding: 0 8px 0 18px; border-radius: 999px; background: var(--panel); border: 1px solid #293342; }
.voicebar svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.typed-wrap { flex: 1; min-width: 0; font-family: var(--mono); font-size: 16px; white-space: nowrap; overflow: hidden; }
.typed { display: inline-block; overflow: hidden; white-space: nowrap; width: 0; vertical-align: bottom; animation: type 1.8s steps(16) .6s forwards; }
.caret { display: inline-block; width: 2px; height: 1.1em; background: var(--accent); margin-left: 2px; vertical-align: -3px; animation: blink 1s steps(1) infinite; }
.voicebar-go { background: var(--accent); color: var(--canvas); font-weight: 700; padding: 10px 18px; border-radius: 999px; font-size: 15px; }
.voicebar-go:hover { color: var(--canvas); background: #9be3fb; }
@keyframes type { to { width: 16ch; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- A viewport like the app's ---------- */
.viewport { position: relative; margin: 0; border-radius: 18px; border: 1px solid #293342; overflow: hidden; background: radial-gradient(ellipse 80% 70% at 50% 45%, #232836, #121520); }
.vp-dots { position: absolute; inset: 0; opacity: .55; background-image: radial-gradient(rgba(161,179,199,.32) 1px, transparent 1.4px); background-size: 24px 24px; }
.vp-label { position: absolute; left: 16px; top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: var(--secondary); line-height: 1.6; }
.vp-label span { letter-spacing: .04em; }
.vp-views { position: absolute; right: 14px; top: 12px; display: flex; gap: 2px; padding: 3px; border-radius: 9px; background: rgba(21,27,36,.85); border: 1px solid #293342; font-size: 12px; font-weight: 600; }
.vp-views span { padding: 4px 9px; border-radius: 6px; }
.vp-views .on { background: var(--accent); color: var(--canvas); }
.hero-vp { flex: 1 1 420px; min-width: 0; aspect-ratio: 4 / 3.2; }

/* The sketch that draws itself, gets sized, turns fully defined and becomes a block. */
.sk { position: absolute; inset: 40px 10px 10px; width: calc(100% - 20px); height: calc(100% - 50px); font-family: var(--mono); }
.sk .outline { fill: none; stroke: var(--primary); stroke-width: 2; stroke-dasharray: 820; stroke-dashoffset: 820; animation: draw 1.4s ease-out .4s forwards; }
.sk .dim { opacity: 0; animation: fade .5s ease-out 1.8s forwards; }
.sk .dim line { stroke: var(--accent); stroke-width: 1.2; }
.sk .dim .tag { fill: var(--accent); }
.sk .dim text { font-size: 14px; fill: var(--canvas); }
.sk .ok { opacity: 0; animation: fade .5s ease-out 2.3s forwards; }
.sk .ok circle { fill: var(--defined); }
.sk .ok text { font-size: 14px; fill: var(--defined); }
.sk .solid { opacity: 0; transform: translateY(16px); animation: lift .9s cubic-bezier(.2,.7,.2,1) 2.8s forwards; }
.sk .solid polygon { stroke: var(--primary); stroke-width: 1.2; }
.sk .f-bottom { fill: #3b4558; } .sk .f-top { fill: #7d8aa3; } .sk .f-left { fill: #4c566b; } .sk .f-right { fill: #5d687f; }
.sk .solid text { font-size: 13px; fill: var(--accent); }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { to { opacity: 1; } }
@keyframes lift { to { opacity: 1; transform: none; } }

/* ---------- The part ---------- */
.part { margin-top: 24px; display: flex; flex-wrap: wrap; align-items: center; border-color: var(--line); }
.part img { flex: 1 1 480px; min-width: 0; max-width: 680px; width: 100%; mix-blend-mode: lighten; }
.part-copy { flex: 1 1 360px; min-width: 0; padding: 48px; position: relative; }
.part-copy h2 { margin: 12px 0 14px; font-size: clamp(34px, 3.8vw, 46px); }
.part-copy p { margin: 0; color: var(--secondary); }

/* ---------- Split sections ---------- */
.split { margin-top: 120px; display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > div { flex: 1 1 420px; min-width: 0; }
.split h2 { margin: 12px 0 18px; }
.struck { position: relative; color: #6b7686; }
.struck::after { content: ""; position: absolute; left: -3%; right: -3%; top: 55%; height: 3px; background: var(--violet); transform: scaleX(0); transform-origin: left; transition: transform .6s ease-out .2s; }
.voice.seen .struck::after { transform: scaleX(1); }
.log { flex: 1 1 460px; min-width: 0; margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-family: var(--mono); font-size: 15px; }
.log li { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: rgba(16,21,29,.92); }
.log .you { color: var(--accent); }
.log .reply { color: var(--label); }

/* ---------- Features ---------- */
.details { margin-top: 120px; }
.head-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr)); border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.cells article { padding: 30px; border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); background: rgba(10,11,14,.6); }
.cells .num { font-family: var(--mono); color: var(--accent); }
.cells h3 { margin: 10px 0 8px; font-weight: 600; font-size: 21px; }
.cells p { margin: 0; color: var(--secondary); }

/* ---------- Platforms ---------- */
.screens .device { flex: 1 1 340px; min-width: 0; max-width: 440px; width: 100%; border-radius: 26px; border: 10px solid var(--panel); box-shadow: 0 40px 90px rgba(0,0,0,.55), 0 0 0 1px #293342; }
.platforms { margin: 24px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-soft); font-size: 19px; }
.platforms li { display: flex; justify-content: space-between; padding: 16px 0; border-bottom: 1px solid var(--line-soft); }
.platforms a, .platforms .soon { font-family: var(--mono); font-size: 14px; }
.platforms a { color: var(--accent); }
.platforms .soon { color: var(--label); }

/* ---------- Pricing ---------- */
.pricing { margin-top: 120px; padding: 40px 0; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 24px; justify-content: space-between; align-items: center; }
.pricing h2 { margin: 8px 0 8px; font-weight: 600; }
.btn { background: var(--accent); color: var(--canvas); font-weight: 700; padding: 14px 22px; border-radius: 999px; }
.btn:hover { color: var(--canvas); background: #9be3fb; }

/* ---------- Footer ---------- */
.foot { max-width: var(--wrap); margin: 140px auto 0; padding: 0 24px 32px; }
.foot-cols { display: flex; flex-wrap: wrap; gap: 40px; }
.foot-intro { flex: 2 1 280px; }
.foot-intro p { margin: 12px 0 0; color: var(--secondary); }
.foot nav { flex: 1 1 140px; display: flex; flex-direction: column; gap: 9px; font-size: 16px; }
.foot nav h3 { margin: 0 0 6px; font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .16em; color: var(--label); }
.foot nav a { color: var(--secondary); }
.foot nav a:hover { color: #fff; }
.foot-base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line-soft); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--label); }
.foot-base a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }

/* ---------- X-ray switch ---------- */
.xray-toggle { position: fixed; right: 16px; bottom: 16px; z-index: 20; display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid #293342; background: rgba(21,27,36,.85); color: var(--secondary); font: 500 13px var(--mono); letter-spacing: .08em; cursor: pointer; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.xray-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.xray-toggle[aria-pressed="true"] { color: var(--accent); border-color: rgba(117,212,245,.45); }
.xray-toggle:hover { color: #fff; }
@media (hover: none) { .xray-toggle { display: none; } }

@media (max-width: 760px) {
  .pill { gap: 14px; }
  .pill-links, .lbl, .vp-views, .hero-more span[aria-hidden] { display: none; }
  .typed-wrap { font-size: 14px; }
  .voicebar { gap: 8px; padding-left: 14px; }
  .hero { padding: 48px 20px 40px; }
  .part-copy { padding: 28px; }
  .split, .details, .pricing { margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .typed { animation: none; width: 16ch; }
  .caret { animation: none; }
  .sk * { animation: none !important; opacity: 1 !important; transform: none !important; stroke-dashoffset: 0 !important; }
  .struck::after { transition: none; }
}