/* FabricDemo.com light/dark theme.
   Sun and moon icons: Fluent UI System Icons, (c) Microsoft Corporation, MIT licence. */

/* ---------- Toggle (horizontal switch: sun on the left, moon on the right) ---------- */
.theme-toggle { position: relative; display: block; box-sizing: border-box; flex: none; width: 60px; height: 32px; min-width: 60px; min-height: 32px; margin: 0; padding: 0; border: 1px solid var(--neutral); border-radius: 999px; background: var(--light); cursor: pointer; overflow: hidden; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; }
.theme-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.theme-toggle .tt-thumb { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #2D7FF9; transform: translate3d(0, 0, 0); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.theme-toggle[aria-checked="true"] .tt-thumb { transform: translate3d(28px, 0, 0); }
.theme-toggle .tt-icon { position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; transition: color 0.2s ease; pointer-events: none; }
.theme-toggle .tt-sun { left: 7px; color: #FFFFFF; }
.theme-toggle .tt-moon { right: 7px; color: var(--text-3); }
.theme-toggle[aria-checked="true"] .tt-sun { color: var(--text-3); }
.theme-toggle[aria-checked="true"] .tt-moon { color: #FFFFFF; }

/* No animation while the page first loads, so the switch appears already in place */
html.fd-init .theme-toggle .tt-thumb, html.fd-init .theme-toggle .tt-icon { transition: none !important; }

/* ---------- Dark palette (brand Ink + Graphite, lifted blue for text) ----------
   Dark is the default. It applies to everything except a visitor who has chosen light,
   so it also holds if the small script that sets data-theme ever fails to run. */
:root[data-theme="light"] { color-scheme: light; }
:root:not([data-theme="light"]) {
  color-scheme: dark;
  --ink: #E8EAED;
  --text-2: #AEB4BC;
  --text-3: #8B939D;
  --neutral: #343B44;
  --light: #20252B;
  --white: #242A31;
  --blue: #5B9BFF;
  --blue-wash: #1A2F4F;
}
:root:not([data-theme="light"]) body,
:root:not([data-theme="light"]) header { background: #1C1F24; }
:root:not([data-theme="light"]) header.scrolled { box-shadow: 0 2px 14px rgba(0,0,0,0.5); }
:root:not([data-theme="light"]) .btn-primary { background: #2D7FF9; color: #FFFFFF; }
:root:not([data-theme="light"]) .btn-primary:hover { background: #4C8EFA; }
:root:not([data-theme="light"]) .credibility { background: #14171B; color: #E8EAED; }
:root:not([data-theme="light"]) .credibility p.lead { color: #AEB4BC; }
:root:not([data-theme="light"]) .credibility .cert-badge { color: #E8EAED; }
:root:not([data-theme="light"]) .badge.soon { color: #A5ACB5; }

/* ---------- Smooth colour change while switching ---------- */
html.theme-switching,
html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after { transition: background-color 0.22s ease, color 0.22s ease, border-color 0.22s ease !important; }
html.theme-switching .theme-toggle .tt-thumb { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important; }

@media (prefers-reduced-motion: reduce) {
  .theme-toggle .tt-thumb, .theme-toggle .tt-icon { transition: none; }
  html.theme-switching, html.theme-switching *, html.theme-switching *::before, html.theme-switching *::after,
  html.theme-switching .theme-toggle .tt-thumb { transition: none !important; }
}

/* Header actions (the home page already defines this; inner pages now share it) */
.header-right { display: flex; align-items: center; gap: 20px; }
.header-right .btn { white-space: nowrap; }

/* Narrow laptop / tablet width: four menu items plus the switch and button, kept on one row */
@media (min-width: 721px) and (max-width: 800px) {
  .header-row { gap: 14px; }
  nav.main-nav { gap: 16px; }
  .header-right { gap: 14px; }
}

/* Phones: keep the logo, the switch and the button on one row, with no sideways scroll */
@media (max-width: 440px) {
  .header-row { gap: 12px; }
  .header-row .logo { font-size: 1rem; }
  .header-right { gap: 12px; }
  .header-right .btn { padding: 10px 14px; font-size: 0.9rem; white-space: nowrap; }
}
@media (max-width: 350px) {
  .header-row { gap: 8px; }
  .header-right { gap: 8px; }
  .header-right .btn { padding: 8px 7px; font-size: 0.85rem; white-space: normal; line-height: 1.15; text-align: center; }
}

/* ---------- Five menu items: the header button gives way on tablets, and phones get a Menu button ---------- */
.m-menu { display: none; position: relative; }
.m-menu summary { list-style: none; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid var(--neutral); border-radius: 999px; background: var(--light); color: var(--ink); font-weight: 700; font-size: 0.92rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m-menu summary::-webkit-details-marker { display: none; }
.m-menu summary:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
.m-menu[open] summary { border-color: var(--blue); }
.m-panel { position: absolute; right: 0; top: calc(100% + 8px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; padding: 6px; border: 1px solid var(--neutral); border-radius: 12px; background: var(--white); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); }
.m-panel a { display: block; padding: 12px 14px; border-radius: 8px; color: var(--ink); text-decoration: none; font-size: 1rem; }
.m-panel a:hover, .m-panel a.current { color: var(--blue); background: var(--blue-wash); }
nav.main-nav a.current { color: var(--blue); }
@media (min-width: 721px) and (max-width: 1040px) { .header-right .btn { display: none; } nav.main-nav { gap: 22px; } }
@media (min-width: 721px) and (max-width: 860px) { nav.main-nav { gap: 16px; } }
@media (max-width: 720px) { .m-menu { display: block; } .header-right .btn { display: none; } }

/* ---------- Tidier line breaks: where the browser supports it, no one-word last lines ---------- */
main p, main li, main dd, main figcaption { text-wrap: pretty; }
main h2, main h3 { text-wrap: balance; }

/* Launch switch. <html data-launch="pre"> before launch day, data-launch="live" after it.
   .when-pre shows only before launch, .when-live only after. Pages using it: index, products, tenancy-guide. */
html[data-launch="pre"] .when-live { display: none !important; }
html:not([data-launch="pre"]) .when-pre { display: none !important; }
.btn.btn-disabled { background: var(--neutral); color: var(--text-2); border-color: transparent; cursor: default; pointer-events: none; }

/* ============ Menu underline (version 3.1.1) ============
   Desktop and tablet menu only; the phone menu is a separate panel and is not touched.
   Links rest in muted grey and brighten on hover. A 2px blue line draws in from the left (0.3 s) and, when the pointer
   leaves, retracts back to the left; moving across the menu makes one line retract while the next draws in.
   The current page keeps its blue text and a permanent line. Keyboard focus shows the same line (the focus ring stays).
   To keep the links bright at rest instead of grey, delete the declaration marked REST COLOUR. */
nav.main-nav a { position: relative; padding: 6px 0; margin: -6px 0; /* taller target, same layout */ color: var(--text-2); /* REST COLOUR */ transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1); }
nav.main-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: var(--blue);
  transform: scaleX(0); transform-origin: left center; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); pointer-events: none; }
nav.main-nav a:focus-visible:not(.current) { color: var(--ink); }
nav.main-nav a:focus-visible::after, nav.main-nav a.current::after { transform: scaleX(1); }
@media (hover: hover) {
  nav.main-nav a:not(.current):hover { color: var(--ink); }
  nav.main-nav a:hover::after { transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) { nav.main-nav a, nav.main-nav a::after { transition: none; } }
@media (forced-colors: active) { nav.main-nav a::after { background: LinkText; forced-color-adjust: none; } }

/* ============ Faint grid behind the top of every page (version 3.1.1) ============
   A 40px grid in a tint of the brand blue, about 8% opacity, strongest at the top centre and fading out by 640px down the page.
   Pure CSS, no image, nothing to load. Behind all content; hidden in print and in high-contrast mode.
   TO SWITCH IT OFF: delete this whole block, or change the two --grid-line values to transparent. */
:root { --grid-line: rgba(45, 127, 249, 0.08); }
:root:not([data-theme="light"]) { --grid-line: rgba(91, 155, 255, 0.08); }
body::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 640px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 40px 40px; background-position: center top;
  -webkit-mask-image: radial-gradient(ellipse 75% 100% at 50% 0, #000 25%, transparent 100%);
          mask-image: radial-gradient(ellipse 75% 100% at 50% 0, #000 25%, transparent 100%);
}
@media print, (forced-colors: active) { body::before { display: none; } }

/* ============ Very narrow phones (version 3.2) ============
   The new font stack is wider than Calibri was, so at 350px and below the logo and the Menu button give up a little size and padding
   to stay on one row with no sideways scroll. Nothing changes above 350px. */
@media (max-width: 350px) {
  .header-row .logo { font-size: 0.92rem; }
  .m-menu summary { padding: 0 11px; gap: 6px; }
}

/* ============ Sharper dark theme (version 3.2.3) ============
   Brighter body text, a darker background (nearer black, like the reference site), and a clearer "current page" mark in the menu. */
:root:not([data-theme="light"]) {
  --ink: #F2F4F7;
  --text-2: #D3D8DE;
  --text-3: #A3ABB5;
  --neutral: #303741;
  --light: #161A1F;
  --white: #1C2127;
  --blue-wash: #17294A;
}
:root:not([data-theme="light"]) body,
:root:not([data-theme="light"]) header { background: #0F1216; }
:root:not([data-theme="light"]) .credibility { background: #0A0C0F; }
:root:not([data-theme="light"]) .credibility p.lead { color: #D3D8DE; }
:root:not([data-theme="light"]) .badge.soon { color: #B4BBC4; }
nav.main-nav a.current { color: var(--ink); font-weight: 600; }
nav.main-nav a.current::after { height: 3px; }

/* ============ Neutral dark theme and one font (version 3.2.4) ============
   Dark mode moves from blue-grey to a neutral near-black (a trace of cool), so white text and the one blue accent stand out.
   Headings now use the same family as the body (Segoe UI, semibold), so there is one font on the whole site. */
:root:not([data-theme="light"]) {
  --ink: #F3F4F6;
  --text-2: #CFD2D7;
  --text-3: #A0A4AA;
  --neutral: #2A2E34;
  --light: #14171A;
  --white: #181B1F;
  --blue-wash: #152541;
}
:root:not([data-theme="light"]) body,
:root:not([data-theme="light"]) header { background: #0F1114; }
:root:not([data-theme="light"]) .credibility { background: #0A0B0D; }
:root:not([data-theme="light"]) .pc-cover { background: #0F1114; }
:root:not([data-theme="light"]) .pc-cover.is-soon { background-color: #121519; }
h1, h2, h3 { letter-spacing: -0.012em; }
/* product cards: every top row (badge, and the price on the first card) has the same height, so the three titles line up */
.pc-row { height: 36px; margin-bottom: 12px; }
.pc-price { line-height: 1; }
h1, h2, h3, .story .question { font-weight: 600; }

/* ============ Version 3.2.5: portrait, fact pills, larger text ============ */
.about-split { display: grid; grid-template-columns: minmax(240px, 400px) minmax(0, 1fr); gap: clamp(32px, 6vw, 80px); align-items: center; max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.about-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 18px; display: block; box-shadow: 0 18px 50px rgba(0,0,0,0.22); }
:root:not([data-theme="light"]) .about-photo { border-radius: 0; box-shadow: none; mix-blend-mode: lighten;
  -webkit-mask-image: radial-gradient(ellipse 92% 100% at 50% 36%, #000 58%, transparent 100%); mask-image: radial-gradient(ellipse 92% 100% at 50% 36%, #000 58%, transparent 100%); }
html h1 { line-height: 1.1; text-wrap: balance; }
html h2 { line-height: 1.18; }
html h3 { line-height: 1.3; }
.about-text p { font-size: 1.125rem; line-height: 1.7; max-width: 62ch; }
.about-text h2 { margin: 0 0 20px; }
.about-text p strong { color: var(--ink); font-weight: 600; }
.bio .about-split { width: min(1080px, calc(100vw - 40px)); max-width: none; margin-left: 50%; transform: translateX(-50%); padding: 0; }
.bio .about-text h2.part { border-top: 0; padding-top: 0; }
.bio .about-text .eyebrow { margin: 0 0 14px; }
.author { display: grid; grid-template-columns: 112px 1fr; column-gap: 24px; border-left: 0; padding: 0; max-width: 820px; }
.author-photo { grid-row: 1 / span 2; width: 112px; height: 112px; border-radius: 50%; object-fit: cover; }
p a:not(.btn):not(.more):not(.li-link) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--blue); }
@media (max-width: 760px) { .about-split { grid-template-columns: 1fr; } .about-photo { max-width: 320px; margin: 0 auto; } .author { grid-template-columns: 80px 1fr; } .author-photo { width: 80px; height: 80px; } }

/* ============ Version 3.2.9: About portrait on the right ============ */
@media (min-width: 761px) {
  main.wrap .bio .about-split { margin-left: 0; transform: none; width: 100%; max-width: none; padding: 0; grid-template-columns: minmax(0, 1fr) 240px; gap: 32px; align-items: start; }
  main.wrap .bio .about-photo { order: 2; margin-top: 8px; }
}
@media (min-width: 1300px) {
  main.wrap .bio .about-split { width: calc(100% + 260px); grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
}
@media (max-width: 760px) { main.wrap .bio .about-photo { order: -1; } }

/* ============ Version 3.2.11: double-chevron cue, taller blocks ============ */
html .scroll-cue { width: 56px; height: 56px; bottom: 32px; border: 1px solid transparent; background: transparent; color: var(--ink); transition: opacity .4s ease, background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
html .scroll-cue:hover, html .scroll-cue:focus-visible { background: var(--blue-wash); border-color: var(--blue); color: var(--blue); transform: translateX(-50%) scale(1.07); box-shadow: 0 8px 24px rgba(45,127,249,0.25); outline: none; }
html .scroll-cue svg { width: 26px; height: 26px; animation: none; transition: transform .25s ease; }
html .scroll-cue .c2 { opacity: 1; }
html .scroll-cue:hover svg, html .scroll-cue:focus-visible svg { transform: translateY(3px); }
html .scroll-cue svg { animation: cue-bob2 2.8s ease-in-out infinite; }
html .scroll-cue:hover svg, html .scroll-cue:focus-visible svg { animation: none; }
@keyframes cue-bob2 { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }
@media (prefers-reduced-motion: reduce) { html .scroll-cue svg { animation: none !important; } }
html .intro { min-height: min(76vh, 780px) !important; display: grid !important; align-content: center; }
html .lcb { min-height: min(62vh, 640px) !important; display: grid !important; align-content: center; }
html .intro > *, html .lcb > * { width: 100%; }