/*
 * tellecalls.com -- the public website (apps/website). One stylesheet for every page.
 *
 * Plain CSS, no framework and no build step, like the rest of the platform (CLAUDE.md "Stack"): the site is a folder
 * of .html files that any web server can hand out as they are, because the owner hosts it on a server of its own.
 *
 * The colours are the brand board's and nothing else (OneDrive Media/Logo/.../BrandBoard.pdf, memory telle-calls-brand):
 * primary navy #010C80, secondary bright blue #0080FF, accent vivid blue #0023FF, background white. The owner chose
 * this on 31 Oct 2026 after a first version used a green of its own. The vivid blue marks the thing to press, so a
 * visitor always knows where to go next; it carries white text (8.6:1), which the lighter #0080FF could not (3.6:1),
 * so #0080FF is used for shapes and for highlights on navy. The only other colours are WhatsApp's green and
 * Trustpilot's, on their own buttons and stars, because people recognise those. Written phone-first: every rule works at 360px wide and the
 * wider layouts are added by the min-width blocks (memory: mobile-friendly-everything).
 */

:root {
  --navy: #010c80;
  --navy-deep: #00064a;
  --navy-soft: #e9ebfa;
  --blue: #0080ff;        /* brand secondary */
  --vivid: #0023ff;       /* brand accent: buttons and links to press */
  --vivid-deep: #001bc4;  /* the accent pressed */
  --blue-soft: #e6f2ff;   /* a pale tint of the secondary, behind ticks and chips */
  --blue-light: #7cbcff;  /* the secondary lightened, for small text on navy */
  --ink: #12142b;
  --muted: #5a5e78;
  --line: #e2e3ec;
  --paper: #ffffff;
  --tint: #f3f6ff;        /* a pale tint of the brand blue that separates sections; it replaced a cream */
  --radius: 18px;
  --shadow: 0 18px 50px -24px rgba(1, 12, 128, .35);
  --wrap: 1080px;        /* not wider: the owner does not want anything too stretched */
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  /* A short page (Get a price) would otherwise end mid-screen with white under the footer. */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; display: block; }
a { color: var(--navy); }
/* A phone number never breaks over two lines. */
a[href^="tel:"] { white-space: nowrap; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2.2rem, 7vw, 3.8rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 4.6vw, 2.6rem); font-weight: 800; }
h3 { font-size: 1.2rem; font-weight: 700; }
p { margin: 0 0 1em; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 64px 0; }
.section.tight { padding: 40px 0; }
.tint { background: var(--tint); }
.navy { background: var(--navy); color: #fff; }
.navy a { color: #fff; }
.kicker {
  display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--vivid); margin-bottom: 12px;
}
.navy .kicker { color: var(--blue-light); }
.lead { font-size: 1.15rem; color: var(--muted); max-width: 640px; }
.navy .lead { color: #c9cdf5; }
.center { text-align: center; }
.center .lead { margin-left: auto; margin-right: auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn-go { background: var(--vivid); color: #fff; }
.btn-go:hover { background: var(--vivid-deep); }
.btn-navy { background: var(--navy); color: #fff; }
.btn-navy:hover { background: var(--navy-deep); }
.btn-line { border-color: currentColor; color: var(--navy); background: transparent; }
.navy .btn-line { color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-row .btn { flex: 1 1 auto; }

/* ---------- top bar ---------- */
.topbar { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .94); backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--navy); flex: none; }
/* The bar must fit a 320px phone (an iPhone with Display Zoom): logo, "Get a price" and the menu button take about
   270px there. When an earlier, wider logo did not fit, Safari widened the whole page and cut it off (31 Oct). */
/* The owner's full round logo (official file, brand/logo.svg), chosen on 31 Oct over an icon with the name beside it.
   The name is inside the circle, so it can never break over two lines (memory brand-name-one-line). */
.brand .logo { height: 54px; width: 54px; flex: none; }
@media (min-width: 600px) { .brand .logo { height: 60px; width: 60px; } }
.btn { white-space: nowrap; }
.nav { display: none; }
.nav a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .97rem; padding: 8px 4px; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--navy); box-shadow: inset 0 -2px 0 var(--blue); }
.top-actions { display: flex; align-items: center; gap: 10px; }
.top-actions .phone { display: none; font-weight: 700; text-decoration: none; color: var(--navy); white-space: nowrap; }
.top-actions .btn { min-height: 42px; padding: 0 16px; font-size: .92rem; }
.top-actions .login { display: none; font-weight: 600; text-decoration: none; color: var(--ink); }
@media (min-width: 1100px) { .top-actions .login { display: inline; } }
.menu-btn { width: 44px; height: 44px; border: 0; background: var(--navy-soft); border-radius: 12px; cursor: pointer;
  display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { display: block; width: 20px; height: 2px;
  background: var(--navy); border-radius: 2px; position: relative; content: ''; transition: transform .2s ease; }
.menu-btn span::before { position: absolute; top: -6px; }
.menu-btn span::after { position: absolute; top: 6px; }
.menu-open .menu-btn span { background: transparent; }
.menu-open .menu-btn span::before { transform: translateY(6px) rotate(45deg); }
.menu-open .menu-btn span::after { transform: translateY(-6px) rotate(-45deg); }

/* The phone menu: a full panel under the bar with big tap targets, closed until the button is pressed. */
.phone-menu { display: none; border-top: 1px solid var(--line); background: #fff; padding: 8px 20px 20px; }
.menu-open .phone-menu { display: block; }
.phone-menu a { display: block; padding: 14px 4px; border-bottom: 1px solid var(--line); text-decoration: none;
  color: var(--ink); font-weight: 600; font-size: 1.05rem; }
.phone-menu .btn { margin-top: 16px; width: 100%; }

@media (min-width: 980px) {
  .nav { display: flex; gap: 22px; }
  .menu-btn, .phone-menu, .menu-open .phone-menu { display: none; }
  .top-actions .phone { display: inline; }
}

/* ---------- home hero ---------- */
.hero { padding: 48px 0 56px; background:
  radial-gradient(900px 400px at 85% -10%, rgba(0, 128, 255, .14), transparent 60%),
  radial-gradient(700px 500px at -10% 110%, rgba(1, 12, 128, .08), transparent 60%); }
.hero .grid { display: grid; gap: 40px; align-items: center; }
.hero h1 span { color: var(--navy); }
.hero .ticks { list-style: none; padding: 0; margin: 22px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px;
  color: var(--muted); font-size: .95rem; }
.hero .ticks li::before { content: '✓'; color: var(--vivid); font-weight: 800; margin-right: 6px; }
@media (min-width: 900px) {
  .hero { padding: 80px 0 90px; }
  .hero .grid { grid-template-columns: 1.1fr .9fr; }
}

/* "One account" card: the hero picture is the idea itself -- everything on one account, one bill, one number to
   call -- rather than stock photography. It shows no prices on purpose: prices are the owner's to set. */
.account-card { background: #fff; border-radius: 26px; box-shadow: var(--shadow); border: 1px solid var(--line);
  padding: 22px; max-width: 440px; margin: 0 auto; width: 100%; }
.account-card .head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.account-card .head b { font-size: 1.05rem; }
.pill { white-space: nowrap; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; background: var(--blue-soft);
  color: var(--vivid); }
.acct-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid var(--line); }
.acct-row .ico { width: 42px; height: 42px; border-radius: 12px; background: var(--navy-soft); color: var(--navy);
  display: grid; place-items: center; flex: none; }
.acct-row .ico svg { width: 22px; height: 22px; }
.acct-row div { flex: 1; min-width: 0; }
.acct-row small { display: block; color: var(--muted); font-size: .85rem; }
.acct-row .ok { color: var(--vivid); font-weight: 800; }
.account-card .foot { margin-top: 12px; background: var(--navy); color: #fff; border-radius: 14px; padding: 14px 16px;
  display: flex; justify-content: space-between; gap: 10px; font-size: .92rem; flex-wrap: wrap; }

/* ---------- notice band (landline switch-off) ---------- */
.band { background: var(--navy-deep); color: #fff; }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 18px; padding-bottom: 18px; }
.band p { margin: 0; }
.band a { color: var(--blue-light); font-weight: 700; }

/* ---------- cards ---------- */
.cards { display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 640px) { .cards.two, .cards.four { grid-template-columns: 1fr 1fr; } .cards.three { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .cards.four { grid-template-columns: repeat(4, 1fr); } .cards.three { grid-template-columns: repeat(3, 1fr); } }
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; display: flex;
  flex-direction: column; }
.card p { color: var(--muted); }
.card .more { margin-top: auto; font-weight: 700; text-decoration: none; }
.card .more::after { content: ' →'; }
.card .ico { width: 52px; height: 52px; border-radius: 15px; background: var(--navy); color: #fff; display: grid;
  place-items: center; margin-bottom: 18px; }
.card .ico svg { width: 26px; height: 26px; }
a.card { text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; }
a.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.navy .card { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.navy .card p { color: #c9cdf5; }

/* ---------- steps ---------- */
.steps { counter-reset: step; display: grid; gap: 18px; margin-top: 34px; }
@media (min-width: 820px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { position: relative; padding: 26px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line); }
.step::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 40px;
  height: 40px; border-radius: 50%; background: var(--vivid); color: #fff; font-weight: 800; margin-bottom: 14px; }
.step p { color: var(--muted); margin: 0; }

/* ---------- split (text + picture) ---------- */
.split { display: grid; gap: 36px; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.flip > :first-child { order: 2; } }
.checks { list-style: none; padding: 0; margin: 18px 0 24px; }
.checks li { padding: 8px 0 8px 34px; position: relative; }
.checks li::before { content: ''; position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230023ff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/14px no-repeat; }
.navy .checks li::before { background-color: rgba(124, 188, 255, .2);
  /* The vivid-blue tick vanishes on navy, so on navy it is drawn in white. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E"); }

/* The phone mock-up for the app section, drawn in CSS so there is no screenshot to go stale. */
/* The app section: the real app's whole home screen in a compact phone (memory nothing-too-stretched). The
   screenshot is a real phone's shape (9 by 19.5) and carries its own status bar, so the frame is only the bezel. */
.app-show { position: relative; max-width: 300px; margin: 0 auto; width: 100%; }
.app-show::before { content: ''; position: absolute; inset: -6% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 128, 255, .16), transparent); }
.phone-mock { position: relative; width: 240px; max-width: 74%; margin: 0 auto; border-radius: 40px; background: #0b0d1f;
  padding: 8px; box-shadow: 0 0 0 2px #2a2d45 inset, 0 36px 70px -30px rgba(1, 12, 128, .55); }
.phone-mock img { display: block; width: 100%; height: auto; border-radius: 32px; }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-flex; align-items: center; gap: 10px; background: #000; color: #fff !important;
  text-decoration: none; padding: 9px 18px; border-radius: 12px; min-height: 50px; }
.store svg { width: 24px; height: 24px; }
.store small { display: block; font-size: .68rem; opacity: .8; line-height: 1.1; }
.store b { display: block; font-size: 1.02rem; line-height: 1.2; }
.soon-note { margin: 10px 0 0; font-weight: 600; color: var(--navy); }

/* ---------- reviews ---------- */
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.stars { color: #00b67a; letter-spacing: 2px; font-size: 1.1rem; }
.review blockquote { margin: 10px 0 16px; font-size: 1.08rem; font-weight: 600; }
.review cite { font-style: normal; color: var(--muted); font-size: .92rem; }

/* ---------- page header (inner pages) ---------- */
.page-head { padding: 52px 0 44px; background: linear-gradient(160deg, var(--navy) 30%, var(--vivid) 140%); color: #fff; }
.page-head .lead { color: #d3d7fa; }
.page-head .kicker { color: var(--blue-light); }
.page-head .btn-line { color: #fff; }
.crumb { font-size: .88rem; margin-bottom: 14px; }
.crumb a { color: #c9cdf5; }

/* ---------- facts list ---------- */
.facts { display: grid; gap: 14px; margin-top: 28px; }
@media (min-width: 720px) { .facts { grid-template-columns: repeat(3, 1fr); } }
.fact { border-left: 4px solid var(--blue); padding: 4px 0 4px 16px; }
.fact b { display: block; font-size: 1.05rem; }
.fact span { color: var(--muted); font-size: .95rem; }

/* ---------- questions (FAQ) ---------- */
.faq { max-width: 820px; margin-top: 28px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 700; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 6px; top: 14px; font-size: 1.6rem; color: var(--navy);
  font-weight: 400; transition: transform .2s ease; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-right: 30px; }

/* ---------- forms ---------- */
.form-card { background: #fff; color: var(--ink); border-radius: 24px; padding: 26px; box-shadow: var(--shadow); }
.field { margin-bottom: 16px; }
.field label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 6px; }
/* 16px or more, or iPhone zooms the whole page when the box is tapped. */
.field input, .field select, .field textarea { width: 100%; font: inherit; font-size: 16px; padding: 13px 14px;
  border: 1.5px solid #cfd2e2; border-radius: 12px; background: #fff; color: var(--ink); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(1, 12, 128, .12); }
.field textarea { min-height: 110px; resize: vertical; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { margin: 0; }
/* The real box is hidden behind its chip; kept 1px, or the form's width:100% made it stick out and widen the page. */
.chips label { position: relative; }
.chips input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; left: 0; top: 0; }
.chips span { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid #cfd2e2;
  font-weight: 600; font-size: .95rem; cursor: pointer; user-select: none; }
.chips input:checked + span { background: var(--navy); border-color: var(--navy); color: #fff; }
.chips input:focus-visible + span { box-shadow: 0 0 0 4px rgba(1, 12, 128, .2); }
.row2 { display: grid; gap: 0 14px; }
@media (min-width: 600px) { .row2 { grid-template-columns: 1fr 1fr; } }
.small { font-size: .85rem; color: var(--muted); }
/* The bill upload: a large tap target that opens the phone's camera roll or files. */
.drop { display: block; position: relative; border: 2px dashed #c3c8e6; border-radius: 14px; padding: 18px; text-align: center;
  cursor: pointer; background: var(--tint); }
.drop:hover, .drop:focus-within { border-color: var(--vivid); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop-in b { display: block; color: var(--vivid); }
.drop-in span { font-size: .9rem; color: var(--muted); }
.file-list { list-style: none; padding: 0; margin: 8px 0 0; }
.file-list li { position: relative; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border: 1px solid var(--line); border-radius: 10px; margin-top: 6px; font-size: .92rem; }
.file-list li span { flex: 1; }
.file-list .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--vivid); transition: width .2s ease; }
.file-list .ok .bar { background: var(--blue); }
.file-list .x { flex: none; width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--navy-soft); color: var(--navy);
  font-size: 1.1rem; line-height: 1; cursor: pointer; }
.file-list .bad { color: #b42318; border-color: #f3c4c4; }
.file-list .bad small { color: #b42318; white-space: normal; }
.file-list li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-list li small { color: var(--muted); flex: none; }
/* The box robots fill in and people never see. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-done { display: none; text-align: center; padding: 20px 0; }
.form-done .big, .big { font-size: 3rem; line-height: 1; margin-bottom: 12px; color: var(--vivid); }
.sent .form-done { display: block; }
.sent form { display: none; }

/* ---------- contact tiles ---------- */
.contact-tiles { display: grid; gap: 14px; }
@media (min-width: 720px) { .contact-tiles { grid-template-columns: repeat(3, 1fr); } }
.contact-tile { display: flex; gap: 14px; align-items: center; padding: 18px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.contact-tile .ico { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--navy-soft); color: var(--navy); }
.contact-tile .ico svg { width: 22px; height: 22px; }
.contact-tile small { display: block; color: var(--muted); }
.contact-tile b { font-size: 1.02rem; word-break: break-word; }

/* ---------- roaming checker ---------- */
.checker { max-width: 720px; }
.checker input { width: 100%; font: inherit; font-size: 18px; padding: 16px 18px; border-radius: 14px;
  border: 2px solid #cfd2e2; }
.checker input:focus { outline: none; border-color: var(--navy); }
.result { margin-top: 18px; }
.result .country { font-size: 1.3rem; font-weight: 800; margin-bottom: 10px; }
.plan-chip { display: inline-block; margin: 0 8px 8px 0; padding: 8px 14px; border-radius: 999px; background: var(--blue-soft);
  color: var(--vivid); font-weight: 700; }
.roam-tip { margin: 0 0 14px; font-weight: 600; }
.roam-warn { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #fff4e5; color: #7a4a00; font-size: .95rem; }
.suggest { list-style: none; padding: 0; margin: 6px 0 0; border: 1px solid var(--line); border-radius: 14px;
  overflow: hidden; background: #fff; }
.suggest button { display: block; width: 100%; text-align: left; padding: 13px 16px; border: 0; background: #fff;
  font: inherit; cursor: pointer; border-bottom: 1px solid var(--line); }
.suggest li:last-child button { border-bottom: 0; }
.suggest button:hover { background: var(--navy-soft); }

/* A short "please check" note, quieter than a card. */
.note-box { margin-top: 22px; max-width: 720px; padding: 14px 18px; border-left: 4px solid var(--blue); background: var(--tint);
  border-radius: 0 12px 12px 0; font-size: .95rem; color: var(--muted); }
.note-box b { color: var(--ink); }
.faq details ul.checks { margin: 0 0 10px; }

/* ---------- call to action ---------- */
.cta { border-radius: 28px; background: linear-gradient(135deg, var(--navy) 0%, var(--vivid) 100%); color: #fff;
  padding: 40px 26px; text-align: center; }
.cta p { color: #d3d7fa; }
.cta .btn-row { justify-content: center; }
.cta .btn-row .btn { flex: 0 1 auto; }

/* ---------- footer ---------- */
.footer { background: var(--navy-deep); color: #c9cdf5; padding: 54px 0 28px; font-size: .95rem; }
.footer a { color: #fff; text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer .cols { display: grid; gap: 30px; grid-template-columns: 1fr 1fr; }
@media (min-width: 900px) { .footer .cols { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer .cols > :first-child { grid-column: 1 / -1; }
@media (min-width: 900px) { .footer .cols > :first-child { grid-column: auto; } }
.footer h4 { color: #fff; margin: 0 0 12px; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 9px; }
.footer .brand { color: #fff; margin-bottom: 14px; }
/* On the navy footer the logo's navy ring would vanish; a white disc behind it shows the ring as it is on white. */
.footer .brand .logo { width: 76px; height: 76px; background: #fff; border-radius: 50%; padding: 2px; }
/* Social pages: the ones typed in the staff mailbox settings (tenant.mail_social, read from the server 31 Oct 2026). */
.footer .social { display: flex; gap: 10px; margin-top: 16px; }
.footer .social a { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); color: #fff; }
.footer .social a:hover { background: var(--vivid); text-decoration: none; }
.footer .social svg { width: 18px; height: 18px; }
.footer .legal { border-top: 1px solid rgba(255, 255, 255, .14); margin-top: 40px; padding-top: 22px; font-size: .84rem;
  line-height: 1.7; }

/* ---------- WhatsApp button ---------- */
.wa-float { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; width: 58px;
  height: 58px; border-radius: 50%; background: #25d366; display: grid; place-items: center;
  box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .45); }
.wa-float svg { width: 30px; height: 30px; }
/* Hidden once the footer is on screen (site.js): the footer has its own "WhatsApp us" link, and the button sat over
   the company details there. Making room for it squashed them, and space under them looked empty (owner, 31 Oct). */
.wa-float { transition: opacity .2s ease, transform .2s ease; }
.wa-float.away { opacity: 0; transform: scale(.8); pointer-events: none; }

/* ---------- speed test ---------- */
.speed { max-width: 720px; margin: 0 auto; text-align: center; }
.speed-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (min-width: 700px) { .speed-tiles { grid-template-columns: repeat(4, 1fr); } }
.speed-tile { background: var(--tint); border-radius: var(--radius); padding: 18px 10px; }
.speed-tile span { display: block; font-size: .85rem; color: var(--muted); font-weight: 600; }
.speed-tile b { display: block; font-size: 2.2rem; color: var(--navy); line-height: 1.2; font-variant-numeric: tabular-nums; }
.speed-tile small { color: var(--muted); }
.speed-state { margin: 20px 0 16px; color: var(--muted); }
.speed-who { max-width: 420px; margin: 22px auto 0; text-align: left; }

/* ---------- cookie notice (only when Google Analytics is switched on) ---------- */
/* The cookie notice. The owner, 31 Oct 2026: big enough that people see it ("I want them to accept it"), but the
   first one, a white card with blue buttons, looked like "another option to get a quote". So it is dark navy with
   white words: plainly a notice, not part of the page. "No thanks" is as big and as easy as Accept on purpose: the
   ICO's cookie guidance says refusing must be as easy as accepting, or the consent does not count. It floats, solid, a
   little above the bottom: a full-width strip on the bottom edge "looks funny", and see-through was not wanted either. */
.cookie-bar { position: fixed; z-index: 70; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
  max-width: 560px; margin: 0 auto; background: var(--navy, #010C80); color: #fff; border-radius: 18px;
  padding: 16px 18px; box-shadow: 0 20px 50px -20px rgba(1, 12, 128, .6); }
.cookie-bar p { margin: 0 0 12px; font-size: .95rem; color: #fff; }
.cookie-bar p strong { display: block; font-size: 1.05rem; margin-bottom: 2px; }
.cookie-bar a { color: #fff; }
.cookie-bar .btn { min-height: 44px; }
.cookie-bar .btn-go { background: #fff; color: #010C80; border-color: #fff; }
.cookie-bar .btn-line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .7); }

/* Long text pages (about, legal): a comfortable reading width. */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.6rem; margin-top: 1.6em; }
.prose p, .prose li { color: #33364f; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- legal documents ---------- */
/* The three tabs at the top of each legal document, as on the old site: one tap to the other two. */
.doc-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.doc-tabs a { color: #fff; text-decoration: none; font-weight: 600; font-size: .95rem; padding: 9px 16px;
  border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .35); }
.doc-tabs a[aria-current="page"] { background: #fff; color: var(--navy); border-color: #fff; }
.legal-doc h2 { font-size: 1.35rem; }
/* The text keeps the old site's line breaks inside paragraphs; they read as spaces, as they did there. */
.legal-doc p { overflow-wrap: anywhere; }

/* ---------- service status (status.html, status.js) ---------- */
/* Narrow on purpose (memory: nothing too stretched): one column of services, read top to bottom on any screen. */
.status { max-width: 720px; }
.st-services { list-style: none; padding: 0; margin: 0 0 28px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #fff; }
.st-svc { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); }
.st-svc:first-child { border-top: 0; }
.st-svc b { flex: 1; font-weight: 600; }
.st-dot { width: 12px; height: 12px; border-radius: 50%; flex: none; background: #1a9e5c; }
.st-words { font-size: .85rem; color: #1a7a4a; font-weight: 600; text-align: right; white-space: nowrap; }
.st-some .st-dot, .st-planned .st-dot { background: #e0a100; } .st-some .st-words, .st-planned .st-words { color: #8a6200; }
.st-down .st-dot { background: #d13b3b; } .st-down .st-words { color: #b02a2a; }
.status h2 { font-size: 1.3rem; margin: 28px 0 12px; }
.st-notice { border: 1px solid var(--line); border-left: 5px solid #e0a100; border-radius: 14px; padding: 14px 18px; margin: 0 0 12px; background: #fff; }
.st-notice.st-down { border-left-color: #d13b3b; }
.st-notice.st-fixed { border-left-color: #1a9e5c; }
.st-ntop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.st-ntop h3 { margin: 0; font-size: 1.05rem; }
.st-tag { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #8a6200; }
.st-down .st-tag { color: #b02a2a; } .st-fixed .st-tag { color: #1a7a4a; }
.st-notice > .small { margin: 4px 0 0; }
.st-updates { list-style: none; padding: 0; margin: 10px 0 0; }
.st-updates li { padding: 8px 0 0; border-top: 1px dashed var(--line); margin-top: 8px; }
.st-updates time { font-size: .8rem; color: #5b5f7a; font-weight: 600; }
.st-updates p { margin: 2px 0 0; white-space: pre-wrap; }