/* IBM Plex Sans Bold, self-hosted. The page's CSP is font-src 'self', so a
   webfont has to live in the repo; this is the latin subset straight from
   Google Fonts' static host (SIL Open Font License), 22 KB. font-display:swap
   means the headline paints immediately in the fallback and reflows once the
   file lands, rather than sitting invisible while it downloads. */
@font-face{
  font-family:"IBM Plex Sans";
  src:url("fonts/IBMPlexSans-Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* The width of the centred content column, shared by the nav, <main> and both
   footer rows. It is one variable because those four have to agree exactly --
   if they drift, the nav links and footer stop lining up with the content
   underneath them, which is subtle enough to miss and obvious once seen. */
:root{--site-width:1320px;}

/* overflow lives on html only, NOT body -- setting overflow-y on both
   breaks position:sticky for sticky children of body (the sticky nav below)
   since body then becomes its own scroll container instead of just html. */
html{height:auto;overflow-y:auto;overflow-x:hidden;}
/* overflow-x:clip, NOT hidden. The hero's full-bleed backdrop is sized with
   100vw, which on desktop is ~5px wider than the usable width because 100vw
   includes the scrollbar. `hidden` on <html> hides that overhang visually but
   still leaves the page programmatically scrollable by those few pixels
   (measured: window.scrollTo(500,0) moved it 4.8px). `clip` creates no scroll
   container at all, so the overhang is genuinely unreachable.
   overflow-y is left explicitly `visible` -- per spec `clip` and `visible` are
   compatible on opposite axes, so this does NOT force overflow-y to `auto`
   and therefore does NOT break position:sticky for the nav, which is the
   trap the note above is warning about. Verified both ways below. */
body.home-body{height:auto;overflow-y:visible;overflow-x:clip;}
body.home-body{
  /* The marketing site's own accent palette, sampled straight from the
     CoreShape logo -- overriding the app-wide --accent here (rather than
     changing it globally) keeps the in-app editor's UI untouched. */
  --accent:#0257ff;
  --accent-hover:#2f74ff;
  --accent-dim:#0021a0;
  --accent-orange:#fe7904;

  /* Typography. No webfont: the page's CSP is `font-src 'self'` and there
     are no font files in the repo, so loading one would silently fail. The
     win here comes from picking the best *available* system face per OS and
     then treating it properly -- optical sizing, tighter tracking on display
     text, tabular figures on anything numeric. "Segoe UI Variable Display"
     is the real display cut of Segoe on Win11 (this project's primary
     target) and is noticeably better at large sizes than plain Segoe UI. */
  --font-display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  --font-body:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  /* Technical/monospace voice, used for spec readouts, step indices and
     dimension labels. This is what keeps the page reading as CAD software
     rather than a generic SaaS landing page. */
  --font-mono:"Cascadia Code","SF Mono","Consolas","Roboto Mono",ui-monospace,monospace;

  /* Elevation + edge tokens, so cards/panels share one depth language
     instead of each section inventing its own shadow. */
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);
  --shadow-md:0 8px 24px -12px rgba(0,0,0,.5);
  --shadow-lg:0 24px 60px -24px rgba(0,0,0,.65);
  --shadow-glow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), 0 12px 40px -16px color-mix(in srgb, var(--accent) 55%, transparent);
  /* The 1px top highlight that makes a dark card read as lit from above --
     the single cheapest trick for making flat panels feel physical. */
  --edge-light:inset 0 1px 0 rgba(255,255,255,.06);
  --panel:linear-gradient(180deg, color-mix(in srgb, var(--bg-2) 60%, transparent), color-mix(in srgb, var(--bg-1) 92%, transparent));

  font-family:var(--font-body);
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(2,78,254,.18), transparent 60%),
    radial-gradient(700px 400px at 0% 10%, rgba(254,121,4,.09), transparent 55%),
    var(--bg-0);
}
:root[data-theme="light"] body.home-body{
  --edge-light:inset 0 1px 0 rgba(255,255,255,.9);
  --shadow-sm:0 1px 2px rgba(16,24,40,.06);
  --shadow-md:0 8px 24px -12px rgba(16,24,40,.18);
  --shadow-lg:0 24px 60px -24px rgba(16,24,40,.26);
  --panel:linear-gradient(180deg, #fff, color-mix(in srgb, var(--bg-2) 70%, #fff));
}
/* These headlines are hard-coded #fff for the dark theme; on light
   backgrounds they'd vanish, so follow the theme's primary text instead. */
:root[data-theme="light"] .hero h1,
:root[data-theme="light"] .new-to-cad-headline{color:var(--text-0);}

/* Display type: tighter tracking as size goes up, which is what separates
   "big text" from actual typographic hierarchy. */
.home-body h1,.home-body h2,.home-body h3{font-family:var(--font-display);font-optical-sizing:auto;}
.home-body h1{letter-spacing:-.028em;}
.home-body h2{letter-spacing:-.021em;}
.home-body h3{letter-spacing:-.011em;}

/* ---------- Tab pages ---------- */
/* Each top-nav tab is its own full page within this one document — only one
   .page is shown at a time, switched by home.js (hash-routed so links and
   back/forward still work). */
.page{display:none;}
.page.active{display:block;}

/* ---------- Sticky top nav ---------- */
.home-nav{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--bg-1) 72%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);
  border-bottom:1px solid color-mix(in srgb, var(--border) 70%, transparent);
  transition:box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
/* Accent hairline under the nav, brightest at the centre -- ties the header
   into the hero's colour language instead of a flat grey divider. */
.home-nav::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 45%, transparent) 35%, color-mix(in srgb, var(--accent-orange) 30%, transparent) 65%, transparent);
  opacity:0;transition:opacity .25s ease;
}
.home-nav.is-scrolled{
  background:color-mix(in srgb, var(--bg-1) 92%, transparent);
  box-shadow:0 8px 30px -12px rgba(0,0,0,.5);
}
.home-nav.is-scrolled::after{opacity:1;}
.home-nav-inner{
  display:flex;align-items:center;gap:28px;
  max-width:var(--site-width);margin:0 auto;padding:0 32px;height:60px;
}
.home-brand{
  font-weight:700;font-size:16px;display:flex;align-items:center;gap:8px;color:var(--text-0);
  text-decoration:none;flex-shrink:0;
}
.brand-logo{height:24px;width:auto;display:block;flex-shrink:0;}
/* Both site headers, listed together so they cannot drift apart. The
   dashboard and account pages use .dashboard-nav rather than .home-nav, so
   they used to miss this rule entirely and fall back to the 24px base above
   -- the same logo, visibly smaller, one click apart. */
.home-nav .brand-logo,
.dashboard-nav .brand-logo{height:38px;}
:root[data-theme="light"] .brand-logo{content:url(logo-full-light.png);}

.home-tabs{display:flex;align-items:center;gap:4px;margin-right:auto;}
.home-tab{
  position:relative;color:var(--text-1);text-decoration:none;font-size:13.5px;font-weight:500;
  padding:8px 12px;border-radius:7px;transition:color .15s ease, background .15s ease;
}
.home-tab:hover{color:var(--text-0);background:var(--bg-3);}
.home-tab.active{color:var(--text-0);}
/* The underline itself is defined once, further down, as a scaleX(0) bar on
   every .home-tab that scales in for .active -- so it animates instead of
   snapping. Deliberately not duplicated here. */

.home-nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0;}
.home-nav-actions .auth-guest-only,
.home-nav-actions .auth-user-only{display:inline-flex;align-items:center;gap:10px;}
.home-nav-link{color:var(--text-1);text-decoration:none;font-size:13px;font-weight:500;padding:8px 6px;transition:color .15s ease;}
.home-nav-link:hover{color:var(--text-0);}
.home-nav-account{
  display:inline-flex;align-items:center;gap:8px;color:var(--text-1);text-decoration:none;
  font-size:13px;font-weight:500;padding:6px 8px 6px 6px;border-radius:999px;transition:background .15s ease, color .15s ease;
}
.home-nav-account:hover{color:var(--text-0);background:var(--bg-3);}
.home-nav-avatar{
  width:24px;height:24px;border-radius:50%;background:var(--accent);color:#fff;font-size:11px;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.home-nav-ghost{
  color:var(--text-0);text-decoration:none;font-size:13px;font-weight:600;
  padding:8px 14px;border-radius:7px;border:1px solid var(--border);transition:border-color .15s ease, background .15s ease;
}
.home-nav-ghost:hover{border-color:var(--accent);background:var(--bg-3);}
/* Matches the hero CTA's material (gradient + top edge highlight), one step
   smaller -- so the page has one button language rather than two. */
.home-nav-cta{
  background:linear-gradient(180deg, var(--accent-hover), var(--accent));
  color:#fff;text-decoration:none;font-size:13px;font-weight:600;
  padding:9px 17px;border-radius:8px;
  transition:filter .18s ease, transform .18s cubic-bezier(.3,.8,.4,1), box-shadow .18s ease;
  box-shadow:var(--edge-light), 0 6px 18px -8px color-mix(in srgb, var(--accent) 90%, transparent);
}
.home-nav-cta:hover{
  transform:translateY(-1px);filter:saturate(1.1);
  box-shadow:var(--edge-light), 0 10px 24px -8px color-mix(in srgb, var(--accent) 100%, transparent);
}
.home-nav-cta:active{transform:translateY(0);}
/* Nav tab underline animates in rather than snapping. */
.home-tab::after{
  content:"";position:absolute;left:12px;right:12px;bottom:1px;height:2px;border-radius:2px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;
  transition:transform .25s cubic-bezier(.22,.7,.3,1);
}
.home-tab.active::after{transform:scaleX(1);}

/* Guest/signed-in label pair for [data-launch] CTAs -- resolved by the
   html.signed-in class the inline head script sets from localStorage before
   first paint, so the correct label is there from frame one instead of
   flashing "Launch..." then swapping to "Open Dashboard" once auth.js
   (which only runs after the whole page has parsed) catches up. */
.cta-user{display:none;}
html.signed-in .cta-guest{display:none;}
html.signed-in .cta-user{display:inline;}

.home-nav-burger{
  display:none;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;background:transparent;border:1px solid var(--border);border-radius:7px;cursor:pointer;
  margin-left:4px;flex-shrink:0;
}
.home-nav-burger span{display:block;width:16px;height:2px;background:var(--text-0);margin:0 auto;border-radius:2px;transition:transform .15s ease, opacity .15s ease;}
.home-nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.home-nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.home-nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.home-tabs-mobile{
  display:none;flex-direction:column;gap:2px;padding:10px 20px 18px;
  border-top:1px solid var(--border);
}
.home-tabs-mobile .home-tab{padding:10px 8px;}
.home-tabs-mobile-actions{display:flex;flex-direction:column;gap:8px;margin-top:10px;padding-top:12px;border-top:1px solid var(--border);}
.home-tabs-mobile-actions a{text-align:center;}
.home-tabs-mobile-actions .auth-guest-only,
.home-tabs-mobile-actions .auth-user-only{display:flex;flex-direction:column;gap:8px;}

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

.section-head{max-width:640px;margin:0 0 36px;}
/* Kicker gets a leading rule so section openings have a deliberate
   typographic "entry point" instead of floating coloured text. */
/* display:flex (block-level), not inline-flex. The kicker is always meant to
   sit on its own line above a heading, and inline-flex only appeared to do
   that because the headings following it were block-level. In .new-to-cad the
   heading is inline-block (it needs to be, so the gradient text-clip sizes to
   the text rather than the full column) -- so an inline-flex kicker flowed
   onto the SAME line as "New to CAD?". width:fit-content keeps it shrink-
   wrapped so it still centres correctly inside .cta-band-inner. */
.section-kicker{
  display:flex;width:fit-content;align-items:center;gap:9px;
  font-family:var(--font-mono);
  font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin-bottom:14px;
}
.section-kicker::before{
  content:"";width:22px;height:1px;flex-shrink:0;
  background:linear-gradient(90deg, transparent, var(--accent));
}
.section-head h2{
  font-size:clamp(26px, 3.1vw, 36px);line-height:1.15;font-weight:700;
  color:var(--text-0);margin:0 0 12px;
}
.features-sub{font-size:14px;color:var(--text-1);line-height:1.6;margin:0;}

/* ---------- Hero ---------- */
.hero{position:relative;padding:34px 0 72px;}

/* Backdrop stack. Pulled out to the viewport edges with a symmetric negative
   inline margin so the grid and glows are full-bleed even though `main` is a
   centred content column -- without this the hero visibly ends at the content
   gutter, which is exactly what made the old one look like a boxed-in
   template. `overflow-x:hidden` is already on <html>, so the overhang can't
   introduce a horizontal scrollbar. */
/* Full-bleed via "centre on the hero, then be exactly one viewport wide".
   The naive version of this (inset:-40px -50vw 0) overhangs 50vw on EACH
   side, making the layer ~2.4x the viewport and pushing document
   scrollWidth past clientWidth -- measured at 1834px on a 1280px viewport
   before this was corrected. left:50% + translateX(-50%) + width:100vw is
   exactly viewport-width instead, so the only remaining overhang is the
   classic 100vw-includes-the-scrollbar gap, which the pre-existing
   html{overflow-x:hidden} at the top of this file already absorbs. */
.hero-backdrop{
  position:absolute;top:-40px;bottom:0;left:50%;
  width:calc(100vw / var(--page-zoom, 1));max-width:calc(100vw / var(--page-zoom, 1));transform:translateX(-50%);
  pointer-events:none;z-index:0;overflow:hidden;
}
/* Blueprint grid: two repeating-linear-gradients, masked so it fades out
   before it reaches the text. Cheap (no image, no extra request) and it
   reads instantly as drafting paper. */
.hero-grid-layer{
  position:absolute;inset:0;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-0) 7%, transparent) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-0) 7%, transparent) 0 1px, transparent 1px 64px);
  -webkit-mask-image:radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 72%);
  mask-image:radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 72%);
  opacity:.5;
}
.hero-glow{position:absolute;border-radius:50%;filter:blur(70px);}
.hero-glow-a{
  width:640px;height:420px;top:-140px;right:22%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent) 40%, transparent), transparent 68%);
  animation:glow-drift 22s ease-in-out infinite alternate;
}
.hero-glow-b{
  width:460px;height:340px;top:120px;left:26%;
  background:radial-gradient(circle, color-mix(in srgb, var(--accent-orange) 26%, transparent), transparent 68%);
  animation:glow-drift 27s ease-in-out infinite alternate-reverse;
}
@keyframes glow-drift{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(40px,26px,0) scale(1.12);}
}
/* Registration marks -- the little corner crosshairs on a drawing sheet. */
.reg-mark{position:absolute;width:14px;height:14px;opacity:.5;}
.reg-mark::before,.reg-mark::after{content:"";position:absolute;background:var(--accent);}
.reg-mark::before{left:0;top:50%;width:100%;height:1px;}
.reg-mark::after{top:0;left:50%;width:1px;height:100%;}
/* Sat just outside the centred content column. Clamped so they never drift
   off-screen on narrow viewports where 50vw-574px would go negative. */
.reg-tl{top:46px;left:max(14px, calc(50vw / var(--page-zoom, 1) - 574px));}
.reg-tr{top:46px;right:max(14px, calc(50vw / var(--page-zoom, 1) - 574px));}

.hero-inner{
  position:relative;z-index:1;
  display:grid;grid-template-columns:1.02fr 1fr;gap:60px;align-items:center;
}
.hero-content{min-width:0;}
.hero h1{
  font-family:"IBM Plex Sans", var(--font-display);
  /* All caps: sized so "RIGHT IN YOUR BROWSER." still fits the hero's text
     column on one line (capitals run ~20% wider than mixed case), with the
     tracking eased off a little since tight caps collide. Phones still wrap
     to three lines, as the mixed-case headline did; balance keeps that even. */
  font-size:clamp(30px, 3.3vw, 46px);line-height:1.08;margin:0 0 20px;
  color:#fff;font-weight:700;letter-spacing:-.016em;
  text-transform:uppercase;text-wrap:balance;
}
.hero-sub{font-size:16.5px;line-height:1.68;color:var(--text-1);max-width:500px;margin:0 0 32px;}
.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px;}

/* Primary CTA. The ::after is a diagonal specular sweep that runs on hover --
   a single transform of a skewed gradient, so it stays on the compositor
   instead of repainting. */
.hero-cta{
  position:relative;overflow:hidden;isolation:isolate;
  display:inline-block;color:#fff;text-decoration:none;font-weight:600;
  font-size:14.5px;padding:14px 28px;border-radius:11px;
  background:linear-gradient(180deg, var(--accent-hover), var(--accent));
  box-shadow:var(--edge-light), 0 10px 26px -10px color-mix(in srgb, var(--accent) 85%, transparent), 0 2px 6px rgba(0,0,0,.2);
  transition:transform .18s cubic-bezier(.3,.8,.4,1), box-shadow .18s ease, filter .18s ease;
}
.hero-cta::after{
  content:"";position:absolute;top:0;bottom:0;left:-60%;width:45%;z-index:-1;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-18deg) translateX(-140%);
  transition:transform .6s cubic-bezier(.22,.7,.3,1);
}
.hero-cta:hover{
  transform:translateY(-2px);
  filter:saturate(1.08);
  box-shadow:var(--edge-light), 0 16px 34px -12px color-mix(in srgb, var(--accent) 95%, transparent), 0 3px 8px rgba(0,0,0,.24);
}
.hero-cta:hover::after{transform:skewX(-18deg) translateX(420%);}
.hero-cta:active{transform:translateY(0);}

.hero-cta-secondary{
  display:inline-block;color:var(--text-0);text-decoration:none;font-weight:600;font-size:14.5px;
  padding:14px 24px;border-radius:11px;
  background:color-mix(in srgb, var(--bg-2) 70%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  box-shadow:var(--edge-light);
  backdrop-filter:blur(6px);
  transition:border-color .18s ease, background .18s ease, transform .18s cubic-bezier(.3,.8,.4,1);
}
.hero-cta-secondary:hover{
  border-color:color-mix(in srgb, var(--accent) 60%, transparent);
  background:color-mix(in srgb, var(--accent) 12%, var(--bg-2));
  transform:translateY(-2px);
}
.hero-cta-secondary:active{transform:translateY(0);}
.hero-hint{font-size:12.5px;color:var(--text-2);margin:0;}

/* The frame around the hero clip. A plain bordered panel: the fake browser
   title bar (traffic lights and an address bar reading app.coreshape.io, a
   domain CoreShape does not own) and the fake toolbar of blank grey squares
   are gone, and so is the 3D tilt. The clip inside is a recording of the real
   application, which has its own title bar and its own toolbar; dressing it
   in a second, invented set of both was saying the same thing twice, badly.
   Square to the page, so the app's own UI inside it reads straight. */
.hero-visual{position:relative;min-width:0;}
.mockup{
  position:relative;border-radius:14px;overflow:hidden;
  background:var(--bg-1);border:1px solid color-mix(in srgb, var(--accent) 16%, var(--border));
  box-shadow:
    0 40px 80px -34px rgba(0,0,0,.62),
    0 0 60px -26px color-mix(in srgb, var(--accent) 45%, transparent);
}
.mockup-viewport{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  background:var(--bg-0);
}

/* ==================== HERO CLIP ====================
   The three screen recordings, played back to back inside the hero frame.
   To remove: this block, the <video> and caption in the hero, the player
   script under the hero section, and media/modeling-loop/. */
.ml-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--bg-0);}
.ml-caption{
  display:flex;align-items:center;justify-content:center;gap:11px;
  margin-top:14px;font-size:13px;color:var(--text-1);
}
.ml-name{font-weight:650;color:var(--text-0);letter-spacing:.01em;}
.ml-dots{display:inline-flex;gap:6px;}
.ml-dot{width:6px;height:6px;border-radius:50%;background:var(--border);transition:background .25s ease, transform .25s ease;}
.ml-dot.is-on{background:var(--accent);transform:scale(1.25);}
/* If every clip fails to play the script drops the frame; the hero then runs
   as a single column instead of leaving an empty one. */
.hero-inner.is-textonly{grid-template-columns:1fr;}


/* Shared line-icon style (use cases, resources, etc.). */
.fi-svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}

/* ---------- How it works (steps) ---------- */
.steps{padding:84px 0;border-top:1px solid var(--border);}
.steps-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:22px;}
.step-card{
  position:relative;
  background:var(--panel);
  border:1px solid var(--border);border-radius:16px;padding:26px 26px 28px;
  box-shadow:var(--edge-light), var(--shadow-sm);
  /* Deliberately NOT overflow:hidden -- the ::before connector below
     positions itself at left:100%, outside the card, to bridge the grid gap
     to the next step. Clipping here would silently delete it. The hover
     accent bar (::after) is inset instead of relying on clipping. */
}
/* Number + a rule that runs to the card's edge -- a drafting-sheet callout
   rather than a bare circle, and it gives each card a horizontal anchor
   line that the eye can follow across the row. */
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;}
.step-num{
  width:34px;height:34px;border-radius:10px;flex-shrink:0;
  background:linear-gradient(160deg, var(--accent-hover), var(--accent));
  color:#fff;font-family:var(--font-mono);
  font-size:13.5px;font-weight:700;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--edge-light), 0 6px 16px -8px color-mix(in srgb, var(--accent) 90%, transparent);
}
.step-rule{
  flex:1;height:1px;
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 45%, transparent), transparent);
}
.step-card h3{font-size:16px;color:var(--text-0);margin:0 0 9px;font-weight:650;}
.step-card p{font-size:13.5px;line-height:1.6;color:var(--text-1);margin:0;}

/* ---------- Use cases (asymmetric bento) ---------- */
.usecases{padding:84px 0;border-top:1px solid var(--border);}
.usecases-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:18px;}
/* Cards 1 and 4 are double-width, so the two rows read wide|narrow then
   narrow|wide instead of four identical tiles. */
.usecase-card.uc-wide{grid-column:span 2;}
.usecase-card{
  position:relative;overflow:hidden;
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  background:var(--panel);
  border:1px solid var(--border);border-radius:8px;padding:24px;
  box-shadow:var(--edge-light), var(--shadow-sm);
}
/* Accent wash that fades in on hover, from the icon's corner. */
.usecase-card::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(90% 130% at 100% 0%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 65%);
  transition:opacity .3s ease;
}
.usecase-card:hover::before{opacity:1;}
.usecase-text{position:relative;min-width:0;}
.usecase-tag{
  display:block;font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-2);margin-bottom:9px;
  transition:color .25s ease;
}
.usecase-card:hover .usecase-tag{color:var(--accent);}
.usecase-card h3{font-size:16px;color:var(--text-0);margin:0 0 7px;font-weight:650;}
.usecase-card p{font-size:13.5px;line-height:1.58;color:var(--text-1);margin:0;max-width:46ch;}
.usecase-icon{
  position:relative;
  width:54px;height:54px;border-radius:7px;flex-shrink:0;
  background:linear-gradient(140deg, color-mix(in srgb, var(--accent) 24%, transparent), color-mix(in srgb, var(--accent) 7%, transparent));
  border:1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  color:var(--accent);display:flex;align-items:center;justify-content:center;
  box-shadow:var(--edge-light);
}
.usecase-icon .fi-svg{width:28px;height:28px;}

/* ---------- New to CAD? (split panel) ----------
   Was a centred text column, i.e. the third stacked centred block in a row.
   Now a two-column panel with a drawing-sheet visual on the right, which
   breaks the vertical monotony and gives the section its own identity. */
.new-to-cad{padding:84px 0;border-top:1px solid var(--border);}
.new-to-cad-inner{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  max-width:none;margin:0;text-align:left;
  padding:40px 48px 44px;border-radius:22px;
  background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 58%),
    var(--panel);
  border:1px solid color-mix(in srgb, var(--accent) 18%, var(--border));
  box-shadow:var(--edge-light), var(--shadow-lg);
}
.new-to-cad-text{min-width:0;}
.new-to-cad-headline{
  font-size:clamp(32px, 4vw, 46px);font-weight:800;letter-spacing:-.028em;margin:0 0 18px;
  color:#fff;line-height:1.05;
}
.new-to-cad-copy{font-size:15px;line-height:1.72;color:var(--text-1);margin:0 0 30px;max-width:56ch;}
.new-to-cad-actions{justify-content:flex-start;margin-bottom:0;}

/* Blueprint panel -- inline SVG on a tinted sheet, no image asset. */
.blueprint{
  position:relative;border-radius:14px;padding:14px;
  background:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 0 1px, transparent 1px 22px),
    color-mix(in srgb, var(--bg-0) 88%, var(--accent));
  border:1px solid color-mix(in srgb, var(--accent) 26%, var(--border));
  box-shadow:var(--edge-light), var(--shadow-md);
}
.blueprint-svg{display:block;width:100%;height:auto;}
.bp-shape{fill:color-mix(in srgb, var(--accent) 12%, transparent);stroke:var(--accent);stroke-width:1.6;}
.bp-shape circle{fill:color-mix(in srgb, var(--bg-0) 70%, transparent);}
.bp-dim{stroke:var(--accent-orange);stroke-width:1;fill:none;}
/* Witness lines are deliberately fainter than the dimensions they serve --
   on a real drawing they're construction, not measurement. */
.bp-ext{stroke:color-mix(in srgb, var(--accent-orange) 45%, transparent);stroke-width:.7;fill:none;}
.bp-leader{stroke:var(--accent-orange);stroke-width:.9;fill:none;}
.bp-center{stroke:var(--accent-orange);stroke-width:.8;fill:none;stroke-dasharray:5 3;}
.bp-label{
  fill:var(--accent-orange);font-family:var(--font-mono);font-size:10px;letter-spacing:.06em;
}
.bp-label-sm{font-size:8.5px;letter-spacing:.04em;}
/* The outline draws itself in when the panel scrolls into view. */
.reveal-ready .blueprint .bp-shape path,
.reveal-ready .blueprint .bp-shape circle{
  stroke-dasharray:1000;stroke-dashoffset:1000;
}
.reveal-ready .blueprint.is-visible .bp-shape path,
.reveal-ready .blueprint.is-visible .bp-shape circle{
  animation:bp-draw 1.5s cubic-bezier(.4,.5,.2,1) forwards;
}
.reveal-ready .blueprint.is-visible .bp-shape circle{animation-delay:.35s;}
@keyframes bp-draw{to{stroke-dashoffset:0;}}

/* ---------- Cost / value ---------- */
.value{padding:84px 0;border-top:1px solid var(--border);}
.value-inner{display:grid;grid-template-columns:1fr .92fr;gap:56px;align-items:center;}
.value-text{min-width:0;}
.value-text h2{
  font-size:clamp(27px, 3.2vw, 38px);line-height:1.14;font-weight:700;
  color:var(--text-0);margin:0 0 16px;max-width:15ch;
}
.value-lede{font-size:15px;line-height:1.72;color:var(--text-1);margin:0 0 26px;max-width:52ch;}
.value-points{list-style:none;margin:0 0 30px;padding:0;display:flex;flex-direction:column;gap:15px;}
.value-points li{
  position:relative;padding-left:30px;
  font-size:13.5px;line-height:1.6;color:var(--text-1);max-width:52ch;
}
.value-points strong{color:var(--text-0);font-weight:650;display:block;margin-bottom:2px;}
/* Check mark drawn in CSS -- two borders rotated, same motif as the plan
   feature lists so the two pricing surfaces feel related. */
.value-points li::before{
  content:"";position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;
  background:color-mix(in srgb, var(--accent) 18%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 34%, transparent);
}
.value-points li::after{
  content:"";position:absolute;left:5.5px;top:6.5px;width:6px;height:3px;
  border-left:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);
  transform:rotate(-45deg);
}
.value-actions{justify-content:flex-start;margin-bottom:0;}

/* The comparison card. */
.cost-card{
  position:relative;overflow:hidden;
  padding:26px 26px 20px;border-radius:20px;
  background:
    radial-gradient(120% 130% at 100% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 62%),
    var(--panel);
  border:1px solid color-mix(in srgb, var(--accent) 20%, var(--border));
  box-shadow:var(--edge-light), var(--shadow-lg);
}
.cost-card-head{
  display:flex;align-items:center;gap:10px;margin-bottom:22px;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--text-2);
}
.cost-logo{width:22px;height:22px;object-fit:contain;flex-shrink:0;}
.cost-bars{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;}
/* Source order must be label, figure, THEN track. The track spans
   `grid-column:1 / -1`, and with auto-placement a full-width item consumes a
   whole row -- so if it sits between the label and the figure in the DOM, the
   figure is pushed onto a third row and column 2 collapses to 0px (measured:
   grid-template-columns resolved to "245.6px 0px", label and figure both
   full-width and overlapping). Keep the figure before the track. */
.cost-row{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;}
.cost-label{font-size:12.5px;color:var(--text-1);}
.cost-figure{
  font-family:var(--font-mono);font-size:13px;font-weight:600;color:var(--text-0);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.cost-track{
  grid-column:1 / -1;
  height:8px;border-radius:999px;overflow:hidden;
  background:color-mix(in srgb, var(--bg-0) 70%, transparent);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);
}
.cost-fill{
  display:block;height:100%;border-radius:999px;width:var(--w, 0%);
  background:linear-gradient(90deg, var(--accent), var(--accent-hover));
  box-shadow:0 0 12px -2px color-mix(in srgb, var(--accent) 80%, transparent);
}
/* The comparison row is deliberately muted and warm -- it reads as "the old
   way" without needing a red/negative colour, which would look like an
   attack rather than a comparison. */
.cost-row.is-them .cost-label,
.cost-row.is-them .cost-figure{color:var(--text-2);}
.cost-row.is-them .cost-fill{
  background:linear-gradient(90deg, color-mix(in srgb, var(--accent-orange) 55%, var(--bg-3)), color-mix(in srgb, var(--accent-orange) 22%, var(--bg-3)));
  box-shadow:none;
}
.cost-row.is-them{
  margin-top:6px;padding-top:16px;
  border-top:1px dashed color-mix(in srgb, var(--border) 90%, transparent);
}
.cost-note{
  font-size:10.5px;line-height:1.55;color:var(--text-2);margin:20px 0 0;
  padding-top:14px;border-top:1px solid color-mix(in srgb, var(--border) 60%, transparent);
}
/* Bars grow from zero when the card scrolls in. Width (not transform) so the
   rounded cap stays circular instead of being squashed by a scaleX.

   Deliberately an ANIMATION from width:0, not a transition off a width:0
   base state. The base state stays at the real width, so if the reveal never
   fires -- JS blocked, an environment where rAF doesn't run, the element
   never entering the viewport check -- the bars are simply drawn at their
   correct length instead of collapsing to an empty chart. For a data visual
   an un-animated bar is fine; an invisible one looks broken. */
.reveal-ready .cost-card.is-visible .cost-fill{
  animation:cost-grow .9s cubic-bezier(.22,.7,.3,1) both;
}
@keyframes cost-grow{from{width:0;} to{width:var(--w, 0%);}}
.reveal-ready .cost-card.is-visible .cost-row:nth-child(2) .cost-fill{animation-delay:.1s;}
.reveal-ready .cost-card.is-visible .cost-row:nth-child(3) .cost-fill{animation-delay:.2s;}
.reveal-ready .cost-card.is-visible .cost-row:nth-child(4) .cost-fill{animation-delay:.3s;}

/* ---------- FAQ (two column: sticky heading beside the accordion) ---------- */
.faq{
  padding:84px 0;border-top:1px solid var(--border);
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:56px;align-items:start;
}
.faq-head{position:sticky;top:92px;margin-bottom:0;}
.faq-head a{color:var(--accent);text-decoration:none;font-weight:600;}
.faq-head a:hover{text-decoration:underline;}
.faq-list{display:flex;flex-direction:column;gap:10px;max-width:none;}
.faq-item{
  background:var(--panel);border:1px solid var(--border);border-radius:12px;overflow:hidden;
  box-shadow:var(--edge-light);
}
.faq-question{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:17px 20px;font-size:14.5px;font-weight:650;color:var(--text-0);cursor:pointer;
  background:none;border:none;font-family:inherit;text-align:left;
  transition:color .18s ease;
}
.faq-question:hover{color:var(--accent);}
.faq-icon{position:relative;width:16px;height:16px;flex-shrink:0;transition:transform .3s ease;}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;top:50%;left:50%;background:var(--text-2);
  transition:background .2s ease;
}
.faq-icon::before{width:12px;height:2px;transform:translate(-50%,-50%);}
.faq-icon::after{width:2px;height:12px;transform:translate(-50%,-50%);}
.faq-item.open .faq-icon{transform:rotate(45deg);}
.faq-question:hover .faq-icon::before,
.faq-question:hover .faq-icon::after{background:var(--accent);}
/* The animation: a grid row that's 0fr (collapsed) or 1fr (its content's
   natural height) transitions smoothly with no JS height measurement and
   no fixed max-height guess to keep in sync with the actual text. */
.faq-answer-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
.faq-item.open .faq-answer-wrap{grid-template-rows:1fr;}
.faq-answer-inner{overflow:hidden;}
.faq-answer-inner p{font-size:13.5px;line-height:1.6;color:var(--text-1);margin:0;padding:0 20px 18px;}

/* ---------- Plans / Pricing ---------- */
.plans{padding:64px 0 20px;border-top:1px solid var(--border);}
.plans-page{padding-top:72px;border-top:none;}
/* No font-size here on purpose -- these tabs inherit the .section-head h2
   clamp() so every heading on the site sits on one scale. Before this, the
   inner tabs were pinned at 26px while the homepage ran up to 36px, which
   made the site look like two different designs depending on the tab. */
.plans h2{color:var(--text-0);margin:0 0 8px;font-weight:700;}
.plans-grid{display:grid;grid-template-columns:repeat(3, 1fr);gap:20px;align-items:stretch;}
.plan-card{
  position:relative;display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:28px 24px;
  box-shadow:var(--edge-light), var(--shadow-sm);
  transition:border-color .2s ease, transform .2s cubic-bezier(.3,.8,.4,1), box-shadow .2s ease;
}
.plan-card:hover{
  transform:translateY(-3px);
  border-color:color-mix(in srgb, var(--accent) 40%, var(--border));
  box-shadow:var(--edge-light), var(--shadow-md);
}
.plan-card-featured{
  border-color:color-mix(in srgb, var(--accent) 70%, transparent);
  background:
    radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    var(--panel);
  box-shadow:var(--edge-light), var(--shadow-lg), 0 0 60px -34px color-mix(in srgb, var(--accent) 95%, transparent);
}
.plan-card-featured:hover{border-color:var(--accent);}
.plan-amount{font-family:var(--font-display);font-variant-numeric:tabular-nums;}
.plan-badge{
  position:absolute;top:-11px;left:24px;background:var(--accent);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
}
.plan-name{font-size:14px;font-weight:700;color:var(--text-1);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px;}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:12px;}
.plan-amount{font-size:38px;font-weight:700;color:var(--text-0);letter-spacing:-.02em;}
.plan-period{font-size:13.5px;color:var(--text-2);}
.plan-trial{font-size:12px;font-weight:600;color:var(--ok);margin:0 0 12px;}
.plan-desc{font-size:13.5px;color:var(--text-1);margin:0 0 20px;line-height:1.5;min-height:38px;}
.plan-features{list-style:none;margin:0 0 26px;padding:0;flex:1;display:flex;flex-direction:column;gap:11px;}
.plan-features li{
  font-size:13.5px;color:var(--text-1);padding-left:22px;position:relative;line-height:1.4;
}
.plan-features li::before{
  content:"";position:absolute;left:0;top:3px;width:14px;height:14px;border-radius:50%;
  background:var(--bg-3);
}
.plan-features li::after{
  content:"";position:absolute;left:4px;top:6px;width:6px;height:3px;border-left:1.6px solid var(--ok);border-bottom:1.6px solid var(--ok);
  transform:rotate(-45deg);
}
.plan-cta{
  display:block;text-align:center;text-decoration:none;font-weight:600;font-size:13.5px;
  padding:11px 20px;border-radius:8px;transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.plan-cta:hover{transform:translateY(-2px);}
.plan-cta-solid{
  background:linear-gradient(180deg, var(--accent-hover), var(--accent));color:#fff;
  box-shadow:var(--edge-light), 0 8px 22px -8px color-mix(in srgb, var(--accent) 90%, transparent);
}
.plan-cta-solid:hover{
  filter:saturate(1.1);
  box-shadow:var(--edge-light), 0 12px 28px -8px color-mix(in srgb, var(--accent) 100%, transparent);
}
.plan-cta-ghost{background:transparent;color:var(--text-0);border:1px solid var(--border);}
.plan-cta-ghost:hover{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 10%, var(--bg-3));}
.plans-footnote{text-align:center;color:var(--text-2);font-size:12px;margin:22px 0 0;}

/* ---------- Resources ---------- */
.resources{padding:64px 0 20px;border-top:1px solid var(--border);}
.resources-page{padding-top:72px;border-top:none;}
.resources h2{color:var(--text-0);margin:0 0 8px;font-weight:700;}
/* Two columns, not three: there are four cards, and 3+1 leaves a lone card
   stranded on its own row. Revisit if a fifth or sixth card is ever added. */
.resources-grid{display:grid;grid-template-columns:repeat(2, 1fr);gap:16px;}
/* Same panel material as the homepage cards -- these live on a sibling tab of
   the same document, so leaving them flat would read as an unfinished page. */
.resource-card{
  display:block;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:22px;
  text-decoration:none;box-shadow:var(--edge-light), var(--shadow-sm);
  transition:border-color .2s ease, transform .2s cubic-bezier(.3,.8,.4,1), box-shadow .2s ease;
}
.resource-card:hover{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  transform:translateY(-3px);
  box-shadow:var(--edge-light), var(--shadow-md), 0 16px 34px -22px color-mix(in srgb, var(--accent) 80%, transparent);
}
.resource-card:hover .resource-icon{color:var(--accent);background:color-mix(in srgb, var(--accent) 16%, var(--bg-3));}
.resource-icon{transition:background .2s ease, color .2s ease;}
.resource-icon{
  width:32px;height:32px;border-radius:8px;background:var(--bg-3);color:var(--accent);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px;
}
.resource-icon .fi-svg{width:17px;height:17px;}
.resource-card h3{font-size:14px;color:var(--text-0);margin:0 0 6px;font-weight:600;}
.resource-card p{font-size:13px;line-height:1.5;color:var(--text-1);margin:0;}

/* ---------- About ---------- */
.about{padding:64px 0 20px;border-top:1px solid var(--border);}
.about-page{padding-top:72px;border-top:none;}
.about h2{color:var(--text-0);margin:0 0 8px;font-weight:700;}
.about-body{max-width:720px;}
.about-body p{font-size:14.5px;line-height:1.7;color:var(--text-1);margin:0 0 16px;}
/* Stats read as a proper figure block: panel material, an accent rule above
   each number, and tabular figures so the digits align. */
.about-stats{display:flex;gap:14px;margin-top:36px;flex-wrap:wrap;}
.about-stat{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 22px;border-radius:14px;min-width:150px;
  background:var(--panel);border:1px solid var(--border);
  box-shadow:var(--edge-light), var(--shadow-sm);
}
.about-stat-num{
  font-family:var(--font-display);font-size:30px;font-weight:700;color:var(--text-0);
  letter-spacing:-.028em;font-variant-numeric:tabular-nums;line-height:1;
}
.about-stat-label{
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-2);
}

/* ---------- CTA band ---------- */
.cta-band{
  position:relative;overflow:hidden;
  margin:64px 0 48px;padding:44px 32px;border-radius:16px;text-align:center;
  background:linear-gradient(135deg, rgba(2,78,254,.22), rgba(254,121,4,.14));
  border:1px solid color-mix(in srgb, var(--accent) 30%, var(--border));
}
.cta-band h2{font-size:24px;color:var(--text-0);margin:0 0 20px;font-weight:700;}

/* Homepage's closing band gets the full treatment -- this is the last thing
   a visitor sees before the footer, so it carries more weight than the
   shared .cta-band used on the inner tab pages. */
.cta-band-home{
  margin:0 0 52px;padding:32px 36px 34px;border-radius:20px;
  background:
    radial-gradient(90% 160% at 50% 0%, color-mix(in srgb, var(--accent) 32%, transparent), transparent 62%),
    linear-gradient(160deg, color-mix(in srgb, var(--accent) 16%, var(--bg-1)), color-mix(in srgb, var(--accent-orange) 10%, var(--bg-1)));
  border:1px solid color-mix(in srgb, var(--accent) 34%, var(--border));
  box-shadow:var(--edge-light), var(--shadow-lg), 0 0 90px -50px color-mix(in srgb, var(--accent) 90%, transparent);
}
/* Perspective grid floor, fading up into the panel. */
.cta-band-grid{
  position:absolute;inset:0;pointer-events:none;
  background-image:
    repeating-linear-gradient(0deg, color-mix(in srgb, var(--text-0) 9%, transparent) 0 1px, transparent 1px 42px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--text-0) 9%, transparent) 0 1px, transparent 1px 42px);
  -webkit-mask-image:radial-gradient(70% 100% at 50% 100%, #000, transparent 72%);
  mask-image:radial-gradient(70% 100% at 50% 100%, #000, transparent 72%);
  opacity:.55;
}
.cta-band-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;}
/* max-width is generous enough that the headline and subtitle each sit on ONE
   line at desktop -- at 20ch/48ch they were wrapping to two lines apiece and
   adding ~60px of height to a band whose whole job is to be a compact final
   call to action. They still wrap naturally on narrow viewports. */
.cta-band-home h2{
  font-size:clamp(26px, 3vw, 34px);line-height:1.14;margin:0 0 10px;font-weight:750;
  letter-spacing:-.026em;max-width:36ch;
}
.cta-band-sub{
  font-size:14.5px;line-height:1.6;color:var(--text-1);margin:0 0 24px;max-width:72ch;
}

/* ---------- Section dividers ----------
   The stock `border-top:1px solid var(--border)` runs edge to edge at a
   uniform weight, which is a large part of why the page read as a stack of
   identical blocks. These replace it with a hairline that fades out at both
   ends and carries a faint accent in the middle, so a section boundary is
   felt rather than ruled. Applied only to the homepage's own sections --
   the Plans/Resources/About tabs keep the plain rule they already had. */
#overview :is(.usecases, .steps, .new-to-cad, .value, .faq){
  position:relative;border-top:none;
}
#overview :is(.usecases, .steps, .new-to-cad, .value, .faq)::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,
    transparent,
    color-mix(in srgb, var(--border) 90%, transparent) 18%,
    color-mix(in srgb, var(--accent) 30%, var(--border)) 50%,
    color-mix(in srgb, var(--border) 90%, transparent) 82%,
    transparent);
}
/* .faq is a grid, so a ::before child would become a grid item and take a
   cell. Span it across every column so it stays a divider, not a row. */
#overview .faq::before{grid-column:1 / -1;}

/* ---------- Focus states ----------
   The redesigned buttons all paint their own background, which on some of
   them (the gradient CTAs) swallows the UA's default focus ring almost
   entirely. :focus-visible only shows for keyboard users, so this costs
   mouse users nothing. Declared once, near the end, so it wins over the
   component rules above without needing !important. */
.home-body :is(a, button, summary, [tabindex]):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:8px;
}
/* On the accent-filled buttons a blue ring on blue is invisible -- use a
   light halo plus a dark outer edge so it reads on any background. */
.home-body :is(.hero-cta, .home-nav-cta, .plan-cta-solid):focus-visible{
  outline:2px solid #fff;
  outline-offset:2px;
  box-shadow:var(--edge-light), 0 0 0 5px color-mix(in srgb, var(--accent) 55%, transparent);
}
.home-body .faq-question:focus-visible{outline-offset:-3px;}

/* Accent text selection -- small, but it's the kind of detail that reads as
   a finished product rather than a default page. */
.home-body ::selection{background:color-mix(in srgb, var(--accent) 32%, transparent);color:var(--text-0);}

/* ---------- Footer ---------- */
.home-footer{
  position:relative;
  border-top:1px solid var(--border);padding:44px 32px 0;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--bg-1) 45%, transparent));
}
/* Same accent hairline motif as the nav, bookending the page. */
.home-footer::before{
  content:"";position:absolute;top:-1px;left:0;right:0;height:1px;
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--accent) 35%, transparent) 40%, color-mix(in srgb, var(--accent-orange) 24%, transparent) 60%, transparent);
}
.footer-col a{transition:color .15s ease;}
.footer-grid{
  max-width:var(--site-width);margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:24px;padding-bottom:32px;
}
.footer-brand p{color:var(--text-2);font-size:12.5px;margin:10px 0 0;max-width:220px;line-height:1.5;}
/* Social link under the brand + slogan: the YouTube glyph alone on a white
   button.
   White is a fixed value here, not a theme token, and that is deliberate --
   the button reads the same on both themes and the red mark keeps the
   contrast it was drawn for. The faint dark border earns its place on the
   LIGHT theme, where the page sits at #EEF0F3 and a pure-white button would
   otherwise float with no edge; on dark it just softens the perimeter.
   inline-flex, not flex, so it is only as wide as the glyph plus padding.
   40px square is the tap target, which the 20px icon alone would miss. */
.footer-social{
  --yt-red:#FF0000;   /* YouTube's own brand colour, not a CoreShape token */
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:16px;width:40px;height:40px;
  background:#FFFFFF;border:1px solid rgba(0,0,0,.12);border-radius:10px;
  /* Invisible on the dark theme (dark on dark) and doing the real work on the
     light one, where #FFF sits on #EEF0F3 and the edge alone is marginal. */
  box-shadow:0 1px 2px rgba(0,0,0,.06);
  transition:background .15s ease, border-color .15s ease, transform .15s ease;
}
.footer-social:hover{background:#F2F2F2;border-color:rgba(0,0,0,.2);transform:translateY(-1px);}
.footer-social:active{transform:translateY(0);}
/* The focus ring has to sit against WHITE, not against the footer, so it uses
   the accent colour with an offset rather than the usual outline. */
.footer-social:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.footer-social svg{width:20px;height:20px;fill:var(--yt-red);flex:none;display:block;}
.footer-col h4{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin:0 0 14px;}
.footer-col{display:flex;flex-direction:column;gap:10px;}
.footer-col .auth-guest-only{display:contents;}
.footer-col a{color:var(--text-1);text-decoration:none;font-size:13px;}
.footer-col a:hover{color:var(--text-0);}
.footer-bottom{
  max-width:var(--site-width);margin:0 auto;border-top:1px solid var(--border);padding:18px 0 28px;
  color:var(--text-2);font-size:12px;
}

/* ---------- Scroll reveal + section motion (Use cases / Workflow) ----------
   home.js puts .reveal-ready on <html>, then .is-visible on each [data-reveal]
   element as it scrolls into view. Gating the hidden state behind .reveal-ready
   means the page still renders completely if the script never runs.
   The entrance uses the standalone `translate`/`scale` properties rather than
   `transform` so the hover effects below (which do use `transform`) compose with
   it instead of being clobbered by the finished animation's fill state. */
.reveal-ready [data-reveal]{opacity:0;}
.reveal-ready [data-reveal].is-visible{
  animation:reveal-up .6s cubic-bezier(.22,.7,.3,1) both;
  animation-delay:var(--reveal-delay, 0ms);
}
@keyframes reveal-up{
  from{opacity:0;translate:0 18px;}
  to{opacity:1;translate:none;}
}

/* Cards cascade left-to-right instead of all landing at once. */
.usecases-grid [data-reveal]:nth-child(2){--reveal-delay:70ms;}
.usecases-grid [data-reveal]:nth-child(3){--reveal-delay:140ms;}
.usecases-grid [data-reveal]:nth-child(4){--reveal-delay:210ms;}
.steps-grid [data-reveal]:nth-child(2){--reveal-delay:120ms;}
.steps-grid [data-reveal]:nth-child(3){--reveal-delay:240ms;}

/* Use case cards: lift on hover, icon pops with it. */
.usecase-card{
  position:relative;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.usecase-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:var(--edge-light), 0 20px 40px -24px color-mix(in srgb, var(--accent) 85%, transparent), var(--shadow-md);
}
.usecase-icon{transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .25s ease, box-shadow .25s ease;}
.usecase-card:hover .usecase-icon{
  transform:scale(1.09) rotate(-4deg);
  background:linear-gradient(135deg, color-mix(in srgb, var(--accent) 38%, transparent), color-mix(in srgb, var(--accent) 14%, transparent));
  box-shadow:var(--edge-light), 0 10px 24px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}

/* Step cards get an accent bar that wipes across the top edge on hover --
   scaleX on a pseudo-element, so it composites cleanly. Inset from the
   corners rather than clipped, since .step-card can't use overflow:hidden
   (see the note on that rule). */
.step-card::after{
  content:"";position:absolute;top:-1px;left:20px;right:20px;height:2px;border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-orange));
  transform:scaleX(0);transform-origin:left center;
  transition:transform .4s cubic-bezier(.22,.7,.3,1);
}
.step-card:hover::after{transform:scaleX(1);}

/* Workflow: cards lift, and a connector "draws" across the gap to the next
   step once the row is revealed, so 1 -> 2 -> 3 reads as a sequence. */
.step-card{
  position:relative;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.step-card:hover{
  transform:translateY(-4px);
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:0 14px 30px -20px color-mix(in srgb, var(--accent) 70%, transparent);
}
.step-card::before{
  content:'';position:absolute;left:100%;width:22px;height:2px;
  top:43px; /* card padding-top 26px + half the 34px .step-num inside .step-head */
  background:linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 20%, transparent));
  transform-origin:left center;
  transition:transform .5s ease;
}
.step-card:last-child::before{display:none;}
.reveal-ready .step-card::before{transform:scaleX(0);}
.reveal-ready .step-card.is-visible::before{
  transform:scaleX(1);
  transition-delay:calc(var(--reveal-delay, 0ms) + 380ms);
}
.step-num{transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease;}
.reveal-ready .step-card[data-reveal] .step-num{opacity:0;}
.reveal-ready .step-card[data-reveal].is-visible .step-num{
  animation:num-pop .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--reveal-delay, 0ms) + 160ms);
}
@keyframes num-pop{
  from{opacity:0;scale:.35;}
  to{opacity:1;scale:1;}
}
.step-card:hover .step-num{
  transform:scale(1.12);
  box-shadow:0 0 0 6px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* FAQ rows: an accent edge on hover / while open. Deliberately NOT scroll-revealed
   -- the rows carry no [data-reveal], so they are painted in place. The accordion's
   own open/close transition (grid-template-rows, above) is separate and stays. */
.faq-item{transition:border-color .25s ease, box-shadow .25s ease;}
.faq-item:hover{border-color:color-mix(in srgb, var(--accent) 35%, var(--border));}
.faq-item.open{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--border));
  box-shadow:0 10px 26px -22px color-mix(in srgb, var(--accent) 70%, transparent);
}

@media (prefers-reduced-motion: reduce){
  .reveal-ready [data-reveal],
  .reveal-ready [data-reveal].is-visible,
  .reveal-ready .step-card[data-reveal] .step-num,
  .reveal-ready .step-card[data-reveal].is-visible .step-num{
    animation:none;opacity:1;translate:none;scale:none;
  }
  .reveal-ready .step-card::before,
  .reveal-ready .step-card.is-visible::before{transform:scaleX(1);transition:none;}
  .usecase-card, .usecase-icon, .step-card, .step-num, .faq-item{transition:none;}
  .usecase-card:hover, .step-card:hover,
  .usecase-card:hover .usecase-icon, .step-card:hover .step-num{transform:none;}

  /* The ambient glow drift is switched off entirely rather than slowed: it
     never stops on its own, which is exactly what this query is for. Static
     end-states are kept so nothing disappears or sits mid-animation. The hero
     clip handles reduced motion itself, in the player script: it holds on a
     still of the first recording and shows controls. */
  .hero-glow-a, .hero-glow-b{animation:none;}
  .hero-cta, .hero-cta-secondary,
  .step-card::after, .usecase-tag, .faq-question{transition:none;}
  .hero-cta::after{display:none;}
  .hero-cta:hover, .hero-cta-secondary:hover{transform:none;}
  .reveal-ready .blueprint .bp-shape path,
  .reveal-ready .blueprint .bp-shape circle,
  .reveal-ready .blueprint.is-visible .bp-shape path,
  .reveal-ready .blueprint.is-visible .bp-shape circle{
    animation:none;stroke-dasharray:none;stroke-dashoffset:0;
  }
  /* Cost bars: show them at full length immediately rather than growing. */
  .reveal-ready .cost-card.is-visible .cost-fill{animation:none;width:var(--w, 0%);}
}

@media (max-width: 900px){
  .step-card::before{display:none;} /* single column -- nothing to connect to */
  .home-tabs, .home-nav-actions{display:none;}
  .home-nav-burger{display:flex;}
  .home-tabs-mobile.open{display:flex;}
  .hero{padding:26px 0 48px;}
  .hero-inner{grid-template-columns:1fr;gap:36px;}
  /* The clip stacks under the copy rather than being hidden: it is a
     recording of the real app, and a phone visitor has the most to gain from
     seeing it. */
  .hero-visual{margin-top:4px;}
  .ml-caption{justify-content:flex-start;}
  .new-to-cad-headline{font-size:32px;}
  .resources-grid, .steps-grid{grid-template-columns:1fr;}
  .usecases-grid{grid-template-columns:1fr;}
  .usecase-card.uc-wide{grid-column:auto;}
  .plans-grid{grid-template-columns:1fr;}
  .footer-grid{grid-template-columns:1fr 1fr;}
  /* Split sections collapse to one column. */
  .new-to-cad-inner{grid-template-columns:1fr;gap:34px;padding:32px 24px;}
  .value-inner{grid-template-columns:1fr;gap:34px;}
  .value-text h2{max-width:none;}
  .faq{grid-template-columns:1fr;gap:28px;}
  .faq-head{position:static;}
  .steps, .usecases, .new-to-cad, .value, .faq{padding:56px 0;}
  .cta-band-home{padding:52px 24px;border-radius:18px;}
  .reg-mark{display:none;}
}
@media (min-width: 901px) and (max-width: 1080px){
  .resources-grid{grid-template-columns:repeat(2, 1fr);}
  /* Bento needs 3 columns to work; at this width fall back to 2 equal
     columns with every card the same size. */
  .usecases-grid{grid-template-columns:repeat(2, 1fr);}
  .usecase-card.uc-wide{grid-column:auto;}
  .reg-mark{display:none;}
}