/* Dubai property price check: styles
   Light appearance, Apple-style: full-bleed photo hero, bento tiles with soft blue glows,
   Liquid Glass buttons and icons (translucent, edge-lit, no gloss), solid content where text is read.
   HIG adapted to the web: system font, 17px body, 44px+ targets, 4.5:1 text contrast,
   honours Reduce Transparency, Increase Contrast and Reduce Motion. */

:root {
  color-scheme: light;

  --bg: #fbfbfd;
  --bg-2: #f5f5f7;
  --surface: #ffffff;
  --fill: #f2f2f5;
  --label: #1d1d1f;
  --label-2: #48484c;
  --label-3: #636366;
  --separator: rgba(60, 60, 67, 0.14);
  --hairline: rgba(0, 0, 0, 0.06);
  --field-border: #86868b;
  --accent: #0062c4;
  --accent-deep: #0052a8;
  --accent-tint: rgba(0, 98, 196, 0.09);
  --link: #0062c4;
  --danger: #c4001a;
  --danger-tint: rgba(196, 0, 26, 0.06);
  --focus: #0062c4;
  --ink: #060a14;          /* dark tiles and the showcase band */
  --scrim: 5, 18, 36;      /* rgb of photo scrims */

  --card-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 30px rgba(16, 24, 40, 0.06);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius-tile: 28px;
  --radius-field: 12px;
  --gutter: max(20px, env(safe-area-inset-left), env(safe-area-inset-right));
  --nav-h: 60px;
}

@media (prefers-contrast: more) {
  .glass-button.on-dark, .navbar.on-photo .glass-button, .glass-panel.on-dark { background: rgba(var(--scrim), 0.9); }
  .glass-button-bright { background: #ffffff; }
  .glass-button-tinted { background: var(--accent-deep); }
  .glass-button { box-shadow: inset 0 0 0 1.5px currentColor; }
  :root {
    --label-2: var(--label);
    --label-3: var(--label);
    --separator: var(--field-border);
    --hairline: var(--field-border);
    --field-border: var(--label);
  }
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); overflow-x: clip; }
/* iPhone and iPad: follow the system text size (Settings > Display & Text Size).
   -webkit-touch-callout limits this to iOS Safari; desktop Safari keeps 16px. */
@supports (font: -apple-system-body) and (-webkit-touch-callout: none) {
  html { font: -apple-system-body; }          /* 17px at the default setting, larger as people choose */
  body { font-size: 1rem; font-family: var(--font); }
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--label);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Off-white and white, gently alternating down the page */
  background:
    radial-gradient(1200px 700px at 90% 30%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 70%),
    radial-gradient(900px 700px at 0% 65%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, var(--bg) 0%, #ffffff 25%, var(--bg-2) 45%, #ffffff 65%, var(--bg-2) 85%, var(--bg) 100%);
}
h1, h2, h3, p, ul, ol, dl, dd, figure, fieldset { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: 0.18em; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 8px; }
[hidden] { display: none !important; }
::selection { background: rgba(0, 98, 196, 0.16); }

.wrap {
  width: 100%;
  max-width: calc(52rem + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute; left: 12px; top: -100px; z-index: 30;
  background: var(--surface); color: var(--label); padding: 12px 16px; border-radius: 12px;
}
.skip-link:focus { top: 12px; }

/* Type scale: semibold display type, restrained sizes (Apple product-page proportions) */
.large-title {
  font-size: clamp(2.375rem, 1.55rem + 3.4vw, 4.25rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
h2 {
  font-size: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
h3 { font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.eyebrow { font-size: 0.875rem; font-weight: 600; color: var(--accent); margin-bottom: 12px; letter-spacing: 0.005em; }
.lede { font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.45; margin-top: 16px; max-width: 30em; text-wrap: pretty; }
.section-intro { color: var(--label-2); margin-top: 10px; max-width: 38em; font-size: 1rem; line-height: 1.5; }
.note { font-size: 0.875rem; color: var(--label-3); margin-top: 20px; }

/* ---------- Buttons: restrained glass ----------
   Three roles, no glow, no bevel, no text shadow:
   - .glass-button-tinted  the one primary action on light sections (blue)
   - .glass-button-bright  the primary action over photos (frosted white, dark text; monochrome over colourful content)
   - .glass-button.on-dark the secondary action over photos (dark glass, white text)
   - .glass-button         a secondary action on light sections (white glass) */

.glass-button {
  position: relative;
  isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px;
  color: var(--label);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
  box-shadow:
    0 0 0 0.5px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 6px 16px rgba(0, 0, 0, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font: inherit; font-size: max(16px, 1rem); font-weight: 500; letter-spacing: -0.01em;
  text-decoration: none; white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) {
  .glass-button:hover { filter: brightness(1.04); }
}
/* Pressed: shrinks slightly and lights up, like the system's glass under a finger */
.glass-button:active { transform: scale(0.97); filter: brightness(1.08); }

.glass-button-tinted {
  color: #ffffff;
  background: linear-gradient(180deg, #1a73e0 0%, #0062c4 100%);
  box-shadow:
    0 0 0 0.5px rgba(0, 50, 120, 0.4),
    0 1px 2px rgba(0, 40, 100, 0.18),
    0 6px 16px rgba(0, 70, 160, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.glass-button-bright {
  color: #1d1d1f;
  background: rgba(255, 255, 255, 0.86);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  backdrop-filter: blur(24px) saturate(180%);
  box-shadow:
    0 0 0 0.5px rgba(255, 255, 255, 0.6),
    0 8px 24px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 1);
}

.glass-button.on-dark, .navbar.on-photo .glass-button {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(24px) saturate(170%) brightness(0.72);
  backdrop-filter: blur(24px) saturate(170%) brightness(0.72);
  box-shadow:
    inset 0 0 0 0.5px rgba(255, 255, 255, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    0 8px 24px rgba(0, 0, 0, 0.16);
}

.glass-button-small { min-height: 44px; padding: 0 16px; font-size: max(15px, 0.9375rem); }
.glass-button[disabled] { cursor: progress; filter: saturate(0.7); }

/* Edge light for panels and icons: a fine gradient rim */
.glass-panel::before, .glass-icon::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg,
    rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.2) 30%,
    rgba(255, 255, 255, 0) 55%, rgba(255, 255, 255, 0.35) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}

.glass-panel {
  position: relative;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(22px) saturate(180%);
  backdrop-filter: blur(22px) saturate(180%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.5), 0 12px 36px rgba(16, 40, 80, 0.12);
}
.glass-panel.on-dark {
  color: #ffffff;
  background: rgba(var(--scrim), 0.42);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.35), 0 16px 40px rgba(0, 0, 0, 0.22);
}

@media (prefers-reduced-motion: no-preference) {
  .glass-button { transition: transform 0.1s ease-out, filter 0.1s ease-out, background-color 0.25s ease, color 0.25s ease; }
}

/* Reduce Transparency: solid surfaces */
@media (prefers-reduced-transparency: reduce) {
  .glass-button, .glass-panel, .navbar, .navbar::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .glass-button, .glass-button-bright { background: #ffffff; }
  .glass-button.on-dark, .navbar.on-photo .glass-button, .glass-panel.on-dark { background: rgba(20, 32, 50, 0.92); }
  .glass-button-tinted { background: var(--accent); }
  .navbar.is-scrolled { background: #ffffff; }
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-button.on-dark, .glass-panel.on-dark { background: rgba(20, 32, 50, 0.72); }
}

/* Glass icons: a colour orb seen through a small pane of frosted glass */
.glass-icon {
  --c: #0a84ff; --c-deep: #0052a8;
  position: relative; isolation: isolate; flex: none;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 16px;
}
.glass-icon-blue { --c: #0a84ff; --c-deep: #0050a8; }
.glass-icon-teal { --c: #28c8bd; --c-deep: #066f70; }
.glass-icon-indigo { --c: #6f6bff; --c-deep: #3a30c2; }
.glass-icon-orange { --c: #ff9a2e; --c-deep: #b04a00; }
.glass-icon::before {
  content: ""; position: absolute; z-index: -1;
  inset: 0; border-radius: inherit;
  background:
    radial-gradient(circle at 22% 20%, var(--c) 0 26%, transparent 27%),
    rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), inset 0 0 14px rgba(255, 255, 255, 0.55), 0 8px 18px rgba(16, 40, 80, 0.12);
}
/* Frost over the orb: the pane itself */
.glass-icon svg {
  position: relative; z-index: 1;
  width: 26px; height: 26px;
  fill: none; stroke: var(--c-deep); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.glass-icon::before {
  background:
    linear-gradient(rgba(255, 255, 255, 0.26), rgba(255, 255, 255, 0.26)),
    radial-gradient(circle at 24% 22%, var(--c) 0%, color-mix(in srgb, var(--c) 75%, transparent) 30%, transparent 62%),
    radial-gradient(circle at 88% 92%, color-mix(in srgb, var(--c) 55%, transparent) 0%, transparent 55%),
    color-mix(in srgb, var(--c) 14%, #ffffff);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.55),
    inset 0 0 16px rgba(255, 255, 255, 0.6),
    0 10px 22px color-mix(in srgb, var(--c) 28%, transparent);
}
.glass-icon svg { stroke: #ffffff; filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--c-deep) 70%, transparent)); }

/* ---------- Text link ---------- */

.text-link {
  display: inline-flex; align-items: center; min-height: 44px;
  font-weight: 500; color: var(--link);
}
.text-link:active { opacity: 0.6; }

/* ---------- Navbar ---------- */

.navbar {
  position: sticky; top: 0; z-index: 20;
  padding-top: env(safe-area-inset-top);
}
.navbar {
  background: rgba(251, 251, 253, 0);
  -webkit-backdrop-filter: blur(0px) saturate(100%);
  backdrop-filter: blur(0px) saturate(100%);
}
.navbar.is-scrolled {
  background: rgba(251, 251, 253, 0.72);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  backdrop-filter: blur(20px) saturate(180%);
}
/* Scroll edge effect: content blurs and fades where it meets the bar, no hard line */
.navbar::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; pointer-events: none;
  background: linear-gradient(180deg, rgba(251, 251, 253, 0.55), rgba(251, 251, 253, 0));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
  opacity: 0;
}
.navbar.is-scrolled::after { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .navbar { transition: background-color 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease; }
  .navbar::after { transition: opacity 0.3s ease; }
  .navbar-name, .navbar-role { transition: color 0.3s ease; }
}
.navbar-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: var(--nav-h);
  max-width: calc(74rem + 2 * var(--gutter));
}
.navbar-name {
  display: flex; flex-direction: column; justify-content: center; min-height: 44px;
  color: var(--label); text-decoration: none; font-weight: 600; line-height: 1.2;
}
.navbar-role { font-size: 0.8125rem; font-weight: 400; color: var(--label-3); }
.navbar.on-photo.has-scrolled {
  background: rgba(var(--scrim), 0.38);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  backdrop-filter: blur(20px) saturate(160%);
}
.navbar.on-photo .navbar-name { color: #ffffff; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.25); }
.navbar.on-photo .navbar-role { color: rgba(255, 255, 255, 0.85); }

/* ---------- Hero: full-bleed photo ---------- */

.hero {
  position: relative; isolation: isolate;
  clip-path: inset(-100vh 0 0 0);   /* clip sides and bottom; let the photo stretch upward */
  margin-top: calc(-1 * (var(--nav-h) + env(safe-area-inset-top)));
  min-height: max(660px, 100svh);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #ffffff;
  background: #2b4a63;
}
/* Sky colour above the page: whatever the overscroll does, never white above the photo */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 100vh; z-index: -3;
  background: #376c87;
}
.hero-photo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  transform-origin: 50% 100%;
  object-fit: cover; object-position: 74% 40%;
}
/* Phones: the tower's spire stays bright; everything behind the text is darkened */
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  transform-origin: 50% 100%;
  background: linear-gradient(180deg,
    rgba(var(--scrim), 0.30) 0%, rgba(var(--scrim), 0) 12%, rgba(var(--scrim), 0.12) 22%,
    rgba(var(--scrim), 0.62) 34%, rgba(var(--scrim), 0.8) 60%, rgba(var(--scrim), 0.9) 100%);
}
.hero-inner {
  width: 100%;
  max-width: calc(74rem + 2 * var(--gutter));
  margin-inline: auto;
  padding: calc(var(--nav-h) + 40px) var(--gutter) max(40px, env(safe-area-inset-bottom));
  display: grid; gap: 28px; align-items: end;
}
.hero .eyebrow { color: #ffffff; opacity: 0.92; }
.hero h1 { text-shadow: 0 2px 30px rgba(0, 0, 0, 0.18); }
.hero .lede { color: rgba(255, 255, 255, 0.92); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.35); }
.hero-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 30px; }
.hero-link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: #ffffff; font-weight: 500; text-underline-offset: 0.2em;
  text-decoration-color: rgba(255, 255, 255, 0.5);
}
.hero-link:active { opacity: 0.6; }
.trust-line { font-size: 0.8125rem; color: rgba(255, 255, 255, 0.86); margin-top: 22px; letter-spacing: 0.01em; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); }
.hero-card { display: none; }

@media (min-width: 900px) {
  .hero { justify-content: center; min-height: max(720px, min(100svh, 980px)); }
  .hero-photo { object-position: 60% 50%; }
  .hero-scrim {
    background:
      linear-gradient(90deg, rgba(var(--scrim), 0.72) 0%, rgba(var(--scrim), 0.64) 38%, rgba(var(--scrim), 0.46) 52%, rgba(var(--scrim), 0) 76%),
      linear-gradient(180deg, rgba(var(--scrim), 0.3) 0%, rgba(var(--scrim), 0) 18%, rgba(var(--scrim), 0) 72%, rgba(var(--scrim), 0.35) 100%);
  }
  .hero-inner { grid-template-columns: minmax(0, 34rem) 1fr; padding-bottom: 72px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 24px; flex-wrap: wrap; }
  .hero-card { display: block; justify-self: end; width: 320px; padding: 20px 22px; margin-bottom: 8px; }
}
.hero-card-title { font-size: 0.875rem; font-weight: 700; color: #ffffff; letter-spacing: 0.005em; }
.hero-card-list { display: grid; gap: 10px; margin-top: 12px; font-size: 0.9375rem; font-weight: 500; line-height: 1.4; }
.hero-card-list li { position: relative; padding-left: 30px; }
.hero-card-list li::before, .checklist li::before {
  content: ""; position: absolute; left: 0; top: 0.12em; width: 20px; height: 20px; border-radius: 50%;
  background: #0a7cff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10.5l2.6 2.6L14 7.6' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(10, 124, 255, 0.4);
}

/* ---------- Sections ---------- */

.section { padding-top: clamp(80px, 12vw, 136px); scroll-margin-top: 64px; }
.section > h2 + .bento, .section-intro + .bento, .section-intro + .card, .section-intro + .chooser { margin-top: 32px; }

/* ---------- Bento tiles ---------- */

.bento { display: grid; gap: 12px; margin-top: 32px; }
@media (min-width: 760px) {
  .bento { gap: 16px; }
  .bento-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 600px) { .bento-2 { grid-template-columns: 1fr 1fr; } }

.tile {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 24px;
  border-radius: var(--radius-tile);
  background: var(--surface);
  border: 1px solid var(--hairline);
  box-shadow: var(--card-shadow);
}
.tile h3 { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; }
.tile p { color: var(--label-2); font-size: 0.9375rem; line-height: 1.45; margin-top: 6px; }
@media (min-width: 760px) { .tile { padding: 30px 28px; } }

/* Soft colour glows (image-2 style), kept behind the text */
.tile[class*="glow-"]::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 280px; height: 280px; border-radius: 50%;
  top: -150px; right: -120px;
  background: radial-gradient(circle, var(--glow, #0a84ff) 0%, transparent 68%);
  opacity: 0.22;
}
.glow-tl::after { top: -160px !important; left: -130px; right: auto !important; }
.glow-br::after { top: auto !important; bottom: -170px; right: -120px !important; }
.glow-blue { --glow: #0a84ff; }
.glow-teal { --glow: #19c3b6; }
.glow-indigo { --glow: #6f6bff; }
.glow-orange { --glow: #ff9a2e; }

/* Dark tile: ink with a blue glow rising from the bottom */
.tile-dark {
  color: #f5f5f7;
  border-color: rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(90% 55% at 70% 115%, rgba(28, 110, 255, 0.85) 0%, rgba(28, 110, 255, 0.28) 45%, rgba(28, 110, 255, 0) 75%),
    radial-gradient(60% 40% at 0% 0%, rgba(120, 140, 255, 0.18) 0%, rgba(120, 140, 255, 0) 70%),
    linear-gradient(180deg, #0d1528 0%, var(--ink) 100%);
  box-shadow: 0 18px 50px rgba(6, 10, 20, 0.28);
}
.tile-dark p { color: rgba(235, 235, 245, 0.78); }

/* Display numerals for the steps */
.numeral {
  display: block; margin-bottom: 22px;
  font-size: clamp(2.75rem, 2.4rem + 1.6vw, 3.75rem); font-weight: 600; line-height: 0.9; letter-spacing: -0.05em;
  background: linear-gradient(180deg, #1a7dff 0%, rgba(26, 125, 255, 0.12) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.tile-dark .numeral { background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.12) 100%); }
@media (min-width: 760px) { #how .tile { min-height: 300px; display: flex; flex-direction: column; } #how .numeral { margin-bottom: auto; padding-bottom: 28px; } }

/* Who I help */
.bento-2 .tile .glass-icon { margin-bottom: 22px; }

/* How I work */
.bento-approach { display: grid; gap: 12px; }
.tile-statement { display: grid; gap: 22px; align-content: start; padding-bottom: 80px; }
.tile .statement { font-size: clamp(1.3125rem, 1.15rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.22; letter-spacing: -0.025em; color: #ffffff; margin-top: 0; }
.tile-statement .checklist { margin-top: 4px; }
.tile-statement .checklist li { color: rgba(235, 235, 245, 0.88); font-size: 0.9375rem; }
.factors { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.factors .tile { display: grid; gap: 2px; align-content: start; padding: 18px; border-radius: 22px; }
.factors .glass-icon { width: 44px; height: 44px; border-radius: 14px; margin-bottom: 12px; }
.factors .glass-icon svg { width: 22px; height: 22px; }
.factors strong { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; }
.factors span { font-size: 0.8125rem; color: var(--label-2); line-height: 1.4; }
@media (min-width: 900px) {
  .bento-approach { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; }
  .factors { gap: 16px; }
}
.checklist { display: grid; gap: 14px; }
.checklist li { position: relative; padding-left: 32px; }
.photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 50%; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); }

/* ---------- Showcase band: "What you get" on ink with blue light ---------- */

.showcase {
  margin-top: clamp(80px, 12vw, 136px);
  padding: clamp(64px, 10vw, 112px) 0;
  color: #f5f5f7;
  background:
    radial-gradient(70% 50% at 50% 0%, rgba(28, 110, 255, 0.42) 0%, rgba(28, 110, 255, 0) 70%),
    radial-gradient(50% 40% at 100% 100%, rgba(111, 107, 255, 0.28) 0%, rgba(111, 107, 255, 0) 70%),
    radial-gradient(40% 35% at 0% 80%, rgba(25, 195, 182, 0.14) 0%, rgba(25, 195, 182, 0) 70%),
    linear-gradient(180deg, #0b1222 0%, var(--ink) 100%);
  scroll-margin-top: 0;
}
.showcase .section-intro { color: rgba(235, 235, 245, 0.78); }
.showcase .report { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.08); }

/* ---------- Report (example) ---------- */

.card {
  background: var(--surface);
  border-radius: var(--radius-tile);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--hairline);
  padding: 24px 20px;
}
@media (min-width: 640px) { .card { padding: 32px; } }

.report { padding: 0; overflow: hidden; color: var(--label); }
.report-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--separator); background: var(--bg); }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px;
  border: 1.5px dashed var(--field-border);
  font-size: 0.8125rem; font-weight: 600; color: var(--label-2);
}
.report-caption { font-size: 0.8125rem; color: var(--label-3); margin-top: 10px; }
.report-block { padding: 22px 20px; }
.report-block + .report-block { border-top: 1px solid var(--separator); }
.report-sub { font-size: 0.9375rem; color: var(--label-2); margin-top: 2px; }
.table-scroll { overflow-x: auto; margin-top: 12px; }
.report-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; font-variant-numeric: tabular-nums; }
.report-table th { text-align: left; vertical-align: bottom; font-weight: 600; color: var(--label-3); font-size: 0.8125rem; padding: 6px 8px 6px 0; border-bottom: 1px solid var(--separator); }
.report-table td { padding: 8px 8px 8px 0; color: var(--label-2); white-space: nowrap; border-bottom: 1px solid var(--separator); }
.report-table tr:last-child td { border-bottom: 0; }
.report-list { margin-top: 12px; display: grid; gap: 8px; font-variant-numeric: tabular-nums; }
.report-list div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; }
.report-list dt { color: var(--label-2); font-size: 0.9375rem; }
.report-list dd { font-weight: 600; font-size: 0.9375rem; text-align: right; margin-left: auto; }
@media (max-width: 479px) {
  .report-list { gap: 12px; }
  .report-list div { flex-direction: column; gap: 0; }
  .report-list dt { font-size: 0.8125rem; color: var(--label-3); }
  .report-list dd { text-align: left; margin-left: 0; }
}
.verdict {
  margin-top: 16px; padding: 16px 18px; border-radius: 16px;
  background: var(--accent-tint);
  border: 1px solid rgba(0, 98, 196, 0.18);
}
.verdict-label { font-size: 0.8125rem; font-weight: 600; color: var(--label-2); }
.verdict-value {
  font-size: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.15;
  letter-spacing: -0.02em; color: var(--accent); margin-top: 2px;
}
.verdict-reason { font-size: 0.9375rem; color: var(--label-2); margin-top: 4px; }

/* Segmented control (HIG) */
.segmented {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  margin-top: 14px; padding: 3px; border-radius: 12px; background: var(--fill);
}
.segmented-thumb {
  position: absolute; top: 3px; left: 0; bottom: 3px; width: 0;
  border-radius: 9px; background: #ffffff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
}
.segmented.has-thumb .segmented-thumb { opacity: 1; }
.segmented.has-thumb button[aria-selected="true"] { background: transparent; box-shadow: none; }
.segmented button { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .segmented.is-ready .segmented-thumb { transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1), width 0.35s cubic-bezier(0.25, 1, 0.3, 1); }
}
.segmented button {
  min-height: 44px; padding: 0 4px; border: 0; border-radius: 9px;
  background: transparent; color: var(--label-2);
  font: inherit; font-size: 0.875rem; font-weight: 500; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.segmented button[aria-selected="true"] {
  background: #ffffff; color: var(--label); font-weight: 600;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 3px 8px rgba(0, 0, 0, 0.06);
}
.segmented button:active { opacity: 0.7; }
.segmented button:focus-visible { outline-offset: 0; }
.goal-panel { margin-top: 16px; }
.goal-title { font-weight: 600; font-size: 0.9375rem; }
.goal-panel .report-list { margin-top: 8px; }

.report-flags { margin-top: 10px; display: grid; gap: 6px; font-size: 0.9375rem; color: var(--label-2); }
.report-flags li { padding-left: 18px; position: relative; }
.report-flags li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 7px; height: 7px; border-radius: 2px; background: var(--label-3); }
@media (min-width: 640px) {
  .report-head, .report-block { padding-inline: 32px; }
}

/* ---------- Chooser (one disclosure per form), over a soft glow ---------- */

.section-glow { position: relative; isolation: isolate; }
.section-glow::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: 120px 0 -40px;
  background:
    radial-gradient(40% 35% at 15% 30%, rgba(10, 132, 255, 0.20) 0%, rgba(10, 132, 255, 0) 70%),
    radial-gradient(40% 35% at 90% 60%, rgba(111, 107, 255, 0.18) 0%, rgba(111, 107, 255, 0) 70%),
    radial-gradient(35% 30% at 40% 95%, rgba(25, 195, 182, 0.12) 0%, rgba(25, 195, 182, 0) 70%);
}
.chooser { display: grid; gap: 12px; }
.choice {
  padding: 0; overflow: hidden; scroll-margin-top: 72px;
}
@media (min-width: 640px) { .choice { padding: 0; } }
.choice-toggle {
  display: flex; align-items: center; gap: 16px;
  width: 100%; min-height: 88px; padding: 18px 20px;
  border: 0; background: transparent; text-align: left;
  font: inherit; color: var(--label); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.choice-toggle:active { background: rgba(0, 0, 0, 0.03); }
.choice-toggle:focus-visible { outline-offset: -3px; border-radius: var(--radius-tile); }
.choice-text { display: grid; gap: 2px; flex: 1; min-width: 0; }
.choice-title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.choice-sub { font-size: 0.9375rem; color: var(--label-2); }
.chevron {
  flex: none; width: 11px; height: 11px; margin-right: 4px;
  border-right: 2.2px solid var(--label-3); border-bottom: 2.2px solid var(--label-3);
  transform: translateY(-3px) rotate(45deg);
}
.choice-toggle[aria-expanded="true"] .chevron { transform: translateY(2px) rotate(-135deg); }
.choice-toggle[aria-expanded="true"] { box-shadow: inset 0 -1px 0 var(--separator); }
/* Open by default without JS; with JS, closed until chosen */
.choice-collapse { display: grid; grid-template-rows: 1fr; }
.choice-collapse > .choice-panel { min-height: 0; overflow: hidden; }
.js .choice-collapse:not(.is-open) { grid-template-rows: 0fr; }
.js .choice-collapse:not(.is-open) > .choice-panel { visibility: hidden; opacity: 0; padding-top: 0; padding-bottom: 0; }
.choice-panel { padding: 20px 20px 24px; }
.panel-intro { color: var(--label-2); font-size: 0.9375rem; margin-bottom: 20px; }
@media (min-width: 640px) {
  .choice-toggle { padding: 22px 32px; }
  .choice-panel { padding: 24px 32px 32px; }
}
@media (prefers-reduced-motion: no-preference) {
  .chevron { transition: transform 0.3s cubic-bezier(0.25, 1, 0.3, 1); }
  .choice-collapse.is-ready { transition: grid-template-rows 0.42s cubic-bezier(0.25, 1, 0.3, 1); }
  .choice-collapse.is-ready > .choice-panel { transition: padding 0.42s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.3s ease 0.06s, visibility 0s linear 0s; }
  .js .choice-collapse.is-ready:not(.is-open) > .choice-panel { transition: padding 0.42s cubic-bezier(0.25, 1, 0.3, 1), opacity 0.18s ease, visibility 0s linear 0.42s; }
}

/* ---------- Forms ---------- */

.form { display: grid; gap: 24px; }
.field { display: grid; gap: 6px; border: 0; padding: 0; min-width: 0; }
.field > label, .field > legend { font-size: 0.9375rem; font-weight: 600; padding: 0; }
legend { margin-bottom: 6px; }
.optional { font-weight: 400; color: var(--label-3); margin-left: 4px; }
.hint { font-size: 0.8125rem; color: var(--label-3); margin-top: -2px; }

input[type="text"], input[type="tel"], input[type="email"], textarea {
  width: 100%;
  min-height: 50px;
  padding: 12px 14px;
  font: inherit; font-size: max(16px, 1rem); /* 16px or more stops iOS zooming on focus */
  color: var(--label);
  background: var(--surface);
  border: 1px solid var(--field-border);
  border-radius: var(--radius-field);
  appearance: none;
}
textarea { resize: vertical; min-height: 96px; line-height: 1.45; }
input::placeholder, textarea::placeholder { color: var(--label-3); opacity: 1; }
input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(0, 98, 196, 0.35); outline-offset: 1px; border-color: var(--focus); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger) !important; background: var(--danger-tint) !important; }

.field-error {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 0.875rem; font-weight: 500; color: var(--danger);
}
.field-error::before {
  content: "!"; flex: none; display: grid; place-items: center;
  width: 18px; height: 18px; margin-top: 1px; border-radius: 50%;
  background: var(--danger); color: #ffffff; font-size: 0.75rem; font-weight: 800;
}

/* Choice pills: light glass chips */
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { position: relative; display: inline-flex; }
.pill input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pill span {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 16px;
  border: 1px solid var(--field-border); border-radius: 999px;
  font-size: 0.9375rem; color: var(--label);
  background: #ffffff;
  user-select: none;
}
.pill input:checked + span {
  border-color: var(--accent); color: var(--accent-deep); font-weight: 600;
  background: rgba(0, 98, 196, 0.1);
  box-shadow: inset 0 0 0 1px var(--accent), inset 0 0 12px rgba(255, 255, 255, 0.6);
}
.pill input:checked + span::before {
  content: ""; width: 14px; height: 14px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.5l3 3 6-6.5' fill='none' stroke='%230052a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;
}
.pill input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.pill input:active + span { opacity: 0.75; }
fieldset[data-invalid] .pill span { border-color: var(--danger); }

/* Consent */
.consent { grid-template-columns: 24px 1fr; column-gap: 12px; align-items: start; }
.consent input { width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--accent); cursor: pointer; }
.consent label { font-weight: 400; font-size: 0.9375rem; color: var(--label-2); padding-block: 1px; }
.consent .field-error { grid-column: 1 / -1; }

/* Honeypot: off-screen for people, visible to bots */
.hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Submit and status */
.form-actions { display: flex; }
.spinner {
  display: none; width: 18px; height: 18px; border-radius: 50%;
  border: 2.5px solid rgba(255, 255, 255, 0.4); border-top-color: #fff;
}
.glass-button[aria-busy="true"] .spinner { display: inline-block; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .glass-button[aria-busy="true"] .spinner { animation-duration: 2.4s; }
}
.form-status {
  border-radius: 14px; padding: 16px; background: var(--danger-tint);
  border: 1px solid var(--danger); font-size: 0.9375rem;
}
.form-status strong { display: block; color: var(--danger); margin-bottom: 4px; }
.form-status a { font-weight: 600; }

/* ---------- FAQ ---------- */

.faq { padding: 0 20px; }
.faq details + details { border-top: 1px solid var(--separator); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  min-height: 58px; padding: 14px 0;
  font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 4px;
  border-right: 2px solid var(--label-3); border-bottom: 2px solid var(--label-3);
  transform: translateY(-3px) rotate(45deg);
}
.faq details[open]:not(.is-closing) summary::after { transform: translateY(2px) rotate(-135deg); }
@media (prefers-reduced-motion: no-preference) {
  .faq summary::after { transition: transform 0.35s cubic-bezier(0.25, 1, 0.3, 1); }
}
.faq-body { overflow: hidden; }
.faq-body p { color: var(--label-2); padding-bottom: 18px; margin-top: -4px; }
.section > h2 + .faq { margin-top: 32px; }
@media (min-width: 640px) { .faq { padding: 0 32px; } }

/* ---------- Final CTA: glass over the photo ---------- */

.cta {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: 460px;
  display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 32px;
  color: #ffffff;
  background: #2b4a63;
  box-shadow: 0 24px 60px rgba(16, 40, 80, 0.18);
}
.cta-photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 74% 45%; }
.cta-scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--scrim), 0.05) 0%, rgba(var(--scrim), 0.25) 28%, rgba(var(--scrim), 0.62) 52%, rgba(var(--scrim), 0.86) 100%);
}
.cta-content { padding: 28px 24px; }
.cta h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.125rem); max-width: 16em; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.2); }
.cta-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 22px; }
@media (min-width: 640px) {
  .cta { min-height: 480px; }
  .cta-photo { object-position: 60% 45%; }
  .cta-content { padding: 44px 48px; }
}

/* ---------- Footer ---------- */

.footer {
  padding-top: 64px; padding-bottom: max(40px, env(safe-area-inset-bottom));
  font-size: 0.8125rem; color: var(--label-3);
  display: grid; gap: 8px;
}
.footer-links { display: flex; flex-wrap: wrap; gap: 0 20px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Simple pages: thanks, privacy, 404 ---------- */

.page { padding-top: clamp(32px, 7vw, 72px); }
.page h1 { font-size: clamp(2rem, 1.6rem + 2vw, 2.75rem); font-weight: 600; letter-spacing: -0.025em; line-height: 1.08; }
.page .lede { margin-top: 16px; color: var(--label-2); }
.page-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; margin-top: 32px; }
@media (min-width: 640px) { .page-actions { flex-direction: row; align-items: center; gap: 24px; } }
.prose { margin-top: 32px; }
.prose h2 { font-size: 1.25rem; margin-top: 32px; letter-spacing: -0.01em; }
.prose p, .prose ul { margin-top: 10px; color: var(--label-2); }
.prose ul { list-style: disc; padding-left: 1.25em; display: grid; gap: 6px; }
.meta { font-size: 0.875rem; color: var(--label-3); margin-top: 12px; }


/* ---------- Verdict words: the signature of the dark band ---------- */

.verdict-words {
  margin-top: clamp(28px, 5vw, 44px);
  display: flex; flex-wrap: wrap; gap: 0 0.28em;
  font-size: clamp(2.125rem, 1.5rem + 3.4vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.035em;
}
.verdict-words span {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.55) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.verdict-words span:nth-child(2) { background-image: linear-gradient(180deg, #9fd0ff 0%, rgba(159, 208, 255, 0.55) 100%); }
.verdict-words span:nth-child(3) { background-image: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0.4) 100%); }
.verdict-words + .report { margin-top: clamp(32px, 5vw, 48px); }

/* ---------- Scroll reveal ----------
   Elements rise and fade in as they enter the viewport; groups stagger.
   Only hidden when JS is running, so the page is complete without it. */

@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal], .js [data-reveal-group] > * {
    opacity: 0;
    transform: translate3d(0, 28px, 0) scale(0.985);
    transition:
      opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0ms),
      transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) var(--reveal-delay, 0ms);
  }
  .js .verdict-words [data-reveal] { transform: translate3d(0, 0.35em, 0); }
  .js .is-revealed, .js [data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: none;
  }
}
/* Reduce Motion: a short cross-fade, no movement */
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 0; transition: opacity 0.3s ease; }
  .js .is-revealed, .js [data-reveal-group].is-revealed > * { opacity: 1; }
}

/* ---------- Rubber-band scrolling ----------
   The page's own elastic edge replaces the browser's, so it looks the same everywhere.
   JS moves .page-shell (never the navbar); the hero photo stretches to fill the top gap. */

@media (prefers-reduced-motion: no-preference) {
  html.rubber { overscroll-behavior-y: none; }
  html.rubber body { overscroll-behavior-y: none; }
}
.page-shell.is-stretching { will-change: transform; }

/* ---------- Page transitions ---------- */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
}