/* ===========================================================================
   Australia Best Study — design system
   Ocean navy + reef teal + sunset orange. Fraunces for voice, Inter for facts.
   =========================================================================== */

/* --- Fraunces, self-hosted STATIC instances --------------------------------
   Never a variable font and never font-variation-settings: WebKit (iPhone,
   iPad) drew Google's variable Fraunces at its default wght 900 / opsz 9
   outlines on the requested instance's advances, which crushed every heading
   into overlapping letters with no word spaces (20 Oct 2026). Each face below
   is one fixed weight + optical size, generated by build/fonts.py.
     "Fraunces Display"  opsz 90  -> h1
     "Fraunces"          opsz 40  -> h2-h4 and large display figures
     "Fraunces Text"     opsz 17  -> display type set at 14-20 px
   The url()s are rewritten to content-hashed names at build time. */
@font-face { font-family: "Fraunces Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fraunces-display-600-latin.b97fa5f9d0.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: "Fraunces Display"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fraunces-display-600-latin-ext.2c3a49d30e.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/fraunces-400-latin.9507295f09.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: "Fraunces"; font-style: normal; font-weight: 400; font-display: swap;
  src: url(../fonts/fraunces-400-latin-ext.42d89fbfc1.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fraunces-600-latin.0a6316fa8d.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: "Fraunces"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fraunces-600-latin-ext.d400afa72a.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/fraunces-700-latin.531cf84a18.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: "Fraunces"; font-style: normal; font-weight: 700; font-display: swap;
  src: url(../fonts/fraunces-700-latin-ext.e115c232a1.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Fraunces Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fraunces-text-600-latin.b6ce580b45.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: "Fraunces Text"; font-style: normal; font-weight: 600; font-display: swap;
  src: url(../fonts/fraunces-text-600-latin-ext.90c64f1de0.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --ink:        #06192c;
  --ink-2:      #0f3553;
  --ink-3:      #33536d;
  --muted:      #5f7386;

  --reef:       #00a3b4;
  --reef-deep:  #006f7c;
  --reef-soft:  #e4f6f8;
  --reef-line:  #b4e4e9;

  --sun:        #ff6a1f;
  --sun-deep:   #d94c06;
  --sun-soft:   #fff0e6;

  --gold:       #ffb200;
  --leaf:       #1f9d63;
  --leaf-soft:  #e6f6ee;
  --red:        #d6322b;
  --red-soft:   #fdeceb;

  --paper:      #ffffff;
  --sand:       #fdf7f0;
  --sand-2:     #f6efe6;
  --line:       #e9e0d5;

  --radius:     18px;
  --radius-lg:  28px;
  --radius-sm:  11px;

  --shadow-sm:  0 1px 2px rgba(6,25,44,.06), 0 3px 10px rgba(6,25,44,.05);
  --shadow:     0 2px 4px rgba(6,25,44,.05), 0 12px 32px rgba(6,25,44,.09);
  --shadow-lg:  0 4px 8px rgba(6,25,44,.05), 0 28px 60px rgba(6,25,44,.14);

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-display-xl: "Fraunces Display", "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-display-sm: "Fraunces Text", "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --wrap: 1180px;
  --gut: clamp(1.1rem, 4vw, 2.5rem);
  --header-h: 74px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-2);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--reef-deep); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--sun-deep); }
:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; border-radius: 4px; }

/* --- type ----------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  color: var(--ink);
  letter-spacing: -0.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 5.4vw, 4rem); font-family: var(--font-display-xl); }
h2 { font-size: clamp(1.85rem, 3.9vw, 2.8rem); }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); line-height: 1.22; letter-spacing: -0.01em; }
h4 { font-size: 1.05rem; line-height: 1.3; }
p { text-wrap: pretty; }

.eyebrow {
  font-family: var(--font-body);
  font-size: .77rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--reef-deep);
  display: flex; align-items: center; gap: .6rem;
}
.eyebrow::before {
  content: ""; width: 26px; height: 2px; background: var(--sun); border-radius: 2px; flex: none;
}
.eyebrow.center { justify-content: center; }
.lede { font-size: clamp(1.06rem, 1.7vw, 1.22rem); color: var(--ink-3); line-height: 1.6; }
.small { font-size: .87rem; color: var(--muted); line-height: 1.55; }
.tiny { font-size: .78rem; color: var(--muted); line-height: 1.5; }

/* --- layout --------------------------------------------------------------- */
.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; }
.wrap-narrow { width: min(760px, 100% - var(--gut) * 2); margin-inline: auto; }
section { padding-block: clamp(3.6rem, 8vw, 6.5rem); }
.sand { background: var(--sand); }
.lagoon { background: var(--reef-soft); }
.deep { background: var(--ink); color: #cfe0ec; }
.deep h2, .deep h3, .deep h4 { color: #fff; }
.deep .lede { color: #a9c4d8; }
.deep .eyebrow { color: var(--gold); }
.deep a { color: #7fe3ee; }

.grid { display: grid; gap: clamp(1rem, 2.4vw, 1.6rem); }
.g2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.grid > *, .split > *, .versus > *, .band-in > *, .footer-grid > *,
.calc > *, .people > *, .form-row > *, .seg > * { min-width: 0; }
.stack > * + * { margin-top: 1rem; }
.section-head { max-width: 660px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.section-head > * + * { margin-top: .85rem; }

/* --- buttons -------------------------------------------------------------- */
.btn {
  --bg: var(--sun); --fg: #fff;
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.5rem;
  background: var(--bg); color: var(--fg);
  border: 0; border-radius: 100px;
  font-weight: 650; font-size: .98rem; letter-spacing: -.005em;
  text-decoration: none; cursor: pointer;
  box-shadow: 0 1px 2px rgba(6,25,44,.12), 0 8px 20px -6px color-mix(in srgb, var(--bg) 55%, transparent);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, background .18s;
  white-space: nowrap;
}
.btn:hover {
  color: var(--fg);
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(6,25,44,.12), 0 14px 28px -8px color-mix(in srgb, var(--bg) 60%, transparent);
}
.btn:active { transform: translateY(0); }
.btn svg { flex: none; }
.btn-ghost {
  --bg: transparent; --fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px rgba(6,25,44,.18);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); background: rgba(6,25,44,.03); }
.btn-light {
  --bg: rgba(255,255,255,.14); --fg: #fff;
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.5);
}
.btn-light:hover { --bg: rgba(255,255,255,.24); box-shadow: inset 0 0 0 1.5px #fff; }
.btn-reef { --bg: var(--reef); }
.btn-sm { padding: .6rem 1.1rem; font-size: .88rem; }
.btn-block { display: flex; width: 100%; }

/* --- header --------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 90;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(1.6) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s, background .25s;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 6px 22px -12px rgba(6,25,44,.3); }
.header-in {
  display: flex; align-items: center; gap: 1.2rem;
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; flex: none; }
.brand img { height: 38px; width: auto; }
.brand .brand-sub {
  display: none; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--reef-deep);
  border-left: 1px solid var(--line); padding-left: .6rem;
}
@media (min-width: 1100px) { .brand .brand-sub { display: block; } }

.nav { display: none; margin-left: auto; align-items: center; gap: .15rem; }
@media (min-width: 980px) { .nav { display: flex; } }
.nav a {
  position: relative;
  padding: .55rem .72rem; border-radius: 9px;
  font-size: .93rem; font-weight: 550; color: var(--ink-2); text-decoration: none;
  transition: color .16s, background .16s;
}
.nav a:hover { background: var(--sand-2); color: var(--ink); }
.nav a[aria-current="page"] { color: var(--reef-deep); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: .72rem; right: .72rem; bottom: .28rem;
  height: 2px; border-radius: 2px; background: var(--sun);
}
.header-cta { display: none; margin-left: .5rem; }
@media (min-width: 980px) { .header-cta { display: inline-flex; } }

/* EN | IT switcher (australiabeststudy.com only).
   Deliberately NOT hidden behind the burger on phones: a language control
   nobody can find is the same as not having one. Fixed at ~64px so it cannot
   widen the header row on a 390px screen — the whole page went horizontal once
   before over a single extra pill. */
.lang {
  display: flex; align-items: center; gap: .1rem;
  margin-left: auto; flex: none;
  padding: .2rem; background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
}
@media (min-width: 980px) { .lang { margin-left: .6rem; } }
.lang a, .lang .lang-on {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 30px; padding: .18rem .34rem; line-height: 1.4;
  font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  border-radius: 999px; text-decoration: none;
}
.lang a { color: var(--ink-2); }
.lang a:hover { background: var(--sand-2); color: var(--ink); }
.lang .lang-on { background: var(--reef-deep); color: #fff; }

.burger {
  margin-left: auto; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 11px;
  background: var(--sand-2); border: 1px solid var(--line); cursor: pointer;
}
@media (min-width: 980px) { .burger { display: none; } }
.burger span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: .22s; }
.burger span + span { margin-top: 4px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.mobile-nav {
  display: none; border-top: 1px solid var(--line); background: var(--paper);
  padding: .7rem var(--gut) 1.3rem;
}
.mobile-nav.open { display: block; }
.mobile-nav a {
  display: block; padding: .8rem .2rem; font-weight: 550; font-size: 1.02rem;
  color: var(--ink-2); text-decoration: none; border-bottom: 1px solid var(--sand-2);
}
.mobile-nav a[aria-current="page"] { color: var(--reef-deep); }
.mobile-nav .btn { margin-top: 1rem; }

/* --- hero ----------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; color: #fff; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: -2; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(3,18,32,.72) 0%, rgba(3,18,32,.38) 34%, rgba(3,18,32,.62) 74%, rgba(3,18,32,.88) 100%),
    radial-gradient(120% 80% at 12% 30%, rgba(3,18,32,.55), transparent 62%);
}
.hero-in { padding-block: clamp(3.4rem, 11vw, 7.5rem) clamp(2.4rem, 6vw, 4rem); max-width: 830px; }
.hero h1 { color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.35); }
.hero .lede { color: #dfeaf2; margin-top: 1.25rem; max-width: 60ch; font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
/* Two phrases, each kept whole: "Cairns, Queensland" and "• it is 06:48 PM here
   right now". On a phone they wrap as two clean lines. The text used to sit in
   the flex box as bare runs, which made every run its own shrinkable flex item,
   and WebKit wrapped them word by word into columns. */
.hero-tag {
  display: inline-flex; flex-wrap: wrap; align-items: center; column-gap: .55rem;
  padding: .42rem .9rem; border-radius: 100px;
  background: rgba(255,255,255,.14); backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.24);
  font-size: .82rem; font-weight: 600; color: #eaf4fa; letter-spacing: .01em;
  margin-bottom: 1.6rem;
}
.hero-tag > span { white-space: nowrap; }
.hero-tag .dot { display: inline-block; vertical-align: .08em; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px rgba(255,178,0,.28); margin: 0 .6rem 0 .25rem; }

/* page hero (interior) */
.page-hero { background: var(--ink); color: #cfe0ec; position: relative; overflow: hidden; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 130% at 82% -10%, rgba(0,163,180,.4), transparent 58%),
              radial-gradient(60% 100% at 0% 110%, rgba(255,106,31,.22), transparent 60%);
}
.page-hero .wrap { position: relative; }
.page-hero-in { padding-block: clamp(2.6rem, 7vw, 4.6rem) clamp(2.4rem, 6vw, 4rem); max-width: 720px; }
.page-hero h1 { color: #fff; }
.page-hero .lede { color: #a9c4d8; margin-top: 1rem; }
.page-hero .eyebrow { color: var(--gold); margin-bottom: 1rem; }

.crumbs { display: flex; gap: .45rem; align-items: center; font-size: .82rem; color: #7f9bb2; padding-top: 1.4rem; flex-wrap: wrap; }
.crumbs a { color: #a9c4d8; text-decoration: none; }
.crumbs a:hover { color: #fff; text-decoration: underline; }

/* --- stat strip ----------------------------------------------------------- */
.stats {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(2, 1fr);
  background: var(--paper); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); overflow: hidden;
  margin-top: clamp(-3rem, -4vw, -2rem);
}
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat { padding: clamp(1.2rem, 2.6vw, 1.9rem) clamp(1rem, 2vw, 1.5rem); border-top: 1px solid var(--sand-2); border-left: 1px solid var(--sand-2); }
.stat:nth-child(-n+2) { border-top: 0; }
.stat:nth-child(odd) { border-left: 0; }
@media (min-width: 760px) { .stat { border-top: 0; } .stat:nth-child(odd) { border-left: 1px solid var(--sand-2); } .stat:first-child { border-left: 0; } }
.stat .n {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem); line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.stat .n small { font-size: .48em; font-weight: 600; color: var(--reef-deep); margin-left: .1em; font-family: var(--font-display-sm); }
.stat .k { font-size: .84rem; color: var(--muted); margin-top: .5rem; line-height: 1.35; }

/* --- cards ---------------------------------------------------------------- */
.card {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.2rem, 2.4vw, 1.65rem);
  box-shadow: var(--shadow-sm);
  transition: transform .2s cubic-bezier(.2,.8,.3,1), box-shadow .2s, border-color .2s;
}
a.card, .card-link { text-decoration: none; color: inherit; display: block; }
a.card:hover, .card-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--reef-line); color: inherit; }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-3); font-size: .95rem; }
.card .icon {
  width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center;
  background: var(--reef-soft); color: var(--reef-deep); margin-bottom: 1rem;
}
.card .icon.sun { background: var(--sun-soft); color: var(--sun-deep); }
.card .icon.leaf { background: var(--leaf-soft); color: var(--leaf); }
.card-more { display: inline-flex; align-items: center; gap: .35rem; margin-top: .9rem; font-weight: 600; font-size: .9rem; color: var(--reef-deep); }
a.card:hover .card-more { color: var(--sun-deep); gap: .6rem; }
.card-more svg { transition: transform .18s; }

.numbered { counter-reset: step; }
@media (min-width: 900px) {
  .grid.numbered { grid-template-columns: repeat(3, 1fr); }
}
.step { position: relative; padding-left: 3.4rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -.15rem;
  width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: #fff;
  font-family: var(--font-display-sm); font-weight: 600; font-size: 1.05rem;
}
.step h3 { font-size: 1.12rem; margin-bottom: .35rem; }
.step p { font-size: .93rem; color: var(--ink-3); }

/* --- honest facts --------------------------------------------------------- */
.fact {
  display: grid; gap: .35rem;
  padding: 1.2rem 1.3rem;
  border-radius: var(--radius); background: var(--paper);
  border: 1px solid var(--line); border-left: 4px solid var(--red);
  box-shadow: var(--shadow-sm);
}
.fact.ok { border-left-color: var(--leaf); }
.fact .myth { font-size: .82rem; font-weight: 650; color: var(--red); letter-spacing: .01em; }
.fact.ok .myth { color: var(--leaf); }
.fact .truth { font-family: var(--font-display-sm); font-size: 1.1rem; font-weight: 600; color: var(--ink); line-height: 1.25; }
.fact p { font-size: .92rem; color: var(--ink-3); }
.fact .src { font-size: .75rem; color: var(--muted); }
.fact .src a { color: var(--muted); }

/* --- table ---------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); background: var(--paper); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; min-width: 460px; }
@media (max-width: 560px) {
  .table-wrap { position: relative; }
  .table-wrap::after {
    content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 34px;
    pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
    background: linear-gradient(270deg, rgba(255,255,255,.96), rgba(255,255,255,0));
  }
  table { font-size: .87rem; }
  thead th, tbody td { padding-inline: .75rem; }
}
thead th {
  text-align: left; padding: .9rem 1.1rem; background: var(--sand);
  font-size: .76rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  border-bottom: 1px solid var(--line); white-space: nowrap;
}
tbody td { padding: .85rem 1.1rem; border-bottom: 1px solid var(--sand-2); vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfaf7; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td strong { color: var(--ink); }
.table-note { font-size: .78rem; color: var(--muted); margin-top: .7rem; }

/* --- calculator ----------------------------------------------------------- */
.calc {
  display: grid; gap: 0;
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--paper);
  border: 1px solid var(--line);
}
@media (min-width: 900px) { .calc { grid-template-columns: 1.05fr .95fr; } }
.calc-inputs { padding: clamp(1.4rem, 3vw, 2.2rem); }
.calc-out {
  padding: clamp(1.4rem, 3vw, 2.2rem);
  background: var(--ink); color: #cfe0ec;
  display: flex; flex-direction: column;
}
.field { margin-bottom: 1.35rem; }
.field:last-child { margin-bottom: 0; }
.field > label, .field > .flabel {
  display: flex; justify-content: space-between; align-items: baseline; gap: .6rem;
  font-size: .84rem; font-weight: 650; color: var(--ink); margin-bottom: .55rem;
}
.field .fval { font-variant-numeric: tabular-nums; color: var(--reef-deep); font-weight: 700; }
.seg { display: grid; gap: .4rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 130px), 1fr)); }
.seg input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg label {
  display: block; padding: .62rem .7rem; text-align: center; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-size: .88rem; font-weight: 600; color: var(--ink-3); background: var(--paper);
  transition: .16s; line-height: 1.25;
}
.seg label small { display: block; font-weight: 500; font-size: .74rem; color: var(--muted); margin-top: .1rem; }
.seg label:hover { border-color: var(--reef-line); background: var(--reef-soft); }
.seg input:checked + label {
  border-color: var(--reef); background: var(--reef-soft); color: var(--reef-deep);
  box-shadow: inset 0 0 0 1px var(--reef);
}
.seg input:focus-visible + label { outline: 3px solid var(--sun); outline-offset: 2px; }
.seg input:checked + label small { color: var(--reef-deep); }

input[type="range"] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 26px; background: transparent; cursor: pointer;
}
input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 4px; background: var(--sand-2); }
input[type="range"]::-moz-range-track { height: 6px; border-radius: 4px; background: var(--sand-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--reef); box-shadow: var(--shadow-sm);
}
input[type="range"]::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--reef); box-shadow: var(--shadow-sm);
}
.ticks { display: flex; justify-content: space-between; font-size: .72rem; color: var(--muted); margin-top: -.2rem; }

.out-total { padding-bottom: 1.1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.out-total .k { font-size: .8rem; color: #8fb0c8; letter-spacing: .04em; text-transform: uppercase; font-weight: 600; }
.out-total .v {
  font-family: var(--font-display); font-weight: 600; color: #fff;
  font-size: clamp(2.1rem, 5.4vw, 2.9rem); line-height: 1.05; font-variant-numeric: tabular-nums;
  letter-spacing: -.02em; margin-top: .35rem;
}
.out-total .v span { font-size: .42em; color: var(--gold); font-family: var(--font-display-sm); }
.out-total .czk { font-size: .95rem; color: #a9c4d8; margin-top: .3rem; font-variant-numeric: tabular-nums; }

.out-rows { margin: 1.1rem 0; display: grid; gap: .1rem; }
.out-row { display: flex; justify-content: space-between; gap: 1rem; padding: .42rem 0; font-size: .92rem; }
.out-row .k { color: #a9c4d8; }
.out-row .v { font-variant-numeric: tabular-nums; color: #fff; font-weight: 600; white-space: nowrap; }
.out-row.earn { border-top: 1px solid rgba(255,255,255,.12); margin-top: .5rem; padding-top: .8rem; }
.out-row.earn .v { color: #6fe3a6; }
.out-row.net .k, .out-row.net .v { font-weight: 700; color: #fff; font-size: 1rem; }
.out-row.net { border-top: 1px solid rgba(255,255,255,.12); padding-top: .8rem; margin-top: .3rem; }

.bar { height: 10px; border-radius: 6px; overflow: hidden; display: flex; background: rgba(255,255,255,.1); margin: .3rem 0 1rem; }
.bar i { display: block; height: 100%; transition: width .35s cubic-bezier(.2,.8,.3,1); }
.bar-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .74rem; color: #8fb0c8; margin-bottom: 1.1rem; }
.bar-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.bar-legend i { width: 9px; height: 9px; border-radius: 3px; flex: none; }

.visa-check {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: .85rem 1rem; border-radius: var(--radius-sm);
  background: rgba(111,227,166,.12); border: 1px solid rgba(111,227,166,.3);
  font-size: .87rem; line-height: 1.45; margin-top: auto;
}
.visa-check.warn { background: rgba(255,178,0,.13); border-color: rgba(255,178,0,.35); }
.visa-check svg { flex: none; margin-top: .12rem; }
.visa-check strong { color: #fff; display: block; }
.visa-check span { color: #a9c4d8; }

/* --- testimonials --------------------------------------------------------- */
.quote {
  background: var(--paper); border-radius: var(--radius); padding: clamp(1.3rem, 2.6vw, 1.8rem);
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; gap: 1rem;
}
.quote blockquote { font-size: .96rem; color: var(--ink-2); line-height: 1.6; flex: 1; }
.quote blockquote::before { content: "“"; font-family: var(--font-display); font-size: 2.6rem; color: var(--reef-line); line-height: 0; display: block; margin-bottom: .9rem; }
.quote figcaption { display: flex; align-items: center; gap: .7rem; }
.quote img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; background: var(--sand-2); }
.quote .who { font-weight: 650; color: var(--ink); font-size: .92rem; }
.quote .where { font-size: .78rem; color: var(--muted); }
.stars { color: var(--gold); font-size: .85rem; letter-spacing: .08em; }

/* --- media split ---------------------------------------------------------- */
.split { display: grid; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center; }
@media (min-width: 880px) { .split { grid-template-columns: 1fr 1fr; } .split.wide-media { grid-template-columns: 1.15fr .85fr; } }
.split .media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; }
.split .media img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.split .media.tall img { aspect-ratio: 3/4; }
.split .media.wide img { aspect-ratio: 3/2; }
.media-cap {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 2.2rem 1.1rem .9rem;
  background: linear-gradient(180deg, transparent, rgba(3,18,32,.82));
  color: #eaf4fa; font-size: .8rem; line-height: 1.4;
}

/* --- comparison ----------------------------------------------------------- */
.versus { display: grid; gap: 1rem; }
@media (min-width: 780px) { .versus { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.versus-col { border-radius: var(--radius); padding: clamp(1.2rem, 2.6vw, 1.8rem); border: 1px solid var(--line); background: var(--paper); }
.versus-col.win { border: 2px solid var(--reef); background: linear-gradient(180deg, var(--reef-soft), var(--paper) 60%); box-shadow: var(--shadow); }
.versus-col h3 { display: flex; align-items: center; gap: .5rem; margin-bottom: 1rem; }
.versus-col .tag { font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .18rem .5rem; border-radius: 100px; background: var(--reef); color: #fff; }
.versus ul { list-style: none; padding: 0; display: grid; gap: .7rem; }
.versus li { display: flex; gap: .6rem; font-size: .93rem; color: var(--ink-3); line-height: 1.45; }
.versus li svg { flex: none; margin-top: .18rem; }
.versus-mid { display: grid; place-items: center; font-family: var(--font-display-sm); color: var(--muted); font-size: .9rem; font-weight: 600; }

/* --- faq ------------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.1rem 2.4rem 1.1rem 0; position: relative;
  font-family: var(--font-display-sm); font-size: 1.06rem; font-weight: 600; color: var(--ink); line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 1.45rem;
  width: 10px; height: 10px; border-right: 2px solid var(--reef); border-bottom: 2px solid var(--reef);
  transform: rotate(45deg); transition: transform .22s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq summary:hover { color: var(--reef-deep); }
.faq .answer { padding: 0 2.4rem 1.3rem 0; color: var(--ink-3); font-size: .96rem; }
.faq .answer > * + * { margin-top: .7rem; }

/* --- people --------------------------------------------------------------- */
.people { display: grid; gap: .8rem; }
@media (min-width: 620px) { .people { grid-template-columns: repeat(auto-fit, minmax(min(100%, 248px), 1fr)); } }
.person {
  display: flex; gap: .9rem; align-items: center;
  padding: .95rem 1.1rem; border-radius: var(--radius-sm);
  background: var(--paper); border: 1px solid var(--line);
  text-decoration: none; color: inherit; transition: .18s;
}
.person:hover { border-color: var(--reef); box-shadow: var(--shadow-sm); transform: translateY(-2px); color: inherit; }
.person .ini {
  width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center;
  background: var(--reef-soft); color: var(--reef-deep); font-weight: 700; font-size: .92rem;
}
.person > span { min-width: 0; }
.person .nm, .person .ct, .person .ph { display: block; }
.person .nm { font-weight: 650; color: var(--ink); font-size: .95rem; line-height: 1.25; }
.person .ct { font-size: .78rem; color: var(--muted); margin-top: .05rem; }
.person .ph { font-size: .88rem; font-weight: 600; color: var(--reef-deep);
              font-variant-numeric: tabular-nums; margin-top: .2rem; white-space: nowrap; }
.person .em { display: block; font-size: .84rem; color: var(--reef-deep); margin-top: .1rem; }
.person.lead { border-color: var(--reef); background: linear-gradient(110deg, var(--reef-soft), var(--paper) 46%); }
.person.lead .ini { background: var(--reef); color: #fff; width: 52px; height: 52px; font-size: 1rem; }
.person.lead .nm { font-size: 1.05rem; }

/* --- form ----------------------------------------------------------------- */
.form-card {
  background: var(--paper); border-radius: var(--radius-lg); padding: clamp(1.4rem, 3vw, 2.2rem);
  box-shadow: var(--shadow-lg); border: 1px solid var(--line);
}
.form-row { display: grid; gap: 1rem; }
@media (min-width: 560px) { .form-row.two { grid-template-columns: 1fr 1fr; } }
.form-field { display: grid; gap: .4rem; margin-bottom: 1rem; align-content: start; }
.form-field label { font-size: .84rem; font-weight: 650; color: var(--ink); }
.form-field label .req { color: var(--sun-deep); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%; padding: .75rem .9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--sand); font-size: .97rem; transition: .16s;
}
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  outline: none; border-color: var(--reef); background: var(--paper);
  box-shadow: 0 0 0 4px rgba(0,163,180,.13);
}
.form-field textarea { resize: vertical; min-height: 108px; }
.form-field .hint { font-size: .76rem; color: var(--muted); }
.hp { position: absolute !important; left: -9999px !important; top: 0;
      width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
      opacity: 0; pointer-events: none; }
.form-status { margin-top: .9rem; font-size: .9rem; display: none; padding: .8rem 1rem; border-radius: var(--radius-sm); }
.form-status.show { display: block; }
.form-status.ok { background: var(--leaf-soft); color: #14603d; border: 1px solid #b9e4cd; }
.form-status.err { background: var(--red-soft); color: #96201b; border: 1px solid #f3c3c0; }
.consent { display: flex; gap: .6rem; align-items: flex-start; font-size: .8rem; color: var(--muted); line-height: 1.45; }
.consent input { margin-top: .2rem; accent-color: var(--reef); width: 17px; height: 17px; flex: none; }

/* --- news ----------------------------------------------------------------- */
.post { display: flex; flex-direction: column; height: 100%; }
.post .date { font-size: .76rem; font-weight: 650; letter-spacing: .06em; text-transform: uppercase; color: var(--sun-deep); margin-bottom: .55rem; }
.post h3 { font-size: 1.1rem; }
.post p { flex: 1; margin-top: .5rem; }

/* --- cta band ------------------------------------------------------------- */
.band { background: linear-gradient(135deg, var(--reef-deep), var(--ink) 78%); color: #fff; position: relative; overflow: hidden; }
.band::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(60% 120% at 88% 0%, rgba(255,178,0,.22), transparent 60%);
}
.band .wrap { position: relative; }
.band h2 { color: #fff; }
.band p { color: #bcd6e6; margin-top: .8rem; max-width: 54ch; }
.band-in { display: grid; gap: 1.8rem; align-items: center; }
@media (min-width: 860px) { .band-in { grid-template-columns: 1.4fr auto; } }
.band-actions { display: flex; flex-wrap: wrap; gap: .75rem; }

/* --- footer --------------------------------------------------------------- */
.site-footer { background: var(--ink); color: #93aec4; padding-block: clamp(2.8rem, 6vw, 4.2rem) 2rem; font-size: .9rem; }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: .78rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-grid { display: grid; gap: 2.2rem; }
@media (min-width: 780px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; } }
.site-footer a { color: #bcd6e6; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: .6rem; }
.footer-brand img { height: 40px; width: auto; margin-bottom: 1rem; background: #fff; padding: .4rem .6rem; border-radius: 10px; }
.socials { display: flex; gap: .5rem; margin-top: 1.2rem; }
.socials a { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: rgba(255,255,255,.08); transition: .16s; }
.socials a:hover { background: var(--sun); color: #fff; }
.footer-bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: .8rem 1.6rem; justify-content: space-between; font-size: .8rem; color: #7793a9;
}

/* --- prose (article pages) ------------------------------------------------ */
.prose { font-size: 1.02rem; color: var(--ink-2); max-width: 72ch; }
/* When .prose sits ON the .wrap element, keep the wrap at full track width so it
   shares the page left edge, and constrain the text column via its children instead.
   Without this the max-width shrinks .wrap and margin-inline:auto re-centres it. */
.wrap.prose { max-width: none; }
/* min(), not 72ch alone (26 Oct 2026): this rule beat the global img max-width,
   so on a 390px phone every blog post's featured image rendered 741px wide and
   the whole post scrolled sideways. Tables in post bodies did the same. */
.wrap.prose > * { max-width: min(72ch, 100%); }
.prose > table { display: block; max-width: 100%; overflow-x: auto; }
.wrap.prose > .table-wrap, .wrap.prose > .callout { max-width: 100%; }
.prose > * + * { margin-top: 1.1rem; }
.prose h2 { margin-top: 2.6rem; }
.prose h3 { margin-top: 1.9rem; }
.prose ul, .prose ol { padding-left: 1.3rem; display: grid; gap: .5rem; }
.prose li::marker { color: var(--reef); }
.prose strong { color: var(--ink); }
.callout {
  border-radius: var(--radius); padding: 1.1rem 1.3rem; background: var(--sun-soft);
  border: 1px solid #ffd9c2; border-left: 4px solid var(--sun);
}
.callout.tip { background: var(--reef-soft); border-color: var(--reef-line); border-left-color: var(--reef); }
.callout.warn { background: var(--red-soft); border-color: #f3c3c0; border-left-color: var(--red); }
.callout.warn .callout-t { color: #96201b; }
.callout.warn > svg { color: var(--red); flex: none; }
.callout.warn { display: flex; gap: .8rem; align-items: flex-start; }
.callout .callout-t { font-weight: 700; color: var(--ink); font-size: .86rem; letter-spacing: .03em; text-transform: uppercase; margin-bottom: .35rem; }
.callout p { font-size: .95rem; color: var(--ink-2); }

.checklist { list-style: none; padding: 0; display: grid; gap: .75rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; font-size: .96rem; color: var(--ink-2); }
.checklist li svg { flex: none; margin-top: .2rem; color: var(--leaf); }

.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .34rem .8rem; border-radius: 100px; font-size: .8rem; font-weight: 600;
  background: var(--sand-2); color: var(--ink-3);
}
.pill.reef { background: var(--reef-soft); color: var(--reef-deep); }
.pill.sun { background: var(--sun-soft); color: var(--sun-deep); }
.pill.leaf { background: var(--leaf-soft); color: #14603d; }

/* --- reveal on scroll ----------------------------------------------------- */
.rv { opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.2,.8,.3,1), transform .6s cubic-bezier(.2,.8,.3,1); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none; }
  .btn, .card, a.card { transition: none; }
}

/* --- misc ----------------------------------------------------------------- */
.skip {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--ink); color: #fff; padding: .7rem 1.2rem; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; color: #fff; }
[hidden] { display: none !important; }
.nowrap { white-space: nowrap; }

/* --- YouTube facade -------------------------------------------------------
   A thumbnail plus a play button. The real player is only injected on click,
   so a page with three videos costs ~30 kB instead of ~2.5 MB. */
.ytf { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden;
       background: #000; cursor: pointer; box-shadow: var(--shadow); }
.ytf img, .ytf iframe { width: 100%; height: 100%; object-fit: cover; border: 0; display: block; }
.ytf button {
  position: absolute; inset: 0; width: 100%; height: 100%;
  background: rgba(6,25,44,.28); border: 0; cursor: pointer; transition: background .18s;
}
.ytf button::after {
  content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 68px; height: 48px; border-radius: 12px; background: #ff0033;
  box-shadow: 0 4px 18px rgba(0,0,0,.4);
}
.ytf button::before {
  content: ""; position: absolute; z-index: 2; top: 50%; left: 50%;
  transform: translate(-40%,-50%); border-style: solid;
  border-width: 11px 0 11px 19px; border-color: transparent transparent transparent #fff;
}
.ytf button:hover { background: rgba(6,25,44,.12); }
.ytf.playing button { display: none; }

/* --- Contact Form 7, restyled ---------------------------------------------
   CF7 renders the form (so reCAPTCHA, validation and mail keep working);
   these rules make its markup match the rest of the site. */
.wpcf7-form p { margin: 0 0 1rem; }
.wpcf7-form label { display: block; font-size: .84rem; font-weight: 650; color: var(--ink); }
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"], .wpcf7-form textarea, .wpcf7-form select {
  width: 100%; margin-top: .4rem; padding: .75rem .9rem;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--sand); font: inherit; font-size: .97rem; color: var(--ink-2);
  transition: border-color .16s, background .16s, box-shadow .16s;
}
/* NOT the submit button: `input:focus` out-ranks `.wpcf7-submit`, and a focused
   button (every button right after it is clicked) turned white-on-white and the
   word "Odeslat" vanished (found 21 Oct 2026 on the live test enquiry). */
.wpcf7-form input:not([type="submit"]):focus, .wpcf7-form textarea:focus, .wpcf7-form select:focus {
  outline: none; border-color: var(--reef); background: var(--paper);
  box-shadow: 0 0 0 4px rgba(0,163,180,.13);
}
.wpcf7-form .wpcf7-submit:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.wpcf7-form textarea { min-height: 120px; resize: vertical; }
.wpcf7-form .wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .85rem 1.6rem; border: 0; border-radius: 100px; cursor: pointer;
  background: var(--sun); color: #fff; font-weight: 650; font-size: .98rem; width: 100%;
  box-shadow: 0 1px 2px rgba(6,25,44,.12), 0 8px 20px -6px rgba(255,106,31,.55);
  transition: transform .18s, box-shadow .18s;
}
.wpcf7-form .wpcf7-submit:hover { transform: translateY(-2px); }
.wpcf7-not-valid-tip { color: var(--red); font-size: .82rem; margin-top: .3rem; }
.wpcf7-form .wpcf7-response-output {
  margin: 1rem 0 0 !important; padding: .8rem 1rem !important;
  border: 1px solid var(--line) !important; border-radius: var(--radius-sm);
  font-size: .9rem;
}
.wpcf7-form.sent .wpcf7-response-output {
  background: var(--leaf-soft); border-color: #b9e4cd !important; color: #14603d;
}
.wpcf7-form.invalid .wpcf7-response-output, .wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output {
  background: var(--red-soft); border-color: #f3c3c0 !important; color: #96201b;
}
.wpcf7-spinner { display: block; margin: .6rem auto 0; }
/* WordPress core bits that appear inside .prose */
.prose .wp-caption-text, .prose figcaption { font-size: .82rem; color: var(--muted); margin-top: .4rem; }
.prose img { border-radius: var(--radius); }
/* Pagination. Two things had to be wrong at once for this to stack vertically
   on /novinky/, and both were:
     1. WordPress puts the page numbers inside an extra <div class="nav-links">,
        so `display:flex` on the <nav> laid out that ONE div, not the numbers.
     2. `display:grid` makes a BLOCK-level box, so with no flex parent each page
        number became its own full-width row.
   The flex row therefore goes on .nav-links, and the numbers are inline-grid so
   they still behave if a WordPress version ever drops the wrapper. */
.navigation.pagination,
.navigation.pagination .nav-links {
  display: flex; gap: .4rem; flex-wrap: wrap; align-items: center;
}
.navigation.pagination .page-numbers {
  display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 .7rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-decoration: none; color: var(--ink-2); font-size: .92rem;
  transition: background .15s, color .15s, border-color .15s;
}
a.page-numbers:hover { background: var(--sand-2); color: var(--ink); border-color: var(--reef-deep); }
.navigation.pagination .page-numbers.current { background: var(--ink); color: #fff; border-color: var(--ink); }
/* the "…" is a gap marker, not a destination — it should not look clickable */
.navigation.pagination .page-numbers.dots { border-color: transparent; min-width: 24px; padding: 0; }
.screen-reader-text { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }