/* Runway Pages V2: The Whole Site (DIRECTION-V2.md). One grid, one section spacing. Schibsted Grotesk for all text (owner's pick, 2026-10-09); the wordmark stays in Jost.
   White ground, black type, gold where something moves or acts; color comes from the demo sites
   and a faint wash of the chosen kind of business (--wash, --wash2, set per trade). */
:root {
  --black: #000000;
  --white: #ffffff;
  --gold: #c9a45c;
  --gold-deep: #a88437;
  --graphite: #4a4a4a;
  --track: #e9e9e7;
  --blank: #e4e4e2;
  --wash: #fbeee8;
  --wash2: #fdf7f4;
  --bar: 72px;
  --wrap: 1320px;
  --gut: clamp(16px, 4vw, 48px);
  --gap: clamp(16px, 2vw, 32px);
  --sec: clamp(88px, 10vw, 152px);
  --t-hero: clamp(44px, 6.8vw, 104px);
  --t-sec: clamp(40px, 5vw, 76px);
  --t-sm: clamp(32px, 3.4vw, 52px);
  --ease: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (max-width: 899px) { :root { --bar: 64px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--bar) + 16px); }
body {
  margin: 0;
  padding-top: var(--bar);
  background: var(--white);
  color: var(--black);
  font: 400 20px/1.55 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  font-feature-settings: 'tnum' 0;
}
@media (max-width: 599px) { body { font-size: 18px; } }
img, iframe { display: block; max-width: 100%; }
img { height: auto; }
p, ul, ol, dl, dd, figure, h1, h2, h3 { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
button, select, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.nw { white-space: nowrap; }

:focus-visible { outline: 3px solid var(--black); outline-offset: 3px; }

.skip { position: absolute; left: 16px; top: -100px; z-index: 100; background: var(--black); color: var(--white); padding: 12px 16px; font-weight: 500; }
.skip:focus { top: 12px; }

.wrap { max-width: calc(var(--wrap) + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); }

/* ---- Type ---- */
.h-hero, .h-sec { font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.h-hero { font-size: var(--t-hero); line-height: 0.95; }
.h-hero .ln { display: block; }
.h-hero-trade { font-size: clamp(40px, 5.2vw, 80px); line-height: 1; }
.h-sec { font-size: var(--t-sec); line-height: 1; }
.h-sm { font-size: var(--t-sm); line-height: 1.05; }
.lead { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; max-width: 34em; }
.link { display: inline-block; min-width: 44px; padding-block: 11px; margin-block: -11px; font-weight: 500; text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.link:hover { text-decoration-color: var(--black); }
figcaption { font-size: 16px; line-height: 1.45; color: var(--graphite); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 12px 26px;
  background: var(--gold); color: var(--black); font-weight: 500; font-size: 18px; text-decoration: none; border-radius: 2px;
  transition: background-color 160ms; cursor: pointer;
}
.btn:hover { background: var(--gold-deep); }
.btn:active { background: var(--gold-deep); }

/* ---- Bar and phone menu ---- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar);
  display: flex; align-items: center; gap: 28px; padding-inline: max(var(--gut), calc((100% - var(--wrap)) / 2));
  background: rgba(255, 255, 255, 0.96); border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; min-height: 44px; min-width: 0; }
.brand img { flex: none; }
.brand-words { min-width: 0; }
.brand img { width: 34px; height: auto; }
.brand-words { display: flex; flex-direction: column; line-height: 1.1; font-weight: 500; font-size: 19px; letter-spacing: 0.02em; font-family: Jost, 'Century Gothic', Futura, sans-serif; }
.brand-for { font-family: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif; }
.brand-for { font-size: 15px; letter-spacing: 0; color: var(--graphite); font-weight: 500; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { padding: 10px 12px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; font-weight: 500; font-size: 17px; }
.nav a:hover, .nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.btn-bar { min-height: 46px; font-size: 17px; padding: 10px 20px; }
.burger { display: none; }
@media (max-width: 1023px) {
  .nav, .btn-bar { display: none; }
  .burger {
    display: inline-grid; place-content: center; gap: 6px; margin-left: auto; width: 48px; height: 48px; flex: none;
    background: none; border: 0; cursor: pointer; padding: 0;
  }
  .burger span { display: block; width: 26px; height: 2.5px; background: var(--black); transition: transform 200ms var(--ease), opacity 200ms; }
  .burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8.5px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8.5px) rotate(-45deg); }
}
.menu {
  position: fixed; inset: var(--bar) 0 0 0; z-index: 49; background: var(--white); overflow-y: auto;
  padding: 20px var(--gut) 32px; display: flex; flex-direction: column; gap: 20px;
}
.menu[hidden] { display: none; }
.menu nav { display: flex; flex-direction: column; }
.menu nav a { font-size: 24px; font-weight: 500; text-decoration: none; padding: 8px 0; min-height: 48px; display: flex; align-items: center; }
.menu nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 6px; }
.menu-label { font-size: 17px; color: var(--graphite); margin-top: 10px; font-weight: 500; }
.menu-group { padding-left: 16px; border-left: 2px solid var(--gold); }
.menu-cta { align-self: flex-start; }
.menu-note { font-size: 17px; color: var(--graphite); }
body.menu-open { overflow: hidden; }

/* ---- Sections ---- */
.sec { padding-block: var(--sec); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); }

/* Pinned scenes: the section grows by its track (set in px by v2.js), the pin sticks under the bar. */
.pin { position: relative; }
.motion .scene-on > .pin {
  position: sticky; top: var(--bar); height: calc(var(--vh, 100svh) - var(--bar));
  display: flex; align-items: safe center; overflow: hidden;
}
.motion .scene-on > .pin > .wrap { width: 100%; }
.motion .sec.scene-on { padding-block: 0; }
/* A scene taller than the screen plays inline instead: no pin, paced by its picture crossing the screen. */
@media (max-width: 899px) {
  .motion .scene-on.scene-inline .site { flex: none; }
  .motion .scene-on.scene-inline .site-win { height: clamp(180px, 46svh, 520px); }
}
.motion .scene-on.scene-inline > .pin { position: relative; top: auto; height: auto; display: block; overflow: visible; }
.motion .sec.scene-on.scene-inline { padding-block: var(--sec); }

/* ---- Hero: the whole site in a tall window ---- */
.hero {
  position: relative; isolation: isolate;
  background:
    radial-gradient(60% 70% at 78% 46%, var(--wash) 0%, var(--wash2) 45%, rgba(255, 255, 255, 0) 75%),
    var(--white);
  transition: --wash 400ms;
}
.hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); padding-block: clamp(16px, 3.5vh, 64px); }
.hero .h-hero { grid-column: 1 / 7; grid-row: 1; align-self: end; }
.hero .offer { grid-column: 1 / 6; grid-row: 2; margin-top: clamp(14px, 2.6vh, 44px); display: grid; gap: 6px; justify-items: start; }
.hero-more { grid-column: 1 / 6; grid-row: 3; margin-top: clamp(14px, 2.4vh, 40px); align-self: start; display: grid; gap: 12px; justify-items: start; }
.hero .site { grid-column: 7 / 13; grid-row: 1 / 4; align-self: start; }
.lede { margin-bottom: 14px; max-width: 30em; }
.offer-line { font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.35; }
.offer-price { font-size: clamp(22px, 2vw, 28px); font-weight: 500; line-height: 1.3; }
.offer-price b { font-weight: 600; font-size: 1.5em; font-feature-settings: 'tnum' 1; }
.offer-terms { font-size: 17px; color: var(--graphite); max-width: 28em; }
.offer .btn { margin-top: 14px; }
.offer-next { font-size: 17px; color: var(--graphite); margin-top: 4px; }

.site { display: grid; grid-template-columns: 4px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 12px; }
.site-rule { grid-row: 1; background: var(--track); position: relative; overflow: hidden; }
.site-rule span { position: absolute; inset: 0; background: var(--gold); transform-origin: top; transform: scaleY(var(--p, 1)); }
.motion .site-rule span { transform: scaleY(var(--p, 0)); }
.site-win {
  grid-row: 1; position: relative; overflow: hidden; height: min(72vh, 720px, calc(var(--vh, 100vh) - var(--bar) - 120px)); border: 1px solid var(--black); background: var(--white);

}
.site-win img { width: 100%; transform: translate3d(0, var(--y, 0px), 0); will-change: transform; }
.site figcaption { grid-column: 2; }

.play { display: none; min-height: 44px; padding: 8px 16px; background: var(--white); border: 2px solid var(--black); border-radius: 2px; font-weight: 500; font-size: 17px; cursor: pointer; }
.rm .play { display: inline-flex; align-items: center; }

/* The chooser */
.chooser { display: grid; gap: 8px; justify-items: start; }
.chooser label { font-weight: 500; font-size: 17px; }
.chooser select {
  appearance: none; -webkit-appearance: none; min-height: 52px; min-width: min(100%, 320px); max-width: 100%;
  padding: 10px 52px 10px 16px; border: 2px solid var(--black); border-radius: 2px; background: var(--white)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 18px center;
  font-size: 20px; font-weight: 500; cursor: pointer;
}
.chooser-more { font-size: 17px; }
.l-short { display: none; }
/* Desktop windows of every height: the hero's headline also scales with the height, and on shorter
   laptop screens the chooser sits on one line, so the whole first screen fits under the bar. */
@media (min-width: 900px) {
  .hero .h-hero { font-size: clamp(44px, min(6.8vw, 10.5vh), 104px); }
  .hero .h-hero-trade { font-size: clamp(36px, min(5.2vw, 8vh), 80px); }
}
@media (min-width: 900px) and (max-height: 860px) {
  .hero-more .chooser { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; width: 100%; }
  .hero-more .chooser select { min-width: 0; width: 100%; }
  .hero-more .chooser-more { display: none; }
  .hero-more .l-long { display: none; } .hero-more .l-short { display: inline; }
  .hero .lede { margin-bottom: 6px; }
}
@media (max-width: 899px) { .hero-more .l-long { display: none; } .hero-more .l-short { display: inline; } }

@media (max-width: 899px) {
  .hero-grid { display: flex; flex-direction: column; gap: 14px; padding-block: 20px 24px; }
  .hero .h-hero { align-self: auto; }
  .hero .offer { margin-top: 0; gap: 2px; }
  .hero .offer .btn { margin-top: 10px; }
  .hero-more { margin-top: 8px; }
  .site { column-gap: 10px; }
  .site-win { height: clamp(180px, 46svh, 520px); }
  .motion .scene-on .hero-grid { height: 100%; padding-block: 16px; }
  .motion .scene-on .site { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr) auto; }
  .motion .scene-on .site-win { height: auto; min-height: 150px; }
  .hero .offer-terms, .hero .offer .lede, .hero .offer-next { display: none; }
  /* The chooser stays on the phone's first screen, compact, between the offer and the site. */
  .hero .h-hero { order: 1; } .hero .offer { order: 2; } .hero-more { order: 3; } .hero .site { order: 4; }
  .hero-more { margin-top: 0; }
  .hero-more .chooser { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; width: 100%; }
  .hero-more .chooser select { min-width: 0; width: 100%; min-height: 46px; font-size: 18px; }
  .hero-more .chooser-more, .hero-more .play { display: none !important; }
}
.offer-short { display: none; font-size: 17px; color: var(--graphite); }
@media (max-width: 899px) { .offer-short { display: block; } }
.hero-after { display: none; }
@media (max-width: 899px) {
  .hero-after { display: block; padding: 20px 0 8px; }
  .hero-after .wrap { display: grid; gap: 18px; justify-items: start; }
}

/* ---- We Build It: the business's own pieces land on its page ---- */
.build-grid, .host-grid, .upd-grid, .live-grid, .try-grid, .terms-grid, .covers-grid, .start-grid, .close-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); align-items: start;
}
.build-copy, .host-copy, .upd-copy, .live-copy, .try-copy { grid-column: 1 / 6; display: grid; gap: 22px; justify-items: start; }
.bs, .views, .ba, .live-view, .try-view { grid-column: 7 / 13; }
@media (max-width: 899px) {
  .build-copy, .host-copy, .upd-copy, .live-copy, .try-copy, .bs, .views, .ba, .live-view, .try-view { grid-column: 1 / -1; }
}
.steps { list-style: none; counter-reset: s; display: grid; gap: 4px; }
.steps li { counter-increment: s; display: flex; gap: 14px; align-items: baseline; font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; padding: 6px 0; }
.steps li::before { content: counter(s); font-size: 17px; font-weight: 600; width: 32px; height: 32px; flex: none; display: inline-grid; place-content: center; border: 2px solid var(--black); border-radius: 50%; transform: translateY(-2px); }
.motion .scene-on .steps li { color: var(--graphite); }
.motion .scene-on .steps li.is-done, .motion .scene-on .steps li.is-now { color: var(--black); }
.motion .scene-on .steps li.is-done::before { background: var(--gold); border-color: var(--gold); }
.motion .scene-on .steps li.is-now::before { background: var(--black); color: var(--white); }

.bs { position: relative; display: grid; gap: 12px; }
.chips { display: inline-flex; gap: 6px; margin-left: 4px; align-self: center; }
.chips span { width: 22px; height: 22px; border: 1px solid rgba(0, 0, 0, 0.35); }
.bs-base { position: relative; border: 1px solid var(--black); background: var(--white); }
.bs-base img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.bs-fill { position: absolute; overflow: hidden; display: none; }
.bs-fill img { position: absolute; max-width: none; }
.motion .scene-on .bs-base > img { filter: grayscale(var(--gray, 1)); opacity: calc(1 - var(--gray, 1) * 0.72); }
.motion .scene-on .bs-base { overflow: hidden; }
.motion .scene-on .bs-fill { display: block; visibility: hidden; will-change: transform; }
.motion .scene-on .bs-fill.is-moving { box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.35); outline: 1px solid rgba(0, 0, 0, 0.5); }
.bs-fill[data-land="photos"] { z-index: 1; } .bs-fill[data-land="prices"] { z-index: 2; } .bs-fill[data-land="sign"] { z-index: 3; }
.bs figcaption { padding-left: 0; }

/* ---- We Host It ---- */
.uses { display: grid; gap: 18px; max-width: 34em; }
.uses dt { font-weight: 600; font-size: 18px; }
.uses dd { color: var(--black); }
.views { position: relative; display: grid; gap: 12px; }
.view-computer { width: 84%; border: 1px solid var(--black); }
.view-computer img { aspect-ratio: 16 / 10; object-fit: cover; width: 100%; }
.view-phone {
  position: absolute; right: 0; top: 14%; width: 25%; border: 1px solid var(--black); background: var(--white);
  transform: translate3d(var(--x, 0px), 0, 0);
}
.view-phone img { aspect-ratio: 390 / 844; object-fit: cover; object-position: top; width: 100%; }
.views figcaption { width: 84%; }

/* ---- We Keep It Up to Date ---- */
.email { font-size: clamp(20px, 1.7vw, 24px); font-weight: 500; line-height: 1.4; max-width: 30em;  }
.email-label { display: block; font-size: 16px; font-weight: 500; color: var(--graphite); margin-bottom: 4px; }
.ba { display: grid; gap: 12px; }
.ba-title { font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.3; }
.ba-frame { position: relative; border: 1px solid var(--black); background: var(--white); overflow: hidden; }
.ba-frame img { width: 100%; }
.ba-after { position: absolute; inset: 0; clip-path: inset(0 0 0 0); }
.motion .scene-on .ba-after { clip-path: inset(0 calc(100% - var(--q, 0) * 100%) 0 0); }
.ba-edge { position: absolute; top: 0; bottom: 0; width: 3px; margin-left: -1.5px; background: var(--gold); left: 100%; display: none; }
.motion .scene-on .ba-edge { display: block; left: calc(var(--q, 0) * 100%); }
.ba-labels { display: flex; justify-content: space-between; font-size: 16px; font-weight: 500; }
/* Without the motion, before and after sit one above the other. */
.still .ba-after, html:not(.motion) .ba-after { position: static; }
.still .ba-labels { display: none; }
.still .ba-before::before, .still .ba-after::before { display: block; padding: 8px 12px; font-size: 16px; font-weight: 500; border-bottom: 1px solid var(--black); }
.still .ba-before::before { content: 'Before'; }
.still .ba-after::before { content: 'After'; border-top: 1px solid var(--black); }

/* ---- Price ---- */
.price { background: linear-gradient(180deg, var(--white) 0%, var(--wash2) 100%); }
.price-grid { display: grid; gap: 28px; }
.h-price { font-size: clamp(56px, 9vw, 150px); line-height: 0.92; }
.plans { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: 16px; }
.plan { grid-column: span 6; display: grid; gap: 12px; align-content: start; padding-top: 22px; border-top: 2px solid var(--black); max-width: 36em; }
.plan-h { font-size: clamp(24px, 2.2vw, 32px); font-weight: 600; line-height: 1.3; }
.plan-price { font-size: clamp(22px, 2vw, 26px); font-weight: 500; }
.plan-price b { font-size: 2.2em; font-weight: 600; line-height: 1; font-feature-settings: 'tnum' 1; margin-right: 6px; }
@media (max-width: 767px) { .plan { grid-column: 1 / -1; } }
.actions { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; }

/* ---- Index of the 24 kinds of business ---- */
.index .lead { margin-top: 20px; }
.ix-group { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(40px, 5vw, 64px); }
.ix-h { grid-column: 1 / 4; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.3; padding-top: 8px; }
.ix { grid-column: 4 / 13; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.ix a { display: grid; gap: 8px; text-decoration: none; }
.ix img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--black); transition: transform 240ms var(--ease); }
.ix a:hover img { transform: translateY(-4px); }
.ix-k { font-size: 22px; font-weight: 600; line-height: 1.3; }
.ix a:hover .ix-k { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.ix-n { font-size: 16px; color: var(--graphite); }
@media (max-width: 899px) { .ix-h, .ix { grid-column: 1 / -1; } .ix { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 379px) { .ix { grid-template-columns: minmax(0, 1fr); } }

/* ---- Lists and terms ---- */
.ruled { list-style: none; border-top: 2px solid var(--black); max-width: 40em; }
.ruled li { padding: 14px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.18); font-size: clamp(19px, 1.6vw, 22px); }
.covers-grid > .h-sec { grid-column: 1 / 6; }
.covers-grid > :not(.h-sec) { grid-column: 7 / 13; display: grid; gap: 20px; }
@media (max-width: 899px) { .covers-grid > * { grid-column: 1 / -1 !important; } }
.covers { padding-top: 0; }
.terms-grid > div { grid-column: span 6; display: grid; gap: 22px; align-content: start; }
@media (max-width: 899px) { .terms-grid > div { grid-column: 1 / -1; } }
.path { display: grid; gap: 14px; padding-left: 1.4em; max-width: 34em; }
.path li { padding-left: 6px; }
.path li::marker { font-weight: 600; }
.defs { display: grid; gap: 18px; max-width: 36em; }
.defs dt, .start dt { font-weight: 600; font-size: 18px; }
.start { display: grid; gap: 18px; max-width: 34em; }

/* ---- Live frames ---- */
.frame { position: relative; border: 1px solid var(--black); overflow: hidden; background: var(--white); }
.live-view .frame { aspect-ratio: 16 / 10; }
.frame iframe { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; display: none; }
.frame.is-live iframe { display: block; }
.frame.is-live .frame-still { visibility: hidden; }
.frame-still { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.live-view { display: grid; gap: 12px; }
.try-view .frame-phone { width: min(100%, 390px); aspect-ratio: 390 / 760; }
@media (max-width: 767px) { .frame iframe { display: none !important; } .frame-still { visibility: visible !important; } .try-view .frame-phone { width: 100%; aspect-ratio: auto; } .try-view .frame-still { height: auto; } }

/* ---- Start, close, more ---- */
.start-open { background: radial-gradient(50% 60% at 80% 30%, var(--wash2) 0%, rgba(255, 255, 255, 0) 70%); }
.h-start { grid-column: 1 / 7; }
.start-copy { grid-column: 7 / 13; display: grid; gap: 22px; justify-items: start; }
@media (max-width: 899px) { .h-start, .start-copy { grid-column: 1 / -1; } }
.close { border-top: 2px solid var(--black); }
.close-grid > .h-sec { grid-column: 1 / 7; }
.close-grid > .lead { grid-column: 7 / 13; }
.close-grid > .actions { grid-column: 7 / 13; }
.close .actions span { font-size: 17px; }
@media (max-width: 899px) { .close-grid > * { grid-column: 1 / -1 !important; } }
.more { padding-top: 0; }

/* ---- Footer ---- */
.foot { border-top: 1px solid rgba(0, 0, 0, 0.14); padding-block: 56px 40px; font-size: 17px; }
.foot-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px var(--gap); }
.foot .brand { grid-column: 1 / 4; align-self: start; }
.foot-nav { grid-column: 4 / 13; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.foot-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; font-weight: 500; text-decoration: none; }
.foot-nav a:hover, .foot-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.foot-grid > p { grid-column: 4 / 13; max-width: 46em; }
.foot-note, .foot-copy { color: var(--graphite); }
@media (max-width: 899px) { .foot-grid > * { grid-column: 1 / -1 !important; } .foot-nav { margin-left: -10px; } }

/* ---- The one load moment: the window draws in, the gold rule rises, the site settles ---- */
@media (prefers-reduced-motion: no-preference) {
  .motion .site-win { animation: win-in 900ms var(--ease) 120ms both; }
  .motion .site-rule { animation: rule-in 700ms var(--ease) 500ms both; }
  @keyframes win-in { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
  @keyframes rule-in { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); transform-origin: top; } }
}
@media (prefers-reduced-motion: reduce) {
  .motion .site-win { animation: none; }
}

/* ---- Start My Website: the request form ---- */
.start-side { grid-column: 1 / 6; display: grid; gap: 22px; align-content: start; }
@media (min-width: 900px) { .start-side { position: sticky; top: calc(var(--bar) + 32px); } }
.start-side .h-start { grid-column: auto; }
.start-plans dt { font-size: 20px; }
.lead-form, .sent { grid-column: 7 / 13; display: grid; gap: 36px; }
@media (max-width: 899px) { .start-side, .lead-form, .sent { grid-column: 1 / -1; } }
.lead-form fieldset { border: 0; border-top: 2px solid var(--black); margin: 0; padding: 20px 0 0; display: grid; gap: 18px; min-width: 0; }
.lead-form legend { float: left; width: 100%; padding: 0; margin-bottom: 4px; font-size: clamp(22px, 2vw, 28px); font-weight: 600; line-height: 1.3; }
.f { display: grid; gap: 6px; }
.f2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 599px) { .f2 { grid-template-columns: minmax(0, 1fr); } }
.f label { font-weight: 500; font-size: 18px; }
.opt { font-weight: 400; color: var(--graphite); }
.lead-form input:not([type="radio"]), .lead-form select, .lead-form textarea {
  width: 100%; min-height: 52px; padding: 12px 14px; border: 2px solid var(--black); border-radius: 2px; background: var(--white); font-size: 19px;
}
.lead-form select {
  appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M1 1l7 7 7-7' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.lead-form textarea { min-height: 140px; resize: vertical; line-height: 1.5; }
.lead-form ::placeholder { color: #6b6b6b; opacity: 1; }
.lead-form [aria-invalid="true"] { border-color: #a1271b; border-width: 3px; }
.f-hint { font-size: 17px; color: var(--graphite); }
.f-err { font-size: 17px; font-weight: 500; color: #a1271b; }
.f-err:empty { display: none; }
.form-error { padding: 14px 16px; border: 2px solid #a1271b; color: #a1271b; font-weight: 500; }
.choices { display: grid; gap: 10px; }
.choices-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 599px) { .choices-row { grid-template-columns: minmax(0, 1fr); } }
.choice { position: relative; display: flex; gap: 14px; align-items: center; min-height: 56px; padding: 12px 16px; border: 2px solid var(--black); border-radius: 2px; cursor: pointer; }
.choice input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--black); }
.choice span { display: grid; gap: 2px; font-size: 17px; color: var(--graphite); line-height: 1.35; }
.choice b { font-size: 19px; font-weight: 600; color: var(--black); }
.choice:has(input:checked) { background: var(--wash2); box-shadow: inset 0 0 0 2px var(--black); }
.choice:has(input:focus-visible) { outline: 3px solid var(--black); outline-offset: 3px; }
/* Follow-up questions show only when they apply; without the script every question shows. */
.form-js [data-when-website], .form-js [data-when-other], .form-js [data-when-once] { display: none; }
.form-js.has-website [data-when-website], .form-js.has-other [data-when-other], .form-js.is-once [data-when-once] { display: grid; }
.trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.form-send { display: grid; gap: 12px; justify-items: start; }
.form-send .btn { min-height: 56px; padding-inline: 32px; font-size: 19px; }
.form-send .btn[disabled] { opacity: 0.6; cursor: wait; }
.sent { align-content: start; }

/* Short phones: We Build It keeps its four steps and its picture, so it can stay pinned and give each
   step its own screen. The intro line and the link sit on the Building page itself. */
@media (max-width: 899px) and (max-height: 780px) {
  .build .build-copy > .lead, .build .build-copy > p:has(.link) { display: none; }
  .build .build-copy { gap: 12px; }
  .build .steps li { padding: 3px 0; font-size: 19px; }
  .build .bs figcaption { display: none; }
}
/* Phones: a chooser inside a scene sits on one line, labeled Show Me, like the hero's */
@media (max-width: 899px) {
  .build-copy .chooser, .host-copy .chooser, .upd-copy .chooser { grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 12px; width: 100%; }
  .build-copy .chooser select, .host-copy .chooser select, .upd-copy .chooser select { min-width: 0; width: 100%; min-height: 46px; font-size: 18px; }
  .build-copy .l-long, .host-copy .l-long, .upd-copy .l-long { display: none; }
  .build-copy .l-short, .host-copy .l-short, .upd-copy .l-short { display: inline; }
  .build-copy .chooser-more, .host-copy .chooser-more, .upd-copy .chooser-more { display: none; }
}