/* Gravel. Rough stone, polished into glass: wherever glass appears, real stone sits behind it so the glass has
   something to bend. Snow page, deep earth browns, one accent. Effects are slow and contained. */

:root {
  --snow: #FAFAF8; --white: #FFFFFF;
  --stone-50: #F5F4F1; --stone-100: #EFEDE9; --stone-200: #E2DED8; --stone-300: #CFC9C1;
  --ink: #1C1612; --ink-2: #4A423C; --ink-3: #776E66;
  --brown: #55331F;          /* Saddle: buttons, brand */
  --brown-deep: #3E2516; --brown-900: #22150D;
  --brown-500: #8A5632;      /* the accent word, links, labels */
  --brown-tint: #F3ECE6;
  --tan: #D7B08A;            /* the accent on dark ground */
  --good: #2F7A4F; --star: #B98530;
  --display: "Schibsted Grotesk", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --body: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ease: cubic-bezier(.22, .7, .2, 1);
  --spring: linear(0, .044 4%, .149 8%, .28 12%, .417 16%, .546 20%, .686 25%, .796 30%, .891 36%, .953 42%, .996 50%, 1.014 60%, 1.012 75%, 1);
  --gutter: clamp(16px, 4vw, 32px);
  --w-wide: 1200px; --w: 1080px; --w-text: 760px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--snow); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; background: var(--snow); color: var(--ink); font: 400 17px/1.6 var(--body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
img, svg { display: block; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol { margin: 0; }
p, li { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
:focus-visible { outline: 2.5px solid var(--brown-500); outline-offset: 3px; border-radius: 6px; }
::selection { background: #E7D6C6; color: var(--ink); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.skip { position: fixed; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 12px; background: var(--ink); color: #fff; font-weight: 600; text-decoration: none; transition: top .2s; }
.skip:focus { top: 16px; }

/* ── the glass ─────────────────────────────────────────────────────────────────────────────────────────────
   1 a tinted fill, 2 blur + saturation of what's behind, 3 edge refraction in Chromium (a per-element displacement
   map built in site.js), 4 a bright top rim and a darker bottom rim (one light, from above), 5 a slow specular sheen
   that drifts toward the pointer, 6 a soft lift shadow. Variants: regular = carries text (>= 60% snow fill keeps dark
   text >= 4.5:1 even over black); light = controls on the snow page; bare .glass = clear, decoration only. */
.glass {
  position: relative; isolation: isolate; border-radius: var(--r, 26px);
  background: linear-gradient(180deg, rgba(255, 255, 255, .20), rgba(255, 255, 255, .06));
  -webkit-backdrop-filter: blur(10px) saturate(160%); backdrop-filter: blur(10px) saturate(160%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(20, 12, 6, .3), 0 1px 2px rgba(20, 12, 6, .2), 0 16px 32px -18px rgba(20, 12, 6, .55);
}
.glass.lensed { -webkit-backdrop-filter: var(--lens) blur(1px) saturate(160%) brightness(1.06); backdrop-filter: var(--lens) blur(1px) saturate(160%) brightness(1.06); }
.glass::before {            /* rim light: a gradient hairline, brightest at the top */
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(170deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .14) 30%, rgba(255, 255, 255, .03) 60%, rgba(255, 255, 255, .28));
  -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);
}
.glass::after {             /* specular sheen under the content; follows the pointer slowly */
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(90% 70% at var(--sx) var(--sy), rgba(255, 255, 255, .3), transparent 62%);
  transition: --sx 1.6s var(--ease), --sy 1.6s var(--ease);
}
@property --sx { syntax: "<percentage>"; inherits: true; initial-value: 30%; }
@property --sy { syntax: "<percentage>"; inherits: true; initial-value: -10%; }

.glass.regular {
  color: var(--ink);
  --ink-3: #574E47;
  background: linear-gradient(180deg, rgba(251, 250, 247, .82), rgba(251, 250, 247, .74));
  -webkit-backdrop-filter: blur(18px) saturate(150%) brightness(1.05); backdrop-filter: blur(18px) saturate(150%) brightness(1.05);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(43, 30, 21, .12), inset 0 0 0 1px rgba(255, 255, 255, .22),
              0 1px 2px rgba(20, 12, 6, .14), 0 var(--lift-y) var(--lift-blur) -20px rgba(20, 12, 6, var(--lift-a));
}
@property --lift-y { syntax: "<length>"; inherits: false; initial-value: 18px; }
@property --lift-blur { syntax: "<length>"; inherits: false; initial-value: 36px; }
@property --lift-a { syntax: "<number>"; inherits: false; initial-value: .55; }
.glass.regular.lensed { -webkit-backdrop-filter: var(--lens) blur(14px) saturate(140%) brightness(1.06); backdrop-filter: var(--lens) blur(14px) saturate(140%) brightness(1.06); }
.glass.light {
  background: linear-gradient(180deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .6));
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(28, 22, 18, .07), inset 0 0 0 1px rgba(28, 22, 18, .055),
              0 1px 2px rgba(28, 22, 18, .06), 0 12px 32px -18px rgba(28, 22, 18, .32);
}
.glass.light::after { background: radial-gradient(90% 70% at var(--sx) var(--sy), rgba(255, 255, 255, .7), transparent 62%); }
/* tinted: a dark brown pane for the one card that should lead (the Gravel plan); snow text on it */
.glass.tinted {
  color: #FAF6F1;
  background: linear-gradient(180deg, rgba(66, 41, 26, .86), rgba(36, 22, 14, .92));
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 228, 200, .36), inset 0 -1px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 236, 216, .1),
              0 1px 2px rgba(0, 0, 0, .3), 0 var(--lift-y) var(--lift-blur) -20px rgba(8, 5, 3, var(--lift-a));
}
.glass.tinted.lensed { -webkit-backdrop-filter: var(--lens) blur(14px) saturate(140%); backdrop-filter: var(--lens) blur(14px) saturate(140%); }
.glass.tinted::before { background: linear-gradient(170deg, rgba(255, 230, 205, .75), rgba(255, 230, 205, .1) 30%, rgba(255, 230, 205, .02) 60%, rgba(255, 230, 205, .22)); }
.glass.tinted::after { background: radial-gradient(90% 70% at var(--sx) var(--sy), rgba(255, 225, 195, .14), transparent 62%); }

/* ── type ───────────────────────────────────────────────────────────────────────────────────────────────── */
.eyebrow { font: 500 12px/1.2 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--brown-500); }
.stars { display: inline-flex; gap: 2px; color: var(--star); }
.stars svg { width: 15px; height: 15px; }
.stars.sm svg { width: 11px; height: 11px; }

/* ── buttons ────────────────────────────────────────────────────────────────────────────────────────────── */
.btn {
  --h: 48px; --r: 999px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: var(--h); padding: 0 24px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap;
  font: 600 15.5px/1 var(--body); letter-spacing: -.005em; text-decoration: none; color: var(--ink);
  transition: transform .45s var(--spring), box-shadow .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.btn .arw { width: 18px; height: 18px; margin-right: -4px; transition: transform .45s var(--spring); }
.btn:hover .arw { transform: translateX(3px); }
.btn:active { transform: translateY(1px) scale(.985); }
.btn.lg { --h: 54px; padding: 0 28px; font-size: 16.5px; }
.btn.sm { --h: 42px; padding: 0 18px; font-size: 14.5px; }
.btn.block { width: 100%; }
.m-only { display: none; }
@media (max-width: 760px) { .m-only { display: inline; } .d-only { display: none; } }
.btn.primary {               /* a polished brown stone: lit from above, darker underneath */
  color: #fff; background: linear-gradient(180deg, #6C422A 0%, #55331F 54%, #4A2B1A 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 -1px 0 rgba(0, 0, 0, .28), 0 1px 2px rgba(34, 21, 13, .35), 0 10px 22px -10px rgba(62, 37, 22, .75);
}
.btn.primary:hover { background: linear-gradient(180deg, #774A2F 0%, #5D3823 54%, #4F2E1C 100%); transform: translateY(-1px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 0, 0, .28), 0 2px 4px rgba(34, 21, 13, .3), 0 16px 28px -12px rgba(62, 37, 22, .8); }
.btn.primary:active { transform: translateY(1px) scale(.985); }
.btn.glass.light:hover { transform: translateY(-1px); }
.btn.snow { color: var(--brown); background: linear-gradient(180deg, #FFFFFF, #F1ECE6); box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(62, 37, 22, .18), 0 10px 26px -12px rgba(0, 0, 0, .6); }
.btn.snow:hover { transform: translateY(-1px); }
.btn.glass.clear { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); }
.btn.glass.clear:hover { background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .1)); transform: translateY(-1px); }

/* ── nav ────────────────────────────────────────────────────────────────────────────────────────────────── */
.nav-wrap { position: fixed; top: 12px; left: 0; right: 0; z-index: 50; padding: 0 var(--gutter); pointer-events: none; }
.nav { --r: 999px; pointer-events: auto; margin: 0 auto; width: min(1040px, 100%); height: 60px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 18px; transition: box-shadow .4s var(--ease); }
.nav.scrolled { box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(28, 22, 18, .08), inset 0 0 0 1px rgba(28, 22, 18, .07), 0 2px 6px rgba(28, 22, 18, .06), 0 18px 40px -20px rgba(28, 22, 18, .4); }
.brand { display: inline-flex; align-items: center; gap: 9px; font: 800 21px/1 var(--display); letter-spacing: -.035em; color: var(--ink); text-decoration: none; border-radius: 10px; }
.brand svg { width: 27px; height: 27px; }
.links { display: flex; gap: 2px; margin-left: 18px; }
.links a, .nav-login { padding: 9px 13px; border-radius: 999px; font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; transition: color .2s, background-color .2s; }
.links a:hover, .nav-login:hover { color: var(--ink); background: rgba(28, 22, 18, .05); }
.links a[aria-current="true"] { color: var(--ink); background: rgba(28, 22, 18, .06); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-login { font-weight: 600; color: var(--ink); }
.menu-btn { display: none; width: 42px; height: 42px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); cursor: pointer; place-items: center; }
.menu-btn svg { width: 22px; height: 22px; }
.menu-btn:hover { background: rgba(28, 22, 18, .05); }
.menu { --r: 26px; pointer-events: auto; margin: 8px auto 0; width: min(1040px, 100%); padding: 10px; display: grid; }
.menu[hidden] { display: none; }
.menu a { padding: 14px 16px; border-radius: 16px; font-size: 17px; font-weight: 600; text-decoration: none; color: var(--ink); }
.menu a:hover { background: rgba(28, 22, 18, .05); }

/* ── hero ───────────────────────────────────────────────────────────────────────────────────────────────── */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding-top: clamp(120px, 11vw, 152px); }
.daylight {                  /* a soft band of warm daylight falling across the top of the page */
  position: absolute; z-index: -1; top: -320px; right: -14%; width: 72%; height: 1100px; pointer-events: none;
  background: linear-gradient(115deg, transparent 34%, rgba(232, 220, 207, .5) 46%, rgba(244, 238, 231, .9) 52%, rgba(232, 220, 207, .38) 59%, transparent 72%);
  filter: blur(34px); transform: rotate(-4deg);
}
.hero-copy { width: min(940px, 100% - 2 * var(--gutter)); margin: 0 auto; text-align: center; }
.hero h1 { margin-top: 22px; font: 800 clamp(48px, 8.6vw, 112px)/.93 var(--display); letter-spacing: -.055em; color: var(--ink); }
.hero h1 span, .hero h1 em { display: block; }
.hero h1 { word-spacing: .1em; }
.section-head h2, .feature-copy h3, .ground h2, .start-main h1, .pc-price, .note h3, .site-h, .plan-h h3 { word-spacing: .07em; }
.hero h1 em { font-style: normal; color: var(--brown-500); }
.lede { max-width: 600px; margin: 30px auto 0; font-size: clamp(17px, 1.55vw, 19.5px); line-height: 1.58; color: var(--ink-2); text-wrap: balance; }
.ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 36px; }
.facts { --r: 999px; display: inline-flex; align-items: center; margin-top: 30px; padding: 6px; font-size: 14px; color: var(--ink-2); }
.facts li { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; }
.facts li + li { border-left: 1px solid rgba(28, 22, 18, .1); }
.facts b { color: var(--ink); font-weight: 650; }

/* load: one staggered rise, then still. Surfaces never move: the hero slab only fades in. */
.rise { animation: rise 1s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 80ms); }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
.hero-slab.rise { animation-name: rise-fade; }
@keyframes rise-fade { from { opacity: 0; } }

/* drop: cards lie on the stone at their own resting angle. With motion allowed, site.js holds each card back
   (.drop-wait) until 20% of its landing spot is on screen, then lands it with a short physics pass. */
[data-drop] { transform: rotate(var(--rest, 0deg)); }
.drops [data-drop]:not(.landed) { opacity: 0; }

/* ── stone surfaces (slabs and tiles): real gravel photos; the glass sits on them ─────────────────────────── */
.slab { position: relative; overflow: hidden; overflow: clip; background: #22160E; }
.slab > .stone, .tile > .stone, .ground > .stone { position: absolute; inset: 0; background-repeat: no-repeat; background-size: cover; background-position: center; }
.slab > .shade, .ground > .shade { position: absolute; inset: 0; pointer-events: none; }
.js [data-lazy]:not(.near) > .stone { background-image: none !important; }
.js [data-lazy] > .stone { transition: opacity .8s var(--ease); }
.js [data-lazy]:not(.near) > .stone { opacity: 0; }
.example { position: absolute; right: 16px; bottom: 15px; z-index: 3; padding: 6px 10px 5px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .8); background: rgba(24, 15, 9, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }

.hero-slab { width: min(var(--w-wide), 100% - 2 * var(--gutter)); height: 600px; margin: 60px auto 0; border-radius: 38px; }
.hero-slab > .stone { background-image: url(img/stone-dark.webp); background-image: image-set(url(img/stone-dark-sm.webp) 1x, url(img/stone-dark.webp) 2x); }
.hero-slab > .shade { background: radial-gradient(130% 100% at 50% 8%, rgba(20, 12, 7, 0) 45%, rgba(20, 12, 7, .5) 100%), linear-gradient(180deg, rgba(20, 12, 7, .12), rgba(20, 12, 7, 0) 26%); }

/* notifications: glass cards that carry text */
.note { position: absolute; width: 344px; padding: 13px 16px 16px; --r: 24px; font-size: 14px; line-height: 1.45; text-align: left; }
.note-h { display: flex; align-items: center; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.note-h .app { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: linear-gradient(180deg, #6C422A, #4A2B1A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 1px 2px rgba(34, 21, 13, .3); }
.note-h .app svg { width: 15px; height: 15px; color: #fff; }
.note-h time { margin-left: auto; font: 400 12px/1 var(--body); letter-spacing: 0; text-transform: none; color: var(--ink-3); }
.note h3 { margin: 10px 0 2px; font: 700 16.5px/1.28 var(--display); letter-spacing: -.02em; color: var(--ink); }
.note p { color: var(--ink-2); }
.note .stars { margin-top: 10px; }
.note-f { display: flex; align-items: center; justify-content: space-between; margin-top: 12px; padding-top: 11px; border-top: 1px solid rgba(28, 22, 18, .08); font-size: 12.5px; color: var(--ink-3); }
.note-f .act { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px 5px 9px; border-radius: 999px; background: var(--brown); color: #fff; font-weight: 600; }
.note-f .act svg { width: 13px; height: 13px; }
.bubbles { display: grid; gap: 8px; margin-top: 12px; }
.bubble { max-width: 88%; padding: 9px 13px; border-radius: 19px; font-size: 13.5px; line-height: 1.4; }
.bubble.out { justify-self: end; margin-left: auto; background: linear-gradient(180deg, #623B25, #55331F); color: #fff; border-bottom-right-radius: 6px; }
.bubble.in { justify-self: start; background: rgba(255, 255, 255, .9); color: var(--ink); border-bottom-left-radius: 6px; box-shadow: 0 0 0 1px rgba(28, 22, 18, .06); }
.slab-label { position: absolute; left: 18px; top: 16px; z-index: 3; padding: 6px 10px 5px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .86); background: rgba(24, 15, 9, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); pointer-events: none; }
.trades { width: min(var(--w), 100% - 2 * var(--gutter)); margin: clamp(56px, 6vw, 72px) auto 0; text-align: center; }
.trades p { font-size: 14.5px; color: var(--ink-3); }
.trades ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px clamp(20px, 2.6vw, 34px); margin-top: 14px; }
.trades li { display: inline-flex; align-items: center; font: 650 clamp(16px, 1.6vw, 19px)/1.3 var(--display); letter-spacing: -.015em; color: var(--ink-2); }
.hero-slab .n1 { left: 5.5%; top: 104px; }
.hero-slab .n2 { left: 50%; top: 300px; width: 388px; margin-left: -194px; }
.hero-slab .n3 { right: 5.5%; top: 146px; width: 330px; }

/* ── sections ───────────────────────────────────────────────────────────────────────────────────────────── */
.section { padding-top: clamp(112px, 13vw, 176px); }
.section-head { width: min(940px, 100% - 2 * var(--gutter)); margin: 0 auto; text-align: center; }
.section-head h2 { margin-top: 18px; font: 800 clamp(34px, 4.7vw, 58px)/1.03 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.section-head h2 span { color: var(--ink-3); }
.section-head h2 span { display: block; }
.section-lede { max-width: 540px; margin: 22px auto 0; font-size: 18.5px; color: var(--ink-2); text-wrap: balance; }

/* what you get */
.features { width: min(var(--w), 100% - 2 * var(--gutter)); margin: clamp(64px, 8vw, 104px) auto 0; display: grid; gap: clamp(88px, 10vw, 136px); }
.feature { display: grid; grid-template-columns: minmax(0, 43fr) minmax(0, 57fr); gap: clamp(36px, 6vw, 88px); align-items: center; }
.feature.flip { grid-template-columns: minmax(0, 57fr) minmax(0, 43fr); }
.feature.flip .feature-copy { order: 2; }
.feature-copy h3 { font: 800 clamp(28px, 2.9vw, 38px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.plan-tag { display: inline-flex; align-items: center; margin-bottom: 16px; padding: 7px 11px 6px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brown); background: var(--brown-tint); box-shadow: inset 0 0 0 1px rgba(85, 51, 31, .12); }
.plan-tag.gravel { color: #F3DEC8; background: linear-gradient(180deg, #5D3823, #4A2B1A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 4px 10px -6px rgba(62, 37, 22, .7); }
.feature-copy > p { margin-top: 16px; max-width: 440px; font-size: 17.5px; color: var(--ink-2); }
.checks { display: grid; gap: 12px; margin-top: 26px; }
.checks li { display: flex; align-items: flex-start; gap: 12px; font-weight: 500; color: var(--ink); line-height: 1.45; }
.checks li::before {
  content: ""; flex: none; width: 22px; height: 22px; margin-top: 0; border-radius: 50%;
  background: var(--brown-tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.4 3 3 6-6.4' fill='none' stroke='%2355331F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  box-shadow: inset 0 0 0 1px rgba(85, 51, 31, .1);
}

/* tiles: a stone surface with a vignette authored at a fixed stage size, scaled to the tile's width by site.js */
.tile { --stage-w: 560; --stage-h: 476; position: relative; overflow: hidden; overflow: clip; border-radius: 34px; aspect-ratio: 560 / 476; background: #E6E1D9; isolation: isolate; }
.tile > .stone { z-index: 0; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none;
  background: radial-gradient(120% 90% at 30% 0%, rgba(255, 255, 255, .16), transparent 55%), radial-gradient(150% 120% at 50% 45%, transparent 58%, rgba(64, 44, 28, .22));
  box-shadow: inset 0 0 0 1px rgba(28, 22, 18, .06); }
.tile .example { padding: 6px 9px 5px; border-radius: 999px; background: rgba(250, 250, 248, .78); color: var(--ink-3); box-shadow: 0 0 0 1px rgba(28, 22, 18, .06); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stage { position: absolute; left: 0; top: 0; z-index: 2; width: calc(var(--stage-w) * 1px); height: calc(var(--stage-h) * 1px); transform: scale(var(--s, 1)); transform-origin: 0 0; }
.t-site > .stone { background-image: url(img/pebble-gray.webp); background-image: image-set(url(img/pebble-gray-sm.webp) 1x, url(img/pebble-gray.webp) 2x); background-position: 50% 50%; background-size: 125% auto; }
.t-gbp > .stone { background-image: url(img/pebble-light.webp); background-image: image-set(url(img/pebble-light-sm.webp) 1x, url(img/pebble-light.webp) 2x); background-position: 50% 45%; background-size: 125% auto; }
.t-leads > .stone { background-image: url(img/marble-white.webp); background-image: image-set(url(img/marble-white-sm.webp) 1x, url(img/marble-white.webp) 2x); background-position: 50% 50%; background-size: 150% auto; }
.t-reviews > .stone { background-image: url(img/pea-light.webp); background-image: image-set(url(img/pea-light-sm.webp) 1x, url(img/pea-light.webp) 2x); background-position: 45% 55%; background-size: 160% auto; }

.chip { position: absolute; display: flex; align-items: center; gap: 11px; padding: 10px 16px 10px 10px; --r: 999px; font-size: 12.5px; line-height: 1.25; }
.chip-ic { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(180deg, #6C422A, #4A2B1A); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.chip-ic.green { background: linear-gradient(180deg, #3D9A65, #2B7A4D); }
.chip-ic svg { width: 16px; height: 16px; }
.chip-t { display: grid; }
.chip-t b { font-weight: 650; font-size: 13.5px; color: var(--ink); }
.chip-t small { font-size: 12px; color: var(--ink-3); }

/* vignette 1: the example website on an iPhone 16 Pro Max in Desert Titanium, lying face up on the stones */
.iphone { position: absolute; left: 244px; top: 30px; width: 270px; height: 580px; }
.ip-body { position: absolute; inset: 0; z-index: 1; border-radius: 47px; padding: 3px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 5%, rgba(255, 255, 255, 0) 95%, rgba(0, 0, 0, .22)),
    linear-gradient(90deg, #8C735D 0%, #D7C1AB 6%, #F2E6D7 10%, #C2A78C 24%, #CDB59D 50%, #B69A7F 76%, #E9DACA 90%, #CDB39A 95%, #876E58 100%);
  box-shadow: 0 0 0 .6px rgba(60, 40, 24, .55), 0 1.5px 2px rgba(20, 12, 6, .35), 0 8px 14px -6px rgba(20, 12, 6, .32), 0 28px 44px -16px rgba(20, 12, 6, .55); }
.ip-bezel { height: 100%; border-radius: 44px; padding: 6px; background: #080706; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 0 2.2px rgba(0, 0, 0, .7); }
.ip-screen { position: relative; height: 100%; border-radius: 38px; overflow: hidden; background: #FBFAF7; }
.ip-key { position: absolute; z-index: 0; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #7B6551, #D8C3AC 55%, #A0846A); box-shadow: 0 0 0 .5px rgba(60, 40, 24, .5); }
.ip-action { left: -2.6px; top: 102px; height: 26px; }
.ip-vol-up { left: -2.6px; top: 146px; height: 46px; }
.ip-vol-down { left: -2.6px; top: 202px; height: 46px; }
.ip-side { right: -2.6px; top: 166px; height: 74px; background: linear-gradient(270deg, #7B6551, #D8C3AC 55%, #A0846A); }
.ip-cc { position: absolute; z-index: 2; right: -.6px; top: 318px; width: 3px; height: 42px; border-radius: 2px; background: linear-gradient(270deg, #1C1814, #4B433B 60%, #29231E); box-shadow: 0 0 0 .5px rgba(0, 0, 0, .45); }
.ip-band { position: absolute; z-index: 2; width: 3px; height: 5px; background: rgba(72, 54, 40, .6); }
.ip-band-l { left: 0; top: 62px; } .ip-band-r { right: 0; top: 62px; }
/* iOS centres the time in the left ear and the indicators in the right ear, so neither crowds the Dynamic Island.
   Island and icons are at the real 16 Pro Max proportions (island = 29% of the screen width), the time a touch larger to stay legible. */
.ip-status { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; height: 42px; padding: 0 12px; color: #0B0B0C; }
.ip-time { justify-self: center; font: 650 13px/1 var(--body); letter-spacing: -.01em; }
.ip-island { position: relative; width: 74px; height: 22px; margin-top: 1px; border-radius: 999px; background: #000; }
.ip-lens { position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: radial-gradient(circle at 34% 32%, #34405a 0 14%, #0f131b 42%, #050608 72%); }
.ip-ind { justify-self: center; display: flex; align-items: center; gap: 4px; }
.ip-ind svg { fill: currentColor; }
.ip-signal { width: 14px; height: 9.2px; }
.ip-wifi { width: 12.5px; height: 9.4px; }
.ip-batt { width: 22px; height: 10.2px; }
.site { position: relative; padding: 0 10px; }
.site-nav { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 2px; }
.site-logo { flex: none; width: 27px; height: 27px; border-radius: 8px; display: grid; place-items: center; background: linear-gradient(180deg, #36463C, #26322B); color: #F3EFE6; font: 800 13.5px/1 var(--display); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 2px 5px -2px rgba(30, 40, 34, .6); }
.site-name { display: grid; gap: 2px; font: 800 13px/1 var(--display); letter-spacing: -.015em; color: #1D2621; }
.site-name b { font: 600 7.5px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: #6B776F; }
.site-call { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; height: 29px; padding: 0 12px; border-radius: 999px; background: linear-gradient(180deg, #34443A, #26322B); color: #fff; font: 650 11px/1 var(--body); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 4px 10px -4px rgba(30, 40, 34, .7); }
.site-call svg { width: 11px; height: 11px; }
.site-hero { position: relative; margin-top: 4px; height: 216px; border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; padding: 16px 14px 14px; color: #fff;
  background: linear-gradient(180deg, rgba(14, 20, 17, 0) 0%, rgba(14, 20, 17, .3) 34%, rgba(14, 20, 17, .9) 100%), url(img/site-kitchen.webp) 50% 40% / cover, #33413A;
  background: linear-gradient(180deg, rgba(14, 20, 17, 0) 0%, rgba(14, 20, 17, .3) 34%, rgba(14, 20, 17, .9) 100%), image-set(url(img/site-kitchen-sm.webp) 1x, url(img/site-kitchen.webp) 2x) 50% 40% / cover, #33413A; }
.js .t-site:not(.near) .site-hero { background: #33413A; }
.site-hero > span { position: relative; }
.site-k { font: 500 7.5px/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.site-h { margin-top: 8px; font: 800 21px/1.02 var(--display); letter-spacing: -.035em; text-wrap: balance; text-shadow: 0 1px 14px rgba(0, 0, 0, .3); }
.site-ctas { display: flex; gap: 6px; margin-top: 12px; }
.site-btn { display: inline-flex; align-items: center; height: 29px; padding: 0 12px; border-radius: 999px; background: #fff; color: #1F2A24; font: 650 10.5px/1 var(--body); box-shadow: 0 4px 12px -6px rgba(0, 0, 0, .5); }
.site-btn.ghost { background: rgba(255, 255, 255, .12); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5); }
.site-proof { display: flex; align-items: center; gap: 6px; padding: 12px 4px 2px; font: 500 10.5px/1 var(--body); color: #56615A; }
.site-proof b { color: #1D2621; font-weight: 700; }
.site-sec { margin-top: 12px; padding: 12px; border-radius: 18px; background: #F1EEE8; }
.site-sec-h { display: block; font: 800 13px/1 var(--display); letter-spacing: -.015em; color: #1D2621; }
.site-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.site-svc span { display: flex; align-items: center; gap: 7px; height: 34px; padding: 0 9px; border-radius: 11px; background: #fff; font: 600 10.5px/1 var(--body); color: #1D2621; box-shadow: 0 1px 2px rgba(30, 40, 34, .08); }
.site-svc svg { flex: none; width: 14px; height: 14px; color: #2E3B33; }
.ip-glare { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, .05) 24%, rgba(255, 255, 255, 0) 40%); }
.c-call { left: 26px; top: 300px; }
.t-site .example { left: 16px; right: auto; }

/* vignette 2: the business profile */
.listing { position: absolute; left: 112px; top: 46px; width: 336px; padding: 18px 18px 16px; --r: 26px; font-size: 13px; line-height: 1.4; }
.l-name { display: block; font: 700 19px/1.2 var(--display); letter-spacing: -.02em; }
.l-rate { display: flex; align-items: center; gap: 6px; margin-top: 6px; color: var(--ink-3); }
.l-rate b { color: var(--ink); font-weight: 600; }
.l-meta { margin-top: 3px; color: var(--ink-3); }
.l-open { display: flex; align-items: center; gap: 6px; margin-top: 3px; font-weight: 600; color: var(--good); }
.l-open span { font-weight: 400; color: var(--ink-3); }
.l-actions { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-top: 16px; text-align: center; font-size: 11.5px; font-weight: 500; color: var(--brown); }
.l-actions span { display: grid; justify-items: center; gap: 6px; }
.l-actions i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .7); box-shadow: inset 0 0 0 1px rgba(85, 51, 31, .16); }
.l-actions span:first-child i { background: var(--brown); color: #fff; box-shadow: none; }
.l-actions svg { width: 16px; height: 16px; }
.l-post { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(28, 22, 18, .09); }
.l-k { font: 500 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.l-post p { margin-top: 7px; color: var(--ink-2); }
.c-photos { left: 300px; top: 372px; }

/* vignette 3: leads and the missed-call text-back */
.thread { position: absolute; left: 30px; top: 148px; width: 340px; padding: 14px 16px 16px; --r: 26px; display: grid; gap: 8px; }
.t-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(28, 22, 18, .08); }
.t-av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #E4DDD4; color: var(--ink-2); font: 600 12px/1 var(--body); }
.t-head b { display: block; font-size: 13.5px; font-weight: 650; }
.t-head small { display: block; font-size: 11.5px; color: var(--ink-3); }
.t-sys { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 4px 0 2px; font: 500 11.5px/1.2 var(--body); color: var(--ink-3); }
.t-sys svg { width: 15px; height: 15px; color: #B4442F; }
.t-auto { justify-self: end; margin-top: -4px; font-size: 10.5px; color: var(--ink-3); }
.n-lead { left: 236px; top: 28px; width: 296px; }

/* vignette 4: review request and the automatic follow-up */
.ask { position: absolute; left: 30px; top: 40px; width: 322px; padding: 14px 16px 16px; --r: 26px; display: grid; gap: 10px; }
.ask .t-sys { justify-content: flex-start; padding: 0; }
.ask .bubble { max-width: 100%; }
.linkcard { justify-self: end; width: 86%; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; background: rgba(255, 255, 255, .9); box-shadow: 0 0 0 1px rgba(28, 22, 18, .07); font-size: 12px; line-height: 1.3; }
.linkcard b { display: block; font-size: 12.5px; }
.linkcard small { color: var(--ink-3); }
.lc-ic { flex: none; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: #F6EBDD; color: var(--star); }
.lc-ic svg { width: 16px; height: 16px; }
.track { position: absolute; left: 302px; top: 254px; width: 236px; padding: 16px 18px; --r: 24px; }
.track ol { display: grid; gap: 0; }
.track li { position: relative; display: grid; grid-template-columns: 15px 1fr auto; align-items: center; column-gap: 9px; padding: 0 0 12px; font-size: 12.5px; line-height: 1.3; }
.track li:last-child { padding-bottom: 0; }
.track li:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 17px; bottom: 1px; width: 1px; background: rgba(85, 51, 31, .22); }
.track .tk { width: 15px; height: 15px; color: var(--brown); }
.track li.win .tk { color: var(--star); }
.track li b { font-weight: 600; color: var(--ink); }
.track li span { color: var(--ink-3); }

/* the small three */
.minis { width: min(var(--w), 100% - 2 * var(--gutter)); margin: clamp(96px, 11vw, 140px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 48px); }
.minis li { padding-top: 24px; border-top: 1px solid var(--stone-200); }
.mini-ic { display: block; width: 62px; height: 62px; margin-left: -5px; filter: drop-shadow(0 1px 1px rgba(43, 26, 16, .3)) drop-shadow(0 7px 8px rgba(43, 26, 16, .22)); }
.mini-ic svg { width: 62px; height: 62px; overflow: visible; }
.mi-sheen { fill: none; stroke: #fff; stroke-opacity: .5; stroke-width: 2; stroke-linecap: round; }
.mi-cut, .mi-glyph { fill: none; stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round; }
.mi-cut { stroke: #160A04; stroke-opacity: .5; transform: translateY(1px); }
.mi-cut circle { fill: #160A04; }
.mi-glyph { stroke: #F5E9DB; }
.mi-glyph .knob { fill: #4E2E1B; }
.minis h3 { margin-top: 18px; font: 750 20px/1.2 var(--display); letter-spacing: -.02em; }
.minis p { margin-top: 8px; font-size: 15.5px; color: var(--ink-2); }

/* how it works: a gravel path with four glass stepping stones */
.path { width: min(var(--w), 100% - 2 * var(--gutter)); height: 176px; margin: clamp(56px, 7vw, 88px) auto 0; border-radius: 999px; }
.path > .stone { background-image: url(img/stone-dark.webp); background-position: 50% 62%; background-size: 130% auto; }
.path > .shade { background: radial-gradient(100% 140% at 50% 50%, rgba(20, 12, 7, 0) 40%, rgba(20, 12, 7, .45)); }
.path-row { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); align-items: center; justify-items: center; }
.step-stone { --r: 999px; width: 132px; height: 84px; display: grid; place-items: center; transform: rotate(var(--rot, 0deg)); color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); }
.step-stone b { font: 800 32px/1 var(--display); letter-spacing: -.03em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 2px 16px rgba(0, 0, 0, .35); }
.steps { width: min(var(--w), 100% - 2 * var(--gutter)); margin: 36px auto 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; text-align: center; }
.steps { counter-reset: step; }
.steps li { counter-increment: step; }
.steps h3 { font: 750 21px/1.2 var(--display); letter-spacing: -.02em; }
.steps p { max-width: 240px; margin: 8px auto 0; font-size: 15.5px; color: var(--ink-2); }
.time { display: inline-block; margin-top: 16px; padding: 6px 11px; border-radius: 999px; background: var(--stone-100); font: 500 11.5px/1 var(--mono); letter-spacing: .04em; color: var(--ink-2); box-shadow: inset 0 0 0 1px rgba(28, 22, 18, .05); }

/* pricing: two plans resting on the stones */
.price-slab { width: min(var(--w), 100% - 2 * var(--gutter)); margin: clamp(56px, 7vw, 88px) auto 0; padding: 76px clamp(20px, 5vw, 64px) 34px; border-radius: 40px; display: grid; justify-items: center; }
.price-slab > .stone { background-image: url(img/pebble-dark.webp); background-image: image-set(url(img/pebble-dark-sm.webp) 1x, url(img/pebble-dark.webp) 2x); background-position: 50% 50%; }
.price-slab > .shade { background: radial-gradient(70% 80% at 50% 45%, rgba(20, 12, 7, .12), rgba(20, 12, 7, .55)); }
.plans { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; width: min(880px, 100%); align-items: stretch; }
.plan { display: flex; flex-direction: column; padding: 30px 28px 26px; --r: 30px; }
.plan-pebble { background: linear-gradient(180deg, rgba(251, 250, 247, .9), rgba(251, 250, 247, .84)); }
.plan-note { margin: -10px 0 22px; font-size: 13px; line-height: 1.5; color: rgba(250, 246, 241, .62); }
.plan-h { display: flex; align-items: center; gap: 11px; }
.plan-mark { width: 30px; height: 30px; }
.plan-h h3 { font: 800 28px/1 var(--display); letter-spacing: -.035em; }
.plan-tagline { margin-top: 10px; font-size: 15.5px; color: var(--ink-2); }
.pc-price { display: flex; align-items: flex-start; margin-top: 22px; font-family: var(--display); color: var(--ink); }
.pc-price .cur { margin: 8px 2px 0 0; font-size: 30px; font-weight: 700; }
.pc-price .amt { font-size: 80px; font-weight: 800; line-height: .86; letter-spacing: -.055em; }
.pc-price .per { align-self: flex-end; margin: 0 0 4px 8px; font: 500 16px/1 var(--body); color: var(--ink-3); }
.pc-list { margin: 22px 0 26px; padding-top: 22px; border-top: 1px solid rgba(28, 22, 18, .1); gap: 11px; font-size: 15px; }
.plan .pc-list { flex: 1; align-content: start; }
.pc-list li::before { width: 20px; height: 20px; background-size: 13px; }
.pc-list b { font-weight: 650; }
.plan-flag { position: absolute; top: -13px; right: 22px; z-index: 4; padding: 7px 12px 6px; border-radius: 999px; background: linear-gradient(180deg, #E6C6A3, #D2A97F); color: #2B1A10; font: 600 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 6px 14px -6px rgba(0, 0, 0, .55); }
.plan-gravel .plan-h h3, .plan-gravel .pc-price { color: #FAF6F1; }
.plan-gravel .plan-tagline { color: rgba(250, 246, 241, .8); }
.plan-gravel .pc-price .per { color: rgba(250, 246, 241, .62); }
.plan-gravel .pc-list { border-top-color: rgba(250, 246, 241, .14); }
.plan-gravel .checks li { color: #F4EEE8; }
.plan-gravel .checks li::before { background: rgba(215, 176, 138, .2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.4 3 3 6-6.4' fill='none' stroke='%23E8C7A3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat; box-shadow: inset 0 0 0 1px rgba(215, 176, 138, .32); }
.price-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 24px; width: min(880px, 100%); margin-top: 34px; padding-top: 22px; border-top: 1px solid rgba(250, 246, 241, .14); font-size: 14.5px; line-height: 1.55; color: rgba(250, 246, 241, .82); }
.price-foot a { color: #F3DEC8; font-weight: 600; text-underline-offset: 3px; text-decoration-color: rgba(243, 222, 200, .4); }
/* "Protected by Cloudflare" in words (their rules allow the name in words; the logo only inside their orange badges), on a darker glass capsule */
.cf-pill { --r: 999px; flex: none; display: inline-flex; align-items: center; gap: 10px; height: 46px; margin: 0; padding: 0 20px 0 15px; white-space: nowrap;
  font-size: 14px; line-height: 1; letter-spacing: -.005em; }
.cf-pill.glass.tinted { color: rgba(250, 246, 241, .86); background: linear-gradient(180deg, rgba(30, 19, 12, .62), rgba(14, 9, 6, .8)); }
.cf-pill b { font-weight: 650; color: #FAF6F1; }
.cf-pill svg { width: 19px; height: 19px; color: #E6C9AC; }
.step-stone { -webkit-backdrop-filter: blur(3px) saturate(150%) brightness(1.08); backdrop-filter: blur(3px) saturate(150%) brightness(1.08); }
.step-stone.lensed { -webkit-backdrop-filter: var(--lens) blur(.8px) saturate(150%) brightness(1.08); backdrop-filter: var(--lens) blur(.8px) saturate(150%) brightness(1.08); }

/* faq */
.qa { width: min(var(--w-text), 100% - 2 * var(--gutter)); margin: clamp(48px, 6vw, 72px) auto 0; border-top: 1px solid var(--stone-200); }
.qa details { border-bottom: 1px solid var(--stone-200); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 4px; cursor: pointer; list-style: none;
  font: 650 19px/1.35 var(--display); letter-spacing: -.015em; color: var(--ink); border-radius: 8px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary svg { flex: none; width: 22px; height: 22px; color: var(--brown-500); transition: transform .5s var(--spring); }
.qa details[open] summary svg { transform: rotate(45deg); }
.qa summary:hover { color: var(--brown); }
.qa .a { padding: 0 52px 26px 4px; color: var(--ink-2); }
@supports (interpolate-size: allow-keywords) {
  .qa { interpolate-size: allow-keywords; }
  .qa details::details-content { block-size: 0; overflow: clip; transition: block-size .5s var(--ease), content-visibility .5s allow-discrete; }
  .qa details[open]::details-content { block-size: auto; }
}

/* ── the ground: closing call to action and footer, resting on stone ─────────────────────────────────────── */
.ground { position: relative; isolation: isolate; overflow: hidden; overflow: clip; margin-top: clamp(128px, 15vw, 196px); border-radius: 44px 44px 0 0; background: #1A110B; color: #F4EEE8; }
.ground > .stone { z-index: -2; top: 0; bottom: 0; background-image: url(img/stone-dark.webp); background-image: image-set(url(img/stone-dark-sm.webp) 1x, url(img/stone-dark.webp) 2x); background-position: 50% 30%; }
.ground > .shade { z-index: -1; background: linear-gradient(180deg, rgba(24, 15, 9, .5) 0%, rgba(24, 15, 9, .7) 40%, rgba(20, 12, 7, .93) 72%, #140D08 100%); }
.ground-copy { position: relative; padding: clamp(120px, 13vw, 176px) var(--gutter) 0; text-align: center; }
.ground h2 { font: 800 clamp(40px, 6.6vw, 86px)/.98 var(--display); letter-spacing: -.05em; color: #FAF6F1; text-wrap: balance; }
.ground h2 em { font-style: normal; color: var(--tan); }
.ground-copy > p { margin-top: 22px; font-size: 18px; color: rgba(250, 246, 241, .74); text-wrap: balance; }
.ground .ctas { margin-top: 34px; }
.g1 { left: max(4%, calc(50% - 640px)); top: clamp(330px, 30vw, 400px); width: 290px; }
.g2 { right: max(3%, calc(50% - 660px)); top: clamp(330px, 29vw, 392px); width: 286px; }
.g2 .bubble { margin-top: 11px; max-width: 100%; }
.ground-example { top: 22px; right: 22px; bottom: auto; }

.footer { width: min(var(--w), 100% - 2 * var(--gutter)); margin: clamp(120px, 13vw, 168px) auto 0; padding-bottom: 36px; font-size: 14.5px; color: rgba(250, 246, 241, .7); }
.f-top { display: grid; grid-template-columns: 1fr 1.6fr; gap: 48px; padding-top: 40px; border-top: 1px solid rgba(250, 246, 241, .12); }
.brand.light { color: #FAF6F1; }
.f-brand p { margin-top: 14px; max-width: 300px; line-height: 1.55; }
.f-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.f-cols h4 { margin: 4px 0 14px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: rgba(250, 246, 241, .6); }
.f-cols a { display: block; width: fit-content; padding: 5px 0; color: rgba(250, 246, 241, .84); text-decoration: none; transition: color .2s; }
.f-cols a:hover { color: #fff; }
.f-bottom { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; padding-top: 20px; border-top: 1px solid rgba(250, 246, 241, .1); font-size: 13px; color: rgba(250, 246, 241, .6); }
.f-legal { display: flex; gap: 20px; }
.f-legal a { text-decoration: none; }
.f-legal a:hover { color: #fff; }

/* scroll reveal (only when the script runs and motion is welcome; everything is visible without it) */
.reveal [data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal [data-reveal].in { opacity: 1; transform: none; }

/* ── smaller screens ────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .hero-slab .n1 { left: 3%; } .hero-slab .n3 { right: 3%; top: 124px; } .hero-slab .n2 { top: 324px; }
}
@media (max-width: 880px) {
  .plans { grid-template-columns: 1fr; width: min(460px, 100%); gap: 30px; }
  .price-foot { flex-direction: column; text-align: center; gap: 18px; width: min(460px, 100%); }
}
@media (max-width: 980px) {
  .links, .nav-login { display: none; }
  .menu-btn { display: grid; }
  .hero-slab { height: auto; padding: 48px 20px 56px; display: grid; justify-items: center; gap: 14px; }
  .hero-slab .note { position: relative; left: auto; right: auto; top: auto; margin: 0; width: min(390px, 100%); }
  .feature, .feature.flip { grid-template-columns: 1fr; gap: 36px; }
  .feature.flip .feature-copy { order: 0; }
  .feature { max-width: 640px; margin: 0 auto; width: 100%; }
  .feature-copy { max-width: 560px; }
  .minis { grid-template-columns: 1fr; gap: 0; }
  .minis li { display: grid; grid-template-columns: 62px 1fr; column-gap: 14px; padding: 22px 0; }
  .minis li .mini-ic { grid-row: span 2; }
  .minis h3 { margin-top: 0; }
  .steps { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
  .path { height: 140px; }
  .step-stone { width: 104px; height: 66px; }
  .step-stone b { font-size: 26px; }
  .g1, .g2, .ground-example { display: none; }
  .f-top { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { height: 56px; padding-left: 14px; }
  .nav .btn.sm { --h: 40px; padding: 0 15px; font-size: 14px; }
  .hero h1 { letter-spacing: -.05em; }
  .lede { margin-top: 22px; }
  .ctas { margin-top: 28px; }
  .ctas .btn.lg { --h: 52px; padding: 0 22px; font-size: 16px; }
  .facts { font-size: 12.5px; padding: 5px; }
  .facts li { padding: 6px 9px; white-space: nowrap; }
  .facts li:first-child { padding-left: 11px; }
  .hero-slab { margin-top: 48px; border-radius: 30px; padding: 60px 16px 60px; gap: 18px; }
  .slab-label { left: 14px; top: 13px; }
  .hero-slab .note { width: 100%; }
  .tile { --stage-w: 400; --stage-h: 520; aspect-ratio: 400 / 520; border-radius: 28px; }
  .tile > .stone { background-size: cover !important; }
  .t-site .iphone { left: 116px; top: 84px; }
  .t-site .c-call { left: 16px; top: 24px; }
  .listing { left: 22px; top: 30px; width: 356px; }
  .c-photos { left: auto; right: 18px; top: 398px; }
  .thread { left: 16px; top: 150px; width: 368px; }
  .n-lead { left: 52px; top: 24px; width: 330px; }
  .ask { left: 16px; top: 28px; width: 368px; }
  .track { left: 104px; top: 296px; width: 280px; }
  .path { display: none; }
  .steps { grid-template-columns: 1fr; row-gap: 0; text-align: left; margin-top: 40px; }
  .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; padding: 20px 0; border-top: 1px solid var(--stone-200); }
  .steps li::before { content: counter(step); grid-row: span 3; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
    font: 800 18px/1 var(--display); color: #fff; text-shadow: 0 1px 6px rgba(0, 0, 0, .45);
    background: url(img/stone-dark-sm.webp) 30% 40% / 900% auto; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -1px 0 rgba(0, 0, 0, .3), 0 4px 10px -4px rgba(20, 12, 7, .5); }
  .steps p { margin: 4px 0 0; max-width: none; }
  .steps .time { justify-self: start; margin-top: 10px; }
  .steps li:nth-child(2)::before { background-position: 70% 20%; }
  .steps li:nth-child(3)::before { background-position: 45% 75%; }
  .steps li:nth-child(4)::before { background-position: 85% 60%; }
  .price-slab { padding: 44px 16px 26px; border-radius: 30px; }
  .plan { padding: 26px 22px 22px; }
  .pc-price .amt { font-size: 72px; }
  .qa summary { font-size: 17.5px; padding: 20px 2px; }
  .qa .a { padding-right: 8px; }
  .ground { border-radius: 30px 30px 0 0; }
  .f-cols { grid-template-columns: 1fr 1fr; }
  .f-bottom { flex-direction: column; }
}

/* ── accessibility ──────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .rise { animation: none; }
  .glass::after { transition: none; }
  .btn, .btn .arw { transition: none; }
}
@media (prefers-contrast: more) {
  .glass, .glass.light, .glass.regular { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--snow); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--ink); }
  .glass::after, .glass::before { display: none; }
  .glass.tinted { background: #22150D; color: #fff; box-shadow: inset 0 0 0 1.5px #fff; }
  .step-stone { color: var(--ink); }
  .step-stone b { text-shadow: none; }
  .btn.glass.clear { color: var(--ink); }
  .section-head h2 span { color: var(--ink-2); }
}
@media (prefers-reduced-transparency: reduce) {
  .glass, .glass.light, .glass.regular { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(251, 250, 247, .96); }
  .glass.tinted { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(36, 22, 14, .97); }
  .step-stone, .btn.glass.clear { color: var(--ink); }
}
@media (forced-colors: active) {
  .glass::before, .glass::after { display: none; }
  .glass { border: 1px solid CanvasText; }
}

/* ── get started page ───────────────────────────────────────────────────────────────────────────────────── */
.nav-help { padding: 9px 12px; border-radius: 999px; font-size: 14.5px; color: var(--ink-2); text-decoration: none; transition: background-color .2s; }
.nav-help b { color: var(--brown); font-weight: 650; }
.nav-help:hover { background: rgba(28, 22, 18, .05); }
.btn.back .arw { margin: 0 0 0 -4px; }
.btn.back:hover .arw { transform: translateX(-3px); }
.start { width: min(var(--w), 100% - 2 * var(--gutter)); margin: 0 auto; padding-top: clamp(118px, 11vw, 150px); }
.start-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 404px); gap: clamp(40px, 6vw, 88px); align-items: start; }
.start-main h1 { margin-top: 16px; font: 800 clamp(36px, 4.6vw, 56px)/1.03 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.start-main h1 span { display: block; color: var(--ink-3); }
.start-lede { max-width: 520px; margin-top: 18px; font-size: 18px; color: var(--ink-2); }
.signup { display: grid; gap: 30px; margin-top: 40px; }
.signup fieldset { display: grid; gap: 16px; margin: 0; padding: 0; border: 0; min-width: 0; }
.signup legend { float: left; width: 100%; padding: 0; font: 500 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--brown-500); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field { display: grid; gap: 8px; align-content: start; }
.field label { display: flex; justify-content: space-between; gap: 12px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.opt { font-size: 13px; font-weight: 400; color: var(--ink-3); }
.field input, .field select, .field textarea {
  width: 100%; height: 52px; padding: 0 16px; border: 1px solid var(--stone-300); border-radius: 14px; background: #fff;
  font: 400 16px/1.3 var(--body); color: var(--ink); -webkit-appearance: none; appearance: none;
  box-shadow: 0 1px 2px rgba(28, 22, 18, .04); transition: border-color .2s, box-shadow .2s;
}
.field textarea { height: auto; min-height: 100px; padding: 14px 16px; line-height: 1.5; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #A39A92; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #B8AFA6; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--brown-500); box-shadow: 0 0 0 4px rgba(138, 86, 50, .14); }
.select { position: relative; }
.select select { padding-right: 44px; cursor: pointer; }
.select select:invalid { color: #A39A92; }
.select option { color: var(--ink); }
.select svg { position: absolute; right: 14px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-3); pointer-events: none; }
.err { display: none; font-size: 13px; color: #A23B2A; }
.field.bad input, .field.bad select, .field.bad textarea { border-color: #C25A45; box-shadow: 0 0 0 4px rgba(194, 90, 69, .12); }
.field.bad .err, .checks-form.bad .terms-err { display: block; }
.checks-form { display: grid; gap: 14px; }
.check { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: 14px; line-height: 1.5; color: var(--ink-2); cursor: pointer; }
.check input { position: absolute; left: 0; top: 0; width: 24px; height: 24px; margin: 0; opacity: 0; cursor: pointer; }
.check .box { width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid #BDB4AB; border-radius: 7px; background: #fff; transition: background-color .2s, border-color .2s; }
.check input:checked + .box { border-color: var(--brown); background: var(--brown) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5.5 10.4 3 3 6-6.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 15px no-repeat; }
.check input:focus-visible + .box { outline: 2.5px solid var(--brown-500); outline-offset: 2px; }
.checks-form.bad .check:last-of-type .box { border-color: #C25A45; }
.check em { font-style: normal; color: var(--ink-3); }
.check a { color: var(--brown); font-weight: 600; text-underline-offset: 3px; }
.secure { margin-top: -14px; font-size: 13.5px; text-align: center; color: var(--ink-3); text-wrap: balance; }
.secure svg { display: inline-block; width: 15px; height: 15px; margin: 0 6px 0 0; vertical-align: -2.5px; }
.preview-note { padding: 14px 16px; border-radius: 14px; background: var(--brown-tint); color: var(--brown); font-size: 14.5px; box-shadow: inset 0 0 0 1px rgba(85, 51, 31, .12); }
.preview-note[hidden] { display: none; }
.start-side { position: sticky; top: 96px; display: grid; gap: 28px; }
.side-slab { padding: 26px; border-radius: 34px; }
.side-slab > .stone { background-image: url(img/pebble-dark.webp); background-image: image-set(url(img/pebble-dark-sm.webp) 1x, url(img/pebble-dark.webp) 2x); background-position: 40% 40%; }
.side-slab > .shade { background: radial-gradient(90% 90% at 50% 40%, rgba(20, 12, 7, .05), rgba(20, 12, 7, .45)); }
.side-card { padding: 26px 24px 20px; --r: 24px; }
.side-card .pc-price { margin-top: 14px; }
.side-card .pc-price .amt { font-size: 64px; }
.side-card .pc-price .cur { margin-top: 6px; font-size: 26px; }
.side-card .pc-list { margin: 18px 0; padding-top: 18px; gap: 9px; font-size: 14.5px; }
.due { display: flex; align-items: baseline; justify-content: space-between; padding-top: 16px; border-top: 1px solid rgba(28, 22, 18, .1); font-weight: 600; }
.due b { font: 750 20px/1 var(--display); letter-spacing: -.01em; }
.due-note { margin-top: 6px; font-size: 13.5px; color: var(--ink-3); }
.next { display: grid; gap: 14px; padding: 0 6px; counter-reset: n; }
.next li { display: grid; grid-template-columns: 28px 1fr; column-gap: 12px; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); counter-increment: n; }
.next li::before { content: counter(n); grid-row: span 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--stone-100); font: 600 12px/1 var(--mono); color: var(--brown); box-shadow: inset 0 0 0 1px rgba(28, 22, 18, .05); }
.next b { font-weight: 650; color: var(--ink); }
.mini-footer { width: min(var(--w), 100% - 2 * var(--gutter)); margin: clamp(96px, 10vw, 128px) auto 0; padding: 24px 0 36px; display: flex; justify-content: space-between; gap: 16px; border-top: 1px solid var(--stone-200); font-size: 13px; color: var(--ink-3); }
.mini-footer .f-legal a { color: var(--ink-3); }
.mini-footer .f-legal a:hover { color: var(--ink); }
@media (max-width: 900px) {
  .start-grid { grid-template-columns: 1fr; }
  .start-side { position: static; order: -1; }
  .start-side .pc-list, .start-side .next { display: none; }
  .side-slab { padding: 14px; border-radius: 28px; }
  .side-card { padding: 18px 18px 16px; }
  .side-card .pc-price .amt { font-size: 48px; }
  .due { margin-top: 14px; }
}
@media (max-width: 640px) {
  .row2 { grid-template-columns: 1fr; }
  .nav-help { display: none; }
  .mini-footer { flex-direction: column; }
}

/* ── log in page ────────────────────────────────────────────────────────────────────────────────────────── */
.login { width: min(var(--w), 100% - 2 * var(--gutter)); margin: 0 auto; padding-top: clamp(104px, 10vw, 128px); }
.login-slab { display: grid; place-items: center; min-height: min(640px, 76vh); padding: 56px 20px; border-radius: 40px; }
.login-slab > .stone { background-image: url(img/stone-dark.webp); background-image: image-set(url(img/stone-dark-sm.webp) 1x, url(img/stone-dark.webp) 2x); background-position: 50% 40%; }
.login-slab > .shade { background: radial-gradient(80% 90% at 50% 45%, rgba(20, 12, 7, .05), rgba(20, 12, 7, .5)); }
.login-card { width: min(420px, 100%); padding: 34px 30px 26px; --r: 30px; }
.login-card h1 { font: 800 40px/1.02 var(--display); letter-spacing: -.045em; }
.login-lede { margin-top: 12px; font-size: 15.5px; color: var(--ink-2); }
.login-form { margin-top: 24px; gap: 16px; }
.login-alt { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(28, 22, 18, .1); font-size: 14.5px; text-align: center; color: var(--ink-3); }
.login-alt a { color: var(--brown); font-weight: 650; text-underline-offset: 3px; }
@media (max-width: 640px) { .login-slab { border-radius: 30px; padding: 40px 14px; min-height: 0; } .login-card { padding: 28px 22px 22px; } }

/* get started: the plan choice */
.picks { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pick { position: relative; display: block; cursor: pointer; }
.pick input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pick-body { display: grid; gap: 8px; height: 100%; padding: 16px 16px 15px; border: 1px solid var(--stone-300); border-radius: 18px; background: #fff; box-shadow: 0 1px 2px rgba(28, 22, 18, .04); transition: border-color .2s, box-shadow .2s, background-color .2s; }
.pick-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pick-top b { font: 800 19px/1 var(--display); letter-spacing: -.025em; color: var(--ink); }
.pick-price { font: 700 17px/1 var(--display); color: var(--ink); }
.pick-price small { font: 500 12.5px/1 var(--body); color: var(--ink-3); }
.pick-sub { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.pick:hover .pick-body { border-color: #B8AFA6; }
.pick input:checked + .pick-body { border-color: var(--brown); background: #FFFDFB; box-shadow: 0 0 0 3px rgba(85, 51, 31, .16), 0 10px 24px -14px rgba(62, 37, 22, .5); }
.pick input:focus-visible + .pick-body { outline: 2.5px solid var(--brown-500); outline-offset: 3px; }
.side-card .pc-list[hidden] { display: none; }
@media (max-width: 640px) { .picks { grid-template-columns: 1fr; } }