/* ==========================================================================
   Layout and components. No brand decisions here — see brand.css.
   No external requests: every font, colour and glyph is served from this host.

   The structural idea of this stylesheet is that thin rules, not boxes, carry
   the layout. Borders are 1px and warm; shadows are almost absent. Where other
   designs would reach for a card, this reaches for a horizontal line and more
   space around it.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  position: relative;
  overflow-x: hidden;
}

/* -- paper grain + ambient warmth ------------------------------------------
   Two atmospheric layers, both non-interactive. The grain gives the ivory a
   printed quality; the glow keeps the top of the page from reading flat.   */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url(/assets/texture.svg);
  opacity: .30;
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Spans the body exactly rather than being a 60rem circle centred on it: a
   fixed-width element wider than the viewport pushes document scrollWidth out
   and would show a horizontal scrollbar the moment overflow-x stopped hiding
   it. Sizing the gradient instead of the box keeps the shape and removes the
   overflow. */
body::after {
  content: "";
  position: absolute;
  top: -20rem;
  left: 0;
  right: 0;
  height: 62rem;
  background: radial-gradient(circle 30rem at 50% 50%,
              rgba(184, 134, 11, .08) 0%, rgba(184, 134, 11, 0) 70%);
  pointer-events: none;
  z-index: 0;
}

.wrap {
  position: relative;
  z-index: 2;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 2rem;
}

.col { max-width: var(--measure); }
.col-wide { max-width: 46rem; }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--card);
  color: var(--foreground);
  padding: .875rem 1.25rem;
  border: 1px solid var(--foreground);
  border-radius: var(--radius);
  z-index: 20;
}
.skip:focus { left: 2rem; top: .75rem; }

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: 2px;
}

img { max-width: 100%; height: auto; }

/* ==========================================================================
   Masthead
   ========================================================================== */

.mast {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2.5rem;
  align-items: center;
  justify-content: space-between;
  padding: 2.25rem 0 1.75rem;
  border-bottom: 1px solid var(--border);
}

.wordmark {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: -.01em;
  color: var(--foreground);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.wordmark:hover { color: var(--accent); }

.mast nav {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 2rem;
  align-items: center;
}

.mast nav a {
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .05em;
  color: var(--muted-foreground);
  text-decoration: none;
  padding: .25rem 0;
  transition: color 200ms var(--ease);
}
.mast nav a:hover { color: var(--foreground); }
.mast nav a[aria-current] { color: var(--accent); }

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--f-display);
  color: var(--foreground);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.5rem, 6.5vw, 4.5rem);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin: 0 0 1.5rem;
}
h1 em {
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
}

h2 {
  font-size: clamp(1.875rem, 3.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.01em;
  margin: 0 0 1rem;
}

h3 {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0 0 .5rem;
}

p { margin: 0 0 1.25rem; text-wrap: pretty; }

a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(184, 134, 11, .35);
  transition: text-decoration-color 200ms var(--ease);
}
a:hover { text-decoration-color: var(--accent); }

code {
  font-family: var(--f-mono);
  font-size: .875em;
  letter-spacing: 0;
}

.lede {
  font-size: 1.25rem;
  line-height: 1.7;
  color: var(--muted-foreground);
  margin: 0 0 2.25rem;
}

.note {
  color: var(--muted-foreground);
  margin: 0 0 2rem;
}

.fine {
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--subtle);
}

/* -- small caps: the signature label treatment ---------------------------- */

.small-caps {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
}

/* -- the section label: rule / label / rule -------------------------------
   Used at the head of every major section. This is the element that most
   defines the rhythm of the page.                                          */

.label {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 0 0 2rem;
}
.label span:first-child,
.label span:last-child {
  height: 1px;
  flex: 1;
  background: var(--border);
}
.label b {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}

/* a label aligned left, for narrower contexts */
.label-start span:first-child { display: none; }
.label-start span:last-child { max-width: 4rem; }

/* ==========================================================================
   Sections and rules
   ========================================================================== */

section { padding: var(--section) 0 0; }
section > .head { margin-bottom: 3rem; }
section > .head .lede { margin-bottom: 0; }

hr.rule {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--section) 0 0;
}

/* a short decorative rule beneath a headline */
.underrule {
  width: 4rem;
  height: 1px;
  background: var(--accent);
  margin: 0 0 2rem;
  border: 0;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  padding: 7rem 0 1rem;
  text-align: center;
}
.hero .lede { margin-left: auto; margin-right: auto; max-width: 34rem; }
.hero .actions { justify-content: center; }
.hero .underrule { margin-left: auto; margin-right: auto; }

.hero-left { text-align: left; }
.hero-left .lede { margin-left: 0; }
.hero-left .actions { justify-content: flex-start; }
.hero-left .underrule { margin-left: 0; }

/* ==========================================================================
   Buttons
   ========================================================================== */

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .75rem 1.75rem;
  font-family: var(--f-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-foreground);
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow: var(--shadow-sm);
  transition: background-color 200ms var(--ease), border-color 200ms var(--ease),
              box-shadow 200ms var(--ease), transform 200ms var(--ease);
}
.btn:hover {
  background: var(--accent-secondary);
  border-color: var(--accent-secondary);
  box-shadow: var(--shadow-accent);
  transform: translateY(-2px);
}
.btn:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--foreground);
  border-color: var(--foreground);
  box-shadow: none;
}
.btn-outline:hover {
  background: var(--muted);
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: none;
  transform: none;
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: .03em;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.btn-ghost:hover {
  color: var(--foreground);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-underline-offset: 4px;
}

/* ==========================================================================
   Mark lists — what you get, what we don't do
   ========================================================================== */

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2.5rem 4rem;
}

.marks { list-style: none; margin: 0; padding: 0; }

.marks li {
  position: relative;
  padding: 0 0 1.5rem 2rem;
  margin: 0 0 1.5rem;
  border-bottom: 1px solid var(--border);
}
.marks li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.marks li::before {
  position: absolute;
  left: 0;
  top: .1em;
  font-family: var(--f-mono);
  font-size: .8125rem;
  font-weight: 500;
}

.marks-yes li::before { content: "+"; color: var(--accent); }
.marks-no  li::before { content: "\2014"; color: var(--subtle); }

.marks b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: .25rem;
}
.marks small {
  display: block;
  font-size: .9375rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

/* the negative list is stated quietly — restraint carries the meaning */
.marks-no b { font-weight: 500; color: var(--muted-foreground); }

/* ==========================================================================
   Jurisdiction facts — the one place the EU green is allowed
   ========================================================================== */

.panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 2.5rem 2.75rem;
  box-shadow: var(--shadow-sm);
}

.facts { margin: 0; }

.facts > div {
  display: grid;
  grid-template-columns: 13rem 1fr;
  gap: .25rem 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border);
}
.facts > div:first-child { border-top: 0; padding-top: 0; }
.facts > div:last-child { padding-bottom: 0; }

.facts dt {
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--subtle);
  padding-top: .45rem;
}

.facts dd {
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.1875rem;
  line-height: 1.5;
}

.facts dd small {
  display: block;
  font-family: var(--f-body);
  font-size: .875rem;
  line-height: 1.65;
  color: var(--muted-foreground);
  margin-top: .25rem;
}

.tag {
  display: inline-block;
  vertical-align: .1em;
  margin-left: .375rem;
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: .15rem .5rem;
  color: var(--eu);
  background: var(--eu-soft);
  border: 1px solid var(--eu);
  border-radius: 2px;
}

/* ==========================================================================
   Price
   ========================================================================== */

.price-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 3rem 4rem;
  align-items: start;
}

.price-card {
  background: var(--accent-muted);
  border: 1px solid var(--border);
  border-top: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 2.75rem;
  box-shadow: var(--shadow-md);
}

.price-figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 1rem;
  margin: 0 0 .75rem;
}
.price-figure b {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(3.5rem, 9vw, 5rem);
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--foreground);
}
.price-figure span {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted-foreground);
}

/* ==========================================================================
   Steps
   ========================================================================== */

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; }

.steps li {
  counter-increment: s;
  position: relative;
  margin: 0 0 0 1.3125rem;
  padding: 0 0 2.25rem 3.75rem;
  border-left: 1px solid var(--border);
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }

.steps li::before {
  content: counter(s);
  position: absolute;
  left: -1.3125rem;
  top: 0;
  width: 2.625rem;
  height: 2.625rem;
  display: grid;
  place-items: center;
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 500;
  color: var(--accent);
  background: var(--background);
  border: 1px solid var(--accent);
  border-radius: 50%;
}

.steps h3 { margin-top: .4rem; }
.steps p { color: var(--muted-foreground); margin-bottom: 0; }

/* ==========================================================================
   Stack — the roadmap narrative
   ========================================================================== */

/* Deliberately carries no "+" mark. The plus in .marks-yes means "included in
   the price today"; reusing it for work still being built would be the one
   dishonest thing on the page. Sequencing kickers carry the order instead, and
   the section headline says plainly that none of it has shipped. */

.stack { list-style: none; margin: 0; padding: 0; }

.stack li {
  padding: 1.75rem 0;
  border-top: 1px solid var(--border);
}
.stack li:first-child { border-top: 0; padding-top: 0; }
.stack li:last-child  { padding-bottom: 0; }

.stack .kicker {
  display: block;
  font-family: var(--f-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-bottom: .625rem;
}

.stack b {
  display: block;
  font-family: var(--f-display);
  font-size: 1.3125rem;
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: .5rem;
}

.stack p { color: var(--muted-foreground); margin: 0; }


/* ==========================================================================
   Aside — what we're building
   ========================================================================== */

.aside {
  background: var(--muted);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 2.25rem 2.5rem;
}
.aside p:last-child { margin-bottom: 0; }

/* a large opening quote mark, per the display style */
.aside::before {
  content: "\201C";
  display: block;
  font-family: var(--f-display);
  font-size: 3.5rem;
  line-height: .7;
  color: var(--accent);
  opacity: .35;
  margin-bottom: .5rem;
}

/* ==========================================================================
   FAQ — native disclosure, no JavaScript
   ========================================================================== */

.faq { border-top: 1px solid var(--border); }

.faq details { border-bottom: 1px solid var(--border); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 44px;
  padding: 1.5rem 0;
  cursor: pointer;
  touch-action: manipulation;
  list-style: none;
  font-family: var(--f-display);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--foreground);
  transition: color 200ms var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }

.faq summary::after {
  content: "+";
  flex: none;
  font-family: var(--f-mono);
  font-size: 1.125rem;
  font-weight: 400;
  color: var(--accent);
}
.faq details[open] summary::after { content: "\2013"; }

.faq .answer {
  padding: 0 0 1.75rem;
  max-width: var(--measure);
  color: var(--muted-foreground);
}
.faq .answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Form
   ========================================================================== */

.form-layout {
  display: grid;
  grid-template-columns: 1.3fr .7fr;
  gap: 3rem 4rem;
  align-items: start;
}

.form { display: grid; gap: 1.5rem; }

.field { display: grid; gap: .5rem; }

.field label {
  font-family: var(--f-body);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .01em;
}

.field .hint {
  font-size: .875rem;
  line-height: 1.6;
  color: var(--subtle);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: .75rem .875rem;
  font-family: var(--f-body);
  font-size: 1rem;
  color: var(--foreground);
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color 150ms var(--ease), box-shadow 150ms var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.7; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--border-hover); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px rgba(184, 134, 11, .35);
}

.field input::placeholder,
.field textarea::placeholder { color: var(--subtle); opacity: .75; }

.req {
  font-family: var(--f-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-left: .375rem;
}

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.fallback {
  background: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.25rem;
}
.fallback h3 { font-size: 1.125rem; }
.fallback p:last-child { margin-bottom: 0; }
.fallback .contact {
  font-family: var(--f-display);
  font-size: 1.125rem;
  display: inline-block;
  margin-bottom: 1.25rem;
}

/* ==========================================================================
   Legal page
   ========================================================================== */

.legal h3 {
  margin-top: 2.5rem;
  font-size: 1.125rem;
  font-weight: 600;
}
.legal .panel { border-top: 1px solid var(--border); }

.todo {
  background: var(--accent-muted);
  border: 1px dashed var(--accent);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 0 0 1.75rem;
  font-family: var(--f-mono);
  font-size: .75rem;
  line-height: 1.7;
  letter-spacing: .04em;
  color: #8A6414;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.foot {
  position: relative;
  z-index: 2;
  margin-top: var(--section);
  border-top: 1px solid var(--border);
  padding: 2.5rem 0 4.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 3rem;
  justify-content: space-between;
  align-items: center;
}

.foot .fine { margin: 0; }

.foot nav { display: flex; flex-wrap: wrap; gap: .5rem 2rem; }
.foot nav a {
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  text-decoration: none;
  transition: color 200ms var(--ease);
}
.foot nav a:hover { color: var(--accent); }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 900px) {
  .price-grid,
  .form-layout { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  :root {
    --section: 5rem;
    --section-tight: 3.5rem;
  }

  body { font-size: 16px; }

  .wrap { padding: 0 1.25rem; }

  .hero { padding: 3.5rem 0 .5rem; }
  h1 { font-size: 2.5rem; }
  .lede { font-size: 1.125rem; }

  .mast { padding: 1.5rem 0 1.25rem; gap: .75rem 1.5rem; }
  .mast nav { gap: .25rem 1.25rem; }
  .mast nav a { font-size: .875rem; }

  .actions .btn { width: 100%; }

  .panel { padding: 1.75rem 1.5rem; }
  .price-card { padding: 2rem 1.5rem; }
  .facts > div { grid-template-columns: 1fr; gap: .25rem; padding: 1.25rem 0; }
  .facts dt { padding-top: 0; }

  .label { gap: .875rem; }
  .label b { font-size: .6875rem; letter-spacing: .12em; }

  .steps li { padding-left: 3.25rem; }

  .aside { padding: 1.75rem 1.5rem; }

  .foot { padding: 2rem 0 3.5rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  .btn:hover { transform: none; }
}

@media print {
  body::before, body::after { display: none; }
  .mast nav, .actions { display: none; }
}