/* Tasekoski Oy, tilitoimisto, Tampere.
   Idea: vuodessa on 39 määräpäivää ja kaksi niistä on sinun.
   Calm editorial imagery in the hero; the detailed calendar remains below. Type rule: Newsreader sets the words, IBM Plex Sans
   sets the body and every figure on the page. */

/* ---------- fonts, self-hosted, OFL licences beside the files ---------- */
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/newsreader-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Newsreader';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(assets/fonts/newsreader-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(assets/fonts/ibm-plex-sans-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400 600;font-display:swap;
  src:url(assets/fonts/ibm-plex-sans-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens ---------- */
:root{
  --deep:#122B3A;         /* the fold and the dark sections */
  --paper:#E7EBE1;        /* the light ground: a ledger page, not white */
  --sand:#DBE1D3;         /* the ledger's second band */
  --line:#C6CDBB;
  --ink:#16232B;
  --muted:#4A5560;
  --dim:#93A3AC;          /* muted text on the deep ground */
  --body-d:#D5DCD5;       /* body text on the deep ground */
  --rule-d:rgba(231,235,225,.15);
  --gold:#DFA22F;         /* the one action colour: the dates that need the owner's own name */
  --gold-d:#C58C1F;
  --gold-2:#8A6B2A;       /* a window, not a due date */
  --kaari-laatiminen:#8A6B2A;
  --kaari-rekisterointi:#6E5A33;
  --band-b:#B9C6CD;       /* the marks we take care of */
  --kk1:#1E4157;          /* the calendar band, odd months */
  --kk2:#163140;          /* the calendar band, even months */
  --hdr:72px;
  /* the storefront wraps this page in a bar of its own; every measure that is taken from the
     WINDOW subtracts it, so the fold lands in the frame exactly as it lands here */
  --banner-h:0px;
  /* the key's own radius: the swatch is the band in cross section at this scale */
  --Rk:230px;
  --disp:'Newsreader',Georgia,serif;
  --sans:'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
  /* the radius of the year. The desktop fold is a window measure: the drawing takes whatever
     height is left over from the header, the plate's own frame and the legend under it. */
  --R:min(222px,calc((100svh - var(--hdr) - var(--banner-h) - 430px) / 2.3));
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:16.5px;line-height:1.6;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-weight:600}
p,ul,ol,dl,figure,table{margin:0}
ul,ol{padding:0;list-style:none}
a{color:inherit}

.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.skip{position:absolute;left:-9999px;top:0;z-index:60;background:var(--ink);color:var(--paper);
  padding:12px 18px;font-weight:600}
.skip:focus{left:12px;top:12px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sec--deep :focus-visible,.plate :focus-visible{outline-color:var(--gold)}

/* ---------- type ---------- */
h1{font-family:var(--disp);font-size:clamp(36px,4vw,53px);line-height:1.06;letter-spacing:-.014em}
h2{font-family:var(--disp);font-size:clamp(25px,2.6vw,35px);line-height:1.16;letter-spacing:-.012em}
h3{font-size:19px;line-height:1.32;letter-spacing:-.002em;font-weight:600}
/* every figure on the page is set in the text face, tabular wherever numbers stack in a column */
.num{font-family:var(--sans);font-weight:600;letter-spacing:0;font-feature-settings:"tnum" 0}
h1 .num,h2 .num{font-size:.93em}
/* the second sentence never shares a line with the first */
.ei-katkoa{white-space:nowrap}
.eyebrow{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.6;overflow:visible;color:var(--muted)}
.eyebrow--l{color:var(--dim)}
.dek{font-size:18px;line-height:1.5;max-width:50ch;margin-top:18px;color:var(--body-d)}
.small{font-size:14.5px;color:var(--muted)}
.sec--deep .small{color:var(--dim)}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;
  font:600 16.5px/1.25 var(--sans);letter-spacing:.005em;text-align:center;text-decoration:none;border:0;cursor:pointer}
.btn--p{background:var(--gold);color:var(--deep)}
.btn--p:hover{background:var(--gold-d)}
.lnk{font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:2px}
.lnk:hover{border-color:var(--paper)}
.sec .lnk:hover{border-color:var(--ink)}

/* ---------- header ---------- */
.hdr{height:var(--hdr);border-bottom:1px solid var(--line);background:var(--paper);position:relative;z-index:30}
.hdr__in{max-width:1240px;margin:0 auto;padding:0 40px;height:100%;display:flex;align-items:center;gap:36px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.mark__glyph{flex:0 0 auto}
.mark__name{font-family:var(--disp);font-size:24px;font-weight:600;letter-spacing:-.015em}
.nav{margin-left:auto}
.nav ul{display:flex;gap:26px}
.nav a{font-size:15px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.nav a:hover{border-color:var(--gold)}
.burger{display:none;margin-left:auto;background:none;border:1px solid #78806D;
  padding:9px 16px;font:600 14.5px/1 var(--sans);letter-spacing:.02em;color:inherit;cursor:pointer;min-height:44px}
.burger:hover{border-color:var(--ink)}
.menu{border-bottom:1px solid var(--line);background:var(--paper)}
.menu ul{padding:8px 0 18px}
.menu a{display:block;padding:13px 40px;font-size:17px;font-weight:500;text-decoration:none;border-top:1px solid var(--line)}

/* ---------- the fold: words and the year, on one ground ---------- */
.hero{background:var(--deep);color:var(--body-d);min-height:calc(100svh - var(--hdr) - var(--banner-h));
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,608px);align-items:stretch}
.hero__text{padding:34px 56px 34px max(40px,calc((100vw - 1240px) / 2 + 40px));
  display:flex;flex-direction:column;justify-content:center}
.hero h1{color:var(--paper);margin-top:12px}
.hero__act{display:flex;align-items:center;gap:26px;margin-top:28px;flex-wrap:wrap}
.hero__note{margin-top:20px;font-size:14.5px;color:var(--dim);max-width:40ch}
.hero :focus-visible{outline-color:var(--gold)}

/* Decorative editorial image, with no claims about a real office. */
.hero__image{margin:0;position:relative;min-width:0;overflow:hidden}
.hero__image img{display:block;width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:50% 62%}

/* RING:END */


/* ---------- sections ---------- */
.sec{padding:92px 0}
.sec--deep{background:var(--deep);color:var(--body-d)}
.sec--deep .eyebrow{color:var(--dim)}
.sec--deep h2,.sec--deep h3{color:var(--paper)}
.sec--sand{background:var(--sand)}
.sec__head{max-width:38ch;margin-bottom:44px}
.sec__head h2{margin-top:14px}

.dual{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:60px;align-items:start}
.dual__text h2{margin:14px 0 24px}
.dual__text p+p{margin-top:16px}
.dual__pic img{width:100%;height:auto}
.dual__pic figcaption{margin-top:14px;font-size:14px;line-height:1.5;color:var(--muted)}
.dual--rev .dual__text{order:2}
.dual--rev .dual__pic{order:1}

/* the argument, and under it the year written out */
.arg{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:60px;align-items:start}
.arg p+p{margin-top:16px}
.arg p{max-width:58ch}
.arg h2{margin-top:14px}

/* ---------- the year written out: the drawing's own index ---------- */
.vuosi{width:100%;margin-top:52px;border-collapse:collapse;font-size:14.5px;
  font-variant-numeric:tabular-nums}
.vuosi caption{text-align:left;font-size:11.5px;font-weight:600;letter-spacing:.15em;
  text-transform:uppercase;line-height:1.6;color:var(--muted);padding-bottom:10px}
.vuosi th,.vuosi td{text-align:left;padding:9px 14px 9px 0;border-bottom:1px solid var(--line);vertical-align:baseline}
.vuosi thead th{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.6;color:var(--muted);border-bottom:1px solid var(--ink);white-space:nowrap}
.vuosi tbody th{font-weight:400;white-space:nowrap}
.vuosi tbody tr:nth-child(even){background:var(--sand)}
.sec--sand .vuosi tbody tr:nth-child(even){background:var(--paper)}
.vuosi td:last-child,.vuosi th:last-child{padding-right:0}
.vuosi .pvm{display:block}
.vuosi .siirto{display:block;font-size:12.5px;color:var(--muted);line-height:1.4}
.vuosi .oma{color:var(--muted)}
.vuosi .oma b{font-weight:600;color:var(--ink)}
.vuosi__loppu{font-size:14px;color:var(--muted);margin-top:16px;max-width:62ch}
.vain-p,.vuosi__siirto{display:none}

/* ---------- palvelut ---------- */
.cards{display:grid;grid-template-columns:repeat(2,1fr)}
.card{padding:28px 0 32px;border-top:1px solid var(--rule-d)}
.card:nth-child(odd){padding-right:54px;border-right:1px solid var(--rule-d)}
.card:nth-child(even){padding-left:54px}
.card h3{font-size:22px}
.chip{display:inline-block;margin-top:12px;padding:5px 11px;background:rgba(231,235,225,.09);
  font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;color:var(--gold)}
.chip .num{text-transform:none;letter-spacing:.02em;font-size:12px}
.card p:not(.chip){margin-top:14px;font-size:16px;line-height:1.58;max-width:46ch}
.card ul{margin-top:18px;border-top:1px solid var(--rule-d)}
.card li{padding:9px 0 9px 20px;border-bottom:1px solid var(--rule-d);font-size:15px;position:relative;color:var(--dim)}
.card li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:2px;background:var(--gold)}
.sec__note{margin-top:38px;padding-top:20px;border-top:1px solid var(--rule-d);font-size:15.5px;
  color:var(--dim);max-width:64ch}

/* ---------- hinnat ---------- */
.hinnat{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--ink)}
.hinta{padding:26px 30px 30px 0}
.hinta+.hinta{padding-left:30px;border-left:1px solid var(--line)}
.hinta__nimi{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.6;color:var(--muted)}
.hinta__e{margin-top:12px;font-size:15px;color:var(--muted)}
.hinta__h{font-size:30px;line-height:1.15;font-weight:600;white-space:nowrap;color:var(--ink)}
.hinta__kk{font-size:14px;color:var(--muted);margin-top:2px}
.hinta p:not([class]){margin-top:14px;font-size:15.5px;line-height:1.55}
.hinta ul{margin-top:16px}
.hinta li{padding:7px 0 7px 20px;border-top:1px solid var(--line);font-size:15px;position:relative;color:var(--muted)}
.hinta li::before{content:"";position:absolute;left:0;top:17px;width:9px;height:2px;background:var(--gold)}
.hinnat__alle{margin-top:26px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:30px}
.hinnat__alle p{font-size:15px;line-height:1.55;color:var(--muted)}
.hinnat__alle b{color:var(--ink);font-weight:600}

/* ---------- asiakkaat: figures, not photographs ---------- */
.tapaus{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1fr);gap:44px}
.tapaus article{border-top:1px solid var(--line);padding-top:22px}
.tapaus__mika{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
  line-height:1.6;color:var(--muted)}
.tapaus h3{margin-top:10px;font-size:20px}
.tapaus p{margin-top:12px;font-size:15.5px;line-height:1.55}
.facts{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:auto auto;margin-top:22px;border-top:1px solid var(--line)}
.facts div{display:grid;grid-template-rows:subgrid;grid-row:span 2;padding:14px 12px 0 0}
.facts div+div{padding-left:14px;border-left:1px solid var(--line)}
.facts dt{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;line-height:1.6;color:var(--muted)}
.facts dd{margin:3px 0 0;font-size:21px;line-height:1.2;white-space:nowrap;font-weight:600}
.facts--wide{grid-template-columns:repeat(4,1fr);margin-top:30px}
.facts--wide dd{font-size:25px}

/* ---------- vaihto ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}
.steps li{padding:22px 26px 0 0}
.steps li+li{padding-left:26px;border-left:1px solid var(--line)}
.steps__n{font-size:27px;line-height:1;font-weight:600}
.steps h3{margin-top:12px;font-size:18px}
.steps p:not(.steps__n){margin-top:9px;font-size:15px;line-height:1.55;color:var(--muted)}

/* ---------- form ---------- */
.dual--form{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:70px}
.form{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
.field{display:flex;flex-direction:column}
.field--wide{grid-column:1 / -1}
.field--wide .btn{align-self:flex-start;padding:0 46px}
.field label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  line-height:1.6;color:var(--dim);margin-bottom:8px}
.field input,.field select,.field textarea{font:400 16.5px/1.5 var(--sans);color:var(--paper);
  background:#1B3446;border:1px solid #778790;padding:13px 14px;min-height:50px;border-radius:0}
.field textarea{resize:vertical}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--gold)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#F0B4AC}
.err{margin-top:7px;font-size:14px;color:#F0B4AC}
.form__ok{grid-column:1 / -1;font-size:15.5px;color:var(--gold);font-weight:500}
.form__ok:empty{display:none}

/* ---------- the standing ask ---------- */
.sec__cta{display:none}
.cta-bar{display:none}

/* ---------- footer ---------- */
.ftr{background:var(--paper);border-top:1px solid var(--line);padding:60px 0 40px}
.ftr__grid{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:44px}
.mark--ftr{display:flex;align-items:center;gap:11px}
.ftr__h{font-family:var(--sans);font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.6;color:var(--muted)}
.ftr__line{margin-top:10px;font-size:15px;line-height:1.55;color:var(--muted);max-width:34ch}
.ftr__list{margin-top:10px}
.ftr__list li{padding:5px 0}
.ftr__list a{font-size:15px;text-decoration:none;border-bottom:1px solid transparent}
.ftr__list a:hover{border-color:var(--gold)}
.ftr__cred{margin-top:8px}
.ftr__fiction{margin-top:48px;padding-top:20px;border-top:1px solid var(--line);
  font-size:13.5px;color:var(--muted)}

/* ---------- the proof line, the drawn plate, the closers and the consent ---------- */
/* the credential kinds a Finnish company owner is told to check, and the software he asks about
   second. Kinds and a product name, never a membership number: a number would be checkable
   against a real register and therefore a claim about the world. */
.todiste{margin-top:16px;padding-top:16px;border-top:1px solid var(--line);font-weight:600}
/* a plate, drawn here: it is deliberately not the shape of any real association's badge */
.merkkilaatta{display:inline-flex;align-items:center;gap:12px;margin-top:18px;padding:10px 16px 10px 12px;
  border:1px solid var(--line);border-left:3px solid var(--gold);color:var(--ink);background:var(--paper)}
.merkkilaatta svg{flex:0 0 auto}
.merkkilaatta span{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;line-height:1.45}
.merkkilaatta span{max-width:11ch}
/* a closing statement is full width or it is not a statement */
.paate{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr) minmax(0,220px);gap:24px;align-items:start}
.paate--l{border-color:var(--rule-d)}
.paate__l{font-size:11.5px;font-weight:600;letter-spacing:.15em;text-transform:uppercase;line-height:1.6;color:var(--muted)}
.sec--deep .paate__l{color:var(--dim)}
.paate__b{font-size:16px;line-height:1.58;grid-column:2 / span 2}
.sec--deep .paate__b{color:var(--dim)}
.paate__f{grid-column:3;grid-row:1;margin-top:0;border-top:0}
.paate:has(.paate__f) .paate__b{grid-column:2 / span 1}
.paate__f div{padding-top:0}
.paate__f dd{font-size:19px}
/* the consent a real Finnish form carries. The input is 24 px and the whole row is the target. */
/* the consent is a sentence, not a field label: it resets the label's tracked caps */
.field label.lupa,.lupa{display:flex;align-items:flex-start;gap:12px;min-height:44px;padding:9px 0;cursor:pointer;
  text-transform:none;letter-spacing:normal;font-weight:400;margin-bottom:0}
.lupa input{flex:0 0 24px;width:24px;height:24px;margin:0;background:var(--paper);accent-color:var(--gold)}
.lupa span{font-size:14.5px;line-height:1.5;color:var(--dim)}
.lupa a{color:var(--paper);text-decoration:underline;text-underline-offset:3px}
.lupa input[aria-invalid="true"]{outline:2px solid #F0B4AC;outline-offset:2px}

/* ---------- narrow ---------- */
@media (max-width:1180px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,540px)}
  :root{--R:min(180px,calc((100svh - var(--hdr) - var(--banner-h) - 430px) / 2.3))}
}
@media (max-width:1000px){
  .hero{grid-template-columns:1fr;min-height:0}
  .hero__text{padding:38px 40px 30px}
  .plate{padding:20px 40px 34px}
  /* stacked: the fold is no longer a window measure, so the year is sized from the WIDTH.
     This is also what a desktop reader at 150 % browser zoom gets (960 CSS px wide). */
  :root{--R:min(200px,calc((100vw - 120px) / 2.3))}
  .arg,.dual,.dual--form{grid-template-columns:1fr;gap:26px}
  .dual--rev .dual__text{order:1}
  .dual--rev .dual__pic{order:2}
  .cards{grid-template-columns:1fr}
  .card:nth-child(odd){padding-right:0;border-right:0}
  .card:nth-child(even){padding-left:0}
  .hinnat{grid-template-columns:1fr}
  .hinta{padding:22px 0 26px}
  .hinta+.hinta{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .hinnat__alle{grid-template-columns:1fr;gap:14px}
  .tapaus{grid-template-columns:1fr;gap:30px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .steps li{padding-bottom:22px;border-bottom:1px solid var(--line)}
  .steps li:nth-child(odd){padding-left:0;border-left:0}
}

/* ---------- the phone is its own composition ---------- */
@media (max-width:860px){
  :root{--hdr:60px;
    /* the phone fold is a window measure too: the words take a fixed block and the drawing takes
       everything that is left, so the first screen ends on the bottom edge of the year itself
       whatever the phone is, and our own bar comes out of the same sum */
    --words:372px;--ptop:58px;
    /* height first, but never wider than the column: at 320 px and at 150 % zoom the width wins */
    --R:min(max(96px,calc((100svh - var(--hdr) - var(--banner-h) - var(--words) - var(--ptop) - 54px) / 2.3)),calc((100vw - 56px) / 2.3))}
  .wrap{padding:0 20px}
  .hdr__in{padding:0 20px;gap:14px}
  .nav{display:none}
  .burger{display:inline-flex}
  .menu a{padding:13px 20px}
  .menu{min-height:calc(100svh - var(--hdr) - var(--banner-h))}

  .hero{display:block}
  .hero__text{padding:16px 20px 0;min-height:var(--words);justify-content:flex-start}
  .hero .eyebrow{font-size:11px;letter-spacing:.12em}
  .hero h1{font-size:32px;margin-top:9px}
  .dek{font-size:16px;margin-top:11px;line-height:1.42}
  .hero__act{margin-top:15px;gap:14px}
  .hero__act .btn{width:100%;min-height:54px}
  .hero__act .lnk{display:none}
  .hero__note{margin-top:11px;font-size:13px;line-height:1.4;max-width:none}
  .field--wide .btn{align-self:stretch;width:100%}

  .plate{padding:14px 20px 0;gap:14px}
  .plate__top{padding-bottom:10px}
  .avain{margin-top:24px;padding-bottom:32px}

  .sec{padding:44px 0}
  /* the phone page is long because the year is long: every block gives back what it can */
  .card{padding:22px 0 24px}
  .card li{padding:7px 0 7px 20px}
  .card li::before{top:17px}
  .hinta{padding:18px 0 22px}
  .hinta li{padding:6px 0 6px 20px}
  .tapaus{gap:26px}
  .steps li,.steps li+li{padding-bottom:20px}
  .steps li+li{padding-top:20px}
  .sec__head{margin-bottom:24px}
  .card:nth-child(n+2){border-top:1px solid var(--rule-d)}

  /* the year table keeps its columns on a phone by dropping to two: the month and its dates */
  .vuosi{margin-top:34px;font-size:14px;display:block}
  .vuosi thead{display:none}
  .vuosi tbody,.vuosi tr,.vuosi th,.vuosi td{display:block;width:100%}
  .vuosi caption{display:block}
  .vuosi tbody tr{border-bottom:1px solid var(--line);padding:12px 0 14px}
  .vuosi tbody tr:nth-child(even){background:none}
  .vuosi tbody th{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);padding:0 0 6px;border:0}
  /* one chronological grid that fits 390: the month and its three dates in date order.
     A weekend shift is a mark, and the note that explains it sits under the grid once. */
  .vuosi{display:block;margin-top:26px;font-size:14px}
  .vuosi caption{display:block}
  .vuosi thead{display:block}
  .vuosi thead tr,.vuosi tbody tr{display:grid;grid-template-columns:minmax(0,1fr) 62px 62px 62px;
    column-gap:6px;align-items:baseline}
  .vuosi thead th{padding:0 0 7px;text-align:right;white-space:nowrap}
  .vuosi thead th:first-child{text-align:left}
  /* the annual column has no head of its own on a phone: it is a strip under its own month */
  .vuosi thead th:last-child{display:none}
  .vuosi tbody{display:block}
  .vuosi tbody tr{padding:8px 0;border-bottom:1px solid var(--line);background:none}
  .vuosi tbody tr:nth-child(even){background:none}
  .vuosi tbody th{padding:0;border:0;font-size:14px;font-weight:400;white-space:nowrap}
  .vuosi td{padding:0;border:0;text-align:right}
  .vuosi td::before{content:none}
  .vuosi .pvm{display:inline}
  .vuosi .siirto{display:none}
  .vuosi .pvm[data-siirto]::after{content:"*";color:var(--muted);font-size:11px;vertical-align:super;margin-left:1px}
  .vain-d{display:none}
  .vain-p{display:inline}
  /* the two annual items sit as a strip under the month they belong to, not as a fifth column */
  .vuosi td.oma{grid-column:1 / -1;text-align:left;margin-top:5px;font-size:13px;line-height:1.45;color:var(--muted)}
  .vuosi td.oma:empty{display:none}
  .vuosi__siirto{display:block;margin-top:12px;font-size:13px;color:var(--muted)}
  .vuosi__loppu{margin-top:10px}

  .steps{grid-template-columns:1fr;border-top:0}
  .steps li,.steps li+li{display:grid;grid-template-columns:40px minmax(0,1fr);
    padding:0 0 24px;border-left:0;border-bottom:0;column-gap:12px}
  .steps li+li{padding-top:24px;border-top:1px solid var(--line)}
  .steps__n{grid-column:1;grid-row:1;font-size:23px;line-height:1.15;padding-top:2px}
  .steps__b{grid-column:2;grid-row:1}
  .steps h3{margin-top:0}

  .form{grid-template-columns:1fr}
  /* stacked: label, then the figure, then the statement. Three columns at 390 is one word a line. */
  .paate{display:flex;flex-direction:column;margin-top:30px}
  .paate__l{order:1}
  .paate__f{order:2;grid-column:auto;grid-row:auto;margin-top:12px}
  .paate__b,.paate:has(.paate__f) .paate__b{order:3;grid-column:auto;margin-top:12px}
  .merkkilaatta{margin-top:16px}
  .facts--wide{grid-template-columns:repeat(2,1fr);grid-template-rows:auto auto auto auto;row-gap:14px}
  .facts--wide div:nth-child(3){padding-left:0;border-left:0}

  /* the ask is never more than one screen away */
  .sec__cta{display:block;margin-top:36px}
  .sec__cta .btn{width:100%;min-height:54px}
  .cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;display:block;
    padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));
    background:rgba(231,235,225,.97);border-top:1px solid var(--line)}
  .cta-bar[hidden]{display:none}
  .cta-bar .btn{width:100%;min-height:50px}
  .ftr{padding:44px 0 96px}
  .ftr__grid{grid-template-columns:1fr}
  .ftr__list li{padding:0}
  .ftr__list a{display:block;padding:12px 0}
  .ftr__line a{display:inline-block;padding:12px 0}
  .mark{min-height:44px}
  .ftr__fiction{margin-top:34px}
}


/* read by a screen reader, not set on the page */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Archbotics label bar ----------
   Added when this example was placed on the storefront (2026-09-06). It is our labelling
   chrome, not part of the fictional firm's page, so it lives in one appended block and the
   two lines of markup it styles are listed in NOTES.md beside this file: a re-synced copy of
   the example is re-labelled in one edit. Same wording pattern as the other specimen sites.
   tools/demo-shots.js hides .demo-banner in the storefront card render, where the caption
   carries the label instead. */
.demo-banner{margin:0;max-width:none;padding:9px 40px;background:var(--ink);color:var(--body-d);
  font-family:var(--sans);font-size:13px;line-height:1.45;letter-spacing:.01em;
  display:flex;align-items:center;justify-content:space-between;gap:20px}
/* Whose bar this is, first, then what the page is, then ONE verb on the right. The sentence is
   the same one every specimen site here carries; the verb is the only link in the bar, and it
   lands on the price band the visitor came to ask about. */
.demo-banner__mark{color:var(--paper);font-weight:700;letter-spacing:.005em}
.demo-banner__act{color:var(--paper);text-decoration:underline;text-underline-offset:3px;
  white-space:nowrap;font-weight:700;padding-block:.4rem}
/* The bar is our chrome and the page's focus ring is dark ink, which is invisible on it. */
.demo-banner__act:focus-visible{outline-color:var(--gold)}
/* This page needs ONE line from the port, and that is the whole point of it: the source already
   declares --banner-h in :root and subtracts it from every measure taken from the window, so
   setting the bar's own height here moves both folds by exactly that much. Two measures use it
   on the desktop (the hero's min-height and --R, the radius of the year) and three on the phone
   (the same two plus the menu panel), and none of them is touched below. Measured with the bar
   rendered: 50px at the desktop size, where the verb's own tap padding sets the height, and 53px
   on a phone, where the sentence takes two lines. Example 2 had to leave its phone fold
   uncorrected because that fold was a counted stack of constants; this one is a window measure
   on both screens, so there is nothing to leave alone. */
:root{--banner-h:50px}
@media (max-width:860px){
  :root{--banner-h:53px}
  .demo-banner{padding:9px 20px;font-size:12px}
}

/* ---------- one layout fix carried on the storefront copy ----------
   Below 861px the year is sized by height first and by WIDTH second, and the width bound was
   (100vw - 56px) / 2.3. The 56 is the drawing's own frame (54) plus two pixels; what it leaves
   out is the plate's own 20px of padding on each side, so wherever the width bound binds the
   drawing is 38px wider than the column it stands in. Measured on the smallest phone still in
   use: 320px scrolls sideways by 34px, 340px by 14px, and at 360x900 the drawing itself reaches
   17px past the right edge without moving the document, because the fold is what clips it.
   The bound now subtracts 94px, which is the frame and the padding, and the drawing fits at every
   width. Nothing changes at 390x844 or on any desktop: there the HEIGHT bound is the smaller of
   the two and this one is never reached.
   The second one is the same class of fault in the client cases: each .tapaus article is floored
   by the min-content of its own three-column .facts row, and the widest label on the page
   (KIRJANPITO VALMIS, tracked caps) makes that floor 334px. The measure is 100vw - 40, so the
   floor binds below 374px: 320px scrolls sideways by 34 and 340px by 14, and 375px clears it by
   a single pixel, which is a font metric away from being the same defect. The facts drop to two
   columns up to 379px, which takes in every phone width the sweep walks below 390 and leaves 390
   and up, where there is real slack, exactly as the source composed them. Same shape as the
   .facts--wide rule at 520px, and the same fix pihatyo-lahti carries for the same reason.
   Reported to the example's own round: if the source takes the same corrections, this block is
   redundant rather than wrong. Listed in NOTES.md with the label bar above. */
@media (max-width:860px){
  :root{--R:min(max(96px,calc((100svh - var(--hdr) - var(--banner-h) - var(--words) - var(--ptop) - 54px) / 2.3)),calc((100vw - 94px) / 2.3))}
}
@media (max-width:379px){
  .tapaus .facts{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;row-gap:14px}
  .tapaus .facts div:nth-child(3){padding-left:0;border-left:0}
}

/* The photographic hero keeps a generous desktop frame and a compact phone crop. */
@media (min-width:1001px){
  .hero{grid-template-columns:minmax(0,1fr) minmax(0,46%);min-height:min(780px,calc(100svh - var(--hdr) - var(--banner-h)))}
  .hero__text{padding-top:64px;padding-bottom:64px}
}
@media (max-width:1000px){
  .hero__image{height:440px}
}
@media (max-width:860px){
  .hero__text{min-height:0;padding:30px 20px 28px}
  .hero__image{height:300px}
  .hero__image img{object-position:50% 72%}
}