/* Soontek product page styles
   Shared by every page under soontek.net/<product>/.
   Values are documented in the vault: 10_Projektit/soontek/mainossivut/wiki/mainossivujen-ilme.md
   That note is the canonical source. Change it there first, then here. */

:root {
  --ground: #000000;
  --ink: #ffffff;
  --ink-2: #b9bbba;          /* secondary text, from the site grey #cacccb..#5a5c5b */
  --line: #ffffff;           /* hairline borders, as on the front page */
  --line-soft: rgba(255, 255, 255, 0.22);
  --panel: #0a0a0a;

  /* Accent. The published front page has no accent colour of its own; the orange
     is Soontek's own tool colour, chosen for these pages so the call to action and
     the section marks carry a little more attention (Marko 2026-09-20).
     For a monochrome page set --accent to #ffffff. */
  --accent: #ff6a1f;
  --accent-ink: #000000;

  --wide: 61rem;             /* content width on the front page */
  --column: 38rem;           /* text column, narrower for reading */
  --pad-y: 6rem;
  --pad-x: 1rem;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  font-weight: 400;
  font-size: 1.1rem;
  line-height: 1.7;
  text-align: left;
}

img { max-width: 100%; height: auto; vertical-align: middle; border: 0; }

a { color: var(--ink); text-decoration: none; transition: all .3s ease-in-out; }
a:hover { text-decoration: underline; }

h1, h2, h3 {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.1;
  letter-spacing: 0;
  margin: 0 0 1rem;
}
h1 { font-size: 3.5rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 1.4rem; }
p { margin: 0 0 1.2rem; }
strong, b { font-weight: 700; }

.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--pad-x); position: relative; }
/* .column narrows the text measure inside a .wrap without re-centring it,
   so every section starts on the same left edge. */
.column > * { max-width: var(--column); }
section { padding: var(--pad-y) 0; }
section + section { border-top: 1px solid var(--line-soft); }

/* Short accent mark above a section heading. */
.wrap > h2::before {
  content: ""; display: block;
  width: 3rem; height: 3px; margin-bottom: 1.1rem;
  background: var(--accent);
}
.cta .wrap > h2::before { margin-left: auto; margin-right: auto; }

/* ---- background bands ------------------------------------------------
   Same behaviour as the banners on soontek.net: the image is pinned to the
   viewport and does not move at all while the page scrolls. The section is a
   window onto it, so the solid black sections slide over the picture and wipe
   it away, and the next band's picture is revealed the same way.

   The front page does this with the site builder's own script, which places a
   position:fixed layer behind the section. background-attachment does the same
   thing in one line and needs no script.

   Put the picture on the section itself:
     <section class="band" style="background-image:url(../kuvat/....jpg)"> */

.band {
  position: relative;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
/* Darkening over the picture so white text stays readable. It belongs to the
   section, not to the viewport, so it moves with the text. */
.band::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 42%, rgba(0,0,0,.45) 100%);
}
.band > .wrap { z-index: 1; }

/* iOS ignores background-attachment: fixed and scales the picture oddly instead,
   so touch devices get a normal background that scrolls with the section. */
@media (hover: none) and (pointer: coarse) {
  .band { background-attachment: scroll; }
}

/* ---- header ---------------------------------------------------------- */

.site-head { border-bottom: 1px solid var(--line-soft); }
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.1rem; padding-bottom: 1.1rem;
}
.site-head img { width: 232px; }
.site-head nav { display: flex; gap: 1.6rem; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; }

/* ---- hero ------------------------------------------------------------ */

.hero { padding-top: 4.5rem; }
.hero .lead {
  font-weight: 300; font-size: 1.45rem; line-height: 1.5;
  max-width: 46rem; margin-bottom: 2.5rem;
}
.hero figure { margin: 0; }
.hero img { width: 100%; border: 1px solid var(--line-soft); }

.eyebrow {
  font-size: .78rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}

/* ---- box grid, same 3 -> 2 -> 1 as the front page -------------------- */

.boxes { display: flex; flex-wrap: wrap; margin-top: 2.5rem; }
.boxes > div {
  flex: 0 1 33.3333%; max-width: 33.3333%;
  padding: 1.6rem;
  border: 1px solid var(--line); border-width: 0 1px 1px 0;
}
.boxes > div:nth-child(3n) { border-right-width: 0; }
.boxes > div h3 { font-size: 1.05rem; margin-bottom: .6rem; }
.boxes > div p { font-size: .95rem; line-height: 1.6; margin: 0; color: var(--ink-2); }

/* ---- proof figures --------------------------------------------------- */

/* Grid rather than flex, so a row that is not full keeps the column width
   instead of stretching the last picture across the page. */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.shots figure { margin: 0; }
/* .wide = one picture per row, for screenshots that have to stay readable.
   Photographs of hardware work fine in the three column default. */
.shots.wide { grid-template-columns: 1fr; gap: 2.8rem; }
.shots.wide figcaption { max-width: 38rem; }
.shots img { width: 100%; border: 1px solid var(--line-soft); display: block; }
.shots figcaption { font-size: .9rem; color: var(--ink-2); padding-top: .7rem; }

/* Placeholder for a picture that is not shot yet. Remove with the image. */
.placeholder {
  display: flex; align-items: center; justify-content: center; text-align: center;
  min-height: 11rem; padding: 1rem;
  border: 1px dashed var(--line-soft); color: var(--ink-2);
  font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
}

/* ---- specs table ----------------------------------------------------- */

table { width: 100%; border-collapse: collapse; margin-top: 2rem; font-size: .98rem; }
th, td { text-align: left; padding: .85rem 1rem .85rem 0; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
th { font-weight: 700; width: 14rem; }

/* ---- status ---------------------------------------------------------- */

.status .column > * { max-width: 46rem; }

/* ---- call to action -------------------------------------------------- */

.cta { text-align: center; }
.cta h2 { margin-bottom: 1.5rem; }
.cta p { color: var(--ink-2); max-width: 34rem; margin-left: auto; margin-right: auto; }
.button {
  display: inline-block; margin-top: 1rem;
  padding: 1rem 2.4rem;
  background: var(--accent); color: var(--accent-ink);
  font-weight: 900; text-transform: uppercase; letter-spacing: .1em; font-size: .95rem;
  border: 1px solid var(--accent);
}
.button:hover { background: transparent; color: var(--accent); text-decoration: none; }

/* ---- footer ---------------------------------------------------------- */

.site-foot { border-top: 1px solid var(--line-soft); padding: 3rem 0; font-size: .9rem; color: var(--ink-2); }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
.site-foot a { color: var(--ink-2); }
.site-foot address { font-style: normal; }

/* ---- breakpoints, same as the front page ----------------------------- */

@media screen and (max-width: 975px) {
  :root { --pad-y: 4rem; }
  h1 { font-size: 2.6rem; }
  h2 { font-size: 1.9rem; }
  .hero .lead { font-size: 1.25rem; }
  .boxes > div { flex-basis: 50%; max-width: 50%; }
  .boxes > div:nth-child(3n) { border-right-width: 1px; }
  .boxes > div:nth-child(2n) { border-right-width: 0; }
}

@media screen and (max-width: 575px) {
  body { font-size: 1.02rem; }
  h1 { font-size: 2.1rem; }
  h2 { font-size: 1.6rem; }
  .site-head img { width: 180px; }
  .site-head nav { gap: 1rem; font-size: .72rem; }
  .boxes > div { flex-basis: 100%; max-width: 100%; border-right-width: 0 !important; }
  th, td { display: block; width: auto; border-bottom: 0; padding-bottom: 0; }
  td { padding-bottom: .9rem; border-bottom: 1px solid var(--line-soft); }
  .button { display: block; }
}

@media print {
  body { background: #fff; color: #000; }
  .site-head nav, .cta { display: none; }
  .band { background-image: none !important; }
  .band::before { display: none; }
}