/* Resort Manager Flex — shared stylesheet */

:root{
  /* Brand — sampled from the Classic logo, extended for a modern SaaS palette */
  --blue:#0A73B9;
  --blue-deep:#075E97;
  --ink:#0A2540;          /* deep navy — headings, footer */
  --ink-soft:#334A63;
  --accent:#EF8D20;       /* orange CTA */
  --accent-deep:#D97C12;
  --grey:#606261;

  --bg:#FFFFFF;
  --bg-tint:#F5F8FC;
  --bg-tint-2:#EDF3FA;
  --border:#E3EAF2;
  --muted:#5B6B7B;

  --radius:14px;
  --radius-sm:10px;
  --shadow-sm:0 1px 2px rgba(10,37,64,.06),0 1px 3px rgba(10,37,64,.05);
  --shadow:0 10px 30px -12px rgba(10,37,64,.18);
  --shadow-lg:0 30px 60px -20px rgba(10,37,64,.28);
  --maxw:1140px;
  --font:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{line-height:1.15;letter-spacing:-.02em;margin:0}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.wrap.narrow{max-width:52rem}
.eyebrow{font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--blue)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;font-weight:600;font-size:1rem;padding:.8em 1.4em;border-radius:var(--radius-sm);border:1px solid transparent;cursor:pointer;transition:.15s ease;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff;box-shadow:var(--shadow-sm)}
.btn-primary:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-ghost{background:#fff;color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--blue);color:var(--blue)}
.btn-light{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.btn-light:hover{background:rgba(255,255,255,.2)}

/* Header */
/* No backdrop-filter here: the blur promoted the sticky header to its own
   compositing layer and, in some Chromium-based browsers, scrolling then
   painted a full-viewport white sheet over the page. A near-opaque solid
   background looks the same and never glitches. */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--border)}
/* gap, not just space-between: with three children the free space
   collapses as the row fills, and the last nav item ends up touching
   the language picker. The gap is the floor that cannot collapse. */
.nav{display:flex;align-items:center;justify-content:space-between;gap:28px;height:70px}
/* flex:0 0 auto on both ends of the nav row, so only .nav-links gives
   way when the row runs out of width. Without it the brand shrinks,
   and the global img{max-width:100%} then clamps the logo's width to
   its shrunken parent while height:44px below pins the height -- a
   logo squashed horizontally rather than a narrower header. */
.brand{display:flex;align-items:center;gap:12px;flex:0 0 auto}
/* flex:none on the image itself as well: the rule above stops the
   parent shrinking, this stops the image being the thing that gives. */
.brand .logo{height:44px;width:auto;flex:none;max-width:none;display:block}
.flex-badge{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;color:var(--accent);padding-left:12px;border-left:1.5px solid var(--border);line-height:1}
footer .flex-badge{border-left-color:rgba(255,255,255,.18)}
/* min-width:0 lets this shrink; overflow:hidden means that when it does
   run out of room the links clip at the edge instead of spilling over
   the language picker. Clipping is not good, but it is recoverable by
   narrowing the window -- two elements drawn on top of each other is
   just broken. The media queries below are what should stop it
   happening at all. */
.nav-links{display:flex;align-items:center;gap:13px;flex:0 1 auto;min-width:0;overflow:hidden}
.nav-links a{font-size:.85rem;font-weight:500;color:var(--ink-soft);white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:var(--blue)}
.nav-cta{display:flex;align-items:center;gap:8px;flex:0 0 auto}
/* Only one header CTA on desktop — "Talk to us" and "Request a quote" both go to contact,
   so the ghost button is redundant and crowds the nav. It stays in the mobile menu. */
.nav-cta .btn-ghost{display:none}

/* Mobile nav toggle + drawer */
.nav-toggle{display:none;flex:0 0 auto;width:40px;height:40px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0}
.nav-toggle svg{display:block}
.nav-toggle .icon-close{display:none}
.nav-toggle[aria-expanded="true"] .icon-open{display:none}
.nav-toggle[aria-expanded="true"] .icon-close{display:block}
/* The mobile menu's appearance is unconditional; only whether it is shown is
   conditional. It used to be defined entirely inside @media(max-width:1300px),
   which was fine while the hamburger only ever appeared below 1300px. It no
   longer does -- js/nav.js collapses the nav on measurement, so a Greek page
   on a 4K monitor gets the hamburger -- and above 1300px that button opened a
   menu with no styles: an empty dropdown, with the language picker inside it
   unreachable. Someone who switched to Greek had no way back to English. */
.mobile-menu{display:none;position:fixed;top:70px;left:0;right:0;z-index:49;background:#fff;box-shadow:var(--shadow);max-height:0;overflow:hidden;transition:max-height .2s ease}
.mobile-menu.open{max-height:80vh;overflow-y:auto;border-bottom:1px solid var(--border)}
.mobile-menu .wrap{padding:18px 24px 26px;display:flex;flex-direction:column;gap:4px}
.mobile-menu a.link{padding:12px 4px;font-weight:600;color:var(--ink-soft);border-bottom:1px solid var(--border)}
.mobile-menu a.link.active,.mobile-menu a.link:hover{color:var(--blue)}
.mobile-menu .mm-cta{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.mobile-menu .btn{width:100%;justify-content:center}
/* Shown when js/nav.js has collapsed the nav. The menu is a sibling of
   <header>, hence the general sibling combinator. */
header.nav-compact ~ .mobile-menu{display:block}

/* Hero (home) */
.hero{background:linear-gradient(180deg,var(--bg-tint) 0%,#fff 100%);padding:72px 0 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.hero h1{font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:800}
.hero h1 .hl{color:var(--blue)}
.hero .lead{margin-top:22px;font-size:1.16rem;color:var(--muted);max-width:34em}
.hero .cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.hero .micro{margin-top:18px;font-size:.9rem;color:var(--muted)}

/* Hero product mock */
.mock{background:#fff;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-lg);overflow:hidden}
.mock-bar{height:38px;background:var(--bg-tint-2);display:flex;align-items:center;gap:6px;padding:0 14px;border-bottom:1px solid var(--border)}
.mock-bar i{width:10px;height:10px;border-radius:50%;background:#cdd8e4;display:inline-block}
.mock-bar .url{margin-left:12px;font-size:.72rem;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:6px;padding:3px 10px}
.mock-shot{display:block;width:100%;height:auto}
.mock-body{padding:16px;display:grid;grid-template-columns:52px 1fr;gap:14px;min-height:300px}
.mock-side{background:var(--ink);border-radius:10px;display:flex;flex-direction:column;align-items:center;gap:14px;padding:14px 0}
.mock-side b{width:22px;height:22px;border-radius:6px;background:rgba(255,255,255,.14)}
.mock-side b.on{background:var(--accent)}
.mock-main{display:flex;flex-direction:column;gap:12px}
.mock-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi{background:var(--bg-tint);border:1px solid var(--border);border-radius:10px;padding:11px 12px}
.kpi .t{font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:600}
.kpi .v{font-size:1.15rem;font-weight:800;color:var(--ink);margin-top:2px}
.kpi .v small{color:var(--accent);font-size:.7rem;font-weight:700}
.mock-chart{flex:1;background:var(--bg-tint);border:1px solid var(--border);border-radius:10px;padding:14px;display:flex;align-items:flex-end;gap:7px}
.mock-chart span{flex:1;background:linear-gradient(180deg,var(--blue),#4d9bd4);border-radius:5px 5px 0 0;opacity:.9}
.mock-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.mock-row{background:var(--bg-tint);border:1px solid var(--border);border-radius:10px;height:34px;display:flex;align-items:center;padding:0 12px;gap:8px}
.mock-row::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent)}
.mock-row.b::before{background:var(--blue)}
.mock-row::after{content:"";flex:1;height:7px;border-radius:4px;background:#d9e3ef}

/* Trust strip */
.trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
.trust .wrap{display:flex;align-items:center;justify-content:center;gap:14px;padding:20px 24px;flex-wrap:wrap;text-align:center}
.trust p{font-size:.98rem;color:var(--ink-soft);font-weight:500}
.trust b{color:var(--ink);font-weight:700}

/* Sections */
section{padding:88px 0}
.section-head{max-width:44rem;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;margin-top:14px}
.section-head p{margin-top:16px;font-size:1.1rem;color:var(--muted)}

/* Inner-page hero */
.page-hero{background:linear-gradient(180deg,var(--bg-tint),#fff);padding:64px 0 52px;border-bottom:1px solid var(--border)}
.page-hero .wrap{max-width:54rem}
.page-hero h1{font-size:clamp(2rem,4vw,3rem);font-weight:800}
.page-hero h1 .hl{color:var(--blue)}
.page-hero .lead{margin-top:18px;font-size:1.18rem;color:var(--muted);max-width:40rem}
.page-hero .cta-row{margin-top:28px;display:flex;gap:14px;flex-wrap:wrap}
.page-hero.center{text-align:center}
.page-hero.center .wrap{margin-inline:auto}
.page-hero.center .lead{margin-inline:auto}
.page-hero.center .cta-row{justify-content:center}

/* Prose */
.prose{max-width:44rem}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800;margin:0 0 14px}
.prose p{color:var(--muted);font-size:1.06rem;margin:0 0 16px}

/* Prose elements beyond h2 and p had no styling at all, so lists, sub-headings
   and inline markup fell back to browser defaults -- list text rendering at a
   different size and colour from the paragraphs beside it, with no spacing
   between items. That mismatch is what made these pages look untidy, more than
   any single page's content did. Everything below matches .prose p, so a list
   reads as part of the same document. */
.prose h3{font-size:1.12rem;font-weight:700;color:var(--ink);line-height:1.35;margin:26px 0 8px}
.prose ul,.prose ol{margin:0 0 18px;padding-left:1.15em;color:var(--muted);font-size:1.06rem}
.prose li{margin:0 0 9px;line-height:1.65}
.prose li:last-child{margin-bottom:0}

/* One bullet glyph for the whole site. A <ul> renders the browser's disc,
   which is a different size and colour from the 7px dot on a <dt> -- and the
   two sit next to each other on pages that mix a term list with a plain one,
   where the mismatch is obvious. Both are now the same dot, at the same
   offset, so a list reads the same whichever markup it happens to use. */
.prose ul{list-style:none}
.prose ul>li{position:relative}
.prose ul>li::before{content:"";position:absolute;left:-1.15em;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.prose ol li::marker{color:var(--muted);font-weight:600}
.prose li>strong,.prose li b{color:var(--ink)}
.prose li ul,.prose li ol{margin:9px 0 0}
.prose>*:last-child{margin-bottom:0}
.prose a{color:var(--blue);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(10,115,185,.28)}
.prose a:hover{border-bottom-color:var(--blue)}
.prose strong{color:var(--ink)}
.prose code{font-size:.92em;background:var(--bg-tint);border:1px solid var(--border);border-radius:4px;padding:.1em .35em}

/* Split two-column */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split h2{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:800}
.split p{margin-top:14px;color:var(--muted);font-size:1.06rem}
.split .visual{background:var(--bg-tint);border:1px solid var(--border);border-radius:var(--radius);min-height:260px;display:grid;place-items:center;color:#9db2c7;font-weight:600;text-align:center;padding:20px}
.split.rev .col-text{order:2}

/* Differentiator */
.diff{background:var(--ink);color:#fff}
.diff .section-head h2{color:#fff}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.diff h2{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;color:#fff}
.diff .eyebrow{color:var(--accent)}
.diff p{margin-top:18px;color:#B9C6D6;font-size:1.08rem}
.diff strong{color:#fff}
.diff-list{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.diff-list li{display:flex;gap:12px;align-items:flex-start;color:#D7E0EB}
.diff-list .tick{flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:rgba(239,141,32,.18);color:var(--accent);display:grid;place-items:center;font-size:.75rem;font-weight:800;margin-top:3px}
.diff-card{background:linear-gradient(160deg,#0e2f52,#0a2540);border:1px solid rgba(255,255,255,.09);border-radius:var(--radius);padding:34px}
.diff-card .q{font-size:1.35rem;font-weight:700;line-height:1.4;color:#fff}
.diff-card .q .strike{color:#7d8ea0;text-decoration:line-through;text-decoration-color:rgba(239,141,32,.6)}
.diff-card .a{margin-top:18px;font-size:1.05rem;color:var(--accent);font-weight:700}

/* Deployment cards */
.deploy-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.dcard{border:1px solid var(--border);border-radius:var(--radius);padding:34px;background:#fff;box-shadow:var(--shadow-sm);transition:.2s}
.dcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.dcard .ic{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;background:var(--bg-tint-2);color:var(--blue);margin-bottom:18px}
.dcard h3{font-size:1.3rem;font-weight:700}
.dcard .tag{display:inline-block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);background:var(--bg-tint-2);padding:3px 10px;border-radius:20px;margin-left:8px;vertical-align:middle}
.dcard p{margin-top:12px;color:var(--muted)}
.dcard ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.dcard li{display:flex;gap:10px;color:var(--ink-soft);font-size:.98rem}
.dcard li::before{content:"→";color:var(--accent);font-weight:800}
.deploy-note{text-align:center;margin-top:28px;color:var(--muted);font-size:1.02rem}
.deploy-note b{color:var(--ink)}

/* Tier cards (Plans page) */
.tier-grid{grid-template-columns:repeat(3,1fr)}

/* Comparison table */
.compare{width:100%;border-collapse:collapse;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;font-size:.98rem}
.compare th,.compare td{padding:15px 18px;text-align:left;border-bottom:1px solid var(--border);vertical-align:top}
.compare thead th{background:var(--bg-tint);font-weight:700;color:var(--ink)}
.compare thead th:first-child{width:34%}
.compare td:first-child{font-weight:600;color:var(--ink)}
.compare td{color:var(--muted)}
.compare tr:last-child td{border-bottom:none}
.compare-wrap{overflow-x:auto}

/* Steps */
.steps{display:grid;gap:22px;max-width:46rem}
.step{display:flex;gap:18px;align-items:flex-start}
.step .n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--bg-tint-2);color:var(--blue);font-weight:800;display:grid;place-items:center}
.step h3{font-size:1.15rem;font-weight:700}
.step p{margin-top:6px;color:var(--muted)}

/* FAQ */
.faq{max-width:46rem;margin:0 auto}
.faq details{border-bottom:1px solid var(--border);padding:18px 0}
.faq summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent);font-weight:800;font-size:1.2rem;line-height:1}
.faq details[open] summary::after{content:"\2013"}
.faq p{margin-top:12px;color:var(--muted)}

/* Features */
.features{background:var(--bg-tint)}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.feat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.feat .ic{width:42px;height:42px;border-radius:10px;background:var(--bg-tint-2);color:var(--blue);display:grid;place-items:center;margin-bottom:14px}
.feat h3{font-size:1.08rem;font-weight:700}
.feat p{margin-top:8px;color:var(--muted);font-size:.96rem}

/* Feature detail rows */
.feature-row{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:44px 0;border-bottom:1px solid var(--border)}
.feature-row:last-child{border-bottom:none}
.feature-row.rev .fr-text{order:2}
.feature-row .eyebrow{margin-bottom:10px;display:block}
.feature-row h2{font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:800}
.feature-row p{margin-top:12px;color:var(--muted);font-size:1.05rem}
.feature-row ul{margin:16px 0 0;padding-left:1.1em;color:var(--ink-soft)}
.feature-row li{margin:7px 0}
.feature-row .visual{background:var(--bg-tint);border:1px solid var(--border);border-radius:var(--radius);min-height:240px;display:grid;place-items:center;color:#9db2c7;font-weight:600;text-align:center;padding:20px}
/* Feature/solution box holding a real screenshot — no padding, image clipped to the rounded border */
.visual.visual-shot{padding:0;overflow:hidden;min-height:0}
.visual.visual-shot img{display:block;width:100%;height:auto}

/* Personas */
.persona-grid{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.persona{border:1px solid var(--border);border-radius:var(--radius);padding:34px;background:#fff;box-shadow:var(--shadow-sm)}
.persona .who{font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.persona h3{font-size:1.35rem;font-weight:800;margin-top:10px}
.persona p{margin-top:12px;color:var(--muted)}
.persona ul{margin:16px 0 0;padding-left:1.1em;color:var(--ink-soft)}
.persona li{margin:7px 0}

/* Case study placeholder */
.case{display:grid;grid-template-columns:1.1fr .9fr;gap:0;border:1px dashed var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}
.case-copy{padding:40px}
.case .eyebrow{color:var(--accent)}
.case h3{font-size:1.6rem;font-weight:800;margin-top:12px}
.case p{margin-top:14px;color:var(--muted)}
.case-img{background:linear-gradient(160deg,var(--bg-tint-2),var(--bg-tint));display:grid;place-items:center;color:#9db2c7;font-weight:600;font-size:.9rem;min-height:240px;text-align:center;padding:20px}

/* Classic band */
.classic{background:linear-gradient(120deg,#EDF3FA,#F5F8FC)}
.classic .wrap{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.classic h3{font-size:1.4rem;font-weight:800}
.classic p{margin-top:8px;color:var(--muted);max-width:44em}

/* CTA band (reused on inner pages) */
.cta-band{background:var(--ink);color:#fff;text-align:center}
.cta-band h2,.cta-band .cta-band-title{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:800;color:#fff;margin:0}
.cta-band p{margin-top:14px;color:#B9C6D6;font-size:1.08rem;max-width:40rem;margin-inline:auto}
.cta-band .cta-row{margin-top:26px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Quote form */
.quote{background:var(--ink);color:#fff}
.quote-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.quote h1,.quote h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;color:#fff}
.quote .eyebrow{color:var(--accent)}
.quote .lead{margin-top:16px;color:#B9C6D6;font-size:1.08rem}
.quote-points{margin:26px 0 0;padding:0;list-style:none;display:grid;gap:12px}
.quote-points li{display:flex;gap:11px;color:#D7E0EB}
.quote-points .tick{color:var(--accent);font-weight:800}
form.card{background:#fff;border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-lg)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:6px}
.field input,.field select,.field textarea{width:100%;font-family:inherit;font-size:.98rem;color:var(--ink);padding:11px 13px;border:1px solid var(--border);border-radius:var(--radius-sm);background:#fff;transition:.15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,115,185,.12)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.field-row .field-full{grid-column:1/-1}
/* A room count is two or three digits. A full-width box for it invites
   people to wonder what else belongs in there. */
.field input.input-count{max-width:180px}
form.card .btn-primary{width:100%;justify-content:center;margin-top:6px}
form.card .note{margin-top:12px;font-size:.8rem;color:var(--muted);text-align:center}
/* Enquiry-type toggle — segmented control. Native radios are hidden (out of flow so they
   don't occupy a grid cell); the adjacent label is the visible pill. input:checked + label
   updates the highlight instantly in every browser. */
.enquiry-toggle{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.enquiry-toggle .et-radio{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.enquiry-toggle label{display:flex;align-items:center;justify-content:center;text-align:center;min-height:46px;padding:.5em .6em;font-size:.9rem;font-weight:600;line-height:1.25;color:var(--ink-soft);background:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:.15s;margin:0}
.enquiry-toggle label:hover{border-color:var(--blue);color:var(--blue)}
.enquiry-toggle .et-radio:checked + label,
.enquiry-toggle label.is-active{border-color:var(--blue);color:var(--blue);background:var(--bg-tint-2);box-shadow:inset 0 0 0 1px var(--blue)}
.enquiry-toggle .et-radio:focus-visible + label{box-shadow:0 0 0 3px rgba(10,115,185,.25)}
@media(max-width:560px){.enquiry-toggle{grid-template-columns:1fr}}

/* Honeypot — kept in the DOM for bots, removed from view and a11y tree */
.hp-field{position:absolute!important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
/* GDPR consent */
.consent{display:flex;gap:10px;align-items:flex-start;margin:2px 0 16px;font-size:.82rem;color:var(--muted);line-height:1.5;cursor:pointer}
.consent input{margin-top:3px;flex:0 0 auto;width:16px;height:16px;accent-color:var(--blue)}

/* Footer */
footer{background:#07182B;color:#93A6BA;padding:64px 0 30px;font-size:.94rem}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px}
footer .brand{margin-bottom:14px}
footer .logo.mono{height:40px}
footer p{color:#7f93a8;max-width:26em}
footer h2{color:#fff;font-size:.85rem;letter-spacing:.05em;text-transform:uppercase;margin:0 0 14px}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
footer a:hover{color:#fff}
.foot-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.86rem;color:#6f8298}

/* Set by nav.js when the row's measured content no longer fits. It does the
   same job as the max-width breakpoint below, but from measurement rather
   than a guessed number -- see the comment in js/nav.js. */
header.nav-compact .nav-links,
header.nav-compact .nav-cta{display:none}
header.nav-compact .nav-toggle{display:flex}

/* Cookie banner. Hidden until js/consent.js decides it is needed, so a
   returning visitor never sees it flash.

   The [hidden] rule is not redundant. The browser's own
   [hidden]{display:none} lives in the UA stylesheet, and the class
   selector below sets display:flex -- a class beats an attribute
   selector there, so setting the hidden attribute did nothing at all
   and the banner stayed on screen after being dismissed. Any element
   given a display value needs its own [hidden] rule. */
.cookie-banner[hidden]{display:none}
.cookie-banner{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#07182B;color:#C7D5E3;padding:16px 24px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center;box-shadow:0 -2px 16px rgba(0,0,0,.18)}
.cookie-banner p{margin:0;font-size:.9rem;max-width:70ch}
.cookie-banner a{color:#fff;text-decoration:underline}
.cookie-actions{display:flex;gap:10px;flex:0 0 auto}
.cookie-banner .btn{padding:9px 18px;font-size:.88rem}
.cookie-banner .btn-ghost{background:transparent;color:#C7D5E3;border:1px solid rgba(255,255,255,.35)}
.cookie-banner .btn-ghost:hover{color:#fff;border-color:#fff}
@media(max-width:700px){
  .cookie-banner{flex-direction:column;align-items:stretch;gap:12px;padding:14px 18px}
  .cookie-actions{justify-content:stretch}
  .cookie-actions .btn{flex:1}
}

/* Responsive */
/* Tighter desktops: reduce link spacing before the menu collapses to the hamburger. */
/* No width-banded nav spacing. The header row is capped at 1280px at every
   screen size (header .wrap.nav), so the space available to the nav does not
   grow with the monitor -- but the spacing used to, which meant a 4K screen
   got the roomy variant that does not fit in 1280 and collapsed to a
   hamburger, while a 1366px laptop got the tight variant that does fit and
   kept the full menu. The bigger screen gave the worse result. The tight
   values are now simply the values. */
/* The brand badge carries the full product name on one line, so the nav needs
   more room than the 900px the rest of the layout wants — collapse to the
   hamburger early instead. Same approach as the Flex site's fix. 1300px here
   because Support made an eighth link; see the header wrap override in the
   Hotspot section for the widths that produces. */
@media(max-width:1300px){
  .nav-links,.nav-cta{display:none}
  .nav-toggle{display:flex}
  /* No border-bottom here: a border draws on the box itself regardless of
     max-height, so a "collapsed" menu at max-height:0 still rendered a 1px
     line fixed under the header at every scroll position. Only .open needs
     the border, once it actually has visible content to sit under. */
  .mobile-menu{display:block}
}
@media(max-width:900px){
  .hero-grid,.diff-grid,.deploy-grid,.tier-grid,.persona-grid,.quote-grid,.case,.split,.feature-row{grid-template-columns:1fr}
  .feat-grid{grid-template-columns:1fr 1fr}
  .foot-grid{grid-template-columns:1fr 1fr}
  .hero{padding-top:48px}
  section{padding:64px 0}
  .case-img{min-height:180px}
  .split.rev .col-text,.feature-row.rev .fr-text{order:0}
}
@media(max-width:560px){
  .feat-grid,.mock-kpis,.field-row,.foot-grid{grid-template-columns:1fr}
  .nav-cta .btn-ghost{display:none}
}

/* ============================================================
   Resort Manager Hotspot — additions on top of the shared
   Resort Manager stylesheet. Everything above this line is the
   house style shared with resortmanagerflex.com; keep the two
   in step rather than forking them.
   ============================================================ */

/* Product badge next to the logo (the Flex site calls this .flex-badge).
   Single line, never wrapped — same fix as the Flex site: the nav collapses
   to the hamburger early instead of letting the badge and links collide.
   That still leaves ordinary phone widths: the badge alone is wider than
   the room left beside the hamburger button, so its text ran under and
   past it. Below 480px the header stacks the badge under the logo instead
   — same move the footer already makes — rather than dropping the title;
   the nav row has to grow to fit two lines, so the mobile-menu dropdown's
   top offset grows with it, below. */
.product-badge{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;color:var(--accent);padding-left:12px;border-left:1.5px solid var(--border);line-height:1;white-space:nowrap}
footer .product-badge{border-left-color:rgba(255,255,255,.18)}
@media(max-width:480px){
  .nav{height:auto;padding-top:10px;padding-bottom:10px}
  header .brand{flex-direction:column;align-items:flex-start;gap:4px}
  header .product-badge{padding-left:0;border-left:0;font-size:.88rem}
  header .nav-toggle{align-self:flex-start}
  /* The stacked brand makes the header row taller than the shared 70px the
     mobile-menu dropdown assumes (see the max-width:1300px rule above) —
     measured at 83px with the current logo/badge sizing; keep this in step
     if either changes. */
  .mobile-menu{top:83px}
}

/* ---- Phone mock: the captive portal as a guest sees it ---- */
.phone{width:300px;max-width:100%;margin:0 auto;background:#0d1b2a;border-radius:34px;padding:12px;box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.08)}
.phone-screen{background:#fff;border-radius:24px;overflow:hidden}
.phone-cna{background:var(--bg-tint-2);border-bottom:1px solid var(--border);padding:9px 14px;font-size:.7rem;color:var(--muted);display:flex;justify-content:space-between;align-items:center}
.phone-cna b{color:var(--ink);font-weight:700}
.phone-body{padding:22px 20px 26px;text-align:center}
.phone-logo{width:46px;height:46px;border-radius:12px;background:linear-gradient(160deg,var(--blue),#4d9bd4);margin:0 auto 14px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:.95rem}
.phone-body .phone-title{margin:0;font-size:1.02rem;font-weight:800;color:var(--ink)}
.phone-body .sub{margin-top:6px;font-size:.78rem;color:var(--muted)}
.phone-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:16px 0 14px}
.phone-tabs span{font-size:.7rem;font-weight:700;padding:7px 4px;border-radius:8px;border:1px solid var(--border);color:var(--muted)}
.phone-tabs span.on{background:var(--bg-tint-2);border-color:var(--blue);color:var(--blue)}
.phone-input{height:38px;border:1px solid var(--border);border-radius:9px;margin-bottom:9px;display:flex;align-items:center;padding:0 12px;font-size:.78rem;color:#9db2c7}
.phone-cta{background:var(--accent);color:#fff;font-weight:700;font-size:.82rem;border-radius:9px;padding:11px;margin-top:5px}
.phone-fine{margin-top:12px;font-size:.62rem;color:#9db2c7;line-height:1.5}

/* ---- Sign-in method cards ---- */
.method-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.method{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-sm)}
.method .num{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.method h3{margin-top:8px;font-size:1.2rem;font-weight:800}
.method p{margin-top:10px;color:var(--muted)}
.method ul{margin:14px 0 0;padding-left:1.1em;color:var(--ink-soft);font-size:.96rem}
.method li{margin:6px 0}

/* ---- Pricing ---- */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.price{display:flex;flex-direction:column;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:32px;box-shadow:var(--shadow-sm);transition:.2s}
.price:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.price.featured{border-color:var(--blue);box-shadow:var(--shadow)}
.price .ribbon{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--blue);padding:4px 11px;border-radius:20px;margin-bottom:14px}
.price h3{font-size:1.3rem;font-weight:800}
.price .who{margin-top:8px;color:var(--muted);font-size:.95rem;min-height:3em}
.price .amount{margin:20px 0 4px;display:flex;align-items:baseline;gap:6px}
.price .amount .cur{font-size:1.1rem;font-weight:700;color:var(--ink-soft)}
.price .amount .num{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1}
.price .amount .per{font-size:.9rem;color:var(--muted);font-weight:600}
.price .billed{font-size:.82rem;color:var(--muted)}
.price ul{margin:22px 0 26px;padding:0;list-style:none;display:grid;gap:11px}
.price li{display:flex;gap:10px;font-size:.95rem;color:var(--ink-soft)}
.price li::before{content:"✓";color:var(--accent);font-weight:800;flex:0 0 auto}
.price li.off{color:#9db2c7}
.price li.off::before{content:"—";color:#c7d4e0}
.price .btn{margin-top:auto;width:100%;justify-content:center}

/* Billing period toggle */
.bill-toggle{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--border);border-radius:999px;background:#fff;margin:0 auto 34px;box-shadow:var(--shadow-sm)}
.bill-toggle button{border:0;background:transparent;font:inherit;font-size:.9rem;font-weight:600;color:var(--muted);padding:.55em 1.3em;border-radius:999px;cursor:pointer;transition:.15s}
.bill-toggle button.on{background:var(--blue);color:#fff}
.bill-toggle .save{font-size:.72rem;font-weight:800;color:var(--accent);margin-left:6px}
.bill-toggle button.on .save{color:#ffd9ac}
.toggle-row{display:flex;justify-content:center}

/* Add-ons */
.addon-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.addon{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px}
.addon h3{font-size:1.05rem;font-weight:800}
.addon .cost{margin-top:10px;font-size:1.5rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.addon .cost small{font-size:.82rem;font-weight:600;color:var(--muted);letter-spacing:0}
.addon p{margin-top:10px;color:var(--muted);font-size:.95rem}
.addon.free{border-color:var(--accent);background:linear-gradient(160deg,#fff,#fffaf3)}

/* Notice / callout strip */
.notice{border:1px solid var(--border);border-left:4px solid var(--accent);background:var(--bg-tint);border-radius:var(--radius-sm);padding:20px 24px;color:var(--ink-soft);font-size:.98rem}
.notice b{color:var(--ink)}
.notice + .notice{margin-top:16px}

/* Wizard steps (self-provisioning) */
.wizard{display:grid;gap:0;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;background:#fff}
.wstep{display:grid;grid-template-columns:56px 1fr;gap:20px;padding:24px 28px;border-bottom:1px solid var(--border)}
.wstep:last-child{border-bottom:none}
.wstep .n{width:38px;height:38px;border-radius:50%;background:var(--bg-tint-2);color:var(--blue);font-weight:800;display:grid;place-items:center}
.wstep h3{font-size:1.08rem;font-weight:700}
.wstep p{margin-top:6px;color:var(--muted);font-size:.98rem}

/* The header is the one place the shared 1140px wrap is too narrow. The product
   badge is a whole extra word next to the logo, and the eight nav links need
   ~1245px between them — so the badge was already running into "Hotels" and the
   Get started button was already clipping "Book" at every width above the
   hamburger breakpoint, wrap being capped at 1140px regardless of viewport.
   The header — and only the header — gets a wider wrap, and collapses to the
   hamburger at 1300px. Everything else keeps the house width, so the header sits
   50px wider each side than the sections below it on a large screen; that is the
   deliberate trade for links that do not overlap. */
/* The header row may use more width than the body column. The body is
   capped at 1280px because long lines of prose are hard to read; a nav
   bar has no such problem, and capping it at 1280 meant the nav had the
   same room on a 4K monitor as on a laptop. Greek, Vietnamese and
   Indonesian labels do not fit in 1280, so those three collapsed to a
   hamburger at every screen size while English did not -- the site
   behaving worse in some languages for no reason the visitor can see.
   1560 is enough for the longest of the ten. Below it, js/nav.js
   collapses on measurement, so nothing overlaps at any width. */
header .wrap.nav{max-width:1560px}

/* The footer had the same problem for the same reason — the badge is nowrap and
   wider than the space left beside the logo in a 1.4fr column, so it ran into the
   Product heading. In the footer the badge sits under the logo instead of beside
   it, which removes the constraint rather than working around it: the column now
   needs the width of the badge alone, not the logo plus the badge, so it fits at
   every width including the two-column and stacked layouts below 900px. The
   divider rule goes with the horizontal arrangement it belonged to. */
footer .brand{flex-direction:column;align-items:flex-start;gap:10px}
footer .product-badge{padding-left:0;border-left:0;white-space:normal}

/* Feature card icon standing for something this equipment cannot do — same
   shape as .feat .ic, muted rather than blue, so a "no" never reads as a
   tick at a glance. Used on the supported-equipment pages. */
.feat .ic.ic-no{background:#f1f4f8;color:#93a3b5}

/* Logo / vendor strip */
.vendors{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vendors span{border:1px solid var(--border);background:#fff;border-radius:999px;padding:8px 16px;font-size:.88rem;font-weight:600;color:var(--ink-soft)}
.vendors span.soon{color:#9db2c7;border-style:dashed}

@media(max-width:900px){
  .price-grid,.addon-grid,.method-grid{grid-template-columns:1fr}
  .wstep{grid-template-columns:1fr;gap:12px}
}

/* Phone mock — social sign-in buttons with brand marks */
.phone-social{display:flex;align-items:center;justify-content:center;gap:8px;height:38px;border:1px solid var(--border);border-radius:9px;margin-bottom:9px;font-size:.78rem;font-weight:600;color:var(--ink);background:#fff}
.phone-social svg{flex:0 0 auto;display:block}

/* ---- Promo screen demo (features page) ----
   The promo screen is the one feature nobody believes from a bullet list, so
   the features page tap-throughs it inside the existing phone mock. Everything
   here is drawn in CSS: the "photo" and the "video" are illustrations, not
   media files, so the page stays as light as the rest of the site. */
.pd{display:grid;gap:16px;justify-items:center;width:100%}
.pd .phone{margin:0}
.pd-media{position:relative;height:118px;overflow:hidden;background:linear-gradient(180deg,#f6c07d 0%,#e2725b 52%,#2b3a55 100%)}
.pd-sun{position:absolute;top:24px;left:50%;width:38px;height:38px;margin-left:-19px;border-radius:50%;background:radial-gradient(circle,#fff8e2 30%,#ffd27a 62%,rgba(255,210,122,0) 72%)}
.pd-sea{position:absolute;left:0;right:0;bottom:0;height:38px;background:linear-gradient(180deg,rgba(13,27,42,.35),rgba(13,27,42,.75))}
.pd-sheen{position:absolute;inset:0;display:none;background:linear-gradient(100deg,transparent 42%,rgba(255,255,255,.3) 50%,transparent 58%);animation:pd-sheen 2.8s linear infinite}
.pd-media.is-video .pd-sheen{display:block}
@keyframes pd-sheen{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
@media(prefers-reduced-motion:reduce){.pd-sheen{animation:none}}
.pd-badge{position:absolute;left:8px;bottom:8px;display:inline-flex;align-items:center;gap:5px;background:rgba(13,27,42,.72);color:#fff;font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:999px;padding:4px 9px}
.pd-highlights{list-style:none;margin:12px 0 0;padding:0;text-align:left;font-size:.72rem;line-height:1.55;color:var(--ink-soft)}
.pd-highlights li{display:flex;gap:7px;margin:5px 0}
.pd-highlights li::before{content:"•";color:var(--accent);font-weight:800}
.pd-cta{display:block;width:100%;font:inherit;border:0;cursor:pointer}
.pd-controls{display:flex;gap:8px}
.pd-tab{font:inherit;font-size:.75rem;font-weight:700;color:var(--muted);background:#fff;border:1px solid var(--border);border-radius:999px;padding:6px 15px;cursor:pointer}
.pd-tab[aria-pressed="true"]{color:var(--blue);background:var(--bg-tint-2);border-color:var(--blue)}
.pd-link{font:inherit;font-size:.72rem;font-weight:600;color:var(--blue);background:none;border:0;padding:0;margin-top:14px;cursor:pointer;text-decoration:underline}
.pd-note{max-width:23rem;font-size:.74rem;font-weight:400;line-height:1.5;color:var(--muted);text-align:center}

/* ============ Resort Manager Classic — language switcher (site-specific, no hotspot precedent) ============ */
.foot-langs{border-top:1px solid rgba(255,255,255,.08);margin-top:18px;padding-top:18px;font-size:.82rem;line-height:2;color:#8fa3ba}
.foot-langs a{color:#8fa3ba}
.foot-langs a:hover{color:#fff}
.foot-langs a.current{color:#fff;font-weight:700;text-decoration:underline}

/* Quotation form add-on checkbox list. The selector carries the .field
   ancestor because the shared `.field label{display:block}` rule is more
   specific than a bare class and would otherwise stack the box above its
   label. */
.addon-check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-top:2px}
.field label.et-check{display:flex;align-items:flex-start;gap:9px;margin-bottom:0;font-size:.88rem;font-weight:400;line-height:1.4;color:var(--ink-soft);cursor:pointer}
.field label.et-check input{width:auto;margin-top:2px;flex:0 0 auto;accent-color:var(--blue)}
@media(max-width:560px){.addon-check-grid{grid-template-columns:1fr}}

/* Raster icons inside the shared .feat/.dcard icon chip. The hotspot site
   uses inline SVG there; the Classic site's icons came off the old site as
   PNGs, so they are constrained to the same optical size instead. */
.feat .ic img,.dcard .ic img{width:26px;height:26px;object-fit:contain;display:block}
.partner-cell{display:grid;place-items:center;min-height:120px}
.partner-cell img{max-height:56px;width:auto;object-fit:contain}

/* Overflow prose beneath a feature-row: the long Feature List sections carry
   more text than fits the row's text column, so the remainder runs full-width
   under the row at reading measure. */
.fr-rest{max-width:52rem;margin-top:26px}
.fr-rest p+p{margin-top:14px}
.prose p+p{margin-top:14px}

/* Testimonials — two real client quotes, card-styled like .feat */
.tm-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.tm{margin:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:30px;box-shadow:var(--shadow-sm)}
.tm blockquote{margin:0;color:var(--ink-soft);font-size:1rem}
.tm blockquote p+p{margin-top:12px}
.tm-by{margin-top:18px;padding-top:16px;border-top:1px solid var(--border);font-size:.9rem;font-weight:700;color:var(--ink)}
@media(max-width:900px){.tm-grid{grid-template-columns:1fr}}

/* Sibling links between content pages. See build/related.py -- before these,
   the only in-body links on any page were the two CTAs. */
.related{padding:0 0 8px}
.related-links{list-style:none;margin:0;padding:22px 0 0;border-top:1px solid var(--border);display:flex;flex-wrap:wrap;gap:10px 28px}
.related-links a{color:var(--blue);font-weight:600;text-decoration:none}
.related-links a:hover{text-decoration:underline}

/* Quoted customer testimonials on the story pages. The existing rule is scoped
   to .tm (the home page cards) and does not reach prose. */
.prose blockquote{margin:22px 0;padding:4px 0 4px 22px;border-left:3px solid var(--accent);color:var(--ink);font-size:1.06rem}
.prose blockquote p+p{margin-top:14px}

/* Question-and-answer blocks. See build/faqs.py -- before these the site had
   no question-format heading anywhere. */
.faq{padding:52px 0;border-top:1px solid var(--border)}
.faq>.wrap>h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;margin-bottom:6px}
.faq-list h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-top:22px}
.faq-list h3:first-child{margin-top:8px}
.faq-list p{margin-top:6px}

/* Language picker, top right of the header row beside the CTAs.

   Sized to match .btn-ghost -- same 44px height, same radius, same border and
   the same hover. A native select at its default size is about 28px tall next
   to a 44px button, which is what made it read as unstyled: it was not that it
   had no rules, it was that it matched nothing around it. Height is set
   explicitly rather than derived from padding, because a select's line-height
   is not reliable across browsers.

   The footer switcher stays -- it is crawlable and reinforces hreflang, which
   a <select> cannot do. Rendered twice, because .nav-cta is hidden below
   1300px: once here, once in the mobile menu. */
.lang-select{font:inherit;font-size:.85rem;font-weight:600;color:var(--ink);background-color:#fff;border:1px solid var(--border);border-radius:var(--radius-sm);height:44px;padding:0 2.1em 0 .7em;cursor:pointer;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235B6B7B' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .8em center;transition:.15s ease}
.lang-select:hover{border-color:var(--blue);color:var(--blue)}
.lang-select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.mm-cta .lang-select{width:100%;height:46px}

/* Jump list on long pages. Generated from the page's own h2s -- see
   build/content.py -- so it cannot drift out of step with them. */
.page-contents{margin:0 0 30px;padding:18px 22px;background:var(--bg-tint,#f7f9fb);border:1px solid var(--border);border-radius:var(--radius-sm)}
.page-contents ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 26px}
.page-contents a{color:var(--blue);font-weight:600;text-decoration:none;font-size:.95rem}
.page-contents a:hover{text-decoration:underline}
.prose h2{scroll-margin-top:16px}
.prose hr{border:0;border-top:1px solid var(--border);margin:34px 0}

/* Authored pages are emitted one section per h2, alternating tinted and plain
   like the home page, so a reader can see where each section starts and ends.
   Padding is tighter than the 88px default because these pages stack nine or
   ten bands where the home page stacks five, and the alternation is what does
   the separating -- not the whitespace. */
.prose-band{padding:52px 0}
.page-hero+.prose-band{padding-top:40px}
.prose-band .prose>h2:first-child,.prose-band .prose>.page-contents+h2{margin-top:0}
@media(max-width:900px){.prose-band{padding:40px 0}}

/* Term-and-explanation lists: a two-column grid, term left, passage right.

   As a <ul> the passage wrapped back under the bullet marker and the term
   stopped being scannable, which is what bullets were there for. As a bare
   <dl> the term had no marker and no weight, and read as plain text. This is
   the deliberate version: an accent dot marking each term, the term in ink at
   full weight, the passage in the same muted body colour as the paragraphs
   around it, and a hairline under every row so the pairs read as pairs.

   Row rules are drawn on the cells rather than on the row, because CSS grid
   has no row element to hang a border on. */
.prose dl{display:grid;grid-template-columns:minmax(9rem,14rem) 1fr;gap:0 30px;margin:22px 0;border-top:1px solid var(--border)}
.prose dt{grid-column:1;position:relative;font-weight:700;font-size:1.02rem;color:var(--ink);line-height:1.45;padding:15px 0 15px 1.15em;border-bottom:1px solid var(--border)}
.prose dt::before{content:"";position:absolute;left:0;top:1.55em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.prose dd{grid-column:2;margin:0;color:var(--muted);font-size:1.06rem;line-height:1.65;padding:15px 0;border-bottom:1px solid var(--border)}
.prose dd.full{grid-column:1/-1;padding-left:1.15em}
.prose dd>a{font-weight:600}
.prose dl+p,.prose dl+h3{margin-top:22px}

/* Stacked below the grid's comfortable width. The term keeps its dot and its
   weight; the rule moves to the bottom of the passage so a term is never
   separated from the passage it belongs to. */
@media(max-width:720px){
  .prose dl{grid-template-columns:1fr;gap:0}
  .prose dt{grid-column:1;padding:16px 0 0 1.15em;border-bottom:0}
  .prose dt::before{top:1.65em}
  .prose dd{grid-column:1;padding:5px 0 16px 1.15em}
  .prose dd.full{padding-top:16px}
}

/* A standalone image inside authored prose.

   Capped at 560px rather than filling the 44rem column. Two reasons: these
   images came off WordPress sized for a 522px feature-row column, so showing
   them at 704px upscales them past what they were made for -- and a
   full-width photograph under every one of nine headings reads as a
   slideshow rather than as illustration. At 560 the 880px files are still
   over 1.5x, which holds up on a high-density screen. */
.prose-img{margin:26px 0}
.prose-img img{width:100%;max-width:560px;height:auto;display:block;border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}

/* "Read the full story" under a home-page testimonial. */
.tm-more{margin-top:10px}
.tm-more a{color:var(--blue);font-weight:600;font-size:.95rem;text-decoration:none}
.tm-more a:hover{text-decoration:underline}

/* Edition choice on the quotation form: two options side by side. */
.radio-row{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:6px}
.form-help{margin-top:14px;font-size:.9rem;color:var(--muted);line-height:1.6}

/* Cloudflare Turnstile widget on the enquiry forms. */
.cf-turnstile{margin:18px 0 4px;min-height:65px}