/* Measured, Websites page (/websites/). Only what this page needs beyond home.css, ported from the comp
   docs/design/v2/websites-b.html (round 1, 22 October). Light and dark as the comp has them. */

/* Tokens the comp uses that home.css does not define */
:root { --chip-y: #FDEBC4; --chip-s: #DCE9FB; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14); }
}
:root[data-theme="dark"] { --chip-y: rgb(253 235 196 / .14); --chip-s: rgb(220 233 251 / .14); }

.chip { width: 34px; height: 34px; border-radius: 10px; display: inline-grid; place-items: center; color: var(--chip-ink); flex: none; }
.chip .i { width: 17px; height: 17px; }
.chip--y { background: var(--chip-y); } .chip--m { background: var(--chip-m); } .chip--s { background: var(--chip-s); }
.body { margin-top: 16px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 36em; }
.body b { color: var(--ink); font-weight: 600; }

/* ---------- Hero ---------- */
.hero { --edgeh: 300px; }
.hero__copy { padding-top: 40px; }
.hero h1 { margin-top: 18px; }
.lede { margin-top: 16px; max-width: 760px; }
/* Under the call and email card: the rebuild route, to the close card */
.ring { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-top: 8px; font-size: 15px; font-weight: 600; color: #fff; text-decoration: none; }
.ring .i { color: var(--amber); }
.ring__t { padding-bottom: 2px; border-bottom: 1px solid rgb(255 255 255 / .45); }
.ring:hover .ring__t { border-bottom-color: #fff; }

/* ---------- Hero visual: one indicative site, desktop and phone, two tracked pins ---------- */
.url { width: 260px; gap: 6px; }
.url .i { width: 11px; height: 11px; }
.duo { position: relative; margin-top: 52px; height: 600px; }
.duo .frame { position: absolute; left: 50%; top: 0; width: 780px; margin-left: -520px; }
.duo .scale--c { zoom: 1.026; }
.duo .ixn { width: 760px; }
.duo .phone { position: absolute; left: 50%; top: 48px; margin-left: 236px; width: 270px; z-index: 3; box-shadow: var(--shadow-band); }
.duo .phone__screen { height: 520px; }
.duo .tagline { position: absolute; left: 50%; margin-left: -520px; top: 536px; max-width: 740px; font-size: 15px; color: var(--ink-2); }
.pin { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 11px 0 9px; border-radius: 999px; background: #14284B; color: #fff; font: 600 12px/1 var(--sans); white-space: nowrap; box-shadow: 0 0 0 1px rgb(255 255 255 / .16), 0 10px 22px -8px rgb(12 26 51 / .55); }
.pin::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: #fff; }
.pin i { font-style: normal; color: #9FB4DA; font-weight: 500; }
.pin::after { content: ""; position: absolute; background: #14284B; }
.pin--up::after { right: 24px; bottom: 100%; width: 1.5px; height: var(--lead, 14px); }
.pin--side::after { left: 100%; top: 50%; height: 1.5px; width: var(--lead, 14px); margin-top: -.75px; }
.pin--call { right: 18px; top: 92px; --lead: 12px; }
.pin--form { right: 282px; bottom: 132px; --lead: 16px; }
.ix { background: #fff; color: #14284B; font-family: var(--sans); }
.ix .bar { display: block; height: 8px; border-radius: 4px; background: #DCE3EC; }
.ix .bar + .bar { margin-top: 7px; }
.ix__nav { display: flex; align-items: center; gap: 18px; padding: 16px 28px; border-bottom: 1px solid #E1E7EF; }
.ix__logo { display: flex; align-items: center; gap: 10px; margin-right: auto; }
.ix__logo i { width: 26px; height: 26px; border-radius: 8px; background: #14284B; position: relative; }
.ix__logo i::after { content: ""; position: absolute; right: 5px; bottom: 5px; width: 5px; height: 5px; border-radius: 50%; background: #F59B2A; }
.ix__logo .bar { width: 84px; height: 10px; background: #C9D3E0; }
.ix__links { display: flex; gap: 16px; }
.ix__links .bar { width: 46px; margin: 0; }
.ix__links .bar + .bar { margin-top: 0; }
.ix__call { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; border-radius: 10px; background: #14284B; color: #fff; font: 600 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.ix__call .i { width: 14px; height: 14px; color: #F59B2A; }
.ix__eyebrow { display: inline-flex; align-items: center; gap: 8px; height: 26px; padding: 0 10px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px #E1E7EF; font-size: 12px; font-weight: 500; color: #3E4F70; }
.ix__eyebrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #F59B2A; }
.ix h4 { margin-top: 16px; font-weight: 600; font-size: 32px; line-height: 1.06; letter-spacing: -0.035em; }
.ix h4 span { color: #6B7C9B; }
.ix .lines { margin-top: 16px; width: 86%; }
.photo { position: relative; overflow: hidden; border-radius: 14px; background: #E9DCC6; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 66% 58%; }
.ix__form { position: absolute; background: #fff; border-radius: 14px; padding: 16px; box-shadow: 0 0 0 1px rgb(20 40 75 / .07), 0 22px 44px -20px rgb(20 40 75 / .4); z-index: 2; }
.ix__form b { display: block; color: #14284B; font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.ix__form label { display: block; margin-top: 10px; font-size: 12px; color: #3E4F70; }
.ix__form .f { margin-top: 4px; height: 32px; border-radius: 8px; box-shadow: inset 0 0 0 1px #D3DBE6; display: flex; align-items: center; padding: 0 10px; }
.ix__form .f .bar { width: 70%; height: 6px; background: #E8EDF3; }
.ix__form .ix__go { margin-top: 12px; height: 36px; border-radius: 9px; background: #14284B; color: #fff; display: grid; place-items: center; font-size: 13px; font-weight: 600; }
.ixn .ix__nav { background: #0C1A33; border-bottom-color: rgb(255 255 255 / .08); }
.ixn .ix__logo i { background: #fff; }
.ixn .ix__logo .bar, .ixn .ix__links .bar { background: rgb(255 255 255 / .22); }
.ixn .ix__call { background: #F59B2A; color: #14284B; }
.ixn .ix__call .i { color: #14284B; }
.ixn__hero { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; background: #0C1A33; color: #fff; }
.ixn__copy { padding: 34px 28px 40px; }
.ixn__copy .ix__eyebrow { background: rgb(255 255 255 / .06); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14); color: #C9D5E8; }
.ixn__copy h4 span { color: #9FB4DA; }
.ixn__copy .bar { background: rgb(255 255 255 / .16); }
.ixn__copy .lines { width: 80%; }
.ixn .photo { border-radius: 0; min-height: 290px; }
.ixn .photo img { object-position: 42% 50%; }
.ixn__form { right: 24px; bottom: 24px; width: 236px; }
.ixn__row { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #E1E7EF; }
.ixn__row div { padding: 18px 22px 20px; }
.ixn__row div + div { border-left: 1px solid #E1E7EF; }
.ixn__row b { display: block; font-weight: 600; font-size: 13px; margin-bottom: 10px; }
.ixn__row .bar { height: 6px; } .ixn__row .bar:last-child { width: 65%; }
/* Bar widths the comp set inline */
.ix .bar.w-40 { width: 40%; } .ix .bar.w-66 { width: 66%; } .ix .bar.w-70 { width: 70%; }
.ix .bar.w-70px { width: 70px; } .ix .bar.w-96px { width: 96px; } .ix .bar.w-108px { width: 108px; }
.phone { width: 300px; margin-inline: auto; border-radius: 48px; padding: 10px; box-shadow: 0 0 0 1px rgb(12 26 51 / .4), 0 30px 60px -22px rgb(12 26 51 / .5), 0 70px 120px -50px rgb(12 26 51 / .4); }
.phone::before { content: ""; position: absolute; inset: 1px; border-radius: 47px; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .14); pointer-events: none; }
.phone__screen { border-radius: 38px; height: 600px; }
.island { top: 10px; width: 88px; height: 26px; margin-left: -44px; }
/* home.css gives every phone a dark-theme ring; the comp keeps its own phone shadows in dark too */
:root[data-theme="dark"] .phone { box-shadow: 0 0 0 1px rgb(12 26 51 / .4), 0 30px 60px -22px rgb(12 26 51 / .5), 0 70px 120px -50px rgb(12 26 51 / .4); }
:root[data-theme="dark"] .duo .phone { box-shadow: var(--shadow-band); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .phone { box-shadow: 0 0 0 1px rgb(12 26 51 / .4), 0 30px 60px -22px rgb(12 26 51 / .5), 0 70px 120px -50px rgb(12 26 51 / .4); }
  :root:not([data-theme="light"]) .duo .phone { box-shadow: var(--shadow-band); }
}
.ixm__status { display: flex; justify-content: space-between; padding: 15px 26px 0 30px; font: 600 13px/1 var(--sans); color: #14284B; }
.ixm .ix__nav { padding: 20px 18px 14px; }
.ixm .burger { width: 34px; height: 34px; border-radius: 50%; box-shadow: inset 0 0 0 1px #DCE3EC; display: grid; place-items: center; color: #14284B; }
.ixm .burger .i { width: 15px; height: 15px; }
.ixm__body { padding: 20px 18px 0; }
.ixm h4 { margin-top: 12px; font-size: 27px; }
.ixm .lines { margin-top: 12px; }
.ixm .photo { margin-top: 16px; height: 150px; }
.ixm__acts { margin-top: 14px; display: grid; gap: 8px; }
.ixm__acts span { height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; }
.ixm__acts .p { background: #14284B; color: #fff; font-variant-numeric: tabular-nums; }
.ixm__acts .p .i { width: 14px; height: 14px; color: #F59B2A; }
.ixm__acts .s { box-shadow: inset 0 0 0 1px #C9D3E0; color: #14284B; }
.ixm__list { margin-top: 14px; border-radius: 14px; background: #F4F7FA; padding: 4px 14px; }
.ixm__list div { display: flex; justify-content: space-between; align-items: center; padding: 11px 0; border-bottom: 1px solid #E1E7EF; }
.ixm__list div:last-child { border-bottom: 0; }
.ixm__list .bar { width: 120px; margin: 0; height: 7px; }
.ixm__list .i { width: 13px; height: 13px; color: #6B7C9B; }

/* ---------- Check your site in a minute ---------- */
.check__grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; align-items: center; max-width: 1000px; margin-inline: auto; padding: 48px 56px; border-radius: 28px; background: var(--stage); }
.check__grid .h2 { margin-top: 0; }
.qs { margin-top: 22px; display: grid; max-width: 34em; }
.qs li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--hair-2); font-size: 17px; line-height: 1.45; }
.qs .chip { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.check-after { margin-top: 16px; font-size: 17px; line-height: 1.5; color: var(--ink-2); max-width: 34em; }
.check-after b { color: var(--ink); font-weight: 600; }
.check .phone__screen { height: 520px; }

/* ---------- What we build ---------- */
.build__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 32px 72px; align-items: start; }
.wlist { border-top: 1px solid var(--hair); }
.wlist li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; align-items: start; padding: 15px 0; border-bottom: 1px solid var(--hair); font-size: 17px; line-height: 1.5; color: var(--ink-2); }
.wlist b { color: var(--ink); font-weight: 600; }
.focus-line { margin-top: 18px; font-size: 17px; line-height: 1.55; color: var(--ink); max-width: 34em; }

/* ---------- How a rebuild works ---------- */
.how { margin-top: 104px; }
.get { margin-top: 22px; font-size: 17px; line-height: 1.55; color: var(--ink-2); max-width: 40em; }
.get b { color: var(--ink); font-weight: 600; }
.how__acts { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.how__acts .link { color: var(--ink); }

/* ---------- Does your website show up in ChatGPT? ---------- */
.gptbox { display: grid; grid-template-columns: 56px 1fr; gap: 22px; align-items: start; padding: 34px 36px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-2); }
.gptbox .chip { width: 48px; height: 48px; border-radius: 14px; }
.gptbox .chip .i { width: 22px; height: 22px; }
.gptbox h2 { font-weight: 600; font-size: clamp(28px, 2.8vw, 38px); letter-spacing: -0.03em; line-height: 1.1; text-wrap: balance; }
.gptbox p { margin-top: 12px; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 46em; }
.gptbox .link { margin-top: 6px; color: var(--ink); }

/* ---------- Questions ---------- */
.qsec { margin-top: 104px; }

/* ---------- Narrower screens ---------- */
@media (max-width: 1200px) {
  .duo { height: auto; display: grid; gap: 20px; justify-items: center; padding-bottom: 28px; }
  .duo .frame, .duo .phone, .duo .tagline { position: relative; left: auto; top: auto; margin-left: 0; }
  /* The frame fills the column up to 780px and its 760px page scales to fit, so iPad portrait does not clip it.
     From about 848px the frame is a full 780px and the zoom is the desktop 1.026 again. */
  .duo > :has(> .frame) { justify-self: stretch; min-width: 0; }
  .duo .frame { width: 100%; max-width: 780px; margin-inline: auto; container-type: inline-size; }
  .duo .scale--c { zoom: min(1.026, tan(atan2(100cqw, 760px))); }
  .duo .tagline { text-align: center; }
  .duo .phone { display: none; }
}
/* Browsers without CSS trig: one fixed step that fits the narrowest tablet column (761px less 8% gutters) */
@supports not (zoom: tan(atan2(1px, 1px))) {
  @media (max-width: 847px) { .duo .scale--c { zoom: .92; } }
}
@media (max-width: 1100px) {
  .check__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px; }
  .check__grid figure { display: none; }
  .build__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  .hero { --edgeh: 0px; }
  .hero__copy { padding-top: 22px; padding-bottom: 36px; }
  .hero h1 { margin-top: 12px; font-size: 40px; line-height: 1.02; }
  .lede { margin-top: 12px; }
  .ring { margin-top: 4px; }
  /* Phones: the example pair is a laptop extra here; "What you get" repeats What we build, so phones skip it too */
  .duo, .get { display: none; }
  .sec { padding-top: 48px; }
  .body { font-size: 17px; }
  .check__grid { padding: 22px 16px 18px; border-radius: 22px; margin-inline: -6px; }
  .qs { margin-top: 14px; }
  .qs li { font-size: 15px; padding: 11px 0; gap: 12px; }
  .check-after { font-size: 15px; margin-top: 12px; }
  .wlist li { font-size: 15px; padding: 11px 0; gap: 12px; }
  .focus-line { font-size: 15px; }
  .build__grid { gap: 14px; }
  .how { margin-top: 48px; }
  .how__grid { gap: 14px; }
  .how__acts .btn { width: 100%; }
  .gptbox { grid-template-columns: 1fr; gap: 12px; padding: 22px 18px; border-radius: 20px; }
  .gptbox .chip { width: 40px; height: 40px; border-radius: 12px; }
  .gptbox h2 { font-size: 24px; }
  .gptbox p { font-size: 15px; }
  .qsec { margin-top: 48px; }
}
@media (max-width: 374px) { .hero h1 { font-size: 36px; } }

/* F41, 22 Oct: the close card's email line, as the hero's hint, on the cream card (fixed colours in both themes) */
.go .cta2__hint { margin-top: 14px; color: #3E4F70; }
.go .cta2__hint a { color: #14284B; }