/*
  @file        brand.css
  @description What is SpectaKool's own on top of the shared Calida Lab stylesheet (styles.css, copied
               unchanged from the family sites — a fork would drift the moment either is touched).
               The shared palette is already blue and amber, which is exactly the app icon (a blue
               notebook, yellow voice bars), so unlike SpectaBooks no colour is overridden here.
  @author      Kennt Kim
  @company     Calida Lab
  @created     2026-10-12
  @lastUpdated 2026-10-12
*/

/* A feature whose screenshot has not been taken yet drops to one column instead of leaving a hole.
   The image removes itself via onerror, so this is what the reader sees until the shot arrives. */
.feature--noshot { grid-template-columns: 1fr; }
.feature--noshot .frame { display: none; }

/* The textbook mark and the card it becomes, side by side: one feature seen at its two ends. */
.feature--stacked { grid-template-columns: 1fr; }
.turns { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 22px; }
.turns figure { margin: 0; }
.turns img {
  width: 100%; height: auto; display: block; border-radius: 10px;
  border: 1px solid var(--card-border); background: #fff;
}
.turns figcaption {
  margin-top: 8px; font-size: 13px; color: var(--ink-dim); text-align: center;
}
@media (max-width: 720px) { .turns { grid-template-columns: 1fr; } }

/* The engines, named. NAMES, not logos: Apple's and Google's marks have their own rules, and a badge
   drawn to look official would claim an endorsement nobody gave. Three tiers, in the order that
   matters to the student — on the device, on a machine of theirs, on somebody else's. */
.engines { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 20px; }
.engines .chip { padding: 8px 16px; font-size: 14px; }
.chip--device { border-color: var(--amber); box-shadow: inset 0 0 0 1px var(--amber); }
.chip--cloud { color: var(--ink-dim); background: transparent; }

/* The brand reads as one line, icon then name. The shared sheet makes the icon a block, which put the
   name on a line of its own under it. */
.nav__brand { display: flex; align-items: center; gap: 9px; font-weight: 600; white-space: nowrap; }

/* "Also in there" sat on top of its chips: the shared sheet expects a subtitle between them. */
#more h2 { margin-bottom: 26px; }

/* A phone has no room for five language names beside the brand and the button: they wrapped two
   letters to a line (seen at 390 pt, 2026-10-12 — the SpectaBooks site does the same). The footer
   carries the same switcher, so the bar keeps the brand and the button. The download card also ran
   into the screen's edges there. */
@media (max-width: 560px) {
  .nav__lang { display: none; }
  .nav .btn--small { margin-left: auto; white-space: nowrap; }
  .download { margin: 30px 16px; }
}

/* The privacy policy reads as a document, not as a feature section: smaller headings, a measure a
   long paragraph can be read at. */
.policy .feature__text h2 { font-size: 22px; margin: 34px 0 8px; }
.policy .feature__text p { max-width: 680px; }