/* Timologio marketing site — shared styles.
   Brand: navy #263757 + royal gold #D4A847. Gold is accent only on light
   surfaces; gold text is used only on navy.
   No external requests anywhere: no webfonts, no analytics scripts, no
   third-party assets. That keeps the site fast, private, and free of any
   cookie-consent obligation. Do not add a CDN font or a tracker without
   revisiting that. */

:root {
  --navy: #263757;
  --navy-dark: #1B2840;
  --gold: #D4A847;
  --gold-dark: #B98F32;
  --ink: #16202F;
  --grey: #5A6579;
  --line: #E2E6EE;
  --paper: #FFFFFF;
  --soft: #F6F8FB;
  --ok: #2F6F4E;

  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, Menlo, monospace;

  --wrap: 68rem;
  --radius: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* The hover states still apply, they just arrive instantly instead of wiping in. */
  .brand::after,
  .brand-sub { transition: none; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 1.5rem; }
.narrow { max-width: 46rem; }

a { color: var(--navy); text-underline-offset: 2px; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

h1, h2, h3 { line-height: 1.2; text-wrap: balance; margin: 0; letter-spacing: -0.015em; }
h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; }

p { margin: 0; }

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

/* Keyboard users get past the masthead without tabbing through every link. */
.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 20;
  background: var(--navy-dark);
  color: #FFF;
  padding: 0.75rem 1.1rem;
  border-bottom: 2px solid var(--gold);
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* Navy masthead. The header is --navy-dark and the hero below it is --navy, so
   the tonal step keeps the two apart without the gold rule having to act as a
   seam. Scrolled past the hero this bar sits over white content, which is
   where its contrast earns its keep. */
.site-head {
  border-bottom: 3px solid var(--gold);
  background: var(--navy-dark);
  position: sticky;
  top: 0;
  z-index: 10;
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.brand {
  font-weight: 800;
  font-size: 1.2rem;
  color: #FFF;
  text-decoration: none;
  letter-spacing: -0.02em;
  padding: 0.45rem 0;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.42rem;
}
/* Gold on navy is the one context the brand allows gold text in. Scoped to the
   wordmark's own span, not `.brand span`, or the qualifier below turns gold too. */
.brand-gold { color: var(--gold); }
/* "for Shopify" is a qualifier, not part of the wordmark: a size down, lighter, and
   in muted hero blue so it never competes with the name. Hidden below 900px because
   it costs ~73px and the header row has no room to spare at tablet widths. */
.brand-sub {
  display: none;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #93A3C0;
  white-space: nowrap;
  transition: color 0.2s ease;
}
@media (min-width: 900px) { .brand-sub { display: inline; } }
.brand:hover .brand-sub,
.brand:focus-visible .brand-sub { color: var(--gold); }
/* Hover draws a gold rule under the wordmark instead of recolouring it.
   Recolouring is the trap: any `a:hover { color }` rule outranks `.brand` on
   specificity (0,1,1 beats 0,1,0) and would repaint the wordmark navy on navy
   at roughly 1.3:1. A pseudo-element cannot be overridden that way, and the
   letters keep full contrast. */
.brand::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.24rem;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.24s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.brand:hover::after,
.brand:focus-visible::after { transform: scaleX(1); }
.site-nav { display: flex; align-items: center; gap: 0.4rem; }
/* :not(.btn) matters. Without it these two rules outrank .btn-primary on
   specificity (0,1,1 beats 0,1,0) and repaint the button label grey, then navy
   on hover, which is invisible against the navy button. Keep the guard on any
   new `.site-nav a` rule. */
/* Padding not height, so the 44px hit area grows without shifting the baseline.
   Applied at every width on purpose: tablets and touch laptops are as
   finger-driven as phones, and a media query cannot detect that. */
.site-nav a:not(.btn) {
  color: #EDF1F8; text-decoration: none; font-size: 0.95rem; font-weight: 550;
  padding: 0.72rem 0.7rem;
  border-radius: 6px;
}
/* The hover fill is why the horizontal padding grew from 0.2rem and the gap
   shrank: a background needs room around its label or it reads as a smudge.
   --navy over the --navy-dark bar is a visible lift without leaving the
   palette. */
.site-nav a:not(.btn):hover { background: var(--navy); color: #FFF; }

/* The guide link needs its own breakpoint, not .nav-hide's 640px, because Greek
   labels are long.
   ⚠️ The failure mode here is NOT overflow, which is why it is easy to miss. The
   row is `flex-wrap: nowrap`, so when it runs out of width the links shrink and
   their labels wrap to two lines instead: the header grows from 68px to 73px and
   two labels sit on two lines each, while an overflow check still reports zero.
   Measured on the homepage, which has the widest nav of the four pages
   («Πώς λειτουργεί» rather than «Αρχική»): brand 94px + the 16px .wrap gap + nav
   657px = 767px needed with the two 24px gutters. With the long label
   «Οδηγός myDATA» it was 825px, which left only 5px at 768px and wrapped. The
   label is deliberately the short «myDATA» so a 768px tablet has ~60px of slack.
   Do not lengthen that label or add another nav item without re-measuring, and
   check the header HEIGHT, not just overflow. */
.site-nav a.nav-wide { display: none; }
@media (min-width: 760px) {
  .site-nav a.nav-wide { display: inline-block; }
}

.btn {
  display: inline-block;
  border-radius: 8px;
  padding: 0.7rem 1.25rem;
  font-weight: 700;
  font-size: 0.97rem;
  text-decoration: none;
  border: 1px solid transparent;
}
/* On the navy masthead the old navy button all but disappeared, so the header
   CTA is gold with dark text: one small button, not a gold surface. A size
   down from .btn-gold, so the masthead stays a masthead and the hero keeps the
   louder call to action. */
.btn-primary {
  background: var(--gold); color: var(--navy-dark);
  font-size: 0.92rem; padding: 0.6rem 1.05rem;
}
/* Dark text on the hover fill, not white: #FFF on --gold-dark is 2.98:1 and
   fails AA even at large sizes. --navy-dark is 4.94:1. The button still
   visibly darkens; only the label stays legible while it does. */
.btn-primary:hover { background: var(--gold-dark); color: var(--navy-dark); }
.btn-ghost { border-color: var(--line); color: var(--navy); background: var(--paper); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
/* Same 2.98:1 problem as .btn-primary:hover had, and this is the hero's main
   call to action, so it matters more here than anywhere else on the site. */
.btn-gold:hover { background: var(--gold-dark); color: var(--navy-dark); }

/* Anchor jumps have to clear the sticky header, or the heading you tapped
   toward ends up hidden behind it. Worst on a phone, where the header is a
   bigger share of the screen. */
[id] { scroll-margin-top: 5.5rem; }

/* ---------- mobile ----------
   Most traffic is expected from phones, so these are corrections measured at
   375x812 rather than guesses: every standalone link was under the 44px
   minimum tap height, and the sticky header was taking 69px of an 812px
   screen. */
@media (max-width: 640px) {
  .site-nav a.nav-hide { display: none; }

  .site-head .wrap { min-height: 3.5rem; }
  /* The hover fill's horizontal padding replaces most of the old gap here, or
     the header row runs out of width. */
  .site-nav { gap: 0.25rem; }
  .site-nav a:not(.btn) { padding: 0.72rem 0.55rem; }
  .btn { padding: 0.78rem 1.05rem; }
  .btn-primary { padding: 0.68rem 0.95rem; }

  .hero { padding: 2.75rem 0 3rem; }
  section { padding: 3rem 0; }

  .site-foot { padding: 1.75rem 0; }
  .site-foot .wrap { gap: 0.5rem 2rem; }
}

/* ---------- small phones ----------
   Measured: at 320px the header row (brand + Τιμές + the install button)
   overflowed the viewport by 5px, and the roomier tap targets above made it
   worse. The header row does not wrap, so an overflow here scrolls the whole
   page sideways. Reclaim the space rather than dropping the pricing link,
   which is too useful to hide. */
@media (max-width: 380px) {
  .wrap { padding: 0 1rem; }
  /* the smaller face shrinks the line box too, so give the padding back or the
     brand drops under the 44px tap minimum */
  .brand { font-size: 1.1rem; padding: 0.55rem 0; }
  .site-nav { gap: 0.15rem; }
  .site-nav a:not(.btn) { padding: 0.72rem 0.4rem; }
  .btn { padding: 0.78rem 0.85rem; font-size: 0.92rem; }
  .btn-primary { padding: 0.68rem 0.8rem; font-size: 0.88rem; }
}

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

.hero { background: var(--navy); color: #EDF1F8; padding: 4.5rem 0 4rem; }
.hero .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
}
.hero .eyebrow i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); display: inline-block;
}
.hero h1 { color: #FFF; max-width: 30ch; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .lede {
  margin-top: 1.25rem;
  font-size: 1.12rem;
  color: #C6D0E2;
  max-width: 56ch;
}
.hero-btns { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

.hero-grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: center; }
@media (min-width: 920px) {
  .hero { padding: 5rem 0 4.5rem; }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 3rem; }
}

/* ---------- product mockup ----------
   Ported from the demo store, which has been carrying it since launch. Pure
   CSS and text, no image, so it costs no external request and stays crisp at
   any size. The lookup values are the REAL ones for test ΑΦΜ 094019245
   (ΟΡΓΑΝΙΣΜΟΣ ΤΗΛΕΠΙΚΟΙΝΩΝΙΩΝ ΤΗΣ ΕΛΛΑΔΟΣ, ΚΕΦΟΔΕ ΑΤΤΙΚΗΣ). Never substitute
   invented ones: a merchant can type that ΑΦΜ into the demo and compare. */

.mock {
  background: var(--paper);
  color: var(--ink);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.45);
  padding: 0 0 1.1rem;
  max-width: 26rem;
  margin: 0 auto;
  text-align: left;
  font-size: 0.94rem;
}
.mock-bar {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--line);
  color: var(--grey);
  font-size: 0.82rem;
  font-weight: 650;
}
.mock-bar i { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mock-bar i:nth-child(1) { background: #FCA5A5; }
.mock-bar i:nth-child(2) { background: #FCD34D; }
.mock-bar i:nth-child(3) { background: #86EFAC; }
.mock-bar span { margin-left: 0.35rem; }

.mock-body { padding: 1rem 1.15rem 0; }
.mock-check { display: flex; align-items: center; gap: 0.6rem; font-weight: 650; margin-bottom: 0.9rem; }
.mock-check .box {
  width: 1.3rem; height: 1.3rem; border-radius: 6px;
  background: var(--navy); color: #FFF;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.78rem; font-weight: 800;
}
.mock-label { font-size: 0.76rem; font-weight: 650; color: var(--grey); margin: 0.65rem 0 0.25rem; }
.mock-input {
  display: flex; align-items: center; justify-content: space-between;
  border: 1.5px solid var(--ok); border-radius: 10px;
  padding: 0.62rem 0.75rem; font-weight: 650; letter-spacing: 1px;
}
.mock-input .valid { color: var(--ok); font-size: 0.78rem; font-weight: 750; letter-spacing: 0; }
.mock-row {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px dashed var(--line);
  font-size: 0.84rem;
}
.mock-row:last-child { border-bottom: none; }
.mock-row b { color: var(--grey); font-weight: 650; flex: none; }
.mock-row span { text-align: right; font-weight: 650; }
.mock-row .mark { font-family: var(--mono); letter-spacing: 0.5px; }
.mock-tag {
  margin: 0.8rem 1.15rem 0;
  background: #ECFDF5; color: #065F46;
  border-radius: 10px; padding: 0.55rem 0.75rem;
  font-size: 0.79rem; font-weight: 650; text-align: center;
}

/* ---------- trust band ---------- */

.trust {
  background: var(--soft);
  border-bottom: 1px solid var(--line);
  padding: 1.15rem 0;
}
.trust .wrap { display: flex; flex-wrap: wrap; gap: 0.6rem 1.75rem; justify-content: center; }
.trust span {
  font-size: 0.88rem;
  color: var(--grey);
  font-weight: 550;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
.trust span::before {
  content: "";
  width: 1rem; height: 1rem;
  flex: none;
  background: var(--ok);
  border-radius: 50%;
  clip-path: polygon(14% 46%, 40% 70%, 86% 22%, 94% 32%, 42% 86%, 6% 54%);
}

/* ---------- sections ---------- */

section { padding: 4.25rem 0; }
section + section { border-top: 1px solid var(--line); }
section.tinted { background: var(--soft); }

/* /pricing/ and /setup/ lead with a section-level h1 so each page has a real
   document outline instead of starting at h2. Matched to the h2 scale: the hero
   h1 is styled separately and lives in a <div class="hero">, not a <section>,
   so it is untouched by this. */
section h1 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); font-weight: 750; }

.kicker {
  display: block;
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold-dark);
  margin-bottom: 0.6rem;
}
.sec-lede { margin-top: 0.9rem; color: var(--grey); font-size: 1.05rem; max-width: 60ch; }

/* ---------- value props ---------- */

/* Five items never sit well in a plain 2 or 3 column grid. Two columns left a
   hole beside the third card; three columns left items 4 and 5 as two stacked
   full-width bands. A six-column track solves both: three thirds on the first
   row, then two-thirds and a third on the second. The split is deliberate
   rather than leftover — item 4 is the courier delivery-note point, the
   strongest fact on the page and the longest copy, so it earns the wide cell. */
.props { display: grid; gap: 1.1rem; margin-top: 2.25rem; counter-reset: prop; }

.prop {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.7rem;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  counter-increment: prop;
}
/* Numbered because the heading promises five things. Small mono rather than the
   filled circles .steps uses: those mark a process you follow in order, these
   only enumerate. */
/* Navy, not --gold-dark. Gold-dark on a white card measures 2.98:1, which is
   below AA for text this small, and the section already carries its gold accent
   in the .kicker above and the .flag border on card 04. Navy is 11.9:1. */
.prop::before {
  content: counter(prop, decimal-leading-zero);
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 750;
  letter-spacing: 0.12em;
  color: var(--navy);
}
.prop.flag { border-color: var(--gold); background: #FDFAF2; }

@media (min-width: 720px) {
  .props { grid-template-columns: repeat(2, 1fr); }
  /* At two columns a mid-list full-width item would reopen the hole, so only
     the last one spans: items 1-4 fill two clean rows and item 5 closes the
     block. Ordered after .prop.wide deliberately — equal specificity, so
     source order decides. */
  .prop.wide { grid-column: auto; }
  .prop:last-child { grid-column: 1 / -1; }
}

@media (min-width: 1000px) {
  .props { grid-template-columns: repeat(6, 1fr); }
  .prop { grid-column: span 2; }
  .prop.wide { grid-column: span 4; }
  .prop:last-child { grid-column: span 2; }
}
.prop p { color: var(--grey); font-size: 0.98rem; }
.prop .tier {
  align-self: flex-start;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.2rem 0.45rem;
}

/* ---------- steps ---------- */

.steps { display: grid; gap: 1.4rem; margin-top: 2.25rem; counter-reset: s; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { counter-increment: s; }
.step::before {
  content: counter(s);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem; height: 2.4rem;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-weight: 800;
  font-family: var(--mono);
  margin-bottom: 0.85rem;
}
.step p { color: var(--grey); font-size: 0.97rem; margin-top: 0.4rem; }

/* ---------- deadline ---------- */

.deadline {
  background: var(--navy);
  color: #EDF1F8;
  border-radius: var(--radius);
  padding: 2.25rem;
  margin-top: 2rem;
}
/* Links on the navy surfaces. The global `a { color: var(--navy) }` renders navy on
   navy here, which is why the guide link in this box was invisible rather than just
   low-contrast. Gold on navy is the one context the brand permits gold text, and it
   measures 6.7:1. */
.deadline a,
.cta a:not(.btn) {
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.deadline a:hover,
.cta a:not(.btn):hover { color: #FFF; }

.deadline h3 { color: var(--gold); font-size: 1.3rem; }
.deadline p { color: #C6D0E2; margin-top: 0.8rem; max-width: 62ch; }
.deadline strong { color: #FFF; }

/* ---------- plans ---------- */

.plans { display: grid; gap: 1.1rem; margin-top: 2.25rem; align-items: start; }
@media (min-width: 800px) { .plans { grid-template-columns: repeat(3, 1fr); } }

.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem;
  background: var(--paper);
  position: relative;
}
.plan.pop { border-color: var(--navy); border-width: 2px; }
.plan .badge {
  position: absolute;
  top: -0.72rem; left: 1.6rem;
  background: var(--gold);
  color: var(--navy-dark);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: 4px;
}
.plan .price {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.plan .price small { font-size: 0.92rem; font-weight: 600; color: var(--grey); letter-spacing: 0; }
.plan .yearly { font-size: 0.88rem; color: var(--grey); margin-top: 0.2rem; }
.plan .trial {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ok);
  margin-top: 0.75rem;
}
.plan ul { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.plan li { font-size: 0.95rem; color: var(--grey); padding-left: 1.5rem; position: relative; }
.plan li::before {
  content: "";
  position: absolute; left: 0; top: 0.5rem;
  width: 0.9rem; height: 0.9rem;
  background: var(--gold);
  border-radius: 50%;
  clip-path: polygon(14% 46%, 40% 70%, 86% 22%, 94% 32%, 42% 86%, 6% 54%);
}
.plan li.strong { color: var(--ink); font-weight: 650; }

.disclosure {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-left: 4px solid var(--gold);
  border-radius: 6px;
  background: var(--soft);
  padding: 1.25rem 1.4rem;
  font-size: 0.94rem;
  color: var(--grey);
}
.disclosure strong { color: var(--ink); }

/* ---------- prose (long-form guide pages) ----------
   Runs of ordinary body paragraphs. The marketing pages only ever needed
   .sec-lede, for a single intro line. Long-form content needs a paragraph class,
   and because `p { margin: 0 }` is global the spacing has to come from here. */

.prose { color: var(--grey); max-width: 68ch; margin-top: 1.1rem; }

/* ---------- comparison table (long-form guide pages) ----------
   The table lives inside .cmp-wrap because a three-column comparison cannot
   reflow below roughly 34rem without becoming unreadable. The wrapper scrolls
   sideways on its own so the page body never does, which is the rule every other
   element on this site already keeps. A table is the one thing that would break
   it otherwise. */

.cmp-wrap { margin-top: 2rem; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cmp {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: 0.94rem;
  background: var(--paper);
  border: 1px solid var(--line);
}
.cmp th,
.cmp td {
  text-align: left;
  vertical-align: top;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--line);
}
.cmp thead th {
  font-size: 0.76rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
  background: var(--soft);
  white-space: nowrap;
}
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp td { color: var(--grey); }
.cmp td strong { color: var(--ink); font-weight: 700; }

/* Our own row in a comparison. Marked, not rigged: every other row is described on
   its own terms, and the gold edge only says which one is ours. Same treatment as
   .prop.flag on the homepage, so the two read as one visual language. */
.cmp tr.ours td { background: #FDFAF2; }
.cmp tr.ours td:first-child { border-left: 3px solid var(--gold); }
/* Navy, not --gold-dark: gold-dark on this pale gold measures 2.86:1, below AA for
   text this small. Navy is 11.4:1. Same reasoning as the .prop numbers. */
.cmp .ours-tag {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}

/* ---------- faq ---------- */

.faq { margin-top: 2rem; display: grid; gap: 0.6rem; }
.faq details {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--paper);
  padding: 0 1.25rem;
}
.faq summary {
  cursor: pointer;
  font-weight: 650;
  padding: 1rem 0;
  font-size: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  color: var(--gold-dark);
  font-weight: 800;
  font-size: 1.3rem;
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: "\2212"; }
.faq details > p { color: var(--grey); font-size: 0.97rem; padding: 0 0 1.15rem; max-width: 68ch; }

/* ---------- guide (setup page) ---------- */

.guide { margin-top: 2.25rem; display: grid; gap: 1.6rem; counter-reset: g; }
.guide-step {
  counter-increment: g;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.5rem 1.6rem 1.5rem 4.4rem;
  position: relative;
  background: var(--paper);
}
.guide-step::before {
  content: counter(g);
  position: absolute;
  left: 1.4rem; top: 1.45rem;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--soft);
  border: 1px solid var(--line);
  color: var(--navy);
  font-family: var(--mono);
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.guide-step p { color: var(--grey); font-size: 0.97rem; margin-top: 0.4rem; }
.guide-step .aside {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: var(--grey);
  border-left: 3px solid var(--gold);
  padding-left: 0.9rem;
}

/* ---------- cta ---------- */

.cta { background: var(--navy); color: #EDF1F8; text-align: center; }
.cta h2 { color: #FFF; }
.cta p { color: #C6D0E2; margin: 1rem auto 0; max-width: 48ch; }
.cta .hero-btns { justify-content: center; }

/* ---------- contact ----------
   Sits between the navy CTA and the navy-dark footer, and is deliberately light:
   a pale band between two dark ones is the most prominent spot on the page, which
   is the whole point. Someone who has read this far and still has a question
   should not have to go hunting in the footer for an address.

   Built as a GRID of methods rather than one line of text, because a phone number
   is coming. Adding it is one more .contact-card and nothing else, since the grid
   already reflows from one column to two on its own. */

.contact {
  background: var(--soft);
  border-top: 1px solid var(--line);
}
/* Capped, or a single card stretches the full 688px of the column and reads as an
   empty banner rather than something to click. At 32rem one card is comfortable and
   two still sit side by side (2 x 15rem + the gap fits). */
.contact-methods {
  display: grid;
  gap: 1rem;
  margin-top: 1.6rem;
  max-width: 32rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 1.05rem 1.2rem;
  text-decoration: none;
  color: var(--ink);
}
/* border-left-color after border-color, or the shorthand would repaint the gold
   edge navy on hover. */
.contact-card:hover {
  border-color: var(--navy);
  border-left-color: var(--gold);
}
.contact-label {
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--grey);
}
/* The address is the point of the card, so it takes the size. word-break because an
   email address has no spaces and would otherwise push the card past its column on
   a narrow phone. */
.contact-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  word-break: break-word;
}
.contact-hint { font-size: 0.85rem; color: var(--grey); }

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

/* Dark close to the page. The CTA above is --navy and this is --navy-dark, so
   the two dark blocks step rather than merge. */
.site-foot {
  padding: 2.5rem 0;
  font-size: 0.9rem;
  color: #C6D0E2;
  background: var(--navy-dark);
}
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between; }
/* A dim gold underline that lights up with the text on hover. Drawn with
   text-decoration, not border-bottom: these links carry vertical padding for
   the 44px tap target, and a border would sit at the bottom of that padded box
   instead of under the letters. */
.site-foot a {
  color: #FFF;
  text-decoration: underline;
  text-decoration-color: rgba(212, 168, 71, 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.site-foot a:hover { color: var(--gold); text-decoration-color: var(--gold); }
.foot-links { display: flex; flex-wrap: wrap; gap: 0 1.35rem; }
.foot-links a { padding: 0.72rem 0; display: inline-block; }