/* Composition for /sivut/, the ember-and-light direction (owner pick 2026-09-05).
   Loads AFTER assets/brand.css and uses its tokens and families; identity stays there.
   The direction and its two local exceptions to the core pack are written down in
   brand/ember-and-light/README.md: ember is promoted from an accent to a major field,
   and one luminous arc is permitted behind the work. Nothing else changes.

   This sheet is NOT assets/sivut.css. That one composes tietosuoja.html, kiitos.html and
   the esimerkit hub and is untouched by this direction.

   Ground: the page is night (html.ground-night); the pricing band and the demo preview
   flip to paper with data-ground="paper", which is brand.css's own mechanism. */

:root {
  /* The direction's local tokens. Two values, both named in the extension README. */
  --ember-field: var(--ember-ink);  /* #B53E13, the large hero field (local exception) */
  --arc-line: #E9A265;              /* the ascending light, decorative, never behind text */
  /* Surface tints of the prototype: frames and stages the work sits in. They are shades of
     night, not new brand colours, and carry no text. */
  --stage-warm: #23221E;
  --stage-warmer: #3A3227;
  --frame-night: #171612;
  --frame-edge: #EDB99F;
  --chrome-night: #201D18;
}

html { scroll-padding-top: 24px; }
body { background: var(--night); color: var(--night-ink); font-size: 16px; line-height: 1.55; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 5px; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 3px solid currentColor; outline-offset: 6px; }
button { font: inherit; }
img { width: 100%; }
figure, blockquote { margin: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: -.055em; line-height: 1.03; }
h2 { font-size: clamp(38px, 4.5vw, 66px); }
p { max-width: 65ch; }

/* The label voice, one step tighter than brand.css's .label because this page sets it at 11px. */
.eyebrow, .example-link, .demo-label {
  font: 500 11px/1.5 var(--label);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eyebrow { margin-bottom: 24px; }

/* ---- header ---- */
.header { height: 88px; margin: 0 44px; display: flex; align-items: center; justify-content: space-between; }
.header .brand { font-size: 23px; gap: 11px; min-height: 44px; letter-spacing: -.04em; font-weight: 700; }
.header .mark { width: 30px; height: 30px; }
.brand .product { margin-left: 7px; font-weight: 400; }
.header nav { display: flex; gap: 44px; align-items: center; }
.header nav a { display: flex; align-items: center; min-height: 44px; font: 500 12px var(--label); letter-spacing: .02em; }
.header nav a span[aria-hidden] { margin-left: 18px; }
.mobile-mail { display: none; }

/* ---- hero: the ember field ---- */
.hero {
  position: relative; isolation: isolate;
  background: var(--ember-field);
  margin: 0 20px; overflow: hidden;
  padding: 51px 44px 31px;
}
.hero-heading { position: relative; z-index: 2; }
.hero-heading .eyebrow { margin-bottom: 28px; }
.hero h1 { font-weight: 600; font-size: clamp(75px, 10.55vw, 164px); line-height: .96; letter-spacing: -.065em; }
.hero-bottom { position: relative; z-index: 2; display: grid; grid-template-columns: 34% 66%; margin-top: 42px; align-items: start; }
.hero-copy { padding: 4px 16px 0 0; }
.hero-lede { font-size: 24px; line-height: 1.35; letter-spacing: -.02em; margin-bottom: 18px; max-width: 370px; }
.hero-email { margin-top: 12px; font: 500 12px/1.5 var(--label); letter-spacing: .04em; }
.hero-email a { text-decoration: underline; text-underline-offset: 4px; }
.founder-actions [hidden] { display: none; }
.next-step { font-size: 13px; line-height: 1.55; max-width: 310px; margin-top: 16px; }
.scope-note { font-size: 13px; line-height: 1.55; margin-top: 22px; }

/* The one piece of ambient motion on the site: the arc rises once, 2.2s, and stops.
   It is decorative, sits behind the work, and never moves under reading text.
   Under prefers-reduced-motion it is in its final position on load (brand.css kills
   every animation; the final state IS the unanimated state). */
.light {
  position: absolute; z-index: 0; pointer-events: none;
  width: 1180px; height: 1180px; left: 33%; top: 455px;
  border: 2px solid var(--arc-line); border-radius: 50%;
  box-shadow: 0 -18px 64px 6px #EFA45466, inset 0 12px 48px #E9A26533;
  transform: rotate(-23deg);
  animation: rise 2.2s ease-out both;
}
.light::after { content: ""; position: absolute; inset: 10px; border: 1px solid #DD835166; border-radius: 50%; }
@keyframes rise {
  from { transform: translateY(80px) rotate(-23deg); opacity: 0; }
  to { transform: translateY(0) rotate(-23deg); opacity: 1; }
}

/* The founding offer gets one compact explanation between the invitation and the work. It is a
   condition of the price, so it stays before the reader asks for the preview; it is not another
   card, counter, or invented proof point. */
.founder-campaign { display: grid; grid-template-columns: 30% 70%; gap: 0; padding: 54px 64px 60px; border-bottom: 1px solid var(--night-line-2); }
.founder-campaign .eyebrow { padding-top: 8px; color: var(--night-ink-mute); }
.founder-actions { margin-top: 20px; }
.founder-campaign h2 { font-size: clamp(34px, 3.6vw, 52px); }
.founder-campaign p:not(.eyebrow) { margin-top: 18px; font-size: 15px; line-height: 1.65; color: var(--night-ink-body); max-width: 62ch; }
.founder-campaign p.founder-benefit { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; color: var(--paper); max-width: 48ch; }
.founder-campaign p a { text-decoration: underline; text-underline-offset: 3px; }

/* ---- the examples ----
   The slot the withheld work block left on 2026-09-05, filled again on 2026-09-06 with the first
   rebuilt example, and carrying all three of that day's examples by the evening. The hero frames
   of that block (.hero-work, .desktop-frame, .browser-chrome, .phone-frame) are still gone and
   still live in commit 3854491; what comes back is the editorial figure, rebuilt as a LIST so the
   section went from one card to three without a second layout: a new example is one more <li>,
   and the even ones mirror themselves.

   The stage is ours. A specimen is a picture of somebody else's design, and the one thing it may
   not do on this page is speak: it sits on a shade of night with a hairline around it, its own
   cream and green stay inside the frame, and nothing about the page changes colour because of it.
   Both stage tints and the hairline are the values the direction already names in
   brand/ember-and-light/README.md, so no new colour enters the palette with the examples. */
.examples { padding: 80px 64px 72px; }
.section-heading { display: grid; grid-template-columns: 30% 70%; margin-bottom: 56px; }
.section-heading .eyebrow { padding-top: 10px; color: var(--night-ink-mute); }
.example-list { list-style: none; margin: 0; padding: 0; }
.example { display: grid; grid-template-columns: 30% 70%; align-items: center; }
.example + .example { margin-top: 80px; }
/* Every second card mirrors: caption right, stage left, on the warmer of the two stage tints.
   Written now rather than when the second example lands, because a rule added later to a page
   that is already published is a change nobody planned. */
.example:nth-child(even) { grid-template-columns: 70% 30%; }
.example:nth-child(even) .example-caption { grid-column: 2; grid-row: 1; padding: 0 0 0 65px; }
.example:nth-child(even) .example-stage { grid-column: 1; grid-row: 1; background: var(--stage-warmer); }
.example-caption { padding: 0 35px 0 0; min-width: 0; }
.example-caption h3 { font-size: 40px; letter-spacing: -.045em; }
.example-trade { margin-top: 14px; font-size: 13px; line-height: 1.6; color: var(--night-ink-mute); }
.example-what { margin-top: 14px; font-size: 15px; line-height: 1.6; color: var(--night-ink-body); }
/* The link is label voice, not a button: the one place a human acts on this page is the mail
   action, and a second filled button next to it would read as a second threshold. */
.example-link { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; margin-top: 22px; border-bottom: 1px solid var(--night-line-2); }
.example-link span { color: var(--ember-light); }
.example-link:hover { border-bottom-color: var(--night-ink); text-decoration: none; }
/* The two shots stand SIDE BY SIDE, they do not overlap. The old idiom laid the phone over the
   bottom right corner of the desktop shot, and on this specimen that corner is where the layer
   depths are printed: the mock covered the end of the hero sentence and every millimetre figure,
   which is exactly what the caption sells. A composite may cover imagery and never copy or
   figures, and inside this shot the only imagery is the photograph in the top left, too short to
   hold a phone at a readable width. So neither shot covers the other, and both are read.
   The phone is bottom aligned and taller than the desktop shot, which is what keeps the pair
   from reading as two pictures in a row. */
.example-stage { position: relative; display: flex; align-items: flex-end; gap: 22px; padding: 35px; background: var(--stage-warm); min-width: 0; }
.wide-shot { flex: 1 1 auto; min-width: 0; border: 1px solid #888073; box-shadow: 0 12px 26px #0003; }
.small-phone { flex: 0 0 200px; width: 200px; border: 4px solid #201E19; border-radius: 15px; overflow: hidden; box-shadow: 0 8px 22px #0005; }
.example-stage figcaption { position: absolute; top: 12px; right: 20px; font: 500 10px/1.5 var(--label); letter-spacing: .12em; text-transform: uppercase; color: var(--night-ink-mute); }
/* One line for the whole list, under it, aligned with the stages rather than with the captions.
   It is a property of every card, so it is said once and no card spends a line on it: the
   fiction marker already lives in the stage captions, and the price the three pictures prove
   lives here. It was a paragraph inside every caption until the third example landed and made
   it the same thirty words three times in one screen. A second line under it used to promise
   how a site gets built and then say only whose material is in it; the process strip below
   answers that in five steps, so the note went with it and the tier line kept its place. */
.examples-tier { margin: 56px 0 0 30%; font-size: 13px; line-height: 1.7; color: var(--night-ink-mute); max-width: 62ch; }
.examples-tier a { border-bottom: 1px solid var(--night-line-2); color: var(--night-ink); }

/* ---- how it goes: the five steps ----
   The band the examples raise the question for: what happens after the mail, and how much of
   the reader's own time it takes. Text only, on the same night ground as the examples, so the
   page goes hero (ember) - work (night) - sequence (night) - price (paper) and the ground
   changes only where the subject does.
   Five cells across a desktop screen, because five short cells read as "this is short" and a
   tall ladder of five rows reads as "this is a project", which is the opposite of what the
   copy says. Between 701 and 1100 the cells would be 190px of shredded Finnish, so the strip
   becomes a ladder there: the number in its own rail, the step beside it. Below 700 the rail
   goes over the copy and the steps stack.
   The number is a CSS counter in the label voice and in muted ink, never the accent: ember
   marks the one place a human acts (brand law), and five ember numerals would put five
   thresholds in a band that asks for nothing. One hairline over each step is the whole
   decoration; boxes and arrows would draw a machine where a person reads mail.
   Five columns are written out rather than auto-fitted, because the count is also printed on
   the page in the eyebrow: a sixth step changes the markup, this rule and that line. */
.process { padding: 80px 64px 72px; }
.process-steps { counter-reset: step; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 26px; }
.process-steps li { counter-increment: step; min-width: 0; border-top: 1px solid var(--night-line-2); padding-top: 18px; }
/* Two digits, no period: the label face is monospaced, so a period sits in the middle of its
   own cell and "1." renders as a digit and a dot with a hole between them. "01" is also the
   index shape this site used on its earlier steps block (assets/sivut.css .idx). */
.process-steps li::before { content: counter(step, decimal-leading-zero); display: block; margin-bottom: 16px; font: 500 11px/1.5 var(--label); letter-spacing: .12em; color: var(--night-ink-mute); }
.process-steps p { font-size: 14px; line-height: 1.6; color: var(--night-ink-body); }
/* The lead holds two lines whether it fills them or not, so the five bodies start on one line
   across the strip. One lead wraps and four do not, and five ragged starts read as five
   unrelated notes; the price cards share their row heights for the same reason (#291). Only
   while the steps are side by side: stacked, a reserved second line is a hole. */
.process-steps strong { display: block; min-height: 2.5em; margin-bottom: 9px; font-size: 16px; font-weight: 600; letter-spacing: -.015em; line-height: 1.25; color: var(--night-ink); }


/* ---- pricing on paper ----
   The three subscriptions share one full-width comparison row. Shared service details and
   the one-time add-on sit outside the cards, so the tier differences remain easy to scan. */
.pricing { background: var(--bg); color: var(--ink); padding: 80px 64px 64px; }
.price-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; margin-bottom: 44px; }
.price-intro > div { min-width: 0; }
.price-intro .eyebrow { color: var(--ink-mute); margin-bottom: 18px; }
.price-intro h2 { font-size: clamp(38px, 4vw, 60px); }
.zero-build { border-left: 1px solid #AAA397; padding-left: 36px; }
.zero-line { font-size: 25px; font-weight: 500; letter-spacing: -.035em; line-height: 1.3; max-width: 27ch; }
.zero-amount { font-size: 1em; font-weight: 600; white-space: nowrap; }
.zero-note { margin-top: 14px; font-size: 14px; line-height: 1.6; max-width: 60ch; }
.offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; row-gap: 0; }
.package { min-width: 0; }
.package-tier { border: 1px solid #AAA397; border-radius: 8px; padding: 26px; display: grid; grid-template-rows: subgrid; grid-row: span 6; background: #FCFAF5; }
.package-featured { border: 2px solid var(--ember-ink); padding: 25px; background: #F9EDE3; }
.package-label { font: 500 10px/1.5 var(--label); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px; }
.package-featured .package-label { color: var(--ember-ink); }
.package h3 { font-size: 25px; letter-spacing: -.03em; }
.price-sentence { margin-top: 12px; }
.amount { display: block; font-size: clamp(64px, 5vw, 76px); letter-spacing: -.065em; font-weight: 500; line-height: 1.15; white-space: nowrap; }
.unit { font-size: 23px; letter-spacing: -.035em; }
.founder-price-note { display: block; margin-top: 12px; font-size: 12px; line-height: 1.55; color: var(--ember-ink); font-weight: 600; }

.package-includes { font-size: 15px; line-height: 1.5; font-weight: 500; margin-top: 24px; }
.package-features { list-style: none; padding: 20px 0 26px; margin: 20px 0 0; border-top: 1px solid #C7C0B5; }
.package-features li { position: relative; padding-left: 22px; font-size: 14px; line-height: 1.6; }
.package-features li + li { margin-top: 11px; }
.package-features li::before { content: ""; position: absolute; left: 1px; top: .55em; width: 8px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.package-features strong { font-weight: 600; }
.package-tier .button { width: 100%; margin-top: auto; padding-left: 18px; padding-right: 18px; }
.package-featured .button-ember { background: var(--ember-ink); color: #FFFFFF; border-color: var(--ember-ink); }
.package-featured .button-ember:hover { background: #97320F; border-color: #97320F; }
.price-vat { margin-top: 18px; font-size: 13px; line-height: 1.5; color: var(--ink-mute); }
.price-addons { list-style: none; margin: 32px 0 0; padding: 0; }
.package-addon { border-top: 1px solid #AAA397; border-bottom: 1px solid #AAA397; padding: 25px 0; display: grid; grid-template-columns: 1fr 2fr; gap: 40px; align-items: center; }
.package-addon h3 { font-size: 20px; }
.package-addon .price-sentence { margin-top: 6px; }
.row-amount { font-size: 24px; letter-spacing: -.035em; font-weight: 500; line-height: 1.3; }
.package-addon .scope { font-size: 14px; line-height: 1.65; max-width: 66ch; }
/* One cell since the process strip took the other two (sivut/index.html says which). A lone
   third of a three-column grid reads as two cells that failed to load, so the block is the row
   shape the add-on above it already uses: the name in the narrow column, the sentence beside
   it. Below 900 it stacks with everything else on the band. */
.price-shared { display: grid; grid-template-columns: 1fr 2fr; gap: 40px; padding: 34px 0; align-items: baseline; }
.price-shared h3 { font-size: 17px; letter-spacing: -.02em; }
.price-shared p { font-size: 14px; line-height: 1.65; color: var(--ink-mute); max-width: 66ch; }
.price-details { border-top: 1px solid #AAA397; border-bottom: 1px solid #AAA397; }
.price-details summary { padding: 20px 0; cursor: pointer; font-size: 15px; font-weight: 500; }
.price-detail-copy { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding: 4px 0 25px; }
.price-detail-copy p { font-size: 14px; line-height: 1.65; }
.price-detail-copy strong { display: block; margin-bottom: 8px; font-weight: 600; }

/* Older engines keep usable equal-height flex cards when subgrid is unavailable. */
@supports not (grid-template-rows: subgrid) {
  .package-tier { display: flex; flex-direction: column; grid-row: auto; }

  .package-includes { min-height: 3.2em; }
}

/* ---- the change demonstration ---- */
.change-demo { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; padding: 85px 64px; align-items: center; }
.demo-copy h2 { font-size: clamp(38px, 4.2vw, 60px); margin-bottom: 26px; }
.demo-copy > p:not(.eyebrow):not(.demo-label) { font-size: 17px; max-width: 440px; color: var(--night-ink-body); }
.demo-label { margin-top: 36px; color: var(--night-ink-mute); font-size: 10px; }
.demo-copy blockquote { font-size: 20px; letter-spacing: -.02em; line-height: 1.5; margin: 14px 0 22px; max-width: 360px; }
/* The mock wears the specimen's own surface, so the two blocks on this page are one firm seen
   twice rather than two invented paving companies in two design languages. The four values are
   the example site's paper, its ink and two of its build-up layers; they are props inside a
   picture of somebody else's page, the same class of value as the frames and stages above, and
   none of them carries our own text. The specimen's display serif is NOT loaded here: the page
   keeps its two families and the mock is set in them (brand law, no third family). */
.live-preview { border: 1px solid var(--paper-ink-dim); background: #F5F2EA; color: #16201A; }
.preview-chrome { display: flex; justify-content: space-between; background: var(--chrome-night); color: var(--night-ink); padding: 13px 20px; font: 10px var(--label); }
.preview-page { position: relative; min-height: 430px; padding: 29px 35px 25px; overflow: hidden; }
.preview-brand { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 44px; display: flex; align-items: center; gap: 9px; }
.preview-mark { flex: 0 0 auto; }
.preview-page .eyebrow { font-size: 9px; margin-bottom: 13px; color: var(--ink-mute); }
.preview-page h3 { position: relative; z-index: 1; font-size: 49px; line-height: 1.03; max-width: 370px; font-weight: 500; min-height: 106px; }
.preview-foot { position: absolute; bottom: 23px; left: 35px; font-size: 11px; }
.live-preview #demo-status { max-width: none; padding: 13px 20px; background: var(--chrome-night); color: var(--night-ink); font-size: 12px; min-height: 46px; }

/* ---- the action, one shape on both grounds ---- */
.button {
  display: inline-flex; min-height: 54px; padding: 16px 20px;
  align-items: center; justify-content: space-between; gap: 38px;
  font: 500 12px/1.6 var(--label); letter-spacing: .06em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 0; cursor: pointer;
}
.button:hover { text-decoration: underline; text-underline-offset: 5px; }
.button-paper { background: var(--night-ink); color: var(--paper-ink); }
.button-night { background: var(--night); color: var(--night-ink); }
.button:disabled { cursor: not-allowed; opacity: .7; }

/* ---- footer ---- */
.footer { padding: 0 64px 28px; }
.footer-invite { border-top: 1px solid var(--night-line-2); border-bottom: 1px solid var(--night-line-2); padding: 36px 0; display: flex; justify-content: space-between; align-items: center; gap: 30px; }
.footer-invite p { font-size: 25px; letter-spacing: -.025em; }
.footer-action { display: grid; justify-items: end; }
.footer-invite .footer-action > a:first-child { font-size: clamp(28px, 4.5vw, 65px); letter-spacing: -.05em; line-height: 1.2; min-height: 44px; display: flex; align-items: center; gap: 35px; }
.footer-invite a span { color: var(--ember-light); }
.footer-invite .footer-email { min-height: 34px; margin-top: 7px; font: 500 12px/1.5 var(--label); letter-spacing: .04em; text-decoration: underline; text-underline-offset: 4px; }
.footer-details { display: grid; grid-template-columns: 1.3fr .7fr .8fr; gap: 65px; padding-top: 32px; font-size: 12px; line-height: 1.7; color: var(--night-ink-mute); }
.footer-details p + p { margin-top: 12px; }
.footer-details a { min-height: 44px; display: flex; align-items: center; width: fit-content; }
.last-change { padding-top: 11px; }

@media (min-width: 1600px) {
  body { max-width: 1800px; margin: 0 auto; }
  .hero h1 { font-size: 164px; }
}

@media (max-width: 1100px) {
  .pricing { padding-left: 32px; padding-right: 32px; }
  .price-intro { gap: 36px; }
  .offers { column-gap: 14px; }
  .package-tier { padding: 22px 18px; }
  .package-featured { padding: 21px 17px; }
  .package-label { font-size: 9px; letter-spacing: .06em; }
  .amount { font-size: 64px; }
  .unit { font-size: 20px; }

  .price-shared, .price-detail-copy { gap: 28px; }
}
@media (max-width: 900px) {
  .price-intro { grid-template-columns: 1fr; gap: 28px; }
  .zero-build { border-left: 0; border-top: 1px solid #AAA397; padding: 20px 0 0; }
  .zero-line { max-width: none; }
  .offers { grid-template-columns: 1fr; gap: 22px; }
  .package-tier { padding: 28px; display: flex; flex-direction: column; grid-row: auto; }
  .package-featured { padding: 27px; }
  .package-includes { min-height: 0; }
  .package-tier .button { margin-top: 0; }
  .package-addon { grid-template-columns: 1fr 1fr; gap: 25px; }
  .price-detail-copy { grid-template-columns: 1fr; gap: 24px; }
  /* Stacked, the gap is the space between a name and its own sentence, not between cells. */
  .price-shared { grid-template-columns: 1fr; gap: 10px; }
}

@media (max-width: 1100px) and (min-width: 701px) {
  .header { margin: 0 30px; }
  .hero { padding: 40px 30px 30px; }
  .hero h1 { font-size: 10.2vw; }
  .hero-bottom { grid-template-columns: 34% 66%; }
  .hero-copy { padding-right: 25px; }
  .hero-lede { font-size: 20px; }
  .hero-price { font-size: 14px; }
  .examples, .process, .pricing, .change-demo { padding-left: 40px; padding-right: 40px; }
  .example-caption h3 { font-size: 30px; }
  .example:nth-child(even) .example-caption { padding-left: 35px; }
  .examples-tier { margin-left: 0; }
  /* The ladder: one step per row, the number in its own rail. Five columns at this width give
     each step 190px, which breaks a Finnish compound in half twice a line. */
  .process-steps { grid-template-columns: 1fr; gap: 0; }
  .process-steps li { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; padding: 20px 0; }
  .process-steps li::before { margin-bottom: 0; }
  .process-steps strong { min-height: 0; }
  .process-steps p { max-width: 62ch; }
  .change-demo { gap: 40px; }
  .preview-page { padding-left: 25px; padding-right: 25px; }
  .preview-page h3 { font-size: 40px; }
  .footer { padding-left: 40px; padding-right: 40px; }
  .footer-details { gap: 30px; }
}

@media (max-width: 700px) {
  .header { height: 70px; margin: 0 20px; }
  .header .brand { gap: 7px; font-size: 18px; }
  .header .mark { width: 25px; height: 25px; }
  .brand .product { margin-left: 4px; }
  .header nav { gap: 18px; }
  .header nav a { font-size: 10px; }
  .header nav a span[aria-hidden] { margin-left: 5px; }
  .desktop-mail { display: none; }
  .mobile-mail { display: inline; }
  .header nav .mail-arrow { display: none; }
  /* With the specimen withheld (2026-09-05) the phone hero is copy only, and copy alone does
     not fill a phone screen: the section below leaked 219px into the fold and left a dead zone.
     The field takes the first screen, the copy sits under the headline, and the rest is what the
     arc rises into. The copy stays under the headline rather than being pushed to the foot of
     the field: space-between opened a 450px hole between them that read as a missing element,
     which is exactly what it was. svh, not vh: svh is the height with the browser chrome expanded, so the
     hero never grows past what the visitor can actually see. The 62px is the 70px header less
     a few pixels of slack, so the ember field and not the paper below it ends the first screen
     even if the header wraps a pixel taller. */
  .hero {
    margin: 0 8px; padding: 26px 18px 23px;
    min-height: calc(100svh - 62px);
  }
  .hero-heading .eyebrow { font-size: 8px; letter-spacing: .1em; margin-bottom: 18px; }
  .hero h1 { font-size: clamp(49px, 15.35vw, 66px); line-height: .97; letter-spacing: -.06em; max-width: 380px; }
  .hero-bottom { display: flex; flex-direction: column; margin-top: 23px; }
  .hero-copy { padding: 0; width: 100%; }
  .hero-lede { font-size: 17px; line-height: 1.4; max-width: 330px; margin-bottom: 13px; }
  .hero-price { font-size: 13px; line-height: 1.55; max-width: 310px; margin-bottom: 13px; }
  .hero-email { margin-top: 10px; font-size: 10px; }
  .next-step { font-size: 12px; margin-top: 12px; max-width: 330px; }
  .button { min-height: 48px; font-size: 10px; padding: 13px 17px; gap: 26px; }
  .hero-copy .button { min-width: 187px; }
  .scope-note { font-size: 10px; margin-top: 11px; line-height: 1.5; }
  .scope-note br { display: none; }
  .light { width: 700px; height: 700px; left: 27%; top: 520px; box-shadow: 0 -18px 55px 5px #EFA45455, inset 0 12px 35px #E9A26533; }
  .examples { padding: 58px 26px 53px; }
  .founder-campaign { display: block; padding: 54px 26px 52px; }
  .founder-campaign .eyebrow { padding-top: 0; }
  .founder-campaign h2 { font-size: 36px; }
  .founder-campaign p:not(.eyebrow) { font-size: 14px; }
  .section-heading { display: block; margin-bottom: 36px; }
  .section-heading .eyebrow { padding: 0; font-size: 9px; margin-bottom: 16px; }
  .section-heading h2 { font-size: 36px; letter-spacing: -.045em; }
  .example, .example:nth-child(even) { display: flex; flex-direction: column; align-items: stretch; }
  .example + .example { margin-top: 45px; }
  /* One column, plain blocks. It was a two column grid while the card carried an index number
     beside the name; no card has carried one since the rebuild, and the grid left the firm name
     in a 92px column with the trade printed across it. Three cards did not bring the number back:
     the reason is written over the list in sivut/index.html. */
  .example-caption, .example:nth-child(even) .example-caption { padding: 0; }
  .example-caption h3 { font-size: 29px; }
  .example-trade { margin-top: 10px; font-size: 12px; }
  .example-what { margin-top: 12px; font-size: 15px; }
  .example-link { margin-top: 18px; font-size: 10px; }
  /* Between 431 and 700px the pair still fits side by side, with the phone taking a third. */
  .example-stage, .example:nth-child(even) .example-stage {
    margin: 22px -8px 0; padding: 20px 16px; gap: 14px;
  }
  .small-phone { flex: 0 0 34%; width: auto; border-width: 3px; border-radius: 11px; }
  .example-stage figcaption { top: 7px; right: 13px; font-size: 9px; }
  .examples-tier { margin: 35px 0 0; font-size: 12px; }
  .process { padding: 58px 26px 53px; }
  .process-steps { grid-template-columns: 1fr; gap: 22px; }
  .process-steps li { padding-top: 16px; }
  .process-steps li::before { margin-bottom: 12px; }
  .process-steps p { font-size: 15px; }
  .process-steps strong { min-height: 0; font-size: 17px; }
  .pricing { padding: 49px 20px 40px; }
  .price-intro { margin-bottom: 30px; }
  .price-intro h2 { font-size: 39px; }
  .price-intro .eyebrow { font-size: 9px; }
  .zero-line { font-size: 24px; }
  .zero-note { font-size: 13px; }
  .package-tier { padding: 25px 22px; }
  .package-featured { padding: 24px 21px; }
  .package-label { font-size: 10px; }
  .amount { font-size: 72px; }
  .unit { font-size: 22px; }

  .package-addon { display: block; }
  .package-addon .scope { margin-top: 14px; }
  .change-demo { display: block; padding: 54px 26px 47px; }
  .demo-copy .eyebrow { font-size: 9px; margin-bottom: 18px; }
  .demo-copy h2 { font-size: 39px; margin-bottom: 20px; }
  .demo-copy > p:not(.eyebrow):not(.demo-label) { font-size: 15px; }
  .demo-label { margin-top: 26px; font-size: 9px; }
  .demo-copy blockquote { font-size: 19px; }
  .live-preview { margin-top: 33px; }
  .preview-page { min-height: 350px; padding: 24px; }
  .preview-page h3 { font-size: 39px; min-height: 100px; }
  .preview-brand { margin-bottom: 30px; }
  .preview-foot { left: 24px; }
  .preview-chrome { padding: 12px 15px; font-size: 9px; }
  .live-preview #demo-status { padding: 12px 15px; font-size: 11px; min-height: 58px; }
  .footer { padding: 0 26px 28px; }
  .footer-invite { display: block; padding: 28px 0; }
  .footer-invite p { font-size: 17px; margin-bottom: 17px; }
  .footer-action { justify-items: stretch; }
  .footer-invite .footer-action > a:first-child { font-size: 39px; justify-content: space-between; gap: 10px; }
  .footer-invite .footer-email { font-size: 11px; }
  .footer-details { display: block; padding-top: 25px; font-size: 12px; }
  .footer-details > div:first-child { max-width: 330px; }
  .footer-details > div:nth-child(2) { margin-top: 14px; }
  .last-change { margin-top: 13px; }
}

/* On a phone the desktop shot is a 170px thumbnail of a 1440px page: nobody reads it, and it
   left a dark strip under itself where the phone mock did not reach. The card shows the phone
   mock alone at this width, which is also the one of the two shots that says something a phone
   reader cares about. The desktop shot is one tap away, on the page itself. */
@media (max-width: 430px) {
  /* Three nav items instead of two since the examples got their own page. At 360px the old
     gap and size put the row 25px over the edge, so the label steps down one size and the
     gaps close; the wordmark and the mail action keep their tap targets. */
  .header nav { gap: 12px; }
  .header nav a { font-size: 9px; letter-spacing: .01em; }
  .example-stage, .example:nth-child(even) .example-stage { display: block; padding: 18px 16px 20px; }
  .wide-shot { display: none; }
  .small-phone { width: 100%; max-width: 232px; margin: 6px auto 0; border-width: 4px; border-radius: 14px; }
  /* Last child in the DOM, so unpinned it lands under the mock, which is where a caption reads. */
  .example-stage figcaption { position: static; display: block; text-align: center; margin-top: 12px; }
}

@media (max-width: 380px) {
  .header { margin: 0 14px; }
  .header .brand { font-size: 16px; }
  .header .mark { width: 21px; height: 21px; }
  .header nav { gap: 6px; }
  .header nav a { font-size: 8px; }
  .header nav a span[aria-hidden] { display: none; }
  .hero { padding-left: 15px; padding-right: 15px; }
  .hero h1 { font-size: 49px; }
  .hero-lede { font-size: 16px; }
  .hero-price { font-size: 12px; }
  .price-intro h2, .demo-copy h2 { font-size: 35px; }
  .section-heading h2 { font-size: 31px; }
  .footer-invite .footer-action > a:first-child { font-size: 33px; }
  .preview-page h3 { font-size: 34px; }
}