/* ProductTranslator — the one stylesheet every page shares.
   Direction C (docs/superpowers/specs/2026-09-10-site-redesign-design.md): a heavy
   grotesk, a white ground, one teal carried over from the first site, and the quote
   card as the only object that casts a shadow. Colours live in :root and nowhere else. */

@font-face {
  font-family: "Schibsted Grotesk";
  src: url(/assets/schibsted-grotesk.woff2?v=55d1afae) format("woff2");
  font-weight: 400 900;
  font-display: swap;
}

:root {
  --bg: #ffffff;
  --ink: #0f1412;
  --mut: #5a625e;
  --line: #e2e6e3;
  --soft: #f5f7f6;
  --acc: #0b6b5a;
  --acc-hover: #095a4b;
  --acc2: #e7f3ef;
  --warn: #8a5300;
  --warnbg: #fff6e6;
  --warnline: #f0dcbb;
  --err: #8a2020;
  --errbg: #fdf4f4;
  --errline: #f0c9c9;
  --on-acc: #ffffff;
  --font: "Schibsted Grotesk", -apple-system, "Segoe UI", "PingFang SC", "Noto Sans SC",
          "Microsoft YaHei", sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --wrap: 1200px;
  --gutter: clamp(20px, 4vw, 48px);
  --r-card: 16px;
  --r-ctl: 10px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--font);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { text-wrap: balance; margin: 0; }
p { text-wrap: pretty; margin: 0; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
}

/* --- layout ------------------------------------------------------------------------ */

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 96px); border-top: 1px solid var(--line); }
.eyebrow {
  font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--acc);
}
.h2 {
  font-size: clamp(30px, 3.6vw, 44px); font-weight: 800; line-height: 1.05;
  letter-spacing: -.035em; margin-top: 10px;
}
.lead { font-size: 18px; color: var(--mut); max-width: 58ch; margin-top: 14px; }
.mut { color: var(--mut); }
.small { font-size: 13px; }

/* --- nav --------------------------------------------------------------------------- */
/* One header on every page, written by tools/sync_site.py and checked by a test. It
   stays on screen while the page scrolls, with a rule across the full width; every
   anchor target stops below it rather than under it. */

.site-head { position: sticky; top: 0; z-index: 20; background: var(--bg);
             border-bottom: 1px solid var(--line); }
[id] { scroll-margin-top: 84px; }
/* The language switch exists only where the page has a second language to switch to. */
html:not([data-i18n]) .site-head .lang { display: none; }
.nav { display: flex; justify-content: space-between; align-items: center; gap: 24px;
       padding-block: 18px; }
.mark { font-weight: 800; font-size: 18px; letter-spacing: -.02em; text-decoration: none; }
.mark span { color: var(--acc); }
.links { display: flex; gap: 28px; align-items: center; font-size: 14px; color: var(--mut); }
.links a { text-decoration: none; transition: color .15s; }
.links a:hover { color: var(--ink); }
.lang { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.lang button {
  font: inherit; font-size: 13px; border: 0; background: none; color: var(--mut);
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
}
.lang button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
@media (max-width: 720px) { .links a { display: none; } }

/* --- hero -------------------------------------------------------------------------- */

.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 440px; gap: clamp(32px, 5vw, 64px);
  align-items: start; padding-block: clamp(24px, 4vw, 48px) clamp(56px, 7vw, 88px);
}
@media (max-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr); } }
.hero h1 {
  font-size: clamp(40px, 5.2vw, 68px); font-weight: 800; line-height: .98;
  letter-spacing: -.04em;
}
/* A two-sentence heading sets each sentence on its own line. */
.h2 > span { display: block; }
.hero .lead { margin-top: 24px; max-width: 44ch; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 28px;
         margin-top: 36px; max-width: 620px; }
.facts > div { border-top: 2px solid var(--ink); padding-top: 10px; }
.facts b { display: block; font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.facts small { color: var(--mut); font-size: 13px; }
/* On a phone three stacked facts with ragged top rules read as unfinished; they
   become full-width label/value rows instead. */
@media (max-width: 560px) {
  .facts { display: grid; gap: 0; margin-top: 28px; border-bottom: 1px solid var(--line); }
  .facts > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
                 border-top: 1px solid var(--line); padding: 11px 0; }
  .facts > div:first-child { border-top: 2px solid var(--ink); }
  .facts b { font-size: 18px; white-space: nowrap; }
  .facts small { text-align: right; }
}

/* --- the quote card ---------------------------------------------------------------- */

.card {
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  box-shadow: 0 1px 2px rgba(15, 20, 18, .04), 0 24px 48px -28px rgba(15, 20, 18, .35);
  padding: 22px;
}
.card-head { display: flex; justify-content: space-between; align-items: center;
             font-size: 13px; color: var(--mut); margin-bottom: 14px; }
.badge { font-size: 12px; font-weight: 500; color: var(--warn); background: var(--warnbg);
         padding: 2px 9px; border-radius: 999px; }
.pair-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field { display: block; border: 1px solid var(--line); border-radius: var(--r-ctl);
         padding: 8px 12px; background: var(--bg); transition: border-color .15s; }
.field:focus-within, .field:hover { border-color: var(--mut); }
.field > span { display: block; font-size: 11px; color: var(--mut); }
.field select {
  width: 100%; border: 0; padding: 2px 0 0; font: inherit; color: var(--ink);
  background: none; appearance: none; cursor: pointer;
}
.field select:focus-visible { outline: none; }
.drop { margin-top: 10px; cursor: pointer; display: flex; justify-content: space-between;
        align-items: center; gap: 12px; min-height: 58px; }
.drop.over { border-color: var(--acc); background: var(--acc2); }
.drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop .fname { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop .hint { font-size: 13px; color: var(--acc); font-weight: 500; white-space: nowrap; }
.drop:has(input:focus-visible) { outline: 2px solid var(--acc); outline-offset: 2px; }
.hint-line { font-size: 12px; color: var(--mut); margin-top: 8px; }

.lines { margin-top: 16px; }
.line { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
        border-bottom: 1px solid var(--line); font-size: 15px; }
.line > span:first-child { color: var(--mut); }
.line.total { border-bottom: 0; padding-top: 14px; font-size: 26px; font-weight: 800;
              letter-spacing: -.02em; }
.line.total > span:first-child { color: var(--ink); }
.example { opacity: .9; }

/* --- buttons ----------------------------------------------------------------------- */

.btn {
  display: block; width: 100%; text-align: center; font: inherit; font-weight: 700;
  font-size: 16px; background: var(--acc); color: var(--on-acc); border: 1px solid var(--acc);
  padding: 13px 18px; border-radius: var(--r-ctl); cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s;
}
.btn:hover { background: var(--acc-hover); border-color: var(--acc-hover); }
.btn[disabled] { background: var(--line); border-color: var(--line); color: var(--mut);
                 cursor: not-allowed; }
.btn.ghost { background: var(--bg); color: var(--ink); border-color: var(--line); font-weight: 500; }
.btn.ghost:hover { border-color: var(--ink); }
.btn.ghost[disabled] { color: var(--mut); border-color: var(--line); }
.btn.inline { display: inline-block; width: auto; }
.stack { display: grid; gap: 8px; margin-top: 16px; }

/* --- notes, tables, before/after --------------------------------------------------- */

.note { border: 1px solid var(--line); background: var(--soft); border-radius: var(--r-ctl);
        padding: 14px 16px; font-size: 14px; }
.note.warn { border-color: var(--warnline); background: var(--warnbg); color: var(--warn); }
.note.err { border-color: var(--errline); background: var(--errbg); color: var(--err); }
.scroll { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { text-align: left; border-bottom: 1px solid var(--line); padding: 9px 10px;
         vertical-align: top; }
th { color: var(--mut); font-weight: 500; font-size: 13px; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.note.warn th, .note.warn td { border-color: var(--warnline); color: var(--ink); }

.pair { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line);
        border-radius: var(--r-ctl); overflow: hidden; }
.pair + .pair { margin-top: 10px; }
.pair > div { padding: 14px 16px; font-size: 15px; }
.pair > div + div { border-left: 1px solid var(--line); background: var(--soft); }
.pair .head { font-size: 12px; color: var(--mut); margin-bottom: 4px; }
.pair .flag { background: var(--warnbg) !important; }
@media (max-width: 640px) {
  .pair { grid-template-columns: 1fr; }
  .pair > div + div { border-left: 0; border-top: 1px solid var(--line); }
}
.lock { background: var(--acc2); color: var(--acc); border-radius: 4px; padding: 0 5px;
        font-weight: 600; font-variant-numeric: tabular-nums; }
.ref { font: 700 30px/1.2 var(--mono); letter-spacing: .06em; }

/* --- the your-file panel ----------------------------------------------------------- */

.panel { display: grid; gap: 28px; }
.panel h3 { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.panel .block { display: grid; gap: 12px; }
.email { display: flex; gap: 10px; flex-wrap: wrap; }
.email input {
  flex: 1 1 260px; font: inherit; padding: 12px 14px; border: 1px solid var(--line);
  border-radius: var(--r-ctl); color: var(--ink); background: var(--bg);
}
.email .btn { flex: 0 0 auto; width: auto; }

/* --- proof, steps, columns, pricing, faq ------------------------------------------- */

.proof { margin-top: 36px; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.proof-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); border-bottom: 1px solid var(--line); }
.proof-row:last-of-type { border-bottom: 0; }
.proof-row .k { padding: 22px 16px; font-size: 13px; font-weight: 600; color: var(--mut);
                border-right: 1px solid var(--line); }
.proof-row .v { padding: 18px 22px; font-size: clamp(18px, 2.2vw, 26px); font-weight: 500;
                letter-spacing: -.015em; line-height: 1.3; }
.proof-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
              padding: 12px 16px; background: var(--soft); border-top: 1px solid var(--line);
              font-size: 13px; color: var(--mut); }

.steps { list-style: none; padding: 0; margin: 40px 0 0; display: grid;
         grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; }
.steps li { counter-increment: s; border-top: 2px solid var(--ink); padding-top: 14px; }
.steps li::before { content: counter(s); display: block; font-size: 13px; font-weight: 700;
                    color: var(--acc); margin-bottom: 8px; font-variant-numeric: tabular-nums; }
.steps b { display: block; font-size: 18px; letter-spacing: -.01em; margin-bottom: 6px; }
.steps p { color: var(--mut); font-size: 15px; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .steps { grid-template-columns: minmax(0, 1fr); } }

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 40px; }
.cols h3 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin-bottom: 10px; }
.cols p { color: var(--mut); font-size: 15px; }
.cols p + p { margin-top: 10px; }
@media (max-width: 860px) { .cols { grid-template-columns: minmax(0, 1fr); gap: 28px; } }

.price-block { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
               gap: clamp(28px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .price-block { grid-template-columns: minmax(0, 1fr); } }
.big-price { font-size: clamp(64px, 9vw, 112px); font-weight: 800; letter-spacing: -.05em;
             line-height: .9; }
.big-price small { font-size: 18px; font-weight: 500; letter-spacing: 0; color: var(--mut);
                   margin-left: 6px; }
.terms { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.terms li { display: flex; justify-content: space-between; gap: 24px; padding: 14px 0;
            border-bottom: 1px solid var(--line); font-size: 15px; }
.terms li span:first-child { color: var(--mut); }
.terms li span:last-child { text-align: right; font-weight: 500; }

.faq { margin-top: 32px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 36px 18px 0; font-size: 18px;
               font-weight: 600; letter-spacing: -.01em; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 14px; font-size: 24px;
                      font-weight: 400; color: var(--mut); transition: transform .2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--mut); padding: 0 36px 18px 0; }

/* --- long-form pages (for-ai and the legal pages) ---------------------------------- */

.doc { max-width: 820px; padding-block: clamp(32px, 6vw, 72px) clamp(56px, 8vw, 96px); }
.doc h1 { font-size: clamp(36px, 4.6vw, 56px); font-weight: 800; line-height: 1;
          letter-spacing: -.04em; }
.doc h1 span { color: var(--acc); }
.doc h2 { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 44px 0 12px; }
.doc p, .doc li { color: var(--ink); max-width: 68ch; }
.doc p + p { margin-top: 12px; }
.doc ul { padding-left: 20px; margin: 8px 0 0; }
.doc li { margin: 6px 0; }
.doc table { margin-top: 8px; font-size: 15px; }
.doc th { width: 34%; }
/* A row label reads at the same size and colour as the value beside it; only the
   column headings in <thead> are small and muted. */
.doc tbody th { font-size: inherit; color: var(--ink); font-weight: inherit; }
.doc a { color: var(--acc); text-underline-offset: 3px; }
.doc blockquote { margin: 12px 0 0; padding: 14px 16px; border-left: 2px solid var(--acc);
                  background: var(--soft); font-size: 15px; }

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

.foot { border-top: 1px solid var(--line); padding-block: 28px 40px; display: flex;
        flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; font-size: 13px;
        color: var(--mut); }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }