/* Nightly's bright pages (30 Oct 2026): the home page, every "websites for" page, the comparison and their US twins.
   Lawrence's mock-up v5 (strategy/landing-revamp/): Durable's layout and type, Wix's living gradient as the colour.
   - Type is thin: headings in Instrument Serif 400 (the free match for Durable's New Spirit Condensed), everything else
     in Inter 400, buttons and labels 500. Nothing on these pages is heavier than 500 ("the text font looks too fat").
   - The gradient (aqua top-left, cornflower top-centre, periwinkle right, fading to pale sky, with a faint warm glow) is
     only on the hero's wash, the showcase panel, the collage and the closing box; the rest is white, as on Durable. A slow
     drift of light crosses it, off for reduced motion.
   The studio pages keep assets/styles.css. */
:root {
  --aqua: #b4e0d6;
  --cornflower: #6e9bf7;
  --periwinkle: #8a8ff7;
  --sky: #d6e5f8;
  --warm: #ffd9b8;
  --ink: #111216;
  --ink-2: #2b2f3d;    /* the hero's line, on the colour */
  --muted: #5c6070;    /* 6.3:1 on white, 5.6:1 on --card */
  --accent: #3456d8;   /* ticks, numerals and links: 5.9:1 on white */
  --line: #e8e8ec;
  --card: #f1f1f1;     /* Durable's card grey */
  --serif: "Instrument Serif", "Instrument Serif fallback", Georgia, serif;
  --sans: Inter, "Inter fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
/* The two faces are served from this site (static/fonts/, latin, from Google Fonts; both under the SIL Open Font Licence)
   and preloaded with the page. Until they arrive, the local fallbacks are sized to take up the same room, so nothing
   moves when they swap in (Lighthouse on a phone, 30 Oct 2026: the serif's late arrival shifted the page by 0.114). */
@font-face { font-family: "Instrument Serif"; src: url("../fonts/instrument-serif-latin-6c8e8a29.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Inter; src: url("../fonts/inter-latin-400-500-1dc044f4.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif fallback"; src: local("Times New Roman"), local("TimesNewRomanPSMT"); size-adjust: 83.5%; ascent-override: 118.6%; descent-override: 37.1%; line-gap-override: 0%; }
@font-face { font-family: "Inter fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 107%; ascent-override: 90.7%; descent-override: 22.4%; line-gap-override: 0%; }
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { background: #fff; color: var(--ink); font-family: var(--sans); font-weight: 400; font-size: 17px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
b, strong { font-weight: 500; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 24px; }
[hidden] { display: none !important; }  /* the US twin of a demo stays hidden until assets/market.js shows it */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 14px; border-radius: 10px; text-decoration: none; font-weight: 500; }
.skip:focus { left: 8px; }
h1, h2, .amt { font-family: var(--serif); font-weight: 400; letter-spacing: -.01em; }
h3 { font-size: 17px; line-height: 1.35; font-weight: 500; }
/* Words never break (Lawrence, 26 Oct): a heading wraps between words only, and never hyphenates. */
h1, h2, h3 { overflow-wrap: normal; -webkit-hyphens: manual; hyphens: manual; text-wrap: balance; }
.nw { white-space: nowrap; }  /* a hyphenated word in a heading, held whole at build time (build.py held) */

/* ---------- The living gradient ---------- */
.mesh { position: relative; isolation: isolate; overflow: hidden;
  background:
    radial-gradient(55% 75% at 0% 0%, var(--aqua) 0%, rgba(180, 224, 214, 0) 70%),
    radial-gradient(45% 65% at 42% -5%, var(--cornflower) 0%, rgba(110, 155, 247, 0) 72%),
    radial-gradient(55% 80% at 100% 5%, var(--periwinkle) 0%, rgba(138, 143, 247, 0) 70%),
    radial-gradient(40% 55% at 85% 105%, var(--warm) 0%, rgba(255, 217, 184, 0) 70%),
    linear-gradient(180deg, #a8c2f6 0%, var(--sky) 78%, #e6eefa 100%); }
.mesh::before { content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; opacity: .55;
  background: radial-gradient(30% 30% at 30% 40%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0) 70%), radial-gradient(25% 25% at 70% 60%, rgba(160, 190, 255, .6), rgba(160, 190, 255, 0) 70%); }
@media (prefers-reduced-motion: no-preference) {
  .mesh::before { animation: drift 18s ease-in-out infinite alternate; }
  @keyframes drift { from { transform: translate(-6%, -4%) rotate(0deg); } to { transform: translate(6%, 5%) rotate(8deg); } }
}

/* ---------- Top bar: light, small type, one dark button ---------- */
.top { position: sticky; top: 0; z-index: 20; background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.top .wrap { display: flex; align-items: center; height: 64px; gap: 28px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font-family: var(--serif); font-size: 26px; line-height: 1; letter-spacing: -.01em; text-decoration: none; color: var(--ink); }
.logo svg { width: 24px; height: 24px; flex: none; }
.top-links { display: flex; gap: 26px; font-size: 14px; font-weight: 500; color: var(--muted); }
.top-links a { text-decoration: none; padding: 6px 0; }
.top-links a:hover { color: var(--ink); }
.top .spacer { flex: 1; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0; font: 500 16px/1.1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease; }
.btn-ink { background: rgba(0, 0, 0, .86); color: #fff; }
.btn-ink:hover { background: #000; }
.top .btn { min-height: 38px; font-size: 14px; padding: 0 16px; border-radius: 10px; }

/* ---------- Hero: centred, on a wash of the gradient that fades to white ---------- */
.hero { text-align: center; margin-top: -64px; padding: 160px 0 56px; }
.hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 45%; z-index: -1; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); }
.hero .eyebrow { font-size: 14px; font-weight: 500; color: var(--ink-2); margin-bottom: 14px; }
h1 { font-size: clamp(56px, 8.4vw, 104px); line-height: .95; max-width: 12ch; margin: 0 auto; }
h1.h1-long { font-size: clamp(44px, 5.6vw, 72px); line-height: 1; max-width: 18ch; }
.hero .lede { font-size: 19px; color: var(--ink-2); margin: 22px auto 0; max-width: 46ch; }
.hero .lede--long { font-size: 17px; max-width: 62ch; }
.start { position: relative; z-index: 1; display: flex; gap: 8px; margin: 30px auto 0; max-width: 520px; background: #fff; border-radius: 16px; padding: 6px; box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 12px 32px rgba(40, 70, 160, .16); }
.start:focus-within { box-shadow: 0 0 0 2px var(--ink), 0 12px 32px rgba(40, 70, 160, .16); }
.start input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 17px; padding: 0 14px; color: var(--ink); }
.start input::placeholder { color: #6b6f7b; opacity: 1; }
.start .btn { min-height: 50px; }
.trust { position: relative; z-index: 1; list-style: none; margin-top: 16px; font-size: 14px; color: var(--ink-2); display: flex; gap: 8px 18px; justify-content: center; flex-wrap: wrap; }
.trust li::before { content: "\2713"; margin-right: 6px; color: var(--accent); }

/* ---------- Showcase: the bakery on a computer and a phone, between two more ---------- */
.showcase { margin-top: 8px; }
.show { border-radius: 28px; height: 600px; }
.browser { position: absolute; display: block; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 24px 60px rgba(30, 50, 130, .25); }
.bar { height: 26px; background: #f2f3f6; display: flex; align-items: center; gap: 6px; padding: 0 12px; border-bottom: 1px solid #e7e8ee; }
.bar i { width: 9px; height: 9px; border-radius: 50%; background: #d4d6dd; }
.browser img, .phone img { width: 100%; height: auto; }
.phone { position: absolute; display: block; border-radius: 26px; overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .06); box-shadow: 0 24px 50px rgba(30, 50, 130, .3); }
.show .hero-desk { width: 760px; left: 50%; top: 52px; transform: translateX(-50%); z-index: 3; }
.show .hero-phone { width: 210px; left: calc(50% + 250px); top: 170px; z-index: 4; }
.show .side-phone { width: 190px; left: 3%; top: 110px; transform: rotate(-5deg); z-index: 1; }
.show .side-desk { width: 350px; right: -1%; top: 64px; transform: rotate(4deg); z-index: 2; }
a.browser:hover, a.phone:hover { box-shadow: 0 28px 70px rgba(30, 50, 130, .34); }
.note { color: var(--muted); font-size: 13px; margin-top: 14px; text-align: center; }
.note--end { text-align: right; }

/* ---------- Sections ---------- */
.s, .section { padding-top: 120px; }
.s h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; text-align: center; max-width: 18ch; margin: 0 auto; }
.s h2.small { font-size: clamp(30px, 3vw, 40px); max-width: none; }

.kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 36px; list-style: none; }
.kind { background: var(--card); border-radius: 24px; padding: 22px 24px; }
.kind h3 { font-size: 16px; }
.kind a { text-decoration: none; }
.kind a:hover { text-decoration: underline; text-underline-offset: 3px; }
.kind p { color: var(--muted); font-size: 15px; margin-top: 2px; }

.features { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 48px; margin-top: 56px; align-items: center; }
.flist { list-style: none; }
.flist li { padding: 16px 0; border-bottom: 1px solid var(--line); }
.flist p { color: var(--muted); font-size: 15px; margin-top: 2px; }
.collage { display: block; border-radius: 28px; height: 520px; }
.collage .c-desk { width: 82%; left: 6%; top: 40px; }
.collage .c-phone { width: 170px; right: 6%; top: 150px; }

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; list-style: none; }
.step { background: var(--card); border-radius: 24px; padding: 28px; }
.num { display: block; font-family: var(--serif); font-size: 44px; line-height: 1; color: var(--accent); }
.step h3 { font-size: 18px; margin-top: 14px; }
.step p { color: var(--muted); font-size: 15px; margin-top: 4px; }

.price { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 40px auto 0; max-width: 920px; }
.card { border-radius: 24px; padding: 32px; background: var(--card); }
.card.live { background: #fff; border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(30, 50, 130, .1); }
.card .tag { font-size: 14px; font-weight: 500; color: var(--muted); }
.amt { font-size: 64px; line-height: 1; margin-top: 8px; }
.amt small { font-family: var(--sans); font-size: 16px; letter-spacing: 0; color: var(--muted); }
.card ul { list-style: none; margin-top: 20px; display: grid; gap: 8px; font-size: 15px; }
.card li::before { content: "\2713"; margin-right: 10px; color: var(--accent); }
.card .also { font-size: 13px; color: var(--muted); margin-top: 16px; }

.faq { margin: 32px auto 0; max-width: 820px; border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { font-size: 17px; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 20px 0; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--muted); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { color: var(--muted); font-size: 15px; max-width: 66ch; padding-bottom: 20px; margin-top: -8px; }

/* ---------- The "websites for" pages' and the comparison's own content, as Durable-style blocks ---------- */
.section-head { text-align: center; max-width: 820px; margin: 0 auto; }
.label { font-size: 14px; font-weight: 500; color: var(--accent); }
.section-head h2 { font-size: clamp(36px, 4.6vw, 60px); line-height: 1.02; margin-top: 10px; }
.section-head .lede { color: var(--muted); font-size: 17px; margin: 14px auto 0; max-width: 62ch; }
.section-head a, .qa a, .faq a, .compare a, .sources a, .ticks a, .two-col a { color: var(--accent); text-underline-offset: 3px; }
.rules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.rules > div { background: var(--card); border-radius: 24px; padding: 24px 26px 26px; }
.rules p { color: var(--muted); font-size: 15px; margin-top: 4px; }
.qa { list-style: none; display: grid; gap: 12px; margin: 40px auto 0; max-width: 860px; }
.qa li { background: var(--card); border-radius: 24px; padding: 24px 28px; }
.qa .roman { display: none; }
.qa-q { font-size: 18px; }
.qa-a p { color: var(--muted); font-size: 15px; margin-top: 8px; }
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; list-style: none; margin-top: 32px; }
.chips a { display: inline-block; border: 1px solid var(--line); border-radius: 12px; padding: 9px 16px; font-size: 14px; font-weight: 500; text-decoration: none; background: #fff; }
.chips a:hover { border-color: #c9ccd4; background: var(--card); }
.two-col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.two-col > div { background: var(--card); border-radius: 24px; padding: 28px 30px; display: grid; gap: 8px; align-content: start; }
.two-col h3 { font-size: 20px; }
.muted { color: var(--muted); }
.table-scroll { margin-top: 40px; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 24px; background: var(--card); padding: 8px 12px; }
table.compare { width: 100%; border-collapse: collapse; min-width: 680px; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 16px 14px; border-bottom: 1px solid #e2e2e6; vertical-align: top; }
.compare tr:last-child th, .compare tr:last-child td { border-bottom: 0; }
.compare thead th { font-size: 14px; font-weight: 500; color: var(--muted); }
.compare thead th.us { color: var(--ink); }
.compare tbody th { font-weight: 500; width: 22%; }
.compare td { color: var(--muted); }
.compare td.us { color: var(--ink); background: #fff; }
.compare .cell-note { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
.compare-note { margin: 14px auto 0; font-size: 13px; color: var(--muted); max-width: 80ch; text-align: center; }
.ticks { list-style: none; display: grid; gap: 12px; margin: 40px auto 0; max-width: 860px; color: var(--muted); font-size: 15px; }
.ticks li { background: var(--card); border-radius: 20px; padding: 18px 24px; }
.ticks strong { color: var(--ink); }
.sources { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 40px; }
.sources > div { background: var(--card); border-radius: 24px; padding: 24px 26px; }
.sources ul { list-style: none; margin-top: 10px; display: grid; gap: 8px; font-size: 14px; }
.sources a { overflow-wrap: anywhere; }

/* ---------- Closing box ---------- */
.end-wrap { padding-top: 120px; }
.end { border-radius: 28px; text-align: center; padding: 88px 24px; }
.end h2 { font-size: clamp(40px, 5.2vw, 72px); line-height: 1; max-width: 14ch; margin: 0 auto; }

/* ---------- Footer ---------- */
.foot { margin-top: 96px; border-top: 1px solid var(--line); padding: 56px 0 48px; font-size: 14px; color: var(--muted); }
.foot-cols { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr 1fr; gap: 32px; }
.foot-cols h2 { font-family: var(--sans); font-size: 13px; font-weight: 500; letter-spacing: 0; color: var(--ink); margin: 0 0 12px; line-height: 1.4; }
.foot-cols ul { list-style: none; display: grid; gap: 8px; }
.foot-cols a { text-decoration: none; }
.foot-cols a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.foot-line { margin-top: 10px; }
.foot-legal { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13px; display: grid; gap: 6px; }
.foot-legal a { color: var(--ink); }

/* Ask Nightly: there if you want it, never louder than the one button, and away while the hero is on screen. */
.ask-launch { position: fixed; right: 16px; bottom: 16px; z-index: 30; display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px 0 10px; border: 1px solid var(--line); border-radius: 12px; background: #fff; color: var(--ink); font-size: 14px; font-weight: 500; cursor: pointer; box-shadow: 0 6px 20px rgba(15, 20, 40, .12); transition: opacity .2s ease, transform .2s ease, visibility .2s; }
.ask-launch svg { width: 20px; height: 20px; }
.ask-launch:hover { border-color: #c9ccd4; }
.ask-launch.is-away { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* ---------- Narrower screens ---------- */
@media (max-width: 1100px) {
  .show .side-desk { display: none; }
  .show .hero-desk { width: 72%; left: 52%; }
  .show .hero-phone { width: 180px; left: auto; right: 5%; top: 160px; }
  .show .side-phone { width: 160px; left: 2%; }
  .foot-cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .top-links { display: none; }
  .top .wrap { gap: 14px; height: 58px; }
  .hero { margin-top: -58px; padding: 112px 0 36px; }
  h1 { font-size: clamp(46px, 15.5vw, 58px); }
  h1.h1-long { font-size: clamp(34px, 9.6vw, 44px); }
  .hero .lede { font-size: 18px; }
  .hero .lede--long { font-size: 16px; }
  .start { flex-direction: column; padding: 8px; }
  .start input { min-height: 50px; }
  .start .btn { width: 100%; }
  .show { height: 340px; }
  .show .side-phone, .show .side-desk { display: none; }
  .show .hero-desk { width: 88%; left: 50%; top: 28px; }
  .show .hero-phone { width: 104px; right: 4%; top: 96px; border-radius: 16px; }
  .kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .price, .features, .rules, .two-col, .sources { grid-template-columns: minmax(0, 1fr); }
  .collage { height: 300px; }
  .collage .c-desk { width: 86%; left: 4%; top: 22px; }
  .collage .c-phone { width: 96px; right: 4%; top: 84px; border-radius: 16px; }
  .note--end { text-align: center; }
  .s, .section, .end-wrap { padding-top: 88px; }
  .end { padding: 56px 18px; }
  .foot { margin-top: 72px; }
  /* The comparison table, one service at a time. */
  .table-scroll { overflow: visible; padding: 4px 16px; }
  table.compare { min-width: 0; }
  .compare thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .compare, .compare tbody, .compare tr, .compare th, .compare td { display: block; }
  .compare tbody tr { padding: 20px 0 12px; border-bottom: 1px solid #e2e2e6; }
  .compare tbody tr:last-child { border-bottom: 0; }
  .compare tbody th { width: auto; padding: 0 0 10px; border: 0; font-size: 17px; }
  .compare td { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 8px 10px; border: 0; border-radius: 12px; }
  .compare td::before { content: attr(data-label); font-size: 13px; font-weight: 500; color: var(--muted); padding-top: 1px; }
  .compare td .cell-note { grid-column: 2; margin-top: -6px; }
  .compare td.us::before { color: var(--accent); }
}
@media (max-width: 560px) {
  .wrap { padding: 0 16px; }
  .kinds { grid-template-columns: minmax(0, 1fr); }
  .foot-cols { grid-template-columns: minmax(0, 1fr); }
  .card { padding: 28px 24px; }
  .amt { font-size: 56px; }
  .ask-launch { width: 44px; min-height: 44px; padding: 0; justify-content: center; }
  .ask-launch span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}