/* Archbotics Sivut — the Finnish product page at /sivut/, plus the notice, the
   thank-you page and the showcase hub. Composition only: every colour, family and
   type step comes from assets/brand.css, which loads first.
   Ground: paper. Signature move: the example site as a full-width band directly under
   the headline. Motif: mono index numbering on the steps, the packages and the FAQ.
   One ember-filled button per view (the hero call and the form's own send button, which
   never share a screen); everything else is the ink block or the ghost. */

:root {
  --hh: 3.5rem;                        /* the sticky header, one line of UI tall */
  --tint: rgba(198, 69, 24, .055);     /* the accent as a surface, never as text */
  --tint-line: rgba(198, 69, 24, .22);
  --cell-pad: clamp(1.25rem, 2.4vw, 1.9rem);
}

/* A short page (kiitos) still ends at the bottom of the screen rather than halfway up it. */
body { min-height: 100svh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }
/* A one-screen page (kiitos) centres its panel in the space it has instead of leaving a void
   above the footer. R11's one permitted centring, spent here. */
main.fill { display: flex; flex-direction: column; }
main.fill > .plain { flex: 1; display: flex; align-items: center; }

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

.site-header {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header .container {
  display: flex; align-items: center; gap: 1rem;
  min-height: var(--hh);
}
.site-header .brand { margin-inline-end: auto; font-size: 1.125rem; }
.site-header .mark { width: 1.375rem; height: 1.375rem; }

.site-nav ul { display: flex; gap: clamp(1rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.site-nav a {
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink-mute); text-decoration: none;
  display: inline-flex; align-items: center; min-height: 2.75rem;
}
.site-nav a:hover { color: var(--ink); }
.site-nav .lang { color: var(--accent-text); }
.site-header .btn { min-height: 2.375rem; padding: .5rem 1rem; }

/* Mobile header law: the wordmark and ONE other element, nothing wraps. Below 64em the nav
   folds away and the compact call stays, because a header that costs 56px of every screen for
   8000px of scroll has to earn it; the language switch lives in the footer at that width.
   A page with no header call marks its one surviving item .nav-keep (the notice keeps the
   opt-out anchor, which is why a recipient opens that page at all). */
@media (max-width: 63.99em) {
  .site-nav li:not(.nav-keep) { display: none; }
  .site-nav:not(:has(.nav-keep)) { display: none; }
}

/* The arrival strip: the one line a reader of the cold mail is looking for.
   A tinted rule between the header and the page, not a chapter band. */
.arrival {
  background: var(--tint);
  border-bottom: 1px solid var(--line);
  padding-block: .7rem;
  font-size: .9375rem; line-height: 1.5;
  color: var(--ink-body);
}
.arrival .container { display: flex; align-items: baseline; gap: .6rem; }
.arrival .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); flex: none; translate: 0 -.15rem; }

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

section { padding-block: var(--sec-pad); }
.lead { padding-block: 0; }   /* the wrapper carries no rhythm of its own; its two parts do */
section.welded { padding-top: 0; }
.band { background: var(--bg-1); border-block: 1px solid var(--line); }

/* Section head: eyebrow, h2, dek. One label device, not three (critic F5, 2026-09-04). */
.eyebrow {
  display: block;
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink-mute);
  margin-bottom: .9rem;
}
.section-head { max-width: 44rem; }
.section-head h2 { max-width: 20ch; }
/* A secondary page titles itself; only the product page's promise is set at poster size. */
.section-head h1.page-h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); max-width: 18ch; }
.section-head .dek { margin-top: .9rem; font-size: var(--fs-lede); line-height: 1.55; max-width: 46ch; }
.head-gap { margin-bottom: var(--head-gap); }

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

/* The hero and the example band are ONE composition: the band is welded to the headline so
   that at 1440x900 the sample itself, not just its caption, is on the first screen. */
.hero { padding-block: clamp(2rem, 3.4vw, 2.75rem) clamp(1.75rem, 2.4vw, 2.25rem); }
.hero h1 { max-width: 15ch; margin-top: .2rem; }
.hero .lede { margin-top: clamp(1.1rem, 2vw, 1.6rem); color: var(--ink-body); max-width: 40em; }
.hero .lede b { color: var(--ink); font-weight: 600; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: clamp(1.5rem, 2.6vw, 2rem); }
.factline {
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.5;
  color: var(--ink-dim);
  margin-top: clamp(1.5rem, 2.4vw, 2rem);
}

/* The first screen on a phone is one composition: promise, guarantee, button.
   The hero is sized to the screen so the example band starts at the fold, not inside it. */
@media (max-width: 47.99em) {
  /* One composition per screen: the promise, the guarantee, the button, and the band's own
     hairline landing exactly at the fold. Type carries the height, air only holds it apart. */
  :root { --fs-hero: clamp(2.75rem, 1.3rem + 5.6vw, 3.5rem); --fs-lede: 1.125rem; }
  .hero { padding-bottom: 1.75rem; }
  .hero .container {
    min-height: calc(100svh - var(--hh) - 8.25rem);
    display: flex; flex-direction: column; justify-content: space-between; gap: 1.25rem;
  }
  .hero .btn-row, .hero .factline { margin-top: 0; }
  /* Full-width calls on a phone, and the caption row reads as one left-anchored block. */
  .btn-row .btn, .grid-cta .btn, .plain .btn, .gallery .btn { width: 100%; }
  .example-bar a { margin-inline-start: 0; }
}

/* ---------------------------------------------- the example band (signature) */

.example { padding-block: clamp(1.75rem, 2.6vw, 2.25rem) clamp(2.5rem, 4vw, 3.5rem); }
.example .container { display: grid; gap: clamp(1rem, 1.6vw, 1.5rem); }
.example-bar {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  border-bottom: 1px solid var(--line); padding-bottom: .8rem;
}
.example-bar .what { display: inline-flex; align-items: baseline; gap: .55rem; }
.example-bar .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); flex: none; translate: 0 -.15rem; }
.example-bar a { margin-inline-start: auto; color: var(--accent-text); }
.shot { margin: 0; border: 1px solid var(--line-2); background: var(--bg); }
.shot img { width: 100%; height: auto; }
.shot-desktop { display: none; }
.note { font-size: .875rem; line-height: 1.55; color: var(--ink-dim); }
.note a { color: var(--accent-text); }
.example-note { max-width: 40ch; }

@media (min-width: 48em) {
  .example .container { grid-template-columns: minmax(0, 1fr) 15rem; align-items: start; }
  .example-bar { grid-column: 1 / -1; }
  .shot-desktop { display: block; grid-row: span 2; }
  .shot-phone { align-self: start; }
  .example-note { align-self: start; }
}

/* ------------------------------------------------------- steps (01 02 03) */

.steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.steps li { background: var(--bg); padding: var(--cell-pad); transition: background-color .18s ease; }
.steps li:hover { background: var(--bg-1); }
.idx {
  display: block;
  font-family: var(--label); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; line-height: 1.4; color: var(--accent-text);
  margin-bottom: 1.1rem;
}
.steps h3 { margin-bottom: .5rem; }
.steps p { max-width: 36ch; }
@media (min-width: 48em) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* -------------------------------------------------------- miten teen sen */

.claim { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
.claim h2 { max-width: 18ch; }
.claim .body { display: grid; gap: 1rem; max-width: 62ch; }
/* Two paragraphs, two columns: the same ratified words read as a work split instead of a wall.
   Columns, not a rewrite, because this copy is fixed. */
.claim .body.cols { max-width: none; }
@media (min-width: 60em) {
  .claim .body.cols { grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 2.4vw, 2.5rem); }
  .claim .body.cols p { max-width: 34ch; }
}
@media (max-width: 59.99em) { .claim .body.cols p { max-width: 46ch; } }
@media (min-width: 60em) {
  .claim { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

.ba { margin-top: clamp(2.5rem, 5vw, 4rem); }
.ba-grid { display: grid; gap: clamp(1rem, 2vw, 1.75rem); }
.ba figure { margin: 0; }
.ba .ba-label {
  display: block;
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink-mute); margin-bottom: .6rem;
}
.ba .ba-label.now { color: var(--accent-text); }
.ba img { width: 100%; height: auto; border: 1px solid var(--line-2); background: var(--bg); }
.ba-note { margin-top: 1rem; }
.ba-note a { color: var(--accent-text); }
@media (min-width: 48em) { .ba-grid { grid-template-columns: 1fr 1fr; } }

/* ------------------------------------------------------------- guarantee */

.guarantee {
  background: var(--tint); border: 1px solid var(--tint-line);
  padding: clamp(1.1rem, 2vw, 1.4rem) clamp(1.1rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.25rem);
  max-width: 52rem; color: var(--ink-body);
}
.guarantee b { color: var(--ink); }

/* -------------------------------------------------------------- packages */

.packages {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.package { background: var(--bg); padding: var(--cell-pad); display: flex; flex-direction: column; }
.package-pick { border-top: 2px solid var(--accent); }   /* an accent mark, drawn as a rule: no shadow anywhere on this page */
.pkg-top { display: flex; align-items: baseline; gap: .75rem; margin-bottom: 1.1rem; }
.pkg-top .idx { margin: 0; }
.pick {
  display: inline-flex; align-items: baseline; gap: .45rem; margin-inline-start: auto;
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4;
  color: var(--accent-text);
}
.pick .dot { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent); flex: none; translate: 0 -.15rem; }
.package h3 { font-size: 1.375rem; }
.price {
  display: block; margin-top: .6rem;
  font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.25rem); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1; color: var(--ink);
}
.price s { font-size: .5em; font-weight: 500; letter-spacing: -.01em; color: var(--ink-dim); margin-inline-start: .4rem; }
.nw { white-space: nowrap; }
.price-note {
  /* One step below the label size so the offer line holds ONE line in a package column. */
  font-family: var(--label); font-size: .6875rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink-dim); margin-top: .55rem;
}
.package ul { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: .7rem; }
.package ul li { position: relative; padding-inline-start: 1.1rem; font-size: .9375rem; line-height: 1.55; }
.package ul li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: .35rem; height: .35rem; border-radius: 50%; background: var(--accent);
}
@media (min-width: 60em) { .packages { grid-template-columns: repeat(3, 1fr); } }

.grid-cta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.25rem;
  margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}
.grid-cta span { font-size: .9375rem; color: var(--ink-mute); }

.extras {
  list-style: none; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.extras li { background: var(--bg); padding: 1.1rem var(--cell-pad); display: grid; gap: .35rem; }
.extras strong { color: var(--ink); font-weight: 600; }
.extras span { font-size: .9375rem; line-height: 1.55; max-width: 62ch; }
@media (min-width: 60em) { .extras { grid-template-columns: 1fr 1fr; } }

.fineprint {
  font-size: .875rem; line-height: 1.6; color: var(--ink-dim);
  max-width: 68ch; margin-top: clamp(1.25rem, 2.4vw, 1.75rem);
}

/* -------------------------------------------------------------- the FAQ */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: grid; grid-template-columns: 2.5rem 1fr 1.5rem; align-items: baseline;
  gap: .5rem; padding: 1.1rem 0; cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 600; font-size: 1.0625rem; letter-spacing: -.01em;
  min-height: 2.75rem; transition: color .18s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent-text); }
.faq summary .q-idx {
  font-family: var(--label); font-size: var(--fs-label); font-weight: 600;
  letter-spacing: .14em; line-height: 1.4; color: var(--accent-text);
}
.faq summary::after {
  content: ""; justify-self: end; align-self: center;
  width: .5rem; height: .5rem; margin-top: -.25rem;
  border-right: 1.5px solid var(--ink-mute); border-bottom: 1.5px solid var(--ink-mute);
  rotate: 45deg;
}
.faq details[open] summary::after { rotate: -135deg; margin-top: .1rem; }
.faq details p {
  padding: 0 1.5rem 1.4rem 2.5rem; max-width: 68ch;
}
.faq details p a { color: var(--accent-text); }

/* ---------------------------------------------------------- contact form */

.contact-grid { display: grid; gap: clamp(2rem, 4vw, 3rem); }
@media (min-width: 60em) {
  .contact-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}
.contact-form { margin-top: clamp(1.75rem, 3vw, 2.25rem); display: grid; gap: 1rem; max-width: 34rem; }
.field { display: grid; gap: .4rem; }
.field label {
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.4; color: var(--ink-mute);
}
.field .opt { text-transform: none; letter-spacing: .04em; color: var(--ink-dim); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--bg);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: .7rem .8rem; min-height: 2.75rem; width: 100%;
  transition: border-color .18s ease;
}
.field textarea { min-height: 7rem; resize: vertical; }
.field input:hover, .field textarea:hover { border-color: var(--ink-mute); }
.contact-form .btn { justify-self: start; margin-top: .25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .875rem; line-height: 1.6; color: var(--ink-dim); max-width: 46ch; }
.form-note a { color: var(--accent-text); }
@media (max-width: 47.99em) { .contact-form .btn { justify-self: stretch; width: 100%; } }

.details-list { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.details-list dt {
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink-dim); padding-top: 1rem;
}
.details-list dd {
  margin: .3rem 0 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  color: var(--ink); font-size: 1.0625rem;
}
.details-list dd a { color: var(--accent-text); }

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

.site-footer { border-top: 1px solid var(--line); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; }
.footer-top { display: grid; gap: clamp(2rem, 4vw, 3rem); }
.footer-brand p { margin-top: .9rem; max-width: 30ch; color: var(--ink-mute); font-size: .9375rem; }
.footer-brand .entity {
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; line-height: 1.5; color: var(--ink-dim);
  max-width: none;
}
.footer-col h2 {
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; line-height: 1.4;
  color: var(--ink-dim); font-weight: 500;
}
.footer-col ul { list-style: none; margin: .9rem 0 0; padding: 0; display: grid; gap: .55rem; }
.footer-col a { color: var(--ink-body); text-decoration: none; font-size: .9375rem; }
.footer-col a:hover { color: var(--ink); text-decoration: underline; }
.footer-meta {
  margin-top: clamp(2rem, 4vw, 3rem); padding-top: 1.25rem; border-top: 1px solid var(--line);
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: var(--ink-dim);
}
.footer-legal {
  margin-top: 1.25rem; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  font-size: .8125rem; color: var(--ink-dim);
}
.footer-legal > * { margin: 0; }
.footer-legal a { color: var(--ink-dim); }
@media (min-width: 48em) {
  .footer-top { grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); }
}

.footer-slim {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem 1.5rem;
  font-family: var(--label); font-size: var(--fs-label); font-weight: 500;
  letter-spacing: .12em; text-transform: uppercase; line-height: 1.5; color: var(--ink-dim);
}
.footer-slim a { color: var(--ink-mute); text-decoration: none; }
.footer-slim a:hover { color: var(--ink); text-decoration: underline; }
.site-footer.slim { padding-block: 2rem; }

/* ------------------------------------------------- the notice and kiitos */

.legal { padding-block: clamp(2.5rem, 5vw, 4rem) var(--sec-pad); }
/* The measure is capped on the text, not on the container: the header, the footer and the
   first word of the notice all start at the same gutter, so no two elements disagree about
   where the page begins. */
.legal :is(h1, h2, h3, p, ul, .callout, .toc) { max-width: 48rem; }
.legal h1 { font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.25rem); }
.legal .lede { margin-top: 1.25rem; }
.legal h2 {
  font-size: clamp(1.375rem, 1.1rem + .9vw, 1.75rem);
  margin-top: clamp(2.5rem, 4vw, 3.25rem);
}
.legal h3 { margin-top: 1.75rem; }
.legal p, .legal ul { margin-top: .9rem; }
.legal ul { padding-inline-start: 1.1rem; display: grid; gap: .6rem; }
.legal li { line-height: 1.6; }
.legal a { color: var(--accent-text); }
.legal strong { color: var(--ink); }
/* Prose stays in the prose voice: the version line is two sentences with parentheses, not a
   chip, and tracked caps would make the L3 audit anchor the hardest text on the page to read. */
.legal .updated { font-size: .875rem; line-height: 1.6; color: var(--ink-dim); margin-top: 1.5rem; }
.legal .callout {
  background: var(--tint); border: 1px solid var(--tint-line);
  padding: clamp(1.25rem, 2.4vw, 1.75rem); margin-top: 2rem;
}
.legal .callout h2 { margin-top: 0; font-size: 1.375rem; }
.legal .toc { margin-top: 2rem; border-top: 1px solid var(--line); padding-top: 1.25rem; }
.legal .toc ul { list-style: none; padding: 0; margin: 0; gap: .5rem; }
.legal .toc a { color: var(--ink-body); }

.plain { padding-block: clamp(3.5rem, 8vw, 6rem); }
.plain :is(h1, p) { max-width: 44rem; }
.plain h1 { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); }
.plain .lede { margin-top: 1.25rem; }
.plain a { color: var(--accent-text); }
.plain .btn { margin-top: 2rem; color: var(--ink); }

/* -------------------------------------------------------- showcase hub */

.gallery {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line);
}
.gallery li { background: var(--bg); padding: var(--cell-pad); display: flex; flex-direction: column; gap: .7rem; transition: background-color .18s ease; }
.gallery li:hover { background: var(--bg-1); }
.gallery .idx { margin-bottom: 0; }
/* A gallery of websites shows the websites: each card opens with the example's own fold,
   framed like every other render on the site, labelled fictional in the caption. */
.card-shot { margin: 0 0 .2rem; }
.card-shot img { width: 100%; height: auto; border: 1px solid var(--line-2); background: var(--bg); }
.card-shot figcaption { margin-top: .5rem; }
.gallery h2 { font-size: 1.25rem; letter-spacing: -.015em; }
.gallery p { font-size: .9375rem; }
/* The trade under the name, quieter than the outcome line under it. */
.gallery .card-trade { font-size: .875rem; color: var(--ink-dim); margin-top: -.35rem; }
/* The tier the specimens are, said ONCE for the list rather than inside every card. It was a
   card line until the third example landed on 2026-09-06 and made it the same thirty word
   paragraph three times across one grid, which reads as boilerplate and hides the sentence.
   The price still carries its invoice condition in the same sentence, as every price on these
   surfaces does; it just says it once per surface, which is what that law asks for. */
.gallery-tier { margin-top: 1.25rem; font-size: .8125rem; line-height: 1.55; color: var(--ink-dim); max-width: 62ch; }
.gallery-tier a { color: var(--accent-text); }
/* The action sits at the foot of the card whatever the copy above it does, so three cards
   line their buttons up on one row. */
.gallery .btn { align-self: start; margin-top: auto; }
/* auto-fit, not a fixed three: the gallery went from three retired cards to one and back to
   three inside 2026-09-06, and an empty track in a fixed grid would leave a card sitting in a
   third of the page with two holes beside it. One card fills the row, three share it, and
   nothing here changed when the second and the third landed. */
@media (min-width: 60em) { .gallery { grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr)); } }