/* Terminoo — landing page only. Tokens, shell and type scale come from site.css.
 *
 * Every section is a band separated from the next by a full-bleed hairline rather than by
 * whitespace alone, so the page reads as a set of registered plates rather than as one long
 * scroll. The sections are not numbered: the titles already say what each one is, and a
 * "01" beside every title (and another above every step) was one label too many.
 */

.band{border-bottom:1px solid var(--rule)}
.band-inner{max-width:var(--page); margin:0 auto; padding:var(--s-9) var(--gutter)}
@media (max-width:700px){ .band-inner{padding:var(--s-8) var(--gutter)} }

.band-head{margin:0 0 var(--s-7)}
.band-title{font-size:var(--fs-h2); margin:0}
/* Non-negotiable: a display heading binds to the copy under it at 32px. */
.band-title + .band-lead{margin-top:var(--s-6)}
.band-lead{font-size:var(--fs-lead); line-height:1.6; color:var(--text-muted); margin:0; max-width:56ch}

/* ── hero ───────────────────────────────────────────────────────────────────── */
.hero{
  max-width:var(--page); margin:0 auto; padding:var(--s-8) var(--gutter) var(--s-9);
  display:grid; gap:var(--s-8); align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media (min-width:900px){
  /* Top-aligned, not centred: centred on a 700px phone the copy started halfway down the
     screen, and the button fell below the fold on a 768px laptop. */
  .hero{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s-7); align-items:start}
  .hero > :first-child{padding-top:var(--s-8)}
}
/* The wide gap only once the text column can afford it: at 1024 a 96px gap pushed the
   headline onto three lines. */
@media (min-width:1200px){ .hero{gap:var(--s-9)} }
.hero h1{font-size:var(--fs-display); margin:0 0 var(--s-6)}
.hero-body{font-size:var(--fs-lead); line-height:1.6; color:var(--text-muted); margin:0 0 var(--s-7); max-width:46ch}

/* The one filled button on the page, used twice with the same label (hero, closing band).
   It was an underlined link inside a status card: the only way to get the app looked like a
   footnote. No shadow, same as everything else here; the fill is what makes it the button. */
.hero-cta{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s-4) var(--s-5)}
.btn-store{
  display:inline-flex; align-items:center; gap:var(--s-3);
  min-height:52px; padding:10px var(--s-5); border-radius:var(--r-md);
  background:var(--brand); color:var(--on-brand);
  font-size:var(--fs-body); font-weight:600; line-height:1.3; text-decoration:none;
}
.btn-store i{font-size:20px}
/* Lifted towards white in both themes: navy lightens under white text, the dark theme's pale
   blue lightens under navy text, so contrast only grows. Mixing towards --text was darker by
   an amount nobody could see. */
.btn-store:hover{background:color-mix(in srgb, var(--brand) 84%, #fff)}
.btn-store:active{transform:translateY(1px) scale(.98)}
.store-soon{display:inline-flex; align-items:center; gap:var(--s-2); font-size:var(--fs-sm); color:var(--text-faint)}

.hero-art{display:flex; justify-content:center}
/* No drawn bezel: these are the real captures, and an invented phone body around a real screen
   is the one decoration a page about official documents should not be adding. The corner radius
   and the shadow are enough to read them as screens. */
.hero-art img,.feature-art img{
  width:100%; max-width:320px; display:block;
  border-radius:22px; box-shadow:var(--shadow-art);
}
.hero-art img{transform:rotate(-2deg)}
/* The tilt is a direction, not a decoration: it leans away from the text either way round. */
[dir="rtl"] .hero-art img{transform:rotate(2deg)}
.privacy-band .hero-art img{transform:none}

/* ── authorities: which letters, in the words printed on them ──────────────── */
.authorities{border-block:1px solid var(--rule)}
.authorities-inner{
  max-width:var(--page); margin:0 auto; padding:var(--s-5) var(--gutter);
  display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s-3) var(--s-6);
}
.authorities-label{margin:0; font-size:var(--fs-sm); color:var(--text-muted)}
.authorities-list{
  list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-6);
  font-family:var(--serif); font-size:var(--fs-h3); line-height:1.3; color:var(--text);
}

/* ── how it works ───────────────────────────────────────────────────────────── */
.steps{display:grid; gap:var(--s-7); grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.step{padding-top:var(--s-5); border-top:2px solid var(--brand)}
.step-icon{font-size:22px; color:var(--text); margin-bottom:var(--s-4)}
.step-title{font-size:var(--fs-h3); font-weight:700; line-height:1.25; margin-bottom:var(--s-3); color:var(--text)}
.step-body{font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted)}

/* ── features ────────────────────────────────────────────────────────────── */
.feature-layout{display:grid; gap:var(--s-8); grid-template-columns:minmax(0,1fr); align-items:start}
@media (min-width:900px){ .feature-layout{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:var(--s-9)} }
.feature-art{display:flex; justify-content:center; position:sticky; top:var(--s-5)}
@media (max-width:899px){ .feature-art{position:static; order:-1} }

.feature-row{display:flex; gap:var(--s-4); padding:var(--s-5) 0; border-top:1px solid var(--hairline)}
.feature-row:first-of-type{border-top:0; padding-top:0}
.feature-row:last-child{padding-bottom:0}
.feature-icon{color:var(--brand); font-size:16px; margin-top:4px; flex-shrink:0; width:20px; text-align:center}
.feature-title{font-size:var(--fs-body); font-weight:700; margin-bottom:var(--s-1); color:var(--text)}
.feature-body{font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted)}

/* ── what Terminoo is not ───────────────────────────────────────────────── */
.limits{display:grid; gap:var(--s-6); grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){ .limits{grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--s-6) var(--s-8)} }
.limit-row{display:flex; gap:var(--s-4); padding-top:var(--s-5); border-top:1px solid var(--rule)}
.limit-icon{color:var(--text-faint); font-size:15px; margin-top:4px; flex-shrink:0; width:20px; text-align:center}
.limit-body{font-size:var(--fs-sm); line-height:1.65; color:var(--text-muted)}
.limit-body strong{color:var(--text); font-weight:700; font-size:var(--fs-body); line-height:1.4; display:block; margin-bottom:var(--s-2)}

/* ── privacy band: the one inverted plate on the page ──────────────────────── */
.privacy-band{background:var(--band-bg); border-bottom:0}
.privacy-band .band-title{color:#fff}
.privacy-inner{display:grid; gap:var(--s-8); grid-template-columns:minmax(0,1fr); align-items:center}
@media (min-width:900px){ .privacy-inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:var(--s-9)} }
.privacy-lead{font-size:var(--fs-lead); line-height:1.6; color:var(--on-band-muted); margin:0 0 var(--s-7); max-width:48ch}
.privacy-point{display:flex; gap:var(--s-4); padding:var(--s-4) 0; border-top:1px solid rgba(255,255,255,.14); font-size:var(--fs-sm); line-height:1.6; color:var(--on-band)}
.privacy-point:first-of-type{border-top:0}
.privacy-point i{color:var(--on-band-accent); font-size:15px; margin-top:3px; flex-shrink:0; width:20px; text-align:center}
.privacy-link{display:inline-flex; align-items:center; min-height:44px; margin-top:var(--s-5); color:var(--on-band-accent); font-size:var(--fs-body); font-weight:600}
/* On the navy band the shadow has nothing to fall on, so the edge is drawn instead. */
.privacy-band .hero-art img{max-width:300px; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 26px 44px rgba(0,0,0,.45)}

/* ── pricing ────────────────────────────────────────────────────────────────── */
/* Free is what every install already has, not a plan anyone picks, so it runs full width as the
   baseline and the two ways to pay sit side by side under it, rather than three equal cards. */
.price-grid{display:grid; gap:var(--s-5); grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){
  .price-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .price-grid > .price-card:first-child{
    grid-column:1/-1; display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
    grid-template-rows:auto auto 1fr; column-gap:var(--s-8);
  }
  .price-grid > .price-card:first-child > *{grid-column:1}
  .price-grid > .price-card:first-child .price-list{grid-column:2; grid-row:1 / -1; align-self:center}
  .price-grid > .price-card:first-child .price-period{min-height:0; margin-bottom:0}
}
.price-card{
  background:var(--surface); border:1px solid var(--rule); border-radius:var(--r-md);
  padding:var(--s-6) var(--s-5); display:flex; flex-direction:column;
}
.price-card.featured{border-color:var(--brand); position:relative; overflow:hidden}
.price-card.featured::before{content:''; position:absolute; inset-inline:0; top:0; height:3px; background:var(--brand)}
.price-card.featured .price-name{color:var(--brand)}
/* 14px, not the 12px of the other mono labels: this one names the plan, and a plan name is
   read rather than glanced at. 16px would wrap "INCLUDED WITH THE APP" in a 260px card. */
.price-name{
  font-family:var(--mono); font-size:var(--fs-sm); font-weight:500; letter-spacing:.06em;
  color:var(--text-faint); margin-bottom:var(--s-4);
}
.price-amount{font-family:var(--serif); font-size:2.4rem; line-height:1; color:var(--text); margin-bottom:var(--s-2)}
/* ponytail: a reserved two-line box keeps the three feature lists on one baseline in every
   language. Swap for `grid-template-rows:subgrid` if the cards ever grow more rows. */
.price-period{font-size:var(--fs-sm); color:var(--text-faint); min-height:2.8em; margin-bottom:var(--s-5)}
/* The two ways to pay for Plus sit as peers, both priced per month so they compare directly, and
   the yearly one names the single charge underneath. As one line ("€3.99 per month · or €29.99
   per year") the yearly price read as a fee on top of the monthly one. The struck €3.99 sits in
   the label row so both amounts stay on one baseline; it is aria-hidden because the Monthly box
   already says it. auto-fit stacks the two boxes on a phone. */
.price-plans{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:var(--s-3); margin-bottom:var(--s-5)}
.price-plan{border:1px solid var(--rule); border-radius:var(--r-sm); padding:var(--s-4)}
.price-plan-label{display:flex; justify-content:space-between; align-items:baseline; gap:var(--s-2); font-size:var(--fs-sm); font-weight:600; color:var(--text); margin-bottom:var(--s-2)}
.price-was{font-size:var(--fs-lead); font-weight:500; color:var(--err); text-decoration-thickness:2px}
.price-plan-note strong{font-weight:600; color:var(--text)}
.price-plan .price-amount{font-size:2rem}
.price-plan-note{font-size:var(--fs-sm); line-height:1.45; color:var(--text-faint)}
.price-list{list-style:none; padding:0; margin:0; font-size:var(--fs-sm); line-height:1.6; color:var(--text-muted)}
.price-list li{display:flex; gap:var(--s-3); padding:var(--s-3) 0; border-top:1px solid var(--hairline)}
.price-list li:first-child{border-top:0}
.price-list i{color:var(--brand); font-size:12px; margin-top:6px; flex-shrink:0}
.price-note{font-size:var(--fs-sm); line-height:1.65; color:var(--text-faint); max-width:78ch; margin:var(--s-7) 0 0}

/* ── questions ───────────────────────────────────────────────────────────── */
.faq-layout{display:grid; gap:var(--s-6); grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  .faq-layout{grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr); gap:var(--s-9); align-items:start}
  .faq-layout .band-head{margin:0; position:sticky; top:var(--s-7)}
}
.faq{min-width:0}
.faq-card{border-top:1px solid var(--rule)}
.faq-card:last-child{border-bottom:1px solid var(--rule)}
.faq-summary{
  cursor:pointer; list-style:none; padding:var(--s-5) 0; min-height:44px;
  font-size:var(--fs-body); font-weight:600; color:var(--text);
  display:flex; justify-content:space-between; align-items:center; gap:var(--s-4);
}
.faq-summary::-webkit-details-marker{display:none}
.faq-summary i{font-size:12px; color:var(--text-faint); flex-shrink:0; transition:transform .2s var(--ease)}
.faq-card[open] .faq-summary i{transform:rotate(45deg)}
.faq-summary:hover,.faq-summary:hover i{color:var(--brand)}
.faq-body{font-size:var(--fs-sm); line-height:1.65; color:var(--text-muted); padding:0 0 var(--s-5); max-width:64ch}
.faq-body p{margin:0 0 var(--s-3)}
.faq-body p:last-child{margin:0}

/* ── closing band ───────────────────────────────────────────────────────────── */
.cta-band{background:var(--brand-container); border-bottom:0}
.cta-band .band-inner{text-align:center; padding-block:var(--s-8)}
.cta-title{font-family:var(--serif); font-weight:400; font-size:var(--fs-h2); line-height:1; color:var(--on-brand-container); margin:0 auto var(--s-6); max-width:22ch}
.cta-body{font-size:var(--fs-body); line-height:1.6; color:var(--on-brand-container); max-width:56ch; margin:0 auto}
.cta-band .btn-store{margin-top:var(--s-6)}

/* ── motion (assets/motion.js) ── Hidden only under .motion, which site.js sets before first
   paint and removes again if motion.js never runs; without it these rules do nothing. */
.motion [data-reveal],.motion [data-reveal-stagger] > *{visibility:hidden}
@media print{
  .motion [data-reveal],.motion [data-reveal-stagger] > *{visibility:visible !important; opacity:1 !important; transform:none !important}
}