/* ==========================================================================
   CAIRN — one stylesheet for every page.

   GROUND   "Pebble tower" by Jeremy Thomas (Unsplash, CC0 via Wikimedia Commons), fixed, full bleed: a cairn on a
            pebble beach at Ventura, blue sea and sky. The cairn stands right of centre, so the hero glass sits LEFT.
            No word is ever written on the photograph directly.
   SURFACES (the division every rule obeys; tools/contrast.mjs re-checks it on painted pixels):
     .glass   thin frosted white: nav, hero copy, section heads, chips   text: --ink / --ink-2 only
     .panel   body glass: prose, cards, forms, tables                   text: any ink
     .solid   dense glass: the planner, the plan list                   text: any ink
   INKS are slates read from the sea's deep water; actions are the sea's blue; the one warm accent is the terracotta
   of the wet pebbles, used only for the italic word in a headline (large type). Colour lives in tints, not 12px text.
   ========================================================================== */

:root {
  --ink: #0f1a24;
  --ink-2: #22313f;
  --ink-3: #3a4a59;
  --ink-4: #5d6c7a;
  --muted: var(--ink-3);
  --sea-900: #0c3553;
  --sea-800: #134769;
  --sea-700: #1c5b85;
  --sky: #8fb3d3;
  --sky-2: #d4e3ef;
  --sky-soft: #e5eef5;
  --clay: #8c3d1c;
  --sand: #efe4d6;
  --row-alt: #f2f6f9;
  --night: #253647;
  --good: #1f4d2c;
  --good-soft: #dfeee2;
  --amber: #6b4500;
  --amber-soft: #f8ead0;
  --bad: #8a1f3a;
  --bad-soft: #f7dde3;
  --line: rgba(17, 28, 38, 0.10);
  --line-2: rgba(17, 28, 38, 0.18);

  --g-thin: rgba(246, 249, 252, 0.70);
  --g-panel: rgba(248, 251, 253, 0.85);
  --g-solid: rgba(251, 253, 254, 0.95);
  --g-alt: rgba(238, 244, 249, 0.86);
  --g-edge: rgba(255, 255, 255, 0.62);
  --blur: blur(24px) saturate(1.2);
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 30px 70px -30px rgba(8, 22, 36, 0.55), 0 3px 12px rgba(8, 22, 36, 0.10);
  --shadow-lift: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 40px 80px -30px rgba(8, 22, 36, 0.65), 0 6px 18px rgba(8, 22, 36, 0.14);

  --sans: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --r-xl: 30px; --r-lg: 22px; --r-md: 16px; --r-sm: 12px;
  --maxw: 1160px;
  --gutter: clamp(16px, 4vw, 48px);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 96px; scroll-behavior: smooth; }
body { margin: 0; font: 400 16px/1.6 var(--sans); color: var(--ink); background: var(--night); min-height: 100vh; overflow-x: hidden; -webkit-font-smoothing: antialiased; }
img, svg { display: block; max-width: 100%; }
a { color: var(--sea-800); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--sea-900); }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--sky-soft); }
em.it, .it { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.005em; color: var(--clay); }
.num, .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
code { font-family: var(--mono); font-size: .86em; background: rgba(15, 58, 92, 0.07); padding: 1px 6px; border-radius: 6px; word-break: break-all; }

/* ---------------------------------------------------------------- ground */
.ground { position: fixed; inset: 0; z-index: -2; background: var(--night) url("../img/ground-1440.jpg") 50% 50% / cover no-repeat; }
.ground::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8, 22, 36, 0.06) 0%, rgba(8, 22, 36, 0) 30%, rgba(8, 22, 36, 0.30) 100%); }
@media (min-width: 1600px) { .ground { background-image: url("../img/ground-2400.jpg"); } }
@media (max-width: 760px) { .ground { background-image: url("../img/ground-900.jpg"); background-position: 66% 50%; } }

.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* ---------------------------------------------------------------- surfaces */
.glass, .panel, .solid { -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--g-edge); box-shadow: var(--shadow); }
.glass { background: var(--g-thin); border-radius: var(--r-xl); }
.panel { background: var(--g-panel); border-radius: var(--r-lg); }
.solid { background: var(--g-solid); border-radius: var(--r-xl); }

/* ---------------------------------------------------------------- nav */
.top { position: sticky; top: 14px; z-index: 50; }
.pill-nav { position: relative; margin-top: 14px; display: flex; align-items: center; gap: 6px; padding: 8px 8px 8px 10px; border-radius: 999px; background: rgba(248, 251, 253, 0.84); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--g-edge); box-shadow: var(--shadow); }
.brand { display: flex; align-items: center; gap: 9px; margin-right: auto; text-decoration: none; color: var(--ink); }
.brand:hover { color: var(--ink); }
.brand img { width: 34px; height: 34px; }
.brand span { font: 700 24px/1 var(--sans); letter-spacing: -0.05em; }
.nav-links { display: flex; gap: 2px; }
.nav-links a { padding: 8px 13px; border-radius: 999px; text-decoration: none; color: var(--ink-2); font-weight: 600; font-size: 14.5px; }
.nav-links a:hover, .nav-links a[aria-current="page"] { background: rgba(255, 255, 255, 0.9); color: var(--ink); }
.nav-end { display: flex; align-items: center; gap: 6px; margin-left: 8px; }
.menu-btn { display: none; place-items: center; width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.85); cursor: pointer; color: var(--ink); }
@media (max-width: 920px) {
  .nav-links { display: none; }
  .top.open .nav-links { display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0; padding: 10px; border-radius: 22px; background: rgba(251, 253, 254, 0.97); box-shadow: var(--shadow); }
  .top.open .nav-links a { padding: 12px 14px; font-size: 16px; }
  .menu-btn { display: grid; }
}
@media (max-width: 420px) { .nav-end .btn .lg { display: none; } }

/* ---------------------------------------------------------------- buttons & chips */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 999px; font-weight: 700; font-size: 15px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; background: var(--sea-800); color: #fff; box-shadow: 0 12px 26px -12px rgba(15, 58, 92, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.16); transition: background .15s, transform .15s, box-shadow .15s; }
.btn:hover { background: var(--sea-900); color: #fff; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: rgba(255, 255, 255, 0.9); color: var(--ink); border-color: var(--g-edge); box-shadow: 0 8px 22px -16px rgba(8, 22, 36, 0.5); }
.btn.ghost:hover { background: #fff; color: var(--ink); }
.btn.sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
.btn.xs { min-height: 32px; padding: 0 12px; font-size: 13px; box-shadow: none; }
.btn.block { width: 100%; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(3px); }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 13px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.92); border: 1px solid var(--g-edge); font-size: 13.5px; font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.chip b { font-weight: 700; color: var(--ink); }
.dot { width: 8px; height: 8px; border-radius: 50%; background: #4f8a4a; box-shadow: 0 0 0 3px rgba(79, 138, 74, 0.22); flex: none; }
.dot.live { animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(79, 138, 74, 0.05); } }
.tag { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 99px; background: var(--sky-soft); color: var(--sea-900); }
.tag.good { background: var(--good-soft); color: var(--good); }
.tag.warn { background: var(--amber-soft); color: var(--amber); }
.tag.bad { background: var(--bad-soft); color: var(--bad); }
.eyebrow, .label { font: 700 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--sea-800); margin: 0; }
.label { color: var(--ink-3); }

/* ---------------------------------------------------------------- hero */
.hero { min-height: calc(100vh - 80px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 18px; align-items: end; padding: clamp(80px, 20vh, 240px) 0 22px; }
.hero-copy { padding: clamp(26px, 3.6vw, 46px); }
.hero h1 { font: 800 clamp(42px, 5.3vw, 70px)/0.98 var(--sans); letter-spacing: -0.05em; margin: 18px 0 16px; color: var(--ink); }
.hero h1 .it { font-size: 1.14em; letter-spacing: -0.01em; font-weight: 400; }
.lede { font-size: clamp(16px, 1.45vw, 18.5px); color: var(--ink-2); margin: 0; max-width: 540px; }
.lede strong { color: var(--ink); font-weight: 700; }
.ctas { display: flex; gap: 10px; flex-wrap: wrap; margin: 26px 0 20px; }
.trust { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 13.5px; color: var(--ink-2); align-items: center; }
.trust b { font-weight: 700; color: var(--ink); }
.trust .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--ink-3); }

/* the live widget: build a posy, priced by Uniswap as you type */
.widget { padding: 22px; }
.w-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.w-head h2 { margin: 0; font: 700 15.5px/1.2 var(--sans); letter-spacing: -0.01em; }
.amt { display: flex; align-items: baseline; gap: 4px; font: 700 46px/1 var(--sans); letter-spacing: -0.05em; }
.amt .cur { color: var(--ink-3); }
.amt input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; letter-spacing: inherit; padding: 0; color: var(--ink); }
.range { width: 100%; margin: 12px 0 4px; accent-color: var(--sea-700); }
.picks { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0 14px; }
.pick { border: 1px solid var(--line-2); background: #fff; border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer; color: var(--ink-2); }
.pick:hover { border-color: var(--sea-700); }
.pick[aria-pressed="true"] { background: var(--sea-800); color: #fff; border-color: var(--sea-800); }
.pick:disabled { opacity: .45; cursor: not-allowed; }
.w-rows { display: grid; gap: 1px; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); background: var(--line); }
.w-row { display: grid; grid-template-columns: 34px 1fr auto; gap: 10px; align-items: center; padding: 10px 14px; background: #fff; }
.w-row:nth-child(even) { background: var(--row-alt); }
.w-row .nm { font-weight: 700; font-size: 14.5px; line-height: 1.25; }
.w-row .sub { font-size: 12.5px; color: var(--ink-3); }
.w-row .v { text-align: right; font: 600 15px var(--mono); letter-spacing: -0.02em; }
.w-row .v small { display: block; font: 500 12px var(--sans); color: var(--ink-3); letter-spacing: 0; }
.w-row .badge { width: 34px; height: 34px; border-radius: 11px; font-size: 10.5px; }
.w-total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 2px 14px; }
.w-total span { font-size: 14px; color: var(--ink-2); }
.w-total b { font: 600 22px var(--mono); color: var(--sea-900); letter-spacing: -0.03em; }
.w-foot { margin-top: 10px; font-size: 12.5px; color: var(--ink-3); display: flex; align-items: center; gap: 8px; }

.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 8px; border-radius: 26px; }
.stat { padding: 18px 18px 16px; border-radius: 19px; background: rgba(255, 255, 255, 0.78); }
.stat:nth-child(even) { background: rgba(236, 243, 248, 0.92); }
.stat .v { font: 700 32px/1.05 var(--sans); letter-spacing: -0.045em; font-variant-numeric: tabular-nums; }
.stat .k { font-size: 13px; color: var(--ink-2); margin-top: 6px; }
@media (max-width: 980px) { .hero { grid-template-columns: 1fr; padding-top: 30vh; min-height: 0; } }
@media (max-width: 720px) { .stats { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- sections */
section.sec { padding: 46px 0 8px; }
.head { max-width: 760px; padding: 26px clamp(22px, 3.4vw, 40px); margin-bottom: 16px; }
.head.center { margin-inline: auto; text-align: center; }
.head h2, h2.big { font: 800 clamp(32px, 4vw, 48px)/1.02 var(--sans); letter-spacing: -0.045em; margin: 12px 0 10px; }
.head h2 .it { font-weight: 400; font-size: 1.1em; }
.head p { margin: 0; font-size: 17px; color: var(--ink-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 860px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
.card { padding: 26px; }
.grid-2 > .card:nth-child(even), .grid-3 > .card:nth-child(even) { background: var(--g-alt); }
.card h3 { font: 800 24px/1.12 var(--sans); letter-spacing: -0.035em; margin: 10px 0 8px; }
.card p { margin: 0 0 10px; color: var(--ink-2); }
.step-n { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--mono); background: var(--sky-soft); color: var(--sea-900); }
ul.ticks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
ul.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--ink-2); font-size: 15.5px; }
ul.ticks li::before { content: ''; width: 18px; height: 18px; margin-top: 3px; border-radius: 99px; background: var(--good-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath d='M5 9.2l2.6 2.6L13 6.4' fill='none' stroke='%232f4a2c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat; }

/* ready-made bouquets */
.presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.preset { display: block; text-align: left; border: 1px solid var(--line); background: #fff; border-radius: 18px; padding: 16px; cursor: pointer; font: inherit; color: var(--ink); text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.preset:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); color: var(--ink); }
.preset:nth-child(even) { background: var(--row-alt); }
.preset[aria-pressed="true"] { border-color: var(--sea-800); box-shadow: 0 0 0 2px var(--sea-800) inset; }
.preset b { display: block; font: 800 18px/1.2 var(--sans); letter-spacing: -0.03em; }
.preset span { display: block; font-size: 13px; color: var(--ink-3); margin-top: 4px; }
.preset .tickers { display: flex; gap: 4px; margin-top: 10px; flex-wrap: wrap; }
.preset .tickers i { font-style: normal; font: 600 11px var(--mono); padding: 3px 7px; border-radius: 7px; background: var(--sky-soft); color: var(--sea-900); }
.preset-wrap { padding: 10px; }

/* ---------------------------------------------------------------- tables */
.table { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 14.5px; font-variant-numeric: tabular-nums; }
.table th { text-align: left; font: 700 11.5px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); padding: 10px 14px 4px; white-space: nowrap; }
.table td { padding: 12px 14px; background: #fff; }
.table tr:nth-child(even) td { background: var(--row-alt); }
.table td:first-child { border-radius: 12px 0 0 12px; }
.table td:last-child { border-radius: 0 12px 12px 0; }
.table .num { text-align: right; font-family: var(--mono); }
.tk { display: flex; align-items: center; gap: 12px; }
.tk .nm { font-weight: 700; }
.tk .sub { font-size: 12.5px; color: var(--ink-3); }
.badge { flex: none; width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font: 700 11px/1 var(--sans); letter-spacing: .01em; color: #fff; background: var(--sea-800); }
.badge.long { font-size: 9.5px; letter-spacing: -0.02em; }
@media (max-width: 720px) { .table .hide-sm { display: none; } .table td, .table th { padding: 10px 9px; } }
.table.fold tbody tr:nth-child(n+13) { display: none; }
.table.fold.open tbody tr { display: table-row; }

/* ---------------------------------------------------------------- faq */
.faq { display: grid; gap: 8px; }
.faq details { padding: 2px 22px; border-radius: var(--r-md); }
.faq details:nth-child(even) { background: var(--g-alt); }
.faq summary { cursor: pointer; list-style: none; padding: 16px 0; font-weight: 700; font-size: 16.5px; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font: 400 26px/20px var(--sans); color: var(--sea-800); }
.faq details[open] summary::after { content: '–'; }
.faq details p { margin: 0 0 16px; color: var(--ink-2); }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

.cta-band { padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; }
.cta-band h2 { font: 800 clamp(30px, 3.6vw, 44px)/1.04 var(--sans); letter-spacing: -0.045em; margin: 0 0 8px; }
.cta-band h2 .it { font-weight: 400; font-size: 1.1em; }
.cta-band p { margin: 0; color: var(--ink-2); font-size: 17px; }
@media (max-width: 720px) { .cta-band { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- footer */
footer.foot { margin: 70px 0 22px; }
footer .panel { padding: 28px 30px; display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 26px; }
footer h4 { margin: 0 0 10px; font: 700 12px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
footer a { display: block; text-decoration: none; color: var(--ink-2); font-size: 14.5px; padding: 3px 0; }
footer a:hover { color: var(--ink); text-decoration: underline; }
footer .about { color: var(--ink-2); font-size: 14.5px; margin: 12px 0 0; max-width: 360px; }
footer .fine { grid-column: 1 / -1; border-top: 1px solid var(--line); padding-top: 16px; font-size: 13px; color: var(--ink-3); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
footer .fine a { display: inline; font-size: 13px; color: var(--ink-2); text-decoration: underline; }
@media (max-width: 760px) { footer .panel { grid-template-columns: 1fr 1fr; padding: 24px 20px; } footer .panel > :first-child { grid-column: 1 / -1; } }

/* ---------------------------------------------------------------- page heads (send, gifts, docs) */
.page-head { padding: 34px 0 16px; }
.page-head .glass { padding: 24px clamp(22px, 3vw, 36px); max-width: 760px; }
.page-head h1 { font: 800 clamp(34px, 4.4vw, 54px)/1.02 var(--sans); letter-spacing: -0.05em; margin: 10px 0 8px; }
.page-head h1 .it { font-weight: 400; font-size: 1.1em; }
.page-head p { margin: 0; color: var(--ink-2); font-size: 17px; }

/* ---------------------------------------------------------------- the composer (send) */
.compose { padding: 0 0 20px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 16px; align-items: start; }
@media (max-width: 980px) { .compose { grid-template-columns: 1fr; } }
.compose > * { min-width: 0; }
.stage { padding: 24px 26px; }
.stage + .stage { margin-top: 14px; }
.stage-h { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.stage-h .step-n { flex: none; }
.stage-h h2 { font: 800 24px/1.1 var(--sans); letter-spacing: -0.04em; margin: 0; }
.stage-h p { margin: 2px 0 0; color: var(--ink-3); font-size: 14px; }
.stems { display: grid; gap: 8px; margin-top: 14px; }
.stem { display: grid; grid-template-columns: 40px 1fr 104px 30px; gap: 10px; align-items: center; background: #fff; border-radius: 16px; padding: 10px 12px; border: 1px solid var(--line); }
.stem:nth-child(even) { background: var(--row-alt); }
.stem .nm { font-weight: 700; } .stem .sub { font-size: 12.5px; color: var(--ink-3); margin: 0; }
.stem .pct { display: flex; align-items: center; gap: 4px; }
.stem .pct input { width: 58px; border: 1px solid var(--line-2); border-radius: 10px; padding: 7px 8px; font: 600 15px var(--mono); text-align: right; color: var(--ink); background: #fff; }
.stem .pct span { color: var(--ink-3); font-weight: 700; }
.stem .x { border: 0; background: none; font-size: 20px; color: var(--ink-3); cursor: pointer; border-radius: 8px; height: 30px; }
.stem .x:hover { background: var(--bad-soft); color: var(--bad); }
.add-row { display: flex; gap: 8px; margin-top: 10px; }
.add-row select { flex: 1; min-width: 0; padding: 0 12px; min-height: 40px; border-radius: 12px; border: 1px solid var(--line-2); background: #fff; font: 600 14.5px var(--sans); color: var(--ink); }
.field { background: #fff; border-radius: 18px; padding: 14px 16px; border: 1px solid var(--line-2); }
.field:focus-within { border-color: var(--sea-700); box-shadow: 0 0 0 4px rgba(143, 179, 211, 0.25); }
.field .top-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink-3); font-weight: 600; }
.field .top-row b { color: var(--ink); }
.field .in-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.field .in-row > * { min-width: 0; }
.field input { flex: 1; width: 100%; border: 0; outline: 0; background: transparent; font: 700 30px var(--sans); letter-spacing: -0.04em; color: var(--ink); }
.field .unit { font: 700 13px var(--mono); padding: 6px 11px; border-radius: 99px; background: var(--sky-soft); color: var(--sea-900); }
.field .helpers { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.linkbtn { border: 0; background: var(--sky-soft); color: var(--sea-900); font: 700 12.5px var(--sans); padding: 6px 11px; border-radius: 99px; cursor: pointer; }
.linkbtn:hover { background: var(--sky-2); }
.seg { display: inline-flex; background: rgba(15, 58, 92, 0.08); border-radius: 999px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; padding: 9px 16px; border-radius: 999px; font: 700 14px var(--sans); color: var(--ink-2); cursor: pointer; }
.seg button[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 4px 12px -8px rgba(8, 22, 36, 0.6); }
.textin { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--line-2); background: #fff; font: 500 15px var(--sans); color: var(--ink); }
.textin::placeholder { color: var(--ink-4); }
.textin:focus { outline: none; border-color: var(--sea-700); box-shadow: 0 0 0 4px rgba(143, 179, 211, 0.25); }
textarea.textin { resize: vertical; min-height: 66px; }
.lbl { display: block; font-size: 13.5px; font-weight: 700; color: var(--ink-2); margin: 14px 0 6px; }
.hint { font-size: 12.5px; color: var(--ink-3); margin: 8px 2px 0; }

/* the bouquet card: what the recipient will see */
.bouquet { padding: 24px; position: sticky; top: 96px; }
@media (max-width: 980px) { .bouquet { position: static; } }
.bouquet .to { font: 800 28px/1.1 var(--sans); letter-spacing: -0.045em; margin: 10px 0 4px; }
.bouquet .to .it { font-weight: 400; font-size: 1.1em; }
.note { font-family: var(--serif); font-style: italic; font-size: 21px; line-height: 1.3; color: var(--ink-2); margin: 8px 0 14px; white-space: pre-wrap; word-break: break-word; }
.bloom-row { display: grid; grid-template-columns: 38px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: #fff; margin-top: 6px; }
.bloom-row:nth-child(even) { background: var(--row-alt); }
.bloom-row .v { text-align: right; font: 600 15px var(--mono); letter-spacing: -0.02em; }
.bloom-row .v small { display: block; font: 500 12px var(--sans); color: var(--ink-3); letter-spacing: 0; }
.bloom-row .sub { font-size: 12.5px; color: var(--ink-3); }
.total-row { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.total-row .big { font: 600 30px var(--mono); letter-spacing: -0.04em; color: var(--sea-900); }
.extra { font-size: 13px; color: var(--ink-3); margin-top: 6px; }
.steps { display: grid; gap: 6px; }
.stepi { display: grid; grid-template-columns: 26px 1fr auto; gap: 10px; align-items: center; background: #fff; border-radius: 12px; padding: 9px 12px; font-size: 14.5px; }
.stepi .ic { width: 22px; height: 22px; border-radius: 99px; display: grid; place-items: center; font: 700 12px var(--mono); background: var(--sky-soft); color: var(--sea-900); }
.stepi.done .ic { background: var(--good-soft); color: var(--good); }
.stepi.run .ic { background: var(--sea-800); color: #fff; animation: blink 1.2s infinite; }
.stepi.fail .ic { background: var(--bad-soft); color: var(--bad); }
.stepi a { font-size: 13px; }
@keyframes blink { 50% { opacity: .55; } }
.msg { border-radius: 14px; padding: 12px 14px; font-size: 14.5px; }
.msg.warn { background: var(--amber-soft); color: #4a3000; }
.msg.bad { background: var(--bad-soft); color: #5e1227; }
.msg.good { background: var(--good-soft); color: #203a1e; }
.msg.info { background: var(--sky-soft); color: var(--ink-2); }
.msg a { color: inherit; }
.linkbox { display: flex; gap: 8px; align-items: center; background: #fff; border: 1px solid var(--line-2); border-radius: 14px; padding: 8px 8px 8px 14px; }
.linkbox code { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; color: var(--ink-2); word-break: normal; }
.skeleton { display: inline-block; min-width: 60px; height: 1em; border-radius: 6px; background: linear-gradient(90deg, rgba(15, 58, 92, .07), rgba(15, 58, 92, .15), rgba(15, 58, 92, .07)); background-size: 200% 100%; animation: sk 1.2s infinite linear; vertical-align: -2px; }
@keyframes sk { to { background-position: -200% 0; } }
.toast { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 99; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 14px; font-size: 14.5px; max-width: calc(100% - 32px); }

/* ---------------------------------------------------------------- claim */
.claim-wrap { padding: clamp(40px, 12vh, 120px) 0 20px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 560px); gap: 16px; align-items: end; }
@media (max-width: 900px) { .claim-wrap { grid-template-columns: 1fr; } .claim-aside { order: 2; } }
.claim-aside { padding: 24px 28px; }
.claim-aside h2 { font: 800 22px/1.15 var(--sans); letter-spacing: -0.04em; margin: 10px 0 8px; }
.claim-aside p { margin: 0 0 8px; color: var(--ink-2); font-size: 15px; }
.claim-card { padding: 30px; }
.claim-card h1 { font: 800 clamp(38px, 5vw, 56px)/1 var(--sans); letter-spacing: -0.05em; margin: 12px 0 8px; }
.claim-card h1 .it { font-weight: 400; font-size: 1.1em; }
.from { font-size: 17px; color: var(--ink-2); }

/* ---------------------------------------------------------------- gifts */
.gifts-list { display: grid; gap: 10px; }
.gift-item { display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: center; padding: 18px 20px; }
.gift-item:nth-child(even) { background: var(--g-alt); }
.gift-item .title { font: 800 20px/1.2 var(--sans); letter-spacing: -0.035em; }
.gift-item .when { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
@media (max-width: 640px) { .gift-item { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- docs */
.doc { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 16px; padding: 0 0 20px; align-items: start; }
.doc > * { min-width: 0; }
.doc nav.toc { padding: 14px; position: sticky; top: 96px; }
.doc nav.toc a { display: block; text-decoration: none; padding: 6px 10px; border-radius: 10px; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.doc nav.toc a:hover { background: rgba(255, 255, 255, 0.9); color: var(--ink); }
.doc article { padding: 34px 40px; }
.doc article h2 { font: 800 28px/1.15 var(--sans); letter-spacing: -0.04em; margin: 36px 0 8px; }
.doc article h2:first-child { margin-top: 0; }
.doc article p, .doc article li { color: var(--ink-2); font-size: 16px; }
.doc article li { margin-bottom: 8px; }
.addr-table td { font-size: 14px; }
.scroll-x { overflow-x: auto; }
@media (max-width: 900px) { .doc { grid-template-columns: 1fr; } .doc nav.toc { position: static; display: flex; flex-wrap: wrap; gap: 2px; } .doc article { padding: 24px 20px; } }

/* ---------------------------------------------------------------- 404 */
.lost { min-height: 70vh; display: grid; align-items: end; padding: 20vh 0 20px; }
.lost .glass { max-width: 640px; padding: clamp(26px, 4vw, 44px); }
.lost h1 { font: 800 clamp(52px, 8vw, 88px)/0.95 var(--sans); letter-spacing: -0.055em; margin: 14px 0 12px; }
.lost h1 .it { font-weight: 400; font-size: 1.1em; }

@media (max-width: 640px) {
  .hero { padding-top: 34vh; }
  .hero-copy { padding: 24px 20px; }
  .widget { padding: 18px 16px; }
  .amt { font-size: 40px; }
  .head { padding: 22px 20px; }
  .card { padding: 22px 20px; }
  .stage, .bouquet, .claim-card, .claim-aside { padding: 22px 18px; }
  .stem { grid-template-columns: 36px 1fr 86px 26px; gap: 8px; }
  .stem .pct input { width: 50px; }
  .stat .v { font-size: 26px; }
  .field input { font-size: 26px; }
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ---------------------------------------------------------------- CAIRN: the first screen leaves the cairn visible */
.hero.solo { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
.hero.solo .hero-copy { max-width: 620px; }
.hero-gap { min-height: 1px; }
@media (max-width: 980px) { .hero.solo { grid-template-columns: 1fr; } .hero-gap { display: none; } }

/* the planner: inputs left, the live answer right */
.planner { padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px; border-radius: var(--r-xl); }
@media (max-width: 900px) { .planner { grid-template-columns: 1fr; gap: 18px; padding: 18px 16px; } }
.planner .lbl:first-of-type { margin-top: 4px; }
.planner .seg { flex-wrap: wrap; }
.picks .pick[aria-checked="true"] { background: var(--sea-800); color: #fff; border-color: var(--sea-800); }
.sched { margin: 14px 0; display: grid; gap: 6px; }
.sched .srow { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; padding: 9px 12px; border-radius: 12px; background: #fff; color: var(--ink-2); }
.sched .srow:nth-child(even) { background: var(--row-alt); }
.sched .srow b { font: 600 14px var(--mono); color: var(--ink); letter-spacing: -0.02em; }
.sched .srow.total { background: var(--sky-soft); color: var(--sea-900); font-weight: 700; }
.sched .srow.total b { color: var(--sea-900); }

/* plans (app, due) */
.plans { display: grid; gap: 10px; }
.plan { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 16px 18px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--line); }
.plan:nth-child(even) { background: var(--row-alt); }
.plan .title { font: 800 18px/1.2 var(--sans); letter-spacing: -0.03em; }
.plan .meta { font-size: 13px; color: var(--ink-3); margin-top: 3px; }
.plan .acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.plan .bar { height: 6px; border-radius: 99px; background: var(--sky-soft); margin-top: 8px; overflow: hidden; }
.plan .bar i { display: block; height: 100%; background: var(--sea-700); border-radius: 99px; }
@media (max-width: 640px) { .plan { grid-template-columns: 38px minmax(0, 1fr); } .plan .acts { grid-column: 1 / -1; justify-content: flex-start; } }
.empty { padding: 22px; text-align: center; color: var(--ink-2); }
details.adv summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--ink-2); margin-top: 14px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 520px) { .row2 { grid-template-columns: 1fr; } }
select.textin { appearance: auto; }
pre.src { background: #fff; border-radius: var(--r-md); padding: 16px; overflow-x: auto; font-size: 12.5px; line-height: 1.5; border: 1px solid var(--line); }
pre.src code { background: none; padding: 0; word-break: normal; white-space: pre; font-size: inherit; }
.badge.feed { background: var(--good); font-size: 11px; }