/* FitUp website. Plain CSS, no framework.
   The app's "drafting sheet" (FitUp/Core/Theme.swift, docs/DESIGN.md):
   warm paper with an 8px graph grid, opaque plates with 45-degree bevel
   corners, a 1px graphite object line, one copper accent, layout green for
   the cut length and nothing else, monospace for titles and every number.
   No shadows, no rounded corners, no gradients beyond the grid lines. */

:root {
  --bg: #F3F0E6;            /* n2 paper */
  --surface: #FBF9F3;       /* n1 sheet, plates */
  --rule: #DAD5C8;          /* n3 */
  --dim: #5F5C55;           /* n4 lead */
  --ink: #222326;           /* n5 graphite */
  --mute: #8C887E;
  --line: #46474B;          /* 1px object line */
  --hair: rgba(34, 35, 38, 0.14);
  --grid: rgba(34, 35, 38, 0.055);
  --grid-major: rgba(34, 35, 38, 0.10);
  --accent: #9A5724;        /* copper */
  --accent-ink: #FBF9F3;
  --accent-pressed: #82481C;
  --selected: #F2E9DE;
  --signal: #32742A;        /* layout green: the cut length */
  --signal-fill: #E7ECDF;
  --danger: #AE2F27;
  --bevel: 6px;
  --max: 1080px;
  --text: 700px;
  --gutter: 16px;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #26282B;
    --surface: #303336;
    --rule: #474A4E;
    --dim: #B0AEA7;
    --ink: #EEEBE3;
    --mute: #7F8184;
    --line: #86888B;
    --hair: rgba(238, 235, 227, 0.14);
    --grid: rgba(238, 235, 227, 0.045);
    --grid-major: rgba(238, 235, 227, 0.085);
    --accent: #D08A62;
    --accent-ink: #1E1F21;
    --accent-pressed: #DC9D78;
    --selected: #453E3B;
    --signal: #8DC76A;
    --signal-fill: #344033;
    --danger: #F27D71;
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px, 8px 8px, 8px 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--surface); color: var(--ink); padding: 8px 12px; border: 1px solid var(--line); z-index: 10; }
.skip:focus { left: 8px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* Bevel plate: 45-degree cut corners where the browser supports corner-shape,
   square corners elsewhere. Never rounded. */
.plate, .btn, .chip, .badge, .field, .result, .cta, .shot, .note, .plan, details.q, .tile {
  border-radius: 0;
}
@supports (corner-shape: bevel) {
  .plate, .btn, .chip, .field, .result, .cta, .note, .plan, details.q, .tile { border-radius: var(--bevel); corner-shape: bevel; }
  .result, .cta { border-radius: 10px; }
}
.plate { background: var(--surface); border: 1px solid var(--line); padding: 16px; }

/* Header */
.top { border-bottom: 1px solid var(--line); background: var(--surface); }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-top: 10px; padding-bottom: 10px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-family: var(--mono); font-weight: 600; font-size: 1.05rem; min-height: 44px; }
.brand img { width: 32px; height: 32px; border-radius: 7px; }
.top nav { display: flex; flex-wrap: wrap; gap: 0 4px; margin-right: -10px; }
.top nav a { color: var(--dim); text-decoration: none; font-size: 0.95rem; padding: 10px; min-height: 44px; display: inline-flex; align-items: center; }
.top nav a:hover { color: var(--ink); }
.top nav a[aria-current="page"], .top nav a[aria-current="true"] { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px; }

/* Breadcrumbs */
.crumbs { font-family: var(--mono); font-size: 0.78rem; color: var(--dim); padding-top: 14px; }
.crumbs a { display: inline-block; padding: 6px 0; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.crumbs li { display: inline-flex; align-items: center; margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--mute); }
.crumbs a { color: var(--dim); }

/* Type */
h1, h2, h3 { font-family: var(--mono); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; margin: 0; }
h1 { font-size: clamp(1.75rem, 6.2vw, 2.7rem); }
h2 { font-size: clamp(1.3rem, 4.4vw, 1.75rem); margin: 0 0 12px; }
h3 { font-size: 1.08rem; margin: 0 0 6px; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
ul, ol { margin: 0 0 16px; padding-left: 22px; }
li { margin-bottom: 6px; }
.kicker { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; font-weight: 600; }
.lede { font-size: 1.12rem; color: var(--dim); max-width: 62ch; }
.dim { color: var(--dim); }
.small { font-size: 0.9rem; }
.mono { font-family: var(--mono); }
.cut { color: var(--signal); font-family: var(--mono); font-weight: 600; }
code, .formula, kbd { font-family: var(--mono); font-size: 0.92em; }
strong { font-weight: 600; }

/* Dimension line under a headline, like the app's drawings */
.dimline { display: flex; align-items: center; gap: 10px; color: var(--accent); font-family: var(--mono); font-size: 0.85rem; margin: 14px 0 4px; max-width: 520px; }
.dimline::before, .dimline::after { content: ""; flex: 1; height: 9px; border-left: 1px solid currentColor; background: linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat; }
.dimline::after { border-left: 0; border-right: 1px solid currentColor; }

/* Layout */
main { display: block; }
.section { padding: 40px 0; border-bottom: 1px solid var(--hair); }
.section:last-child { border-bottom: 0; }
.prose { max-width: var(--text); }
.prose h2 { margin-top: 36px; }
.prose h3 { margin-top: 24px; }
.prose > :first-child { margin-top: 0; }
.prose dl { margin: 0 0 18px; }
.prose dt { margin-top: 12px; }
.prose dd { margin: 2px 0 0; color: var(--dim); }
.grid2, .grid3, .grid4 { display: grid; grid-template-columns: 1fr; gap: 12px; }
.hero { padding: 32px 0 36px; border-bottom: 1px solid var(--line); }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 28px; align-items: center; }
.hero h1 { margin-bottom: 12px; }
.hero .lede { margin-bottom: 18px; }
.page-head { padding: 22px 0 8px; }
.page-head h1 { margin-bottom: 12px; }

/* Answer box: the short answer that opens every question page */
.answer { background: var(--signal-fill); border: 1px solid var(--line); border-left: 4px solid var(--signal); padding: 14px 16px; margin: 8px 0 24px; }
.answer p:last-child { margin-bottom: 0; }
.answer .label { font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); font-weight: 600; margin-bottom: 4px; }

.formula { display: block; background: var(--surface); border: 1px solid var(--line); padding: 12px 14px; margin: 8px 0 18px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.formula b { color: var(--signal); }
.note { border: 1px dashed var(--line); background: var(--surface); padding: 12px 14px; font-size: 0.95rem; margin: 0 0 18px; }
.verify { font-family: var(--mono); font-size: 0.85rem; color: var(--dim); }

/* Tables */
.table-scroll { overflow-x: auto; margin: 8px 0 20px; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; font-family: var(--mono); font-size: 0.92rem; background: var(--surface); min-width: 100%; }
caption { text-align: left; font-family: var(--sans); font-size: 0.88rem; color: var(--dim); padding: 0 0 8px; caption-side: top; position: sticky; left: 0; max-width: calc(100vw - 2 * var(--gutter)); }
th, td { border: 1px solid var(--line); padding: 7px 10px; text-align: right; white-space: nowrap; }
thead th { background: var(--rule); font-weight: 600; }
tbody th { text-align: left; font-weight: 600; }
tr.hl td, tr.hl th { color: var(--signal); }
.t-left th, .t-left td { text-align: left; white-space: normal; min-width: 7em; }

/* Buttons and badge */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 18px; background: var(--accent); color: var(--accent-ink); border: 1px solid var(--accent); font-family: var(--sans); font-weight: 600; font-size: 1rem; text-decoration: none; cursor: pointer; }
.btn:hover { background: var(--accent-pressed); border-color: var(--accent-pressed); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--surface); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 8px 0 6px; }
.badge { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; background: #000; color: #fff; border: 1px solid #A6A6A6; border-radius: 9px; padding: 8px 16px 8px 12px; text-decoration: none; line-height: 1.1; }
.badge:hover { background: #1b1b1b; }
.badge svg { width: 26px; height: 26px; fill: #fff; }
.badge small { display: block; font-size: 0.66rem; letter-spacing: 0.02em; }
.badge strong { display: block; font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; font-family: var(--sans); }

/* Cards and tiles */
.tile { display: block; background: var(--surface); border: 1px solid var(--line); padding: 16px; color: var(--ink); text-decoration: none; }
a.tile:hover { background: var(--selected); border-color: var(--accent); }
.tile .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.tile h3 { margin-bottom: 6px; }
.tile p { color: var(--dim); margin: 0; font-size: 0.97rem; }
.tile p + p { margin-top: 8px; }
.tile .more { display: inline-block; margin-top: 10px; color: var(--accent); font-size: 0.92rem; }
.pro { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; border: 1px solid var(--line); padding: 1px 5px; color: var(--dim); white-space: nowrap; }
.free { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; border: 1px solid var(--signal); padding: 1px 5px; color: var(--signal); white-space: nowrap; }

/* Steps */
.steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 16px; display: grid; gap: 14px; }
.steps > li { counter-increment: s; position: relative; padding-left: 52px; margin: 0; }
.steps > li::before { content: counter(s, decimal-leading-zero); position: absolute; left: 0; top: 1px; width: 38px; height: 30px; display: grid; place-items: center; border: 1px solid var(--line); background: var(--surface); color: var(--accent); font-family: var(--mono); font-weight: 600; font-size: 0.85rem; }
.steps > li p { margin-bottom: 0; color: var(--dim); }
.prose .steps h3, .steps h3 { margin: 0 0 4px; padding-top: 4px; }

/* Screenshots: composed App Store frames, shown as they are */
.shot { margin: 0; }
.shot img { width: 100%; max-width: 320px; border: 1px solid var(--line); background: var(--bg); }
.shot figcaption { font-size: 0.85rem; color: var(--dim); margin-top: 8px; max-width: 320px; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.shots .shot img { max-width: 100%; }

/* Buck */
.buck { width: 140px; height: auto; }
.buck.lg { width: 220px; }

/* App Store call to action */
.cta { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); padding: 20px; margin: 32px 0 8px; }
.cta h2 { font-size: 1.3rem; margin-bottom: 6px; }
.cta p { color: var(--dim); margin-bottom: 8px; }

/* Diagrams (inline SVG) */
.diagram { background: var(--surface); border: 1px solid var(--line); padding: 12px; margin: 8px 0 20px; }
.diagram svg { width: 100%; max-width: 560px; margin: 0 auto; }
.diagram figcaption { font-size: 0.85rem; color: var(--dim); margin-top: 6px; }
.d-pipe { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; fill: none; }
.d-travel { stroke: var(--accent); stroke-width: 3; stroke-linecap: round; fill: none; }
.d-cut { stroke: var(--signal); stroke-width: 3; stroke-linecap: round; fill: none; }
.d-dim { stroke: var(--dim); stroke-width: 1; fill: none; }
.d-hidden { stroke: var(--dim); stroke-width: 1; stroke-dasharray: 4 3; fill: none; }
.d-center { stroke: var(--mute); stroke-width: 1; stroke-dasharray: 14 3 3 3; fill: none; }
.d-fit { stroke: var(--ink); stroke-width: 1.5; fill: var(--rule); }
.d-text { font-family: var(--mono); font-size: 15px; fill: var(--dim); paint-order: stroke; stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.result .d-text { stroke: var(--bg); }
.d-text.c { fill: var(--accent); }
.d-text.g { fill: var(--signal); font-weight: 600; }

/* FAQ */
details.q { background: var(--surface); border: 1px solid var(--line); margin: 0 0 8px; }
details.q summary { cursor: pointer; list-style: none; padding: 14px 44px 14px 16px; position: relative; font-weight: 600; min-height: 48px; }
details.q summary::-webkit-details-marker { display: none; }
details.q summary h2, details.q summary h3 { display: inline; font-family: var(--sans); font-size: 1rem; letter-spacing: 0; margin: 0; line-height: 1.4; }
details.q summary::after { content: "+"; position: absolute; right: 16px; top: 13px; font-family: var(--mono); color: var(--accent); font-size: 1.1rem; }
details.q[open] summary::after { content: "\2212"; }
details.q .a { padding: 0 16px 6px; color: var(--dim); }
.faq-static h3 { margin-top: 28px; font-size: 1.1rem; }
.faq-static p { color: var(--dim); }

/* Pricing */
.plans { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0 18px; }
.plan { background: var(--surface); border: 1px solid var(--line); padding: 18px; position: relative; }
.plan.featured { border: 2px solid var(--accent); background: var(--selected); }
.plan .tag { position: absolute; top: -11px; right: 12px; background: var(--accent); color: var(--accent-ink); font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; padding: 2px 8px; text-transform: uppercase; }
.plan .price { font-family: var(--mono); font-size: 1.7rem; font-weight: 600; margin: 2px 0 6px; letter-spacing: -0.02em; }
.plan .price span { font-size: 0.9rem; color: var(--dim); font-weight: 500; letter-spacing: 0; }
.plan p:last-child { margin-bottom: 0; color: var(--dim); }
.legal { font-size: 0.9rem; color: var(--dim); }

/* Calculator */
.calc { background: var(--surface); border: 1px solid var(--line); padding: 16px; margin: 8px 0 24px; }
.calc fieldset { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.calc legend, .calc label.l { display: block; font-family: var(--mono); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); font-weight: 600; margin-bottom: 6px; padding: 0; }
.calc .row { display: grid; grid-template-columns: 1fr; gap: 12px; margin-bottom: 14px; }
.field { width: 100%; min-height: 48px; font-family: var(--mono); font-size: 1.1rem; color: var(--ink); background: var(--bg); border: 1px solid var(--line); padding: 8px 12px; }
.field:focus { outline: none; border: 2px solid var(--accent); padding: 7px 11px; }
select.field { font-size: 1rem; appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--dim) 50%), linear-gradient(135deg, var(--dim) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 32px; }
.field[aria-invalid="true"] { border-color: var(--danger); }
.hint { font-size: 0.82rem; color: var(--dim); margin: 4px 0 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; min-width: 64px; justify-content: center; padding: 6px 12px; border: 1px solid var(--line); background: var(--bg); font-family: var(--mono); font-size: 0.98rem; cursor: pointer; }
@supports (corner-shape: bevel) { .chip span { border-radius: 4px; corner-shape: bevel; } }
.chip input:checked + span { border: 2px solid var(--accent); background: var(--selected); padding: 5px 11px; color: var(--ink); }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.custom-angle { margin-top: 8px; max-width: 200px; }
.result { border: 1px solid var(--line); background: var(--bg); padding: 16px; margin-top: 6px; }
.result .cutlabel { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--signal); font-weight: 600; }
.result .cutvalue { font-family: var(--mono); font-size: clamp(2.2rem, 11vw, 3.2rem); line-height: 1.1; color: var(--signal); font-weight: 600; margin: 2px 0 10px; letter-spacing: -0.02em; }
.result .cutvalue.bad { color: var(--danger); font-size: 1.15rem; line-height: 1.4; letter-spacing: 0; }
.result dl { display: grid; grid-template-columns: auto 1fr; gap: 0; margin: 0 0 12px; }
.result dt, .result dd { margin: 0; padding: 8px 0; border-top: 1px solid var(--hair); }
.result dt { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); align-self: center; }
.result dd { text-align: right; font-family: var(--mono); font-size: 1.1rem; }
.result dd small { display: block; font-size: 0.78rem; color: var(--dim); font-family: var(--sans); }
.result .formula { margin: 0 0 10px; font-size: 0.84rem; }
.result svg { width: 100%; max-width: 460px; margin: 0 auto 10px; }

/* Footer */
.foot { margin-top: 40px; border-top: 1px solid var(--line); background: var(--surface); padding: 28px 0 40px; font-size: 0.92rem; }
.foot .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 16px; }
.foot h2 { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); margin: 0 0 8px; }
.foot ul { list-style: none; padding: 0; margin: 0; }
.foot li { margin: 0; }
.foot li a { color: var(--ink); text-decoration: none; display: inline-block; padding: 5px 0; }
.foot li a:hover { color: var(--accent); text-decoration: underline; }
.foot .fine { margin-top: 24px; color: var(--dim); font-size: 0.85rem; }
.foot .fine p { margin: 0 0 6px; }

/* Legal documents (privacy, terms, support) */
.doc { max-width: var(--text); padding-bottom: 8px; }
.doc h1 { margin: 22px 0 6px; }
.doc .meta { font-family: var(--mono); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); margin-bottom: 20px; }
.doc h2 { font-size: 1.22rem; margin: 34px 0 10px; }
.doc h3 { font-size: 1.02rem; margin: 22px 0 6px; }
.doc p, .doc li { color: var(--dim); }
.doc strong { color: var(--ink); }
.doc .summary { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent); padding: 14px 16px; margin: 18px 0 8px; color: var(--ink); }
.contact { background: var(--surface); border: 1px solid var(--line); padding: 16px; margin: 18px 0; }
.contact .k { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--dim); }
.contact .v { font-family: var(--mono); font-size: 1.02rem; margin-top: 4px; word-break: break-all; }
.contact .v a { display: inline-block; padding: 10px 0; }

@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .hero { padding: 52px 0 52px; }
  .hero-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 40px; }
  .section { padding: 56px 0; }
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cta { grid-template-columns: 150px 1fr; padding: 24px; }
  .calc { padding: 22px; }
  .calc .row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .foot .cols { grid-template-columns: 1.1fr 1.1fr 1fr; }
  .split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; align-items: start; }
}
@media (min-width: 1000px) {
  .grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 719px) {
  .plan.featured { order: -1; }
  .split .shot { margin-top: 8px; }
  .top nav { width: 100%; margin: 0 -10px; justify-content: space-between; }
}
@media print {
  body { background: #fff; }
  .top nav, .cta, .foot { display: none; }
}