/* -------------------------------------------------------------------------
   CADsymbols — marketing site.

   Colour, type and dark mode come from tokens.css, which the app shares, so a
   restyle lands on both halves at once. This file is the site's own layout.

   DIRECTION — drafting film, not a SaaS landing page.

   The subject is technical drawing, so the page borrows its vocabulary rather
   than the usual gradient-hero conventions: a faint drafting grid instead of a
   colour wash, hairline rules instead of card shadows, square corners, tabular
   figures, and monospace on anything a caliper or a standard number touches.
   The accent is the TurboCAD blue already in this project's icon set, so the
   site sits beside the 2026 ribbon rather than beside a template.

   One accent, spent deliberately: blue marks the thing being generated -- the
   part, the centre line, the format you are about to download -- and nothing
   else. Everything structural is ink and rule.
   ------------------------------------------------------------------------- */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-sans);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; }
img, svg { max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 740px; }

/* -- chrome --------------------------------------------------------------- */

.top {
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--film) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  position: sticky; top: 0; z-index: 20;
}
.top .wrap { display: flex; align-items: center; gap: 22px; height: 62px; }

.brand {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; letter-spacing: -.012em; color: var(--ink); font-size: 16.5px;
}
.brand:hover { text-decoration: none; }
.brand svg { display: block; }

.nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav a { color: var(--ink-soft); font-size: 14px; }
.nav a:hover { color: var(--ink); text-decoration: none; }
.nav a[aria-current] { color: var(--ink); font-weight: 500; }

/* Language switch. Two links rather than a <select>: a German visitor needs to
   SEE that a German site exists, and a collapsed dropdown hides that. */
.langsw {
  display: inline-flex; align-items: stretch; border: 1px solid var(--rule);
  border-radius: 3px; overflow: hidden; font-family: var(--f-mono);
  font-size: 11.5px; letter-spacing: .06em;
}
.langsw a {
  padding: 5px 9px; color: var(--muted); background: var(--film);
  border-left: 1px solid var(--rule);
}
.langsw a:first-child { border-left: 0; }
.langsw a:hover { color: var(--ink); text-decoration: none; }
.langsw a[aria-current] { background: var(--accent); color: #fff; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 17px; border-radius: 3px; font-size: 14px; font-weight: 500;
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); text-decoration: none; }
.btn-ghost { border-color: var(--rule); color: var(--ink); background: var(--film); }
.btn-ghost:hover { border-color: var(--muted); text-decoration: none; }
.btn-lg { padding: 12px 24px; font-size: 15px; }
.btn:disabled { opacity: .55; cursor: default; }
@media (prefers-reduced-motion: no-preference) {
  .btn-primary:active { transform: translateY(1px); }
}

/* -- sections ------------------------------------------------------------- */

section { padding: 74px 0; border-bottom: 1px solid var(--rule-soft); }
section:last-of-type { border-bottom: 0; }

/* The hero sits on drafting film: a 1 mm grid, barely there. It is a
   background-image rather than an element so nothing has to be positioned and
   nothing can overlap the text. */
.hero {
  background-image:
    linear-gradient(var(--rule-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px);
  background-size: 26px 26px, 26px 26px;
  background-position: -1px -1px;
  position: relative;
}
.hero::after {
  /* Fade the grid out downward so it reads as paper, not as a table. */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom,
    transparent 0%, transparent 40%, var(--paper) 100%);
}
.hero > .wrap { position: relative; z-index: 1; }

h1 {
  font-size: clamp(32px, 5.4vw, 52px); line-height: 1.08; letter-spacing: -.026em;
  margin: 0 0 18px; text-wrap: balance; font-weight: 600;
}
h2 {
  font-size: clamp(22px, 3vw, 29px); line-height: 1.22; letter-spacing: -.018em;
  margin: 0 0 14px; text-wrap: balance; font-weight: 600;
}
h3 { font-size: 16px; margin: 0 0 6px; font-weight: 600; letter-spacing: -.006em; }
p { margin: 0 0 16px; max-width: 66ch; }
.lede { font-size: clamp(17px, 2vw, 19.5px); color: var(--ink-soft); line-height: 1.55; }

.eyebrow {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 14px;
  display: flex; align-items: center; gap: 9px;
}
.eyebrow::after {
  content: ""; height: 1px; flex: 1; max-width: 90px; background: var(--rule);
}

.cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; align-items: center; }
.cta .fine { font-size: 13.5px; color: var(--muted); max-width: 34ch; }

/* -- statbar -------------------------------------------------------------- */

.stats {
  display: flex; flex-wrap: wrap; gap: 0; margin-top: 42px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.stats div {
  flex: 1 1 150px; padding: 16px 20px 15px;
  border-left: 1px solid var(--rule-soft);
}
.stats div:first-child { border-left: 0; padding-left: 0; }
.stats b {
  display: block; font-size: 23px; font-weight: 600; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.stats span {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted);
}

/* -- the three drawings --------------------------------------------------- */

.shots {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 16px; margin: 32px 0 0;
}
.shot {
  margin: 0; padding: 13px; background: var(--film);
  border: 1px solid var(--rule); border-radius: 4px;
}
.shot svg { display: block; width: 100%; height: auto; }
.shot figcaption {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 10px; margin-top: 11px; padding-top: 10px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--f-mono); font-size: 12px;
}
.shot figcaption b { font-weight: 500; color: var(--ink); }
.shot figcaption span { color: var(--muted); font-variant-numeric: tabular-nums; }

/* -- feature grid with icons ---------------------------------------------- */

.cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px 34px; margin-top: 34px;
}
.cols p { margin: 0; color: var(--ink-soft); font-size: 15px; }
.ico {
  width: 30px; height: 30px; margin-bottom: 12px; color: var(--accent);
  display: block;
}
.ico svg { display: block; width: 100%; height: 100%; }

/* -- portal illustrations -------------------------------------------------- */

.figure {
  margin: 34px 0 0; padding: 20px; background: var(--film);
  border: 1px solid var(--rule); border-radius: 4px;
}
.figure svg { display: block; width: 100%; height: auto; }
.figure figcaption {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule-soft);
  font-size: 13.5px; color: var(--muted); max-width: 70ch;
}

/* -- steps ---------------------------------------------------------------- */

.steps { counter-reset: step; margin-top: 26px; }
.steps .step {
  display: flex; gap: 18px; padding: 18px 0;
  border-top: 1px solid var(--rule-soft);
}
.steps .step:first-child { border-top: 0; padding-top: 0; }
.steps .num {
  font-family: var(--f-mono); font-size: 12px; color: var(--accent);
  padding-top: 3px; min-width: 26px; font-variant-numeric: tabular-nums;
}

/* -- tables --------------------------------------------------------------- */

.tablewrap { overflow-x: auto; margin-top: 26px; }
table { border-collapse: collapse; width: 100%; font-size: 15px; }
th, td { text-align: left; padding: 11px 16px 11px 0; border-bottom: 1px solid var(--rule-soft); }
th {
  font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  border-bottom-color: var(--rule);
}
td.n { text-align: right; font-family: var(--f-mono); font-variant-numeric: tabular-nums; }
tbody tr:hover { background: var(--film-2); }

/* -- format chips --------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.chip {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em;
  padding: 5px 11px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--film); color: var(--ink-soft);
}
.chip.on { border-color: var(--accent); color: var(--accent-ink); background: var(--accent-bg); }

/* -- pricing -------------------------------------------------------------- */

.plans {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px; margin-top: 34px;
}
.plan {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--film);
  padding: 26px; display: flex; flex-direction: column;
}
.plan.featured { border-color: var(--accent); box-shadow: var(--shadow); }
.plan .price {
  font-size: 34px; font-weight: 600; letter-spacing: -.026em; margin: 14px 0 2px;
  font-variant-numeric: tabular-nums;
}
.plan .per { font-size: 13.5px; color: var(--muted); margin-bottom: 18px; }
.plan ul { margin: 0 0 24px; padding-left: 0; list-style: none; font-size: 14.5px; color: var(--ink-soft); }
.plan li { margin: 8px 0; padding-left: 22px; position: relative; }
.plan li::before {
  content: ""; position: absolute; left: 2px; top: .55em;
  width: 9px; height: 5px; border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg);
}
.plan .btn { margin-top: auto; }

.tbd {
  display: inline-block; padding: 1px 7px; border-radius: 2px;
  background: var(--amber-bg); color: var(--amber);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; vertical-align: middle;
}

/* -- forms / sign-in ------------------------------------------------------ */

.signin-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 20px; align-items: start;
}
.card {
  border: 1px solid var(--rule); border-radius: 4px; background: var(--film);
  padding: 28px; position: relative;
}
.cardnum {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--muted);
  display: block; margin-bottom: 14px;
}
label { display: block; font-size: 14px; font-weight: 500; margin-bottom: 6px; }
input[type=text], input[type=email] {
  width: 100%; padding: 11px 13px; font-family: var(--f-mono); font-size: 14px;
  border: 1px solid var(--rule); border-radius: 3px;
  background: var(--film-2); color: var(--ink); letter-spacing: .03em;
}
input:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
.hint { font-size: 13px; color: var(--muted); margin: 8px 0 0; }
.msg { margin-top: 14px; padding: 10px 13px; border-radius: 3px; font-size: 14px; display: none; }
.msg.bad  { display: block; background: var(--amber-bg); color: var(--amber); }
.msg.good { display: block; background: var(--accent-bg); color: var(--accent-ink); }

.ticks {
  list-style: none; margin: 22px 0 0; padding: 18px 0 0;
  border-top: 1px solid var(--rule-soft); font-size: 14px; color: var(--ink-soft);
}
.ticks li { margin: 7px 0; padding-left: 22px; position: relative; }
.ticks li::before {
  content: ""; position: absolute; left: 2px; top: .5em;
  width: 9px; height: 5px; border-left: 1.6px solid var(--accent);
  border-bottom: 1.6px solid var(--accent); transform: rotate(-45deg);
}

/* -- footer --------------------------------------------------------------- */

.foot { border-top: 1px solid var(--rule); padding: 32px 0 50px; margin-top: 12px; }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 12px 26px; align-items: baseline; }
.foot a, .foot span { font-size: 13.5px; color: var(--muted); }
.foot a:hover { color: var(--ink); }

@media (max-width: 700px) {
  .nav { gap: 15px; }
  .nav .hide-sm { display: none; }
  section { padding: 48px 0; }
  .stats div { border-left: 0; padding-left: 0; flex-basis: 45%; }
}

/* Below this the header simply cannot hold the call to action as well as the
   links, and it pushed the whole document sideways. The hero carries the same
   button three lines further down, so the header gives it up rather than
   letting the page scroll horizontally. */
@media (max-width: 560px) {
  .top .wrap { gap: 12px; }
  .nav { gap: 14px; }
  .nav .btn { display: none; }
  .langsw { font-size: 11px; }
  h1 { font-size: clamp(27px, 8vw, 34px); }
  .wrap { padding: 0 18px; }
}