/* Fonts are served from this site (OFL-licensed), so a visit makes no request to a third party (Privacy §13). */
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/DMSans-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/DMSans-400-latin.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: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/DMSans-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/DMSans-400-latin.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: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/DMSans-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/DMSans-400-latin.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: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/DMSans-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/DMSans-400-latin.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: 'Titan One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/TitanOne-400-latin-ext.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-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Titan One'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/TitanOne-400-latin.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; }

/* HomeCode public website — tokens and layout taken from the designer's boards
   (homecode_designs (2): comingSoon, privacy, terms, deletion). Board width 1922px ≈ 1px per px. */
:root {
  --teal: #05A7A1;
  --deep: #036059;
  --ink: #0A303A;
  --text: #333333;
  --muted: #4A4A4A;
  --meta: #93928E;
  --cream: #F4F1EA;
  --tile-yellow: #FFF5D5;
  --yellow: #FFC60D;
  --peach: #FFE4D2;
  --orange: #E74C25;
  --white: #FFFFFF;
  --display: "Titan One", "Fredoka", system-ui, sans-serif;
  --body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --col: 1260px;
  --gutter: 24px;
  /* one wave period: 112px wide, 23px deep, traced from the board */
  --wave-w: 112px;
  --wave-h: 23px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--body); font-size: 18px; line-height: 1.78;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--deep); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 4px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(var(--col), 100% - 2 * var(--gutter)); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: #fff; padding: 8px 14px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 16px; }

/* ── Header ─────────────────────────────────────────────────────────────── */
.site-header { color: #fff; }
.site-header .bar-bg { background: var(--teal); }
.site-header .bar { display: flex; align-items: center; gap: 32px; min-height: 80px; padding: 8px 0; }
.site-header .bar.centered { justify-content: center; }
.brand { display: inline-flex; flex-shrink: 0; }
.brand img { width: 216px; height: auto; }
.brand.large img { width: 250px; }
.nav { display: flex; gap: 26px; margin: 0; padding: 0; list-style: none; }
.nav a { color: var(--ink); font-weight: 700; font-size: 17px; position: relative; padding-top: 4px; white-space: nowrap; }
.nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav a[aria-current="page"]::before {
  content: ""; position: absolute; left: 50%; top: -10px; width: 8px; height: 8px; border-radius: 50%;
  background: var(--yellow); transform: translateX(-50%);
}
.header-right { margin-left: auto; display: flex; align-items: center; gap: 22px; }
.header-right .contact { color: var(--ink); font-weight: 700; font-size: 17px; display: inline-flex; align-items: center; gap: 8px; }
.header-right .contact svg { width: 18px; height: 18px; fill: currentColor; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yellow); color: var(--ink); font-family: var(--display); font-size: 15px;
  letter-spacing: .01em; padding: 0 22px; height: 44px; border-radius: 6px; border: 0; cursor: pointer;
  text-decoration: none !important; white-space: nowrap;
}
.btn:hover { filter: brightness(1.04); }
.btn.tall { height: 66px; padding: 0 26px; }
.menu-toggle { display: none; margin-left: auto; background: transparent; border: 2px solid var(--ink); color: var(--ink); border-radius: 8px; padding: 6px 10px; font: 700 15px var(--body); }

/* ── Waves ──────────────────────────────────────────────────────────────── */
/* Lobes hang down from a solid colour above (header bottom, cream band bottom). */
.wave-down { height: var(--wave-h); background-repeat: repeat-x; background-size: var(--wave-w) var(--wave-h); }
.wave-down.teal  { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 23'%3E%3Cpath fill='%2305A7A1' d='M0 0h112v.5C84 .5 84 23 56 23S28 .5 0 .5z'/%3E%3C/svg%3E"); }
.wave-down.cream { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 23'%3E%3Cpath fill='%23F4F1EA' d='M0 0h112v.5C84 .5 84 23 56 23S28 .5 0 .5z'/%3E%3C/svg%3E"); }
/* The cream band's top edge follows the same curve, leaving a white ribbon under the header. */
.wave-up.cream { height: var(--wave-h); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 112 23'%3E%3Cpath fill='%23F4F1EA' d='M0 .5C28 .5 28 23 56 23S84 .5 112 .5V23H0z'/%3E%3C/svg%3E") repeat-x; background-size: var(--wave-w) var(--wave-h); margin-top: 9px; }

/* ── Policy hero band ───────────────────────────────────────────────────── */
.hero { background: var(--cream); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 500px); gap: 64px; align-items: center; padding: 56px 0 40px; }
.hero h1 { font-family: var(--display); font-weight: 400; font-size: clamp(40px, 5vw, 64px); line-height: 1.05; color: var(--ink); margin: 0 0 10px; }
.hero .meta { font-size: 15px; font-weight: 700; color: var(--ink); margin: 0 0 14px; }
.hero .summary { font-size: 20px; line-height: 1.35; margin: 0; max-width: 34em; }
.hero .summary p { margin: 0 0 20px; }
.hero .summary p:last-child { margin-bottom: 0; }
.hero img { width: 100%; border-radius: 28px; aspect-ratio: 493 / 330; object-fit: cover; }

/* ── Policy body ────────────────────────────────────────────────────────── */
.policy { padding: 56px 0 24px; }
.policy .lead { text-align: center; max-width: 1100px; margin: 0 auto 48px; }
.policy .lead h2 { margin-bottom: 20px; }
.policy .lead .strap { font-size: 24px; font-weight: 700; line-height: 1.35; color: var(--ink); margin: 0 0 28px; }
.policy .lead ul { text-align: left; display: inline-block; margin: 0; padding-left: 1.2em; font-weight: 600; }
.policy h2 { font-family: var(--display); font-weight: 400; color: var(--ink); font-size: clamp(30px, 3vw, 46px); line-height: 1.1; margin: 56px 0 18px; scroll-margin-top: 24px; }
.policy h3 { font-family: var(--display); font-weight: 400; color: var(--deep); font-size: clamp(22px, 2vw, 30px); line-height: 1.2; margin: 40px 0 14px; scroll-margin-top: 24px; }
.policy p { margin: 0 0 18px; }
.policy ul, .policy ol { margin: 0 0 18px; padding-left: 1.4em; }
.policy li { margin-bottom: 8px; }
.policy strong { color: var(--ink); }
.policy .callout { background: var(--tile-yellow); border-left: 6px solid var(--yellow); border-radius: 10px; padding: 20px 24px; margin: 24px 0; }
.policy .callout p:last-child { margin-bottom: 0; }
.policy .safeguard { background: var(--cream); border-radius: 14px; padding: 24px 28px; margin: 24px 0; }
.policy .safeguard p:last-child { margin-bottom: 0; }
.policy .footnote { font-style: italic; color: var(--muted); margin-top: 40px; }
table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 12px 0 28px; font-size: 17px; line-height: 1.55; }
th, td { text-align: left; vertical-align: top; padding: 14px 18px; border-bottom: 1px solid #E7E7E6; }
th { background: var(--cream); color: var(--ink); font-weight: 700; }
thead th:first-child { border-top-left-radius: 12px; } thead th:last-child { border-top-right-radius: 12px; }
tbody tr:last-child td { border-bottom: 0; }
tbody th { background: transparent; width: 30%; }
table.kv th { width: 36%; }
table.plain thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
table.plain tbody tr:first-child td { border-top: 0; }
.contact-table th { width: 32%; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer { position: relative; margin-top: 40px; background: var(--cream); color: var(--ink); display: flex; flex-direction: column; justify-content: flex-end; }
@media (min-width: 900px) {
  /* the blob is 1922×395; never let the footer be shorter than it, so its top edge is never cut flat */
  .site-footer { background: var(--white) url("../assets/footer-blob.png") center bottom / 100% auto no-repeat; min-height: 20.6vw; }
  .site-footer .wrap { padding-top: 6vw; }
}
@media (min-width: 900px) and (max-width: 1500px) {
  /* narrower than the board: let the blob scale up so the columns sit on cream */
  .site-footer { background-size: cover; background-position: center bottom; }
  .site-footer .wrap { padding-top: 9vw; }
}
.site-footer .wrap { padding: 48px 0 40px; }
.foot-grid { display: grid; grid-template-columns: 1fr 1fr auto 1.6fr auto; gap: 32px; align-items: center; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; font-weight: 700; font-size: 17px; line-height: 1.8; }
.foot-grid a { color: var(--ink); }
.foot-grid a[aria-current="page"] { color: var(--deep); text-decoration: underline; text-underline-offset: 4px; }   /* orange on the footer was below AA */
.foot-grid .brand { justify-self: center; }
.foot-grid .brand img { width: 216px; }
.foot-address { font-weight: 700; font-size: 17px; line-height: 1.45; }
.foot-address p { margin: 0 0 10px; }
.foot-cta { display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.foot-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; margin-top: 56px; font-size: 13px; color: var(--muted); }
.foot-bottom p { margin: 0 0 6px; }
.foot-bottom .partners { max-width: 62ch; margin-top: 10px; }
.foot-bottom ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 22px; flex-wrap: wrap; }
.foot-bottom a { color: var(--muted); }
.site-footer.centered .foot-brand { display: flex; justify-content: center; margin-bottom: 40px; }
.site-footer.centered .foot-brand img { width: 320px; }

/* ── Coming soon page ───────────────────────────────────────────────────── */
.soon { text-align: center; padding: 96px 0 48px; }
.soon .illus { width: 261px; margin: 0 auto 6px; }
.soon h1 { font-family: var(--display); font-weight: 400; font-size: clamp(44px, 4.5vw, 60px); color: var(--ink); line-height: 1; margin: 0 0 22px; }
.soon .tagline { font-size: 24px; font-weight: 600; line-height: 1.35; color: var(--text); margin: 0 auto; max-width: 34em; }
.countdown { margin: 56px auto 0; }
.countdown .label { font-weight: 700; color: var(--deep); font-size: 20px; margin: 0 0 16px; }
.countdown .tiles { display: flex; justify-content: center; gap: 14px; }
.countdown .tile { background: var(--tile-yellow); border-radius: 16px; width: 118px; padding: 16px 8px 12px; }
.countdown .num { display: block; font-family: var(--display); font-size: 44px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.countdown .unit { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--deep); margin-top: 8px; }
.countdown .sep { font-family: var(--display); font-size: 40px; color: var(--yellow); align-self: center; line-height: 1; padding-bottom: 26px; }
.subscribe { margin: 72px auto 0; max-width: 512px; }
.subscribe h2 { font-family: var(--body); font-weight: 700; font-size: 26px; color: var(--deep); margin: 0 0 26px; }
.subscribe form { display: flex; gap: 0; }
.subscribe input {
  flex: 1; min-width: 0; height: 66px; border: 1px solid var(--peach); border-radius: 6px 0 0 6px; padding: 0 22px;
  font: 500 17px var(--body); color: var(--text); background: #fff;
}
.subscribe input::placeholder { color: #4d4d4d; }
.subscribe .btn { border-radius: 0 6px 6px 0; }
.subscribe .note { font-size: 14px; color: var(--muted); margin: 14px 0 0; min-height: 1.5em; }
.subscribe .note.ok { color: var(--deep); font-weight: 600; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 1320px) { .header-right .contact { display: none; } }
@media (max-width: 1100px) { .nav { gap: 20px; } .nav a { font-size: 16px; } }
@media (max-width: 900px) {
  body { font-size: 17px; }
  .menu-toggle { display: inline-block; }
  .site-header .bar { flex-wrap: wrap; gap: 16px; }
  .site-header .nav-wrap { display: none; width: 100%; order: 3; }
  .site-header .nav-wrap.open { display: block; }
  .nav { flex-direction: column; gap: 14px; padding: 6px 0 10px; }
  .nav a[aria-current="page"]::before { display: none; }
  .header-right { gap: 12px; }
  .hero .wrap { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 32px; }
  .hero img { max-width: 560px; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .foot-grid .brand { grid-column: 1 / -1; justify-self: start; order: -1; }
  .foot-cta { grid-column: 1 / -1; }
  table, thead, tbody, tr, th, td { display: block; }
  table.plain thead, thead { display: none; }
  tr { border-bottom: 1px solid #E7E7E6; padding: 10px 0; }
  th, td { border: 0; padding: 4px 0; width: auto !important; }
  tbody th { background: transparent; }
  td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; color: var(--meta); text-transform: uppercase; letter-spacing: .06em; }
  td:not([data-label])::before { content: none; }
}
@media (max-width: 600px) {
  .brand img, .brand.large img { width: 180px; }
  .soon { padding: 64px 0 32px; }
  .countdown .tiles { gap: 8px; }
  .countdown .tile { width: 92px; padding: 12px 6px 10px; }
  .countdown .num { font-size: 34px; } .countdown .sep { font-size: 30px; padding-bottom: 22px; }
  .subscribe form { flex-direction: column; gap: 12px; }
  .subscribe input, .subscribe .btn { border-radius: 6px; width: 100%; flex: none; }
  .soon .tagline br { display: none; }
  .header-right { display: none; }
  .foot-grid { grid-template-columns: 1fr; }
  .site-footer.centered .foot-brand img { width: 240px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Quick exit: fixed on every page, 48px target, always above the content. */
.quick-exit { position: fixed; top: 12px; right: 12px; z-index: 1000; min-width: 48px; min-height: 48px; padding: 0 18px; border: 2px solid var(--white); border-radius: 999px; background: var(--ink); color: var(--white); font: 700 14px/1 inherit; font-family: inherit; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.quick-exit:focus-visible { outline: 3px solid var(--yellow); outline-offset: 2px; }
/* Quick exit is pinned top right (101 px wide, 12 px in). It reaches the header bar below about 1510 px wide, so there the bar stops short of it, and the
   email link (also in every footer) gives up its place so Book a Call still fits. */
@media (max-width: 1509px) {
  .has-quick-exit .site-header .bar { padding-right: 124px; }
  .has-quick-exit .header-right .contact { display: none; }
}
/* Between the full menu and the Menu button (900 to 1180 px) there is no room for Book a Call beside Quick exit: it stays in every footer. */
@media (min-width: 900px) and (max-width: 1180px) { .has-quick-exit .header-right .btn { display: none; } }

/* Links inside running text of the legal pages are underlined, so they do not rely on colour alone (WCAG 2.1 1.4.1, doc 61 G32). */
.policy p a, .policy li a, .policy td a { text-decoration: underline; text-underline-offset: 2px; }

/* AA contrast (owner, 1 Nov 2026): white or yellow text on the teal bar measured 3.0:1 and 1.9:1, so the header's text is ink (4.7:1) and the current page is
   underlined as well as marked by the yellow dot; yellow subheadings on cream are deep teal (6.6:1). The bar, the logo and the yellow dot keep their colours. */

/* A link inside a sentence or a table cell is underlined, not told apart by colour alone (WCAG 1.4.1); buttons, menus and the footer are not sentences. */
.summary a:not(.btn), .policy p a:not(.btn), .policy li a:not(.btn), .policy td a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; }

/* The privacy notices from HomeCode's library (owner, 1 Nov 2026): one card for each audience, in the site's own colours */
.notices { margin-bottom: 40px; }
.notice-list { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.notice-card { display: flex; flex-direction: column; gap: 10px; padding: 24px; background: var(--white); border: 1px solid #E3DED3; border-radius: 16px; }
.notice-card h3 { margin: 0; color: var(--ink); }
.notice-card p { margin: 0; }
.notice-card .notice-for { font-weight: 700; color: var(--deep); }
.notice-card .notice-version { font-size: 15px; color: var(--muted); }
.notice-card .btn { align-self: flex-start; margin-top: auto; }

/* The download page: a fingerprint is one long word, so it wraps instead of pushing a phone screen sideways */
.policy code { word-break: break-all; }
/* The download page: the QR code a phone camera scans (black on white, with its quiet margin, so every camera reads it) */
.qr-card .qr { width: 200px; height: 200px; background: #fff; border: 1px solid #E3DED3; border-radius: 8px; }