/* Web store. The recurring device is the drawing title block ("nimiö"):
   a ruled frame of cells, each with a small label and its value. */
:root {
  --paper: #eef1f0;
  --sheet: #ffffff;
  --ink: #141d26;
  --ink-2: #445162;
  --ink-3: #6a7684;
  --line: #c6ced4;
  --frame: #141d26;
  --accent: #1f5fae;
  --ok: #26703f;
  --ok-soft: #e1f0e6;
  --warn: #8a5d00;
  --warn-soft: #fbefd6;
  --err: #b3261e;
  --err-soft: #fbe6e4;
  --on-accent: #ffffff;
  --head: "Bahnschrift", "DIN Alternate", "DIN Next", "D-DIN", "Roboto Condensed", "Arial Narrow", system-ui, sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Liberation Sans", sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #12171c;
    --sheet: #1a2028;
    --ink: #e7ebef;
    --ink-2: #a9b3be;
    --ink-3: #7f8a96;
    --line: #313a45;
    --frame: #8d99a6;
    --ok: #63c483;
    --ok-soft: #173222;
    --warn: #e3b14b;
    --warn-soft: #362b12;
    --err: #f2786f;
    --err-soft: #3d1e1c;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 16px/1.55 var(--body); display: flex; flex-direction: column; min-height: 100vh; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.muted { color: var(--ink-2); }
.fine { font-size: 13.5px; color: var(--ink-3); margin: 14px 0 0; }
.mono { font-family: var(--mono); }
.nowrap { white-space: nowrap; }
.opt { font-weight: 400; color: var(--ink-3); }

/* ---------------------------------------------------------------- header / footer */
.top { background: var(--sheet); border-bottom: 1.5px solid var(--frame); }
.top-in { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; }
.mark { font: 600 24px/1 var(--head); letter-spacing: .01em; text-decoration: none; }
.top-nav { display: flex; gap: 4px; }
.top-nav a { text-decoration: none; padding: 8px 12px; color: var(--ink-2); font-weight: 500; border-bottom: 2px solid transparent; }
.top-nav a:hover { color: var(--ink); }
.top-nav a.on { color: var(--ink); border-bottom-color: var(--ink); }
.main { flex: 1; padding-top: 40px; padding-bottom: 72px; }
.foot { border-top: 1px solid var(--line); background: var(--sheet); font-size: 14px; color: var(--ink-2); }
.foot-in { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 24px; padding-top: 24px; padding-bottom: 28px; }
.foot b { color: var(--ink); }
.foot-links { display: flex; flex-direction: column; gap: 4px; }

/* ---------------------------------------------------------------- type */
h1, h2, .tb-name, .plan-name, .page-title { font-family: var(--head); font-weight: 600; letter-spacing: .005em; }
.hero { max-width: 760px; margin-bottom: 36px; }
.hero h1 { font-size: clamp(30px, 4.6vw, 46px); line-height: 1.12; margin: 0; }
.page-title { font-size: clamp(28px, 4vw, 38px); line-height: 1.15; margin: 0 0 20px; }
.lead { font-size: 18px; color: var(--ink-2); max-width: 64ch; margin: 0 0 20px; }
.crumb { font-size: 14px; color: var(--ink-3); margin-bottom: 10px; }
.crumb a { color: var(--ink-2); }
h2.sec { font-size: 22px; margin: 40px 0 14px; }
.prose { max-width: 66ch; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 16px; padding-left: 0; list-style: none; }
.prose li { padding: 7px 0 7px 22px; border-top: 1px solid var(--line); position: relative; }
.prose li:last-child { border-bottom: 1px solid var(--line); }
.prose li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 9px; height: 2px; background: var(--accent); }
.legal { font-size: 15.5px; }

/* ---------------------------------------------------------------- the title block */
.tb { background: var(--sheet); border: 1.5px solid var(--frame); }
.tb-l { font-size: 12px; line-height: 1.3; color: var(--ink-3); }
.tb-v { font-size: 15.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.tb-main { padding: 18px 20px 16px; border-left: 7px solid var(--accent); }
.tb-name { font-size: 28px; line-height: 1.1; }
.tb-tag { margin: 6px 0 0; color: var(--ink-2); }
.tb-row { display: grid; grid-template-columns: 1fr 1fr auto; border-top: 1px solid var(--frame); }
.tb-cell { padding: 10px 14px 12px; border-left: 1px solid var(--line); min-width: 0; }
.tb-cell:first-child { border-left: 0; }
.tb-head { padding: 11px 16px; border-bottom: 1px solid var(--frame); font: 600 15px/1.3 var(--head); letter-spacing: .01em; }
.tb-foot { padding: 14px 16px 16px; border-top: 1px solid var(--frame); font-size: 14px; color: var(--ink-2); }
.tb-foot p { margin: 0 0 12px; }

.catalog { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tb-product { text-decoration: none; display: flex; flex-direction: column; }
.tb-product .tb-main { flex: 1; }
.tb-go { display: flex; align-items: center; justify-content: center; padding: 10px 18px; background: var(--ink); color: var(--sheet); font-weight: 600; border-left: 1px solid var(--frame); }
.tb-product:hover .tb-go { background: var(--accent); color: var(--on-accent); }
.tb-product:hover .tb-name { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------------------------------------------------------------- product */
.product { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(320px, 1fr); gap: 48px; align-items: start; }
.product-name { font-size: clamp(36px, 5.4vw, 56px); line-height: 1.05; margin: 0 0 12px; border-left: 7px solid var(--accent); padding-left: 16px; margin-left: -23px; }
.product-img { border: 1.5px solid var(--frame); margin: 8px 0 26px; background: var(--sheet); }
.buy { position: sticky; top: 24px; }
.plan-row { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--line); }
.tb-head + .plan-row { border-top: 0; }
.plan-name { font-size: 19px; line-height: 1.2; }
.plan-price { text-align: right; line-height: 1.2; }
.plan-price b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.plan-price span { font-size: 12.5px; color: var(--ink-3); }

/* ---------------------------------------------------------------- buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; font: 600 15px/1.2 var(--body); padding: 10px 18px; background: var(--ink); color: var(--sheet); border: 1.5px solid var(--ink); text-decoration: none; cursor: pointer; border-radius: 0; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--sheet); border-color: var(--ink); }
.btn-sm { padding: 6px 12px; font-size: 14px; }
.btn-wide { width: 100%; padding: 13px 18px; font-size: 16px; }
.copy { font: 600 12.5px var(--body); padding: 2px 8px; border: 1px solid var(--line); background: var(--sheet); color: var(--ink-2); cursor: pointer; margin-left: 6px; vertical-align: 1px; }
.copy.done { color: var(--ok); border-color: var(--ok); }

/* ---------------------------------------------------------------- forms */
.order { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 40px; align-items: start; }
fieldset { border: 0; padding: 0; margin: 0 0 34px; min-width: 0; }
legend { font: 600 20px/1.2 var(--head); padding: 0; margin-bottom: 16px; display: flex; align-items: center; gap: 10px; }
.step { display: inline-grid; place-items: center; width: 28px; height: 28px; border: 1.5px solid var(--frame); font: 600 15px/1 var(--head); }
.field { margin-bottom: 16px; }
.field.narrow { max-width: 280px; }
.field label { display: block; font-weight: 600; font-size: 14.5px; margin-bottom: 6px; }
.hint { font-size: 13.5px; color: var(--ink-3); margin-top: 6px; }
.err { font-size: 14px; color: var(--err); margin-top: 6px; font-weight: 600; }
input[type=text], input[type=email], input[type=tel], input[type=number], textarea {
  width: 100%; font: 16px/1.4 var(--body); color: var(--ink); background: var(--sheet);
  border: 1.5px solid var(--line); border-radius: 0; padding: 10px 12px;
}
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
input[aria-invalid=true] { border-color: var(--err); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.grid3 { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 0 18px; }
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border: 1.5px solid var(--frame); background: var(--sheet); margin-bottom: 18px; }
.plan-opt { position: relative; cursor: pointer; border-left: 1px solid var(--line); }
.plan-opt:first-child { border-left: 0; }
.plan-opt input { position: absolute; opacity: 0; }
.plan-opt-body { display: flex; flex-direction: column; padding: 14px 16px 16px; height: 100%; border-top: 5px solid transparent; }
.plan-opt input:checked + .plan-opt-body { border-top-color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--sheet)); }
.plan-opt input:focus-visible + .plan-opt-body { outline: 2px solid var(--accent); outline-offset: -4px; }
.plan-meta { font-size: 13px; color: var(--ink-3); }
.plan-opt-price { margin-top: auto; padding-top: 10px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; border: 1.5px solid var(--frame); margin-bottom: 18px; background: var(--sheet); }
.seg label { padding: 8px 16px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.seg label + label { border-left: 1px solid var(--line); }
.seg input { accent-color: var(--accent); margin: 0; }
.check { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 14px; color: var(--ink); font-size: 14.5px; }
.check input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--accent); flex: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.order-summary { position: sticky; top: 24px; }
.sum { display: grid; grid-template-columns: 1fr auto; margin: 0; }
.sum dt, .sum dd { padding: 9px 16px; border-top: 1px solid var(--line); margin: 0; }
.sum dt:first-of-type, .sum dt:first-of-type + dd { border-top: 0; }
.sum dt { color: var(--ink-2); font-size: 14.5px; }
.sum dd { text-align: right; font-variant-numeric: tabular-nums; }
.sum .sum-total { border-top: 1.5px solid var(--frame); font-weight: 700; font-size: 17px; color: var(--ink); }

/* ---------------------------------------------------------------- account */
.narrow-page { max-width: 640px; }
.narrow-page .tb { margin-bottom: 22px; }
.login-box { padding: 20px; }
.login-box p { margin-top: 0; }
.acct-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.acct-head .page-title { margin-bottom: 4px; }
.acct-head form { margin: 6px 0 0; }
.subs { display: grid; gap: 20px; }
.tb-main-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-main-row .tb-name { font-size: 24px; }
.tb-row-4 { grid-template-columns: 1.6fr 0.8fr 1.2fr 0.9fr; }
.tb-key .tb-v { font-size: 15px; letter-spacing: .03em; overflow-wrap: anywhere; }
.tb-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.tb-actions form { margin: 0; }
.tb-ended { opacity: .7; }
.tb-ended .tb-main { border-left-color: var(--line); }
.pill { display: inline-block; font-size: 13px; font-weight: 600; padding: 2px 10px; border: 1px solid currentColor; white-space: nowrap; }
.pill.active, .pill.paid { color: var(--ok); background: var(--ok-soft); }
.pill.ending, .pill.open { color: var(--warn); background: var(--warn-soft); }
.pill.ended, .pill.void { color: var(--ink-3); }
.pill.overdue { color: var(--err); background: var(--err-soft); }
.table-wrap { overflow-x: auto; background: var(--sheet); border: 1.5px solid var(--frame); }
table.t { width: 100%; border-collapse: collapse; font-size: 15px; }
.t th { text-align: left; font-size: 12.5px; font-weight: 500; color: var(--ink-3); padding: 9px 14px; border-bottom: 1px solid var(--frame); }
.t td { padding: 10px 14px; border-top: 1px solid var(--line); }
.t tr:first-child td { border-top: 0; }
.t .num { text-align: right; font-variant-numeric: tabular-nums; }

.flash { padding: 12px 16px; margin-bottom: 20px; border-left: 4px solid; background: var(--sheet); }
.flash.ok { border-color: var(--ok); background: var(--ok-soft); }
.flash.error { border-color: var(--err); background: var(--err-soft); }

/* ---------------------------------------------------------------- small screens */
@media (max-width: 900px) {
  .product, .order { grid-template-columns: 1fr; gap: 28px; }
  .buy, .order-summary { position: static; }
  .product-name { margin-left: 0; }
}
@media (max-width: 700px) {
  .wrap { padding: 0 16px; }
  .main { padding: 26px 16px 56px; }
  .catalog { grid-template-columns: 1fr; }
  .grid2, .grid3 { grid-template-columns: 1fr; }
  .tb-row, .tb-row-4 { grid-template-columns: 1fr 1fr; }
  .tb-go { grid-column: 1 / -1; border-left: 0; border-top: 1px solid var(--frame); }
  .tb-row-4 .tb-cell:nth-child(3) { border-left: 0; }
  .tb-row-4 .tb-cell:nth-child(n+3) { border-top: 1px solid var(--line); }
  .tb-key { grid-column: 1 / -1; border-bottom: 1px solid var(--line); }
  .tb-row-4 .tb-key + .tb-cell { border-left: 0; }
  .tb-row-4 .tb-cell:nth-child(3) { border-left: 1px solid var(--line); border-top: 0; }
  .tb-row-4 .tb-cell:nth-child(4) { grid-column: 1 / -1; border-left: 0; }
  .plan-row { grid-template-columns: 1fr auto; }
  .plan-row .btn { grid-column: 1 / -1; }
  .foot-in { grid-template-columns: 1fr; gap: 14px; }
  .seg { display: flex; }
  .hide-sm { display: none; }
  .plans { grid-template-columns: 1fr; }
  .plan-opt { border-left: 0; border-top: 1px solid var(--line); }
  .plan-opt:first-child { border-top: 0; }
  .plan-opt-body { display: grid; grid-template-columns: 1fr auto; grid-template-areas: "name price" "meta unit"; gap: 0 12px; border-top: 0; border-left: 5px solid transparent; }
  .plan-opt input:checked + .plan-opt-body { border-left-color: var(--accent); }
  .plan-opt-body .plan-name { grid-area: name; }
  .plan-opt-body .plan-meta:first-of-type { grid-area: meta; }
  .plan-opt-price { grid-area: price; padding-top: 0; margin-top: 0; text-align: right; }
  .plan-opt-body .plan-meta:last-child { grid-area: unit; text-align: right; }
  .t th, .t td { padding-left: 10px; padding-right: 10px; }
  .seg label { flex: 1; }
}

/* devices under a subscription on Oma tili */
.devices { border-top: 1px solid var(--frame); }
.t-plain { font-size: 14px; }
.t-plain th { border-bottom: 1px solid var(--line); }
.t-plain td, .t-plain th { padding: 8px 16px; }
.small { font-size: 13px; }

/* brand block + optional logo (both themes) */
.brand { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; }
.mark-tag { font-size: 13px; color: var(--ink-3); }
.mark-cursor { display: none; }
.hero-logo { display: flex; align-items: center; gap: 28px; max-width: none; }
.hero-logo .logo { width: 132px; flex: none; }
.hero-logo .prompt { display: none; }
.hero .cursor { display: none; }
@media (max-width: 700px) { .hero-logo { gap: 16px; } .hero-logo .logo { width: 88px; } }