/* klerk marketing page. Colours are the product's own (public/css/tokens.css), so the page, the brand mark and the
   real screenshots read as one thing. One typeface, Estedad, at a few sizes far apart. Logical properties only:
   the page is right-to-left. */
@font-face { font-family: "Estedad"; src: url("fonts/Estedad-Variable.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --bg: #f6f1e7; --surface: #fcfaf5; --surface-2: #eee8db; --surface-3: #e4dccb;
  --ink: #2a211d; --ink-2: #545a50;
  --accent: #376746; --accent-ink: #fff1e9; --accent-strong: #265335; --accent-tint: #d4e8cf; --accent-text: #254f35;
  --deep: #14231a; --deep-2: #1c3324; --deep-ink: #f5ebe1; --deep-ink-2: #b7c2b3; --deep-accent: #8fd3a5;
  /* terracotta joins the sage, never replaces it: full stops, line tips and a sun behind green surfaces */
  --terra: #c8664a; --terra-text: #9e4a31; --deep-terra: #e8947a;
  --terra-light: #e0947a; --terra-deep: #8f3f29; --terra-pale: #fbeee8;
  --radius: 20px; --radius-sm: 12px;
  --m: clamp(16px, 4vw, 56px);             /* the one pair of page margins */
  --gap: clamp(112px, 13vw, 200px);        /* between sections */
  --s-body: 18px; --s-lead: clamp(19px, 1.5vw, 23px); --s-h3: clamp(24px, 2.2vw, 32px);
  --s-h2: clamp(34px, 4.6vw, 68px); --s-xl: clamp(46px, 8vw, 128px);
  --ease: cubic-bezier(.23, 1, .32, 1);
  --font: "Estedad", "Segoe UI", Tahoma, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1713; --surface: #16211b; --surface-2: #1b2821; --surface-3: #24342a;
    --ink: #f0e7dd; --ink-2: #aab3a5;
    --accent: #67b982; --accent-ink: #06150c; --accent-strong: #7ecc96; --accent-tint: #1b3e29; --accent-text: #9ad9ac;
    --deep: #0a110d; --deep-2: #111c15;
    --terra: #d97a5c; --terra-text: #eda58c; --terra-light: #f0a88f; --terra-deep: #a8533a; --terra-pale: #2a1d17;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--s-body)/1.7 var(--font); text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, p, ul, figure, fieldset { margin: 0; }
fieldset { border: 0; padding: 0; min-width: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
.sprite { position: absolute; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 8px; }
.sec-h { font-size: var(--s-h2); font-weight: 850; line-height: 1.2; letter-spacing: -.015em; text-wrap: balance; }
section { scroll-margin-top: 24px; }

/* The mark: flat tile in the accent, cross in the text-on-accent colour (dark theme flips both, like the app). */
.mark { flex: none; }
.mark-tile { fill: var(--accent); }
.mark-cross { stroke: var(--accent-ink); }

/* Buttons: one shape, fully round, everywhere. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 56px; padding: 0 30px; border-radius: 999px; background: var(--accent); color: var(--accent-ink); font-weight: 700; text-decoration: none; transition: transform 160ms var(--ease), background-color 200ms ease; }
.btn:active { transform: scale(.97); }
.btn-sm { min-height: 44px; padding: 0 22px; font-size: 16px; }
.btn-ghost { background: var(--surface-2); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: var(--accent-strong); }
  .btn-ghost:hover { background: var(--surface-3); }
}

/* ---------- Top bar ---------- */
.bar { display: flex; align-items: center; gap: 28px; padding: 20px var(--m); }
.logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; font-size: 24px; font-weight: 850; letter-spacing: -.01em; }
.logo-en { font-size: 13px; font-weight: 700; letter-spacing: .16em; color: var(--terra-text); padding-block-start: 4px; }
.bar-nav { display: flex; gap: 24px; margin-inline-start: auto; }
.bar-nav a { text-decoration: none; color: var(--ink-2); font-weight: 600; padding: 8px 2px; transition: color 200ms ease; }
.bar-nav a:hover { color: var(--terra-text); }

/* ---------- Hero ---------- */
.hero { padding: clamp(32px, 5vw, 72px) var(--m) 0; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.hero-copy { display: grid; gap: 28px; justify-items: start; }
.hero h1 { font-size: var(--s-xl); font-weight: 900; line-height: 1.08; letter-spacing: -.025em; }
.hero h1 { font-size: clamp(40px, 5.6vw, 92px); }
.hero h1 > span { display: block; white-space: nowrap; }
.hero h1 > span + span { color: var(--accent); }
.lead { font-size: var(--s-lead); color: var(--ink-2); max-width: 40ch; text-wrap: pretty; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* The mark on the owner's bloom: the same leaf corners as the panel it sits on. */
.hero-stage { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: min(68svh, 620px); border-radius: 56px 16px 56px 16px; background: var(--deep); }
.hero-mark { width: 38%; height: auto; aspect-ratio: 1; }

/* ---------- Light or dark ---------- */
.modes { margin-block-start: 0; padding: clamp(72px, 10vw, 160px) var(--m); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 5vw, 80px); align-items: center; transition: background-color 700ms var(--ease), color 700ms var(--ease); }
.modes-copy { display: grid; gap: 18px; justify-items: start; }
.modes-copy p { font-size: var(--s-lead); color: var(--ink-2); max-width: 28ch; transition: color 700ms var(--ease); }
.modes-shot { position: relative; overflow: hidden; border-radius: var(--radius); aspect-ratio: 2880 / 1800; background: var(--surface-2); }
.modes-shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The dark screen is wiped in from the start (right) edge; going back wipes it out the same way. */
.m-dark { clip-path: inset(0 0 0 100%); transition: clip-path 900ms cubic-bezier(.77, 0, .175, 1); }
.modes:has(input[value="dark"]:checked) { background: var(--deep); color: var(--deep-ink); }
.modes:has(input[value="dark"]:checked) .modes-copy p { color: var(--deep-ink-2); }
.modes:has(input[value="dark"]:checked) .seg { background: var(--deep-2); }
.modes:has(input[value="dark"]:checked) .seg span { color: var(--deep-ink-2); }
.modes:has(input[value="dark"]:checked) .seg input:checked + span { background: var(--deep-accent); color: var(--deep); }
.modes:has(input[value="dark"]:checked) .m-dark { clip-path: inset(0); }
@media (prefers-reduced-motion: reduce) { .m-dark { transition-duration: 1ms; } }

/* The owner's artworks: decorative, under the content (each stage is its own stacking context). */
.art { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.art-bloom { object-position: right top; transform: scaleX(-1); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .art-bloom { animation: bloom 30s ease-in-out infinite alternate; }
  .art-checker { animation: drift 40s ease-in-out infinite alternate; }
}
@keyframes bloom { from { transform: scaleX(-1) scale(1.02); } to { transform: scaleX(-1) scale(1.1) translate(2%, 2%); } }
@keyframes drift { from { transform: scale(1.15) translateY(-3%); } to { transform: scale(1.15) translateY(3%); } }

/* ---------- Features: text and screen side by side, sides swap each row ---------- */
.features { padding: var(--gap) var(--m) 0; display: grid; gap: clamp(64px, 8vw, 120px); }
.feat { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; gap: clamp(32px, 6vw, 96px); }
.feat-flip .feat-text { order: 2; }
.feat-text { display: grid; gap: 14px; }
.feat h3 { font-size: var(--s-h3); font-weight: 800; line-height: 1.3; }
.feat p { font-size: var(--s-lead); color: var(--ink-2); max-width: 28ch; }
.shot { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--surface-2); aspect-ratio: 16 / 10; }
.shot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1200ms var(--ease); }
.crop-profile img { object-position: 40% 0%; }
.crop-storage img { object-position: 30% 40%; }
.crop-report img { object-position: 50% 10%; }
@media (hover: hover) and (pointer: fine) { .feat:hover .shot img { transform: scale(1.03); } }

/* ---------- The live bill ---------- */
.bill { margin-block-start: var(--gap); padding: clamp(56px, 8vw, 120px) var(--m); background: var(--surface-2); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.bill-copy { display: grid; gap: 16px; align-self: start; }
.bill-copy p { font-size: var(--s-lead); color: var(--ink-2); }
.bench { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 260px); gap: 28px; align-items: start; }
.controls { display: grid; gap: 22px; }
.ctl { display: grid; gap: 8px; }
.ctl > span, .ctl legend { font-size: 15px; font-weight: 700; color: var(--ink-2); padding: 0; }
.ctl input[type="text"] { width: 100%; min-height: 52px; padding: 0 16px; border: 0; border-radius: var(--radius-sm); background: var(--surface); font-size: 18px; font-weight: 600; }
.ctl input[type="text"]:focus-visible { outline-offset: 0; }
.ctl output { color: var(--ink); }
.ctl input[type="range"] { width: 100%; min-height: 44px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--surface-3); justify-self: start; }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 16px; font-weight: 700; color: var(--ink-2); transition: background-color 200ms ease, color 200ms ease; }
.seg input:checked + span { background: var(--surface); color: var(--ink); }
.seg input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }

/* The paper is a real interface fragment ([data-ui]): it keeps print conventions, table lines included. */
.frag { font-size: 14px; line-height: 1.55; }
/* Real paper proportions. A4 and A5 share one shape (1 : 1.414); A5 is A4 halved, so 70.7% of its width. The slot
   keeps the A4 sheet's room, so the controls never move when the size changes. Inside the sheet everything is
   sized in em off a font set in container units: the same print size takes a larger share of the smaller sheet,
   as it does on real A5. */
.slot { --a4w: min(100%, 420px); width: var(--a4w); aspect-ratio: 210 / 297; justify-self: center; display: grid; place-items: start center; }
.paper { container-type: inline-size; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; background: #fffaf5; color: #22302a; border-radius: 4px; transition: width 480ms var(--ease); }
.paper > * { font-size: 3.15cqi; }
.paper.is-a5 { width: 70.7%; }
.paper.is-a5 > * { font-size: 4.45cqi; }
.p-head, .p-patient, .p-table, .p-foot { margin-inline: 7cqi; }
.p-head { display: flex; align-items: center; gap: .8em; padding-block: 7cqi .8em; border-block-end: 2px solid #376746; }
.p-mark { width: 2.1em; height: 2.1em; }
.p-head .mark-tile { fill: #376746; }
.p-head .mark-cross { stroke: #fff; }
.p-head b { display: block; font-size: 1.3em; line-height: 1.35; font-weight: 800; color: #376746; overflow-wrap: anywhere; }
.p-head small { display: block; color: #5b6b63; font-size: .82em; }
.p-patient { margin-block: 1em .7em; font-weight: 700; }
.code, .m { direction: ltr; unicode-bidi: isolate; font-variant-numeric: tabular-nums; }
.p-patient .code { font-weight: 400; color: #5b6b63; margin-inline-start: .4em; }
.p-table { width: calc(100% - 14cqi); border-collapse: collapse; align-self: start; }
.p-table th { text-align: start; font-weight: 600; font-size: .85em; color: #5b6b63; background: #eef4ef; padding: .45em .6em; }
.p-table td { padding: .55em .6em; border-block-end: 1px solid #dfe7e1; }
.p-table th:last-child, .p-table td:last-child { text-align: end; white-space: nowrap; }
.p-table tfoot td { border: 0; border-block-start: 1.5px solid #376746; font-weight: 800; font-size: 1.05em; }
.p-foot { grid-row: 5; display: flex; justify-content: space-between; padding-block: .8em 6cqi; color: #5b6b63; font-weight: 600; }
.p-foot > span { font-size: .78em; }
.p-brand { letter-spacing: .12em; color: #376746; }
.flash { animation: flash 700ms var(--ease); }
@keyframes flash { from { background: #d4e8cf; } }

/* ---------- Peace of mind ---------- */
.calm { position: relative; isolation: isolate; overflow: hidden; background: var(--deep); color: var(--deep-ink); padding: clamp(72px, 10vw, 160px) var(--m); }
.art-checker { inset: 0 auto 0 0; width: 38%; opacity: .9; }
.calm-inner { display: grid; gap: clamp(40px, 5vw, 72px); max-width: 62%; }
/* Each fact is as wide as its words (up to a measure), so the three sit close together instead of in wide equal columns. */
.facts { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 16em)); justify-content: start; gap: clamp(36px, 4vw, 56px) clamp(28px, 3.5vw, 48px); }
.facts li { max-width: 16em; }
.facts li { display: grid; gap: 10px; align-content: start; }
.facts b { font-size: clamp(26px, 2.6vw, 40px); font-weight: 850; line-height: 1.2; color: var(--deep-accent); }
.facts span { color: var(--deep-ink-2); }

/* ---------- Phones ---------- */
.phones { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.phones-copy { display: grid; gap: 16px; }
.phones-copy p { font-size: var(--s-lead); color: var(--ink-2); max-width: 30ch; }
.phones-row { display: flex; justify-content: center; gap: clamp(16px, 3vw, 40px); }
.shot-phone { width: min(280px, 44%); aspect-ratio: 390 / 844; border-radius: 30px; }
.phones-row .shot-phone:nth-child(2) { margin-block-start: 72px; }

/* ---------- FAQ ---------- */
.faq { padding: var(--gap) var(--m) 0; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq .sec-h { position: sticky; top: 32px; }
.faq-list { display: grid; gap: 10px; }
.faq details { background: var(--surface); border-radius: var(--radius-sm); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding: 14px 24px; font-size: clamp(18px, 1.5vw, 21px); font-weight: 750; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; width: 22px; height: 22px; color: var(--accent); transition: transform 240ms var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--terra); }
.faq details p { padding: 0 24px 22px; color: var(--ink-2); max-width: 60ch; }

/* ---------- Contact ---------- */
.contact { position: relative; overflow: hidden; isolation: isolate; margin: var(--gap) var(--m) 0; padding: clamp(48px, 8vw, 120px) clamp(24px, 6vw, 96px); border-radius: var(--radius); background: var(--accent); color: var(--accent-ink); display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.contact h2 { font-size: var(--s-h2); font-weight: 900; line-height: 1.15; letter-spacing: -.02em; }
.contact-copy { display: grid; gap: 18px; }
.contact-copy p { font-size: var(--s-lead); max-width: 30ch; opacity: .92; }
.contact-ways { display: grid; gap: 10px; }
.way { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 68px; padding: 12px 26px; border-radius: 999px; background: color-mix(in srgb, var(--accent-ink) 14%, transparent); text-decoration: none; font-weight: 700; transition: transform 160ms var(--ease), background-color 200ms ease; }
.way b { font-weight: 600; font-size: 16px; opacity: .9; overflow-wrap: anywhere; }
.way-main { background: var(--accent-ink); color: var(--accent); }
.way:active { transform: scale(.98); }
@media (hover: hover) and (pointer: fine) {
  .way:hover { background: color-mix(in srgb, var(--accent-ink) 24%, transparent); }
  .way-main:hover { background: var(--accent-ink); transform: translateY(-2px); }
}

/* ---------- Footer: the name returns, full width ---------- */
.foot { padding: clamp(64px, 9vw, 140px) var(--m) 32px; display: grid; gap: 24px; }
.foot-word { display: flex; align-items: center; gap: .16em; font-size: clamp(72px, 18vw, 300px); font-weight: 900; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.foot-word .mark { width: .7em; height: .7em; }
.foot-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; color: var(--terra-text); }

/* ---------- Motion: parts of each section rise in turn, once ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .hero-copy > * { opacity: 0; transform: translateY(28px); animation: rise 900ms var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms); }
  .js .hero-mark { opacity: 0; transform: scale(.9) rotate(-8deg); animation: rise 1100ms var(--ease) 250ms forwards; }
  .js [data-reveal]:not(.hero-copy) > *, .js .feat[data-reveal] .shot { opacity: 0; transform: translateY(24px); transition: opacity 700ms var(--ease), transform 700ms var(--ease); transition-delay: calc(var(--i, 0) * 80ms); }
  .js [data-reveal].is-in:not(.hero-copy) > *, .js .feat.is-in .shot { opacity: 1; transform: none; }
}
@keyframes rise { to { opacity: 1; transform: none; } }

/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
  .bench { grid-template-columns: minmax(0, 1fr); }
  .controls { grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; }
  .bill { grid-template-columns: minmax(0, 1fr); }
  .calm-inner { max-width: none; }
  .art-checker { opacity: .22; width: 100%; }
}

/* ---------- Phone: its own composition ---------- */
@media (max-width: 760px) {
  :root { --s-body: 17px; }
  .bar { gap: 16px; padding-block: 14px; }
  .bar-nav { display: none; }
  .bar .btn { margin-inline-start: auto; }
  .hero-copy { gap: 22px; }
  .actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; }
  .hero, .modes { grid-template-columns: minmax(0, 1fr); }
  .hero-stage { min-height: 220px; border-radius: 40px 12px 40px 12px; }
  .hero-mark { width: 120px; }
  .modes { padding-block: 72px; gap: 28px; }
  .modes-shot { border-radius: 16px; }
  .feat, .phones, .faq, .contact { grid-template-columns: minmax(0, 1fr); }
  .feat { gap: 20px; }
  .feat-flip .feat-text { order: 0; }
  .features { gap: 72px; }
  /* Desktop screens are too small to read at phone width: show a readable part of each, enlarged. */
  /* On a phone every screen is shown whole, at its own shape: nothing cropped or zoomed. */
  .feat .shot { border-radius: 16px; aspect-ratio: auto; }
  .feat .shot img { position: static; height: auto; object-fit: initial; }

  /* The bill and its controls share one screen: a compact paper, the name field right under it, then the
     two choices side by side. Nothing pushes the paper out of view while the visitor changes it. */
  .bill { padding-block: 56px; gap: 24px; }
  .bench { gap: 14px; }
  .slot { --a4w: min(100%, 300px); }
  .controls { grid-template-columns: auto auto; gap: 14px 12px; justify-content: start; }
  .ctl-name { grid-column: 1 / -1; }
  .seg span { padding: 0 14px; }

  .calm { padding-block-start: 200px; }
  .art-checker { inset: 0 0 auto 0; width: 100%; height: 160px; opacity: .9; }
  .facts { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .phones-row { justify-content: start; }
  .shot-phone { width: 46%; border-radius: 22px; }
  .phones-row .shot-phone:nth-child(2) { margin-block-start: 40px; }
  .faq .sec-h { position: static; }
  .faq summary { padding: 12px 18px; }
  .faq details p { padding: 0 18px 18px; }
  .contact { margin-inline: 0; border-radius: 0; padding: 56px var(--m); }
  .way { border-radius: 18px; padding: 12px 20px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; }
  .foot-row { display: grid; }
}

@media print {
  .js .hero-copy > *, .js .hero-mark, .js [data-reveal] > *, .js .feat .shot { opacity: 1 !important; transform: none !important; animation: none !important; }
  .faq .sec-h { position: static; }
}

/* ---------- Terracotta touches ---------- */
.dot { color: var(--terra); }
.calm .dot { color: var(--deep-terra); }
.facts li::before { content: ""; width: 44px; height: 3px; border-radius: 2px; background: var(--deep-accent); border-inline-end: 12px solid var(--deep-terra); }
/* A terracotta sun behind the sage: rising behind the mark on the hero stage, setting in the contact block's corner. */
.sun { position: absolute; border-radius: 50%; background: var(--terra); pointer-events: none; }
.hero-stage .sun { z-index: 0; width: 30%; aspect-ratio: 1; inset-block-start: 21%; inset-inline-end: 22%; }
.hero-mark { position: relative; z-index: 1; }
.contact .sun { z-index: -1; width: clamp(180px, 24vw, 320px); aspect-ratio: 1; inset-block-end: clamp(-160px, -9vw, -90px); inset-inline-start: clamp(-110px, -5vw, -50px); }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-stage .sun { opacity: 0; transform: translateY(60%); animation: rise 1600ms var(--ease) 450ms forwards; }
}
/* On a phone the sun peeks out beside the mark, far enough that a thumb can grab it (about 50px of it shows). */
@media (max-width: 760px) { .hero-stage .sun { width: 100px; inset-block-start: 10%; inset-inline-end: calc(50% - 112px); } }
/* Warm whites and inks: every white on this page carries a blush of terracotta (buttons, the contact block, the
   paper, the text on deep green) and the near-black ink an espresso drop of it. An open question's title turns
   terracotta with its icon. */
.faq details[open] summary { color: var(--terra-text); }

/* ---------- Terracotta into green ---------- */
/* The page is right-to-left, so "to left" runs with the reading: green first, warming into terracotta at the end. */
.hero h1 > span + span { background: linear-gradient(to left, var(--accent) 30%, var(--terra) 115%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero h1 > span + span .dot { color: var(--terra); }
.foot-word { background: linear-gradient(to right, var(--accent) 10%, var(--accent) 35%, var(--terra-deep) 80%, var(--terra) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.foot-word .mark-tile { fill: var(--accent); }
.foot-word .dot { color: var(--terra-light); }
.sun { background: radial-gradient(circle at var(--hx, 32%) var(--hy, 30%), var(--terra-light), var(--terra) 50%, var(--terra-deep) 110%); }
/* With site.js the suns can be grabbed by mouse or finger; touch-action stops a drag on a sun from scrolling. */
.sun.is-live { pointer-events: auto; cursor: grab; touch-action: none; -webkit-tap-highlight-color: transparent; transition: scale 220ms var(--ease), box-shadow 220ms ease; }
@media (hover: hover) and (pointer: fine) {
  .sun.is-live:hover { box-shadow: 0 0 0 12px color-mix(in srgb, var(--terra) 16%, transparent); }
}
.sun.is-held { cursor: grabbing; scale: 1.08; box-shadow: 0 0 0 16px color-mix(in srgb, var(--terra) 20%, transparent), 0 20px 44px -14px var(--terra-deep); }
.contact { background: linear-gradient(200deg, var(--accent) 45%, color-mix(in srgb, var(--accent-strong) 60%, var(--terra-deep)) 115%); }
.facts li::before { border-inline-end: 0; width: 56px; background: linear-gradient(to left, var(--deep-accent) 30%, var(--deep-terra)); }
.bill { background: linear-gradient(170deg, var(--surface-2) 55%, color-mix(in srgb, var(--surface-2) 80%, var(--terra-pale))); }
@media (hover: hover) and (pointer: fine) {
  .btn:not(.btn-ghost):hover { background: linear-gradient(to left, var(--accent-strong) 40%, color-mix(in srgb, var(--accent-strong) 55%, var(--terra-deep))); }
}