/* clarissan.com landing page.
   Dark by default, because the application itself is dark and the screenshots
   are: a light page would frame them like foreign objects. No frameworks, no
   web fonts, no script — the page is text and six images. */

:root {
  /* Four surfaces, far enough apart to read as four. The old set stepped by
     three or four points of luminance, which on a dark page is no step at all —
     every band and every card sank into the same black. */
  /* Lifted a whole step on 01.09.2026: the first set sat at 3-8 % lightness,
     which is the shade a room is when the lights are off. Everything here is
     now in the 8-22 % band — still unmistakably dark, but the eye can tell one
     surface from the next without hunting for the edges. */
  --bg:        #12191f;   /* the ground */
  --bg-sunk:   #0d141a;   /* the strip, pressed into the ground */
  --bg-alt:    #1b242e;   /* a raised band: the screenshots section */
  --panel:     #222d38;   /* a card on the ground */
  --panel-2:   #293643;   /* a card on the raised band */
  --fg:        #f1f5f9;
  --muted:     #b3c0cd;   /* body copy, not a whisper */
  --rule:      #3b4b59;   /* a hairline you can actually see */
  --edge:      rgba(255,255,255,.07);   /* top light on a raised surface */
  /* The accents are the CRT pair from sihilisko.com, which is also what the
     Clarissan logo is drawn in: its wordmark samples at #40f020 and its tagline
     at #f0b000. Green carries every action, amber marks a section. The blue is
     retired from the page furniture — it now appears only inside the product
     screenshots, which is honest: the brand is phosphor, the application is
     blue. */
  --accent:    #3ce41a;   /* phosphor green, one step off the logo's own */
  --accent-dk: #2fbd12;
  --accent-ink:#06140a;   /* text on a green button */
  --amber:     #ffb000;   /* sihilisko's amber, and the logo tagline's */
  --glow:      rgba(60,228,26,.22);
  --radius:    14px;
  --wrap:      1180px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; }

.wrap { width: min(var(--wrap), 92vw); margin-inline: auto; }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--accent); color: var(--accent-ink); padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* ── header ─────────────────────────────────────────────────────────────── */

.top {
  position: sticky; top: 0; z-index: 5;
  background: rgba(11, 15, 20, .86);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--rule);
}
.top-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .85rem 0;
  flex-wrap: nowrap;
}
/* The logo is artwork on a transparent ground — the black plate it was drawn
   on is baked out to alpha, so it sits on the header tint without a visible
   rectangle behind it. */
/* flex: none matters. The header is a flex row, so with a wide nav beside it
   the logo was being shrunk to fit — which made the mark a different size in
   each language, because "Kokeile demoa" and "Testa demon" are not the same
   width. The nav gives way now, not the logo. */
.mark { display: inline-flex; align-items: center; line-height: 0; flex: none; }
.mark img { display: block; height: 44px; width: auto; max-width: none; }
.mark:hover { text-decoration: none; }
.mark:hover img, .mark:focus-visible img { filter: brightness(1.15); }
@media (max-width: 640px) { .mark img { height: 32px; } }
/* margin-left: auto rather than relying on the row's space-between: once the
   header is allowed to wrap, space-between has nothing to space on the second
   line and the nav lands on the left. This keeps it right in both states. */
.top nav { display: flex; align-items: center; flex-wrap: wrap;
           justify-content: flex-end; gap: 1.4rem; margin-left: auto; }
.top nav a { color: var(--muted); font-size: .93rem; }
.top nav a:hover { color: var(--fg); text-decoration: none; }
.top nav .btn { color: var(--fg); }

/* Language switch. Three codes, the current one lit — the same device the
   application uses in its top bar, and small enough that a Finnish visitor,
   who is most of them, never has to think about it. */
.langs { display: inline-flex; align-items: center; gap: .1rem; margin-right: .2rem; }
.langs a {
  color: var(--muted); font-size: .78rem; font-weight: 600; letter-spacing: .08em;
  padding: .18rem .34rem; border-radius: 5px; line-height: 1;
}
.langs a:hover { color: var(--fg); text-decoration: none; background: var(--panel); }
.langs a[aria-current] { color: var(--accent-ink); background: var(--accent); }
.langs span { color: var(--rule); font-size: .7rem; }
@media (max-width: 640px) { .langs { margin-right: 0; } .langs a { padding: .18rem .28rem; } }

/* ── buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block; padding: .7rem 1.15rem; border-radius: 10px;
  font-weight: 600; font-size: .95rem; line-height: 1.2; border: 1px solid transparent;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--accent-ink); }
.btn-primary:hover { background: var(--accent-dk); color: var(--accent-ink); box-shadow: 0 0 0 3px var(--glow); }
.btn-ghost { border-color: var(--rule); color: var(--fg); background: var(--panel-2); }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }

/* ── hero ───────────────────────────────────────────────────────────────── */

/* The hero's own bottom padding and the next section's top padding stack into
   one gap, so they are tuned as a pair rather than each looking reasonable
   alone. */
.hero { padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(1rem, 2vw, 2rem); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
}
.eyebrow {
  margin: 0 0 .75rem; color: var(--amber); font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.hero h1 {
  margin: 0 0 1rem; font-size: clamp(2rem, 4.4vw, 3.15rem); line-height: 1.1;
  letter-spacing: -.02em; font-weight: 750;
}
.lede { margin: 0 0 1rem; color: var(--fg); font-size: clamp(1rem, 1.4vw, 1.12rem); }
.tagline {
  margin: 0 0 1.5rem; color: var(--muted); font-size: .9rem;
  letter-spacing: .06em; text-transform: uppercase;
}
.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }
.fineprint { margin: 1.25rem 0 0; color: var(--muted); font-size: .88rem; }
.fineprint code { color: var(--fg); background: var(--panel); padding: .1rem .3rem; border-radius: 5px; }

.hero-shot { margin: 0; }
.hero-shot { position: relative; }
.hero-shot img {
  display: block; width: 100%; border-radius: var(--radius);
  border: 1px solid var(--rule);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
/* A single nod to the phosphor screen the logo is drawn on: scanlines over the
   product shot, faint enough to be felt rather than seen. */
.hero-shot::after {
  content: ""; position: absolute; inset: 0; border-radius: var(--radius);
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom, rgba(0,0,0,.16) 0 1px, transparent 1px 3px);
  mix-blend-mode: multiply; opacity: .55;
}

/* ── strip ──────────────────────────────────────────────────────────────── */

.strip {
  border-block: 1px solid var(--rule);
  background: var(--bg-sunk);
  box-shadow: inset 0 6px 14px rgba(0,0,0,.5), inset 0 -6px 14px rgba(0,0,0,.5);
}
.strip-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  padding: 1.4rem 0;
}
.strip-row div { display: flex; flex-direction: column; gap: .15rem; }
.strip-row strong { font-size: .98rem; }
.strip-row span { color: var(--muted); font-size: .86rem; }

/* ── sections ───────────────────────────────────────────────────────────── */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
/* The first section sits directly under the hero and does not need the full
   separation the later ones use between each other. */
#ominaisuudet { padding-top: clamp(1.75rem, 4vw, 3.25rem); }
section[id] { scroll-margin-top: 72px; }

/* A short rule over each heading. It is the one device that says "a new part
   starts here" without another band of colour, and it lands in the accent so
   the amber stays the hero's alone. */
.section h2::before, .cta-band h2::before {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
  background: var(--accent); margin-bottom: 1rem;
}
.section-alt {
  background: var(--bg-alt);
  border-block: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--edge);
}
.section-alt .cards li, .section-alt .plan { background: var(--panel-2); }
.section h2 {
  margin: 0 0 .6rem; font-size: clamp(1.5rem, 2.6vw, 2.1rem);
  letter-spacing: -.015em;
}
.section-lede { margin: 0 0 2.2rem; color: var(--muted); max-width: 62ch; }

/* min(100%, 280px) and not a bare 280px: a bare minimum keeps the column at
   280 even when the phone is narrower, and the whole page scrolls sideways to
   accommodate one card. */
.cards {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1rem;
}
.cards li {
  background: var(--panel); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.35rem 1.4rem;
  box-shadow: inset 0 1px 0 var(--edge), 0 10px 26px rgba(0,0,0,.4);
}
.cards h3 { margin: 0 0 .45rem; font-size: 1.02rem; }
.cards p { margin: 0; color: var(--muted); font-size: .94rem; line-height: 1.62; }

/* ── screenshots ────────────────────────────────────────────────────────── */

.shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1.5rem; }
.shots figure { margin: 0; }
.shots img {
  display: block; width: 100%; border-radius: var(--radius);
  border: 1px solid var(--rule); box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}
.shots figcaption { margin-top: .8rem; color: var(--muted); font-size: .9rem; }
.shots figcaption strong { color: var(--fg); }

/* The documents are white A4 pages, portrait, and printed at a size a person
   would actually hold. They get a narrower column than the app screenshots so
   the page does not turn into two sheets of paper. */
.shots-docs { margin-top: 2.6rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
/* min-width: 0 is load-bearing. A grid item's automatic minimum size comes from
   its content — here a 900px-wide image — and that minimum beats max-width, so
   without this the figure fills the whole column and the cap does nothing. */
.shots-docs figure { max-width: 420px; min-width: 0; }
.shots-docs img { background: #fff; }

/* ── pricing ────────────────────────────────────────────────────────────── */

.plans {
  list-style: none; margin: 0 0 1.5rem; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 1rem;
}
.plan {
  border: 1px dashed #4a5c6d; border-radius: var(--radius);
  background: var(--panel); padding: 1.7rem 1.3rem; text-align: center;
  box-shadow: inset 0 1px 0 var(--edge);
}
.plan-name {
  margin: 0 0 .5rem; color: var(--muted); font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase;
}
.plan-price { margin: 0 0 .35rem; font-size: 2rem; font-weight: 700; letter-spacing: .02em; }
.plan-note { margin: 0 0 1.1rem; color: var(--muted); font-size: .88rem; }

/* The cards are as tall as their tallest sibling, so the button is pushed to
   the bottom of each one rather than floating under its own text. */
.plan { display: flex; flex-direction: column; }
.plan-note { flex: 1 0 auto; }
.plan-cta { align-self: stretch; text-align: center; }
.plans-foot { margin: 0; color: var(--muted); font-size: .92rem; max-width: 62ch; }

/* ── closing call ───────────────────────────────────────────────────────── */

.cta-band {
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  border-top: 1px solid var(--rule);
  box-shadow: inset 0 1px 0 var(--edge);
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}
.cta-inner {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  align-items: center; justify-content: space-between;
}
.cta-band h2 { margin: 0 0 .4rem; font-size: clamp(1.35rem, 2.4vw, 1.9rem); }
.cta-band p { margin: 0; color: var(--muted); max-width: 52ch; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* ── footer ─────────────────────────────────────────────────────────────── */

.foot { border-top: 1px solid var(--rule); padding: 1.6rem 0 2.4rem; }
.foot-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.25rem;
  color: var(--muted); font-size: .88rem;
}
.foot-row a { color: var(--muted); }
.foot-row a:hover { color: var(--fg); }
/* The stamp sits in the line, right after Sopimusehdot, rather than pinned to
   the far edge: it is a signature at the end of a sentence, not a logo in a
   corner. On a phone the row wraps, so it gets its own centred line under the
   text instead of dangling off the last link. */
.foot-sig { opacity: .5; transition: opacity .15s ease; }
.foot-sig:hover { opacity: .9; }
.foot-sig img { display: block; width: 4.2rem; }

/* ── narrow screens ─────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  .foot-row { justify-content: center; text-align: center; }
  .foot-sig { flex-basis: 100%; display: flex; justify-content: center; margin-top: .5rem; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .strip-row { grid-template-columns: repeat(2, 1fr); }
  .top nav { gap: .6rem; }

  /* The section links go; the language switch stays. It was caught by this
     rule as collateral — its codes are links too — and a switch nobody can
     find is the same as no switch. */
  .top nav > a:not(.btn) { display: none; }

  /* The demo button was wrapping onto two lines and taking half the bar with
     it. Small enough to sit on one line beside the logo and the codes. */
  .top nav .btn { white-space: nowrap; font-size: .82rem; padding: .5rem .7rem; }
}

/* One line at every width. The logo holds its size within a step — it must not
   change between languages — so the steps shrink everything together and are
   sized against the longest label, Finnish "Kokeile demoa". */
@media (max-width: 620px) {
  .mark img { height: 26px; }
  .top nav { gap: .5rem; }
  .top nav .btn { font-size: .76rem; padding: .48rem .6rem; }
  .langs { gap: 0; }
  .langs a { font-size: .72rem; padding: .16rem .22rem; }
}

@media (max-width: 430px) {
  .mark img { height: 22px; }
  .top nav { gap: .35rem; }
  .top nav .btn { font-size: .7rem; padding: .4rem .5rem; }
  .langs a { font-size: .68rem; padding: .14rem .18rem; }
}

/* The page commits to dark. On a light-preference device the ground and the
   panels are painted explicitly above, so nothing is left to the browser. */

/* Phone typography.
 *
 * Justified text was tried here and taken out again, and the reason is worth
 * writing down so it is not tried a third time. A phone column is about 32
 * characters wide; justification needs roughly 45 before the gaps between
 * words stop showing. Below that the line has too few gaps to spread the
 * slack over, so it opens rivers — and Finnish, whose words are long, makes
 * it worse rather than better. Hyphenation helps and does not save it: the
 * screen ends up with five hyphens and uneven spacing at once, which reads as
 * restless even to someone who could not say why.
 *
 * So: a ragged right edge, and hyphenation kept to tighten that edge. Word
 * spacing is then even everywhere, which is the thing the eye actually
 * notices. Headings are not broken at all — a hyphen in display type is
 * conspicuous, and one headline broken twice looked like a fault.
 */
@media (max-width: 640px) {
  .hero h1,
  .section h2,
  .cta-band h2,
  .cards h3,
  .eyebrow,
  .plan-name {
    hyphens: manual;
    -webkit-hyphens: manual;
    /* Spread the words evenly over the lines instead of filling greedily and
       leaving one word alone at the end. */
    text-wrap: balance;
  }

  .lede,
  .section-lede,
  .cards li p,
  .shots figcaption,
  .plans-foot,
  .plan-note,
  .fineprint {
    text-align: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    /* Only long words break, with four characters either side: with a ragged
       edge a hyphen is a choice rather than a necessity, so it should be rare
       and never leave a fragment. */
    hyphenate-limit-chars: 8 4 4;
    -webkit-hyphenate-limit-before: 4;
    -webkit-hyphenate-limit-after: 4;
    text-wrap: pretty;
  }
}