/* Intake pages: the SupportNow landing, the builder, save and share, and partner intake landings.
   Partner pages take their colours and fonts from the brand variables the public layout sets. */

:root {
  --sn-ink: #14171c;
  --sn-text: #3b4351;
  --sn-muted: #7a8598;
  --sn-blue: #188aec;
  --sn-blue-dark: #1274c9;
  --sn-blue-light: #86c2f6;
  --sn-sky: #b2e4ff;
  --sn-tint: #eaf5fe;
  --sn-cream: #f6f2ec;
  --sn-line: #e4e7ec;
  --sn-line-strong: #d9dee6;
  --sn-green: #22a06b;
  --sn-green-dark: #4f6b34;
  --sn-peach: #fbe3d3;
  --sn-peach-ink: #8a5420;
  --sn-peach-accent: #b7702c;
  --sn-red: #c2565c;
}

/* The public layout wraps pages in a padded container; these pages bleed to the viewport edge. */
.bleed { margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); }
.sn-page {
  margin: -1.5rem calc(50% - 50vw);
  font-family: "FT Polar", system-ui, -apple-system, sans-serif;
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--sn-text);
  background: var(--sn-cream);
  min-height: 100%;
}
.branded .sn-page h1, .branded .sn-page h2, .branded .sn-page h3 {
  font-family: "FT Polar", system-ui, sans-serif;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--sn-ink);
  margin: 0;
}
.sn-page em, .sn-em { font-family: "Caliste Display", Georgia, serif; font-style: italic; font-weight: 400; }
.sn-page a { color: var(--sn-blue); }
.sn-page a:hover { color: var(--sn-blue-dark); }
.sn-page input, .sn-page select, .sn-page textarea, .sn-page button { font-family: inherit; font-size: 16px; color: var(--sn-ink); }
.sn-page input:focus, .sn-page select:focus, .sn-page textarea:focus { outline: 3px solid var(--sn-sky); border-color: var(--sn-blue); }

.sn-wrap { max-width: 1200px; margin: 0 auto; padding: 0 40px; box-sizing: border-box; width: 100%; }
.sn-wrap-narrow { max-width: 1120px; }
@media (max-width: 640px) { .sn-wrap { padding: 0 20px; } }

.eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--sn-ink); }
.eyebrow-muted { color: var(--sn-muted); font-size: 11px; }
.lede { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--sn-text); line-height: 1.5; margin: 0; }
.sn-h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); }
.sn-h1-hero { font-size: clamp(2.8rem, 5.8vw, 4.4rem); }
.sn-h2 { font-size: clamp(1.9rem, 3.4vw, 2.75rem); }
.sn-h2-big { font-size: clamp(2.4rem, 5vw, 4rem); }
.sn-medium { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; color: var(--sn-ink); }
.sn-small { font-size: 14px; }
.sn-tiny { font-size: 12.5px; color: var(--sn-muted); }
.sn-muted { color: var(--sn-muted); }

.marked { position: relative; display: inline-block; white-space: nowrap; }
.marked::after {
  content: ""; position: absolute; pointer-events: none; z-index: -1; background-color: var(--sn-blue-light);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.marked-circle::after { left: 50%; top: 50%; transform: translate(-50%, -50%); width: 176%; aspect-ratio: 900/558; height: auto; -webkit-mask-image: url("/wishlists/assets/mark-circle-ca04bfa1.webp"); mask-image: url("/wishlists/assets/mark-circle-ca04bfa1.webp"); }
.marked-underline::after { left: 50%; top: 100%; transform: translate(-50%, -52%); width: 116%; height: auto; aspect-ratio: 900/192; -webkit-mask-image: url("/wishlists/assets/mark-underline-a58ad123.webp"); mask-image: url("/wishlists/assets/mark-underline-a58ad123.webp"); }
.hero-arrow { position: relative; display: block; width: 240px; aspect-ratio: 900/475; pointer-events: none; background-color: var(--sn-blue-light); -webkit-mask: url("/wishlists/assets/mark-arrow-d0ac0eb5.webp") no-repeat center/contain; mask: url("/wishlists/assets/mark-arrow-d0ac0eb5.webp") no-repeat center/contain; margin: -4px 0 -90px 46%; z-index: 0; }
@media (max-width: 640px) { .hero-arrow { display: none; } }

/* Buttons */
.sn-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; border-radius: 999px; padding: 15px 30px;
  font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; line-height: 1.2;
  border: 1.5px solid transparent; background-origin: border-box; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease;
}
.sn-btn:hover { transform: translateY(-1px); }
.sn-btn-primary { background-image: linear-gradient(90deg, var(--sn-blue-light), var(--sn-blue)); color: #fff; box-shadow: 0 10px 22px -12px rgba(24, 138, 236, .9); }
.sn-page .sn-btn-primary, .sn-btn-primary:hover, .sn-btn-primary:focus { color: #fff; }
.sn-btn-primary:disabled, .sn-btn-primary[aria-disabled="true"] { background-image: none; background: #a8d4f8; box-shadow: none; cursor: default; transform: none; }
.sn-btn-outline, .sn-page .sn-btn-outline { background: #fff; color: var(--sn-ink); border-color: var(--sn-blue-light); }
.sn-btn-outline:hover { background: var(--sn-tint); color: var(--sn-blue); border-color: var(--sn-blue); }
.sn-btn-quiet, .sn-page .sn-btn-quiet { background: #fff; color: var(--sn-text); border-color: #c9ced8; }
.sn-btn-quiet:hover { color: var(--sn-ink); }
.sn-btn-sm { padding: 11px 22px; font-size: 12px; letter-spacing: .1em; }
.sn-btn-block { width: 100%; box-sizing: border-box; }
.sn-link, .linkbtn {
  display: inline-block; font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--sn-ink);
  text-decoration: none; border: 0; border-bottom: 1.5px solid currentColor; padding: 0 0 2px; background: none; cursor: pointer; line-height: 1.3;
}
.sn-link:hover, .linkbtn:hover { color: var(--sn-blue); }
.linkbtn-sm { font-size: 12px; }
.sn-page .sn-link, .sn-page .linkbtn { color: var(--sn-ink); }
.sn-page .sn-link:hover, .sn-page .linkbtn:hover { color: var(--sn-blue); }
.sn-btn-back { align-self: flex-start; }
.sn-btn-back .fa-solid { font-size: .9em; }

.card-plain { background: #fff; border: 1px solid var(--sn-line); border-radius: 12px; box-shadow: 0 1px 3px rgba(20, 23, 28, .06); }
.card-pad { padding: 28px; }
.card-pad-sm { padding: 24px; }
.sn-stack { display: flex; flex-direction: column; }
.gap-4px { gap: 4px; } .gap-6px { gap: 6px; } .gap-8px { gap: 8px; } .gap-10px { gap: 10px; } .gap-12px { gap: 12px; } .gap-14px { gap: 14px; } .gap-16px { gap: 16px; } .gap-18px { gap: 18px; } .gap-22px { gap: 22px; } .gap-28px { gap: 28px; }

/* Step breadcrumb on the builder, save and share pages */
.sn-steps { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--sn-muted); }
.sn-steps .is-current { color: var(--sn-ink); font-weight: 600; }
.sn-steps .is-done { display: inline-flex; align-items: center; gap: 5px; color: var(--sn-green-dark); }
.sn-steps .sep { opacity: .5; }

/* Two column flow pages */
.sn-flow { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 40px; padding-bottom: 56px; align-items: flex-start; }
.sn-flow-head { padding-top: 40px; }
.sn-flow-head + .sn-flow { padding-top: 22px; }
.sn-flow-main { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.sn-flow-aside { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.sn-summary { background: #fff; border: 1px solid var(--sn-line); border-radius: 12px; padding: 24px; display: flex; flex-direction: column; gap: 18px; box-shadow: 0 10px 30px rgba(22, 33, 58, .06); }
.sn-summary-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 16px 0; border-top: 1px solid var(--sn-line); border-bottom: 1px solid var(--sn-line); }
.sn-summary-total b { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; font-size: 30px; letter-spacing: -.02em; color: var(--sn-ink); }
.sn-tips { background: #fff; border: 1px solid var(--sn-line); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.sn-tips li { display: flex; gap: 10px; font-size: 15px; color: var(--sn-text); line-height: 1.45; }
.sn-tips ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.sn-list-rows { display: flex; flex-direction: column; gap: 8px; }
.sn-list-rows > div { display: flex; justify-content: space-between; gap: 10px; font-size: 15px; }
.sn-list-rows b { font-weight: 600; }
.sn-list-foot { display: flex; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--sn-line); font-size: 15px; }
.sn-note-peach { background: var(--sn-peach); border-radius: 12px; padding: 22px; display: flex; flex-direction: column; gap: 8px; color: var(--sn-peach-ink); font-size: 14px; line-height: 1.5; }
.sn-note-peach b { font-weight: 600; font-size: 15px; color: var(--sn-peach-accent); }
.sn-callout { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: 8px; background: var(--sn-peach); color: var(--sn-peach-ink); font-size: 14px; line-height: 1.5; }
.sn-callout-blue { background: var(--sn-tint); color: var(--sn-ink); }
.sn-callout-red { background: #fde8e9; color: #8a2a30; }
.sn-error { font-size: 14px; color: var(--sn-red); }

/* Forms */
.sn-field { display: flex; flex-direction: column; gap: 6px; }
.sn-label { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; font-size: 14px; color: var(--sn-ink); }
.sn-input, .sn-page .form-control { padding: 12px 14px; border: 1.5px solid var(--sn-line-strong); border-radius: 8px; background: #fff; width: 100%; box-sizing: border-box; }
.sn-input-lg { padding: 13px 14px; }
.sn-textarea { resize: vertical; line-height: 1.5; }
.sn-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 560px) { .sn-grid-2 { grid-template-columns: 1fr; } }
.sn-upload { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border: 1.5px dashed var(--sn-line-strong); border-radius: 8px; background: var(--sn-cream); color: var(--sn-text); font-size: 14px; cursor: pointer; position: relative; }
.sn-upload input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.visually-hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.money-field { display: flex; align-items: center; gap: 2px; border: 1.5px solid var(--sn-line-strong); border-radius: 8px; background: #fff; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; }
.money-field:focus-within { border-color: var(--sn-blue); box-shadow: 0 0 0 3px var(--sn-sky); }
.money-field > span { padding-left: 12px; color: var(--sn-muted); line-height: 1; }
.money-field input, .money-field input:focus { flex: 1; width: 100%; min-width: 0; border: 0; outline: none; box-shadow: none; background: transparent; padding: 12px 12px 12px 2px; }
.money-field.is-cream { background: var(--sn-cream); border-color: var(--sn-line); }
.money-field.is-sm input { padding-top: 9px; padding-bottom: 9px; font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; }

/* Builder */
.builder { overflow: hidden; }
.builder-modes { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--sn-line); background: #fff; }
.builder-modes nav { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.builder-mode { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-radius: 999px; border: 0; cursor: pointer; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; background: transparent; color: var(--sn-muted); text-decoration: none; }
.builder-mode.is-active, .builder-mode[aria-current="true"] { background: var(--sn-ink); color: #fff; }
.builder-mode:hover { color: var(--sn-ink); }
.builder-mode.is-active:hover { color: #fff; }
.builder-panel { background: var(--sn-tint); border-bottom: 1px solid var(--sn-line); }
.builder-panel[hidden] { display: none; }
.builder-custom { display: flex; align-items: center; gap: 10px; padding: 12px 18px; flex-wrap: wrap; }
.builder-custom .sn-input { flex: 1 1 240px; width: auto; }
.builder-custom .money-field { flex: 0 0 150px; }
.builder-group { border-bottom: 1px solid rgba(20, 23, 28, .08); }
.builder-group summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px; cursor: pointer; list-style: none; }
.builder-group summary::-webkit-details-marker { display: none; }
.builder-group summary .count { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 999px; background: #fff; color: var(--sn-blue); font-size: 12px; font-weight: 600; }
.builder-group summary svg { transition: transform .15s ease; }
.builder-group[open] summary svg { transform: rotate(180deg); }
.builder-group-body { display: flex; flex-direction: column; gap: 10px; padding: 0 18px 14px; }
.builder-group-note { font-size: 13px; line-height: 1.5; color: var(--sn-text); padding: 8px 10px; border-radius: 6px; background: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1.5px solid var(--sn-line-strong); border-radius: 999px; background: #fff; font-size: 14px; color: var(--sn-ink); cursor: pointer; text-align: left; }
.chip:hover { border-color: var(--sn-blue); background: var(--sn-tint); }
.chip .price { color: var(--sn-muted); }
.chip-form { display: inline; }
.builder-suggest { display: flex; flex-direction: column; gap: 12px; padding: 14px 18px 16px; }
.builder-suggest-results { padding: 0 18px 16px; }
.builder-suggest-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; background: #fff; border: 1px solid var(--sn-line); flex-wrap: wrap; }
.builder-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 18px 6px; }
.builder-empty { margin: 6px 18px 18px; padding: 22px; border: 1.5px dashed var(--sn-line-strong); border-radius: 8px; text-align: center; color: var(--sn-muted); font-size: 14px; }
.builder-items { display: flex; flex-direction: column; padding: 0 0 8px; }
.builder-item { border-top: 1px solid #f0f2f5; }
.builder-item-row { display: flex; align-items: center; gap: 10px; padding: 10px 18px; flex-wrap: wrap; }
.builder-item-name { flex: 1 1 140px; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.builder-item-name b { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; font-size: 15px; color: var(--sn-ink); }
.builder-item-name span { font-size: 12.5px; color: var(--sn-muted); }
.builder-item-controls { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; margin-left: auto; }
.builder-item-controls .money-field { flex: 0 0 120px; }
.builder-context-toggle { display: inline-flex; align-items: center; gap: 6px; max-width: 130px; padding: 7px 10px; border-radius: 999px; border: 0; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; background: transparent; color: var(--sn-muted); list-style: none; }
.builder-context-toggle::-webkit-details-marker { display: none; }
.builder-context-toggle.has-context { background: var(--sn-tint); color: var(--sn-blue); font-weight: 600; }
.builder-context { display: flex; flex-direction: column; gap: 14px; padding: 6px 18px 18px 44px; }
.builder-context-copy { margin: 0; font-size: 14px; line-height: 1.5; color: var(--sn-text); }
.builder-remove { width: 36px; height: 36px; flex: none; border: 0; border-radius: 8px; background: transparent; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.builder-remove:hover { background: var(--sn-cream); }
.builder-save-state { font-size: 12.5px; color: var(--sn-muted); min-width: 48px; text-align: right; }
.builder-save-state.is-saved { color: var(--sn-green-dark); }
.js .js-hide { display: none !important; }
.no-js-only { display: none; }
.no-js .no-js-only { display: initial; }

/* Landing */
.hero { position: relative; isolation: isolate; background: #d3eadf; overflow: hidden; display: flex; flex-direction: column; padding: 0 0 130px; }
.hero-top { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; padding: 20px 40px; }
.hero-body { position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 48px; padding: 10px 40px 0; max-width: 1200px; margin: 0 auto; box-sizing: border-box; width: 100%; align-items: flex-start; min-height: 430px; }
.hero-copy { flex: 0 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 20px; margin-top: 6px; color: var(--sn-text); }
.hero-trust span { display: flex; align-items: center; gap: 8px; font-size: 15px; }
.hero-cta { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 16px; margin-top: 6px; }
@media (max-width: 640px) { .hero-top, .hero-body { padding-left: 20px; padding-right: 20px; } .hero-body { min-height: 0; } }
.fx-snow { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.fx-snow::before, .fx-snow::after { content: ""; position: absolute; left: 0; right: 0; top: -420px; bottom: 0; background-repeat: repeat; }
.fx-snow::before { background-size: 300px 300px; animation: fx-fall-a 22s linear infinite; background-image: radial-gradient(circle at 20px 30px, #fff 0 1.8px, transparent 2.4px), radial-gradient(circle at 90px 120px, #fff 0 1.4px, transparent 2px), radial-gradient(circle at 160px 60px, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 230px 200px, #fff 0 1.6px, transparent 2.2px), radial-gradient(circle at 280px 20px, #fff 0 1.3px, transparent 1.9px), radial-gradient(circle at 50px 240px, #fff 0 2px, transparent 2.6px), radial-gradient(circle at 130px 280px, #fff 0 1.5px, transparent 2.1px), radial-gradient(circle at 200px 140px, #fff 0 1.2px, transparent 1.8px), radial-gradient(circle at 260px 90px, #fff 0 1.7px, transparent 2.3px), radial-gradient(circle at 10px 170px, #fff 0 1.3px, transparent 1.9px); }
.fx-snow::after { background-size: 440px 440px; opacity: .85; animation: fx-fall-b 30s linear infinite; background-image: radial-gradient(circle at 60px 80px, #fff 0 2.8px, transparent 3.6px), radial-gradient(circle at 210px 30px, #fff 0 2.4px, transparent 3.2px), radial-gradient(circle at 360px 150px, #fff 0 3px, transparent 3.8px), radial-gradient(circle at 120px 300px, #fff 0 2.6px, transparent 3.4px), radial-gradient(circle at 300px 380px, #fff 0 2.2px, transparent 3px), radial-gradient(circle at 400px 260px, #fff 0 2.8px, transparent 3.6px); }
@keyframes fx-fall-a { to { transform: translateY(300px); } }
@keyframes fx-fall-b { to { transform: translateY(440px); } }
.fx-garland { position: relative; height: 120px; z-index: 2; margin-top: -4px; }
.fx-twine { position: absolute; left: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.fx-sprig { position: absolute; width: 64px; height: 26px; margin: -13px 0 0 -32px; pointer-events: none; }
.fx-holly { position: absolute; width: 60px; height: 40px; margin: -24px 0 0 -30px; pointer-events: none; }
.fx-orn { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transform-origin: 50% 0; animation: fx-sway 5s ease-in-out infinite alternate; pointer-events: none; }
.fx-orn i { display: block; width: 1.2px; background: #8a6a4a; }
.fx-orn svg { width: 26px; height: 33px; margin-top: -2px; }
.fx-tag { position: absolute; left: var(--x); top: var(--y); display: flex; flex-direction: column; align-items: center; transform: translateX(-50%); transform-origin: 50% 0; animation: fx-sway var(--dur, 6s) ease-in-out infinite alternate; filter: drop-shadow(0 10px 14px rgba(20, 40, 40, .18)); }
.fx-tag i { display: block; width: 1.5px; height: var(--len); background: #8a6a4a; }
.fx-tag-card { position: relative; isolation: isolate; min-width: 150px; max-width: 190px; box-sizing: border-box; padding: 22px 16px 14px; transform: rotate(var(--rot, 0deg)); text-align: left; }
.fx-tag-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: #fffdf7; clip-path: polygon(16px 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%, 0 16px); }
.fx-tag-card::before { content: ""; position: absolute; left: 50%; top: 8px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #c62a2a; box-shadow: inset 0 0 0 2px #fffdf7, 0 0 0 1.5px #c62a2a; }
.fx-tag-name { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.25; color: var(--sn-ink); }
.fx-tag-price { font-family: "Caliste Display", Georgia, serif; font-style: italic; font-size: 24px; line-height: 1.2; color: var(--sn-blue); margin-top: 4px; }
.fx-granted { position: absolute; right: -8px; bottom: 12px; padding: 4px 10px; border-radius: 999px; background: #2f8a46; color: #fff; font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; transform: rotate(-6deg); box-shadow: 0 4px 8px -4px rgba(0, 0, 0, .4); }
@keyframes fx-sway { from { transform: translateX(-50%) rotate(-2.2deg); } to { transform: translateX(-50%) rotate(2.2deg); } }
.fx-drift { position: absolute; left: 0; right: 0; bottom: -1px; height: 96px; z-index: 1; pointer-events: none; line-height: 0; }
.fx-drift svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1099px) {
  .fx-garland.has-tags { height: 250px; }
  .fx-tag { left: var(--xm); top: var(--ym); }
  .fx-tag i { height: var(--lenm); }
  .fx-tag-card { min-width: 0; width: min(30vw, 170px); padding: 20px 10px 12px; }
  .fx-tag-name { font-size: 13px; }
  .fx-tag-price { font-size: 20px; }
  .fx-granted { right: -6px; bottom: -12px; font-size: 9.5px; }
  .fx-hide-narrow { display: none; }
}
@media (prefers-reduced-motion: reduce) { .fx-snow::before, .fx-snow::after, .fx-tag, .fx-orn { animation: none; } }

.landing-section { position: relative; isolation: isolate; padding: 24px 0 72px; }
.landing-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.landing-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px; }
.landing-card.is-partner { border-color: #f3c89c; }
.landing-card-icon { width: 44px; height: 44px; flex: none; border-radius: 6px; background: var(--sn-tint); color: var(--sn-blue); display: flex; align-items: center; justify-content: center; }
.landing-card.is-partner .landing-card-icon { background: var(--sn-peach); color: var(--sn-peach-accent); }
.landing-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.landing-card-body b { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; font-size: 16px; color: var(--sn-ink); }
.landing-card-body p { margin: 0; font-size: 14px; color: var(--sn-text); line-height: 1.45; }
.landing-card-body small { font-size: 12.5px; color: var(--sn-muted); letter-spacing: .04em; }
.landing-card .eyebrow { font-size: 10.5px; color: var(--sn-peach-accent); margin-bottom: 2px; }
.landing-close { background: var(--sn-sky); padding: 72px 40px 80px; text-align: center; margin-top: auto; }
.landing-close .inner { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* Share */
.share-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.share-grid a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border: 2px solid var(--sn-line-strong); border-radius: 12px; text-decoration: none; color: var(--sn-ink); font-size: 14px; font-weight: 600; }
.share-grid a:hover { border-color: var(--sn-blue); color: var(--sn-ink); }
@media (max-width: 560px) { .share-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.share-link-row { display: flex; gap: 10px; flex-wrap: wrap; }
.share-link-row input { flex: 1 1 280px; min-width: 0; padding: 14px 16px; border: 2px solid var(--sn-line-strong); border-radius: 12px; background: var(--sn-cream); }
.share-next a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-radius: 12px; background: var(--sn-cream); text-decoration: none; color: var(--sn-ink); }
.share-next a > div { display: flex; align-items: center; gap: 12px; }
.share-next .ico { width: 34px; height: 34px; border-radius: 10px; background: var(--sn-tint); display: flex; align-items: center; justify-content: center; }
.share-preview { background: #fff; border: 1px solid var(--sn-line); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 10px 30px rgba(22, 33, 58, .08); }
.share-preview-photo { height: 150px; background: #dceefb; display: flex; align-items: center; justify-content: center; color: var(--sn-blue); font-weight: 600; font-size: 14px; overflow: hidden; }
.share-preview-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Save */
.save-registry-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid var(--sn-blue); border-radius: 8px; background: var(--sn-tint); }

/* Partner intake landing: brand variables come from the layout */
.p-page { margin: -1.5rem calc(50% - 50vw); background: var(--brand-background, #fff); color: var(--brand-text, #2b2f36); font-size: 16px; line-height: 1.6; }
.p-page h1, .p-page h2, .p-page h3 { font-weight: 700; letter-spacing: -.01em; line-height: 1.12; margin: 0; color: var(--brand-text); }
.p-page a { color: var(--brand-accent-ink, var(--brand-accent)); }
.p-wrap { max-width: 1180px; margin: 0 auto; }
.p-section { padding: 64px 40px; }
.p-section-soft { background: #f5f6f8; }
/* Fixed light surfaces resolve the brand inks for themselves, whatever the page colours are. */
.p-section-soft, .p-card, .p-example, .p-hero-note, .p-tray-inner { --brand-text: #1f2430; --brand-muted: #4a4f5a; --brand-accent-ink: var(--brand-accent-on-white); --brand-primary-ink: var(--brand-primary-on-white); color: var(--brand-text); }
@media (max-width: 640px) { .p-section, .p-hero-inner { padding-left: 20px !important; padding-right: 20px !important; } .p-hide-sm { display: none; } }
/* Partner buttons share one shape with .navbar-cta: the brand radius, 600 weight, .08em tracking, at two sizes. */
.p-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem; padding: 15px 30px; border-radius: var(--brand-radius, 999px); border: 1.5px solid transparent;
  background-origin: border-box; background-image: linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 70%, #fff), var(--brand-primary));
  color: var(--brand-on-primary, #fff); font-weight: 600; font-size: 14px; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; line-height: 1.2; cursor: pointer;
  box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--brand-primary) 55%, transparent); transition: transform .16s ease, box-shadow .16s ease;
}
.p-btn:hover { transform: translateY(-1px); color: var(--brand-on-primary, #fff); }
.p-btn-light { background-image: none; background: #fff; border-color: #fff; color: var(--brand-accent-on-white, var(--brand-accent)); box-shadow: 0 10px 22px -14px rgba(0, 0, 0, .45); }
.p-btn-light:hover { color: var(--brand-accent-on-white, var(--brand-accent)); }
.p-btn-ghost { background-image: none; background: transparent; border-color: color-mix(in srgb, var(--brand-on-accent, #fff) 65%, transparent); color: var(--brand-on-accent, #fff); box-shadow: none; }
.p-btn-ghost:hover { color: var(--brand-on-accent, #fff); background: color-mix(in srgb, var(--brand-on-accent, #fff) 10%, transparent); }
.p-btn-sm { padding: 11px 22px; font-size: 12px; }
.p-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.p-hero { position: relative; background: var(--brand-accent); color: var(--brand-on-accent, #fff); overflow: hidden; isolation: isolate; }
.p-hero .p-eyebrow { color: color-mix(in srgb, var(--brand-on-accent, #fff) 75%, transparent); }
.p-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.p-hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--brand-accent) 95%, transparent) 0%, color-mix(in srgb, var(--brand-accent) 84%, transparent) 40%, color-mix(in srgb, var(--brand-accent) 25%, transparent) 75%, transparent 100%); }
.p-hero-inner { max-width: 1180px; margin: 0 auto; padding: 40px 40px 110px; display: flex; flex-direction: column; gap: 48px; }
.p-hero-note { align-self: flex-start; max-width: 720px; display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: 8px; background: rgba(255, 255, 255, .96); color: #2b2f36; box-shadow: 0 16px 36px -18px rgba(0, 0, 0, .5); }
.p-hero-note p { margin: 0; font-size: 15px; line-height: 1.5; }
.p-hero-row { display: flex; flex-wrap: wrap; gap: 40px; align-items: flex-end; justify-content: space-between; }
.p-hero-copy { flex: 0 1 580px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.p-hero-copy h1 { color: var(--brand-on-accent, #fff); font-size: clamp(2.4rem, 4.8vw, 3.9rem); }
.p-hero-copy p { margin: 0; font-size: 19px; line-height: 1.55; color: color-mix(in srgb, var(--brand-on-accent, #fff) 90%, transparent); max-width: 540px; }
.p-example { flex: 0 0 280px; background: #fff; color: #1f2430; border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, .5); }
.p-example b { font-size: 14px; font-weight: 700; color: var(--brand-text); line-height: 1.3; }
.p-example img { width: 52px; height: 40px; object-fit: contain; display: block; }
.p-example-copy { font-size: 13px; color: var(--brand-muted, #4a4f5a); }
@media (min-width: 1100px) {
  .p-example { flex-basis: 360px; padding: 20px 22px; gap: 12px; }
  .p-example b { font-size: 17px; }
  .p-example img { width: 64px; height: 50px; }
  .p-example .p-bar, .p-example .p-bar i { height: 12px; }
  .p-example-copy { font-size: 15px; }
}
.p-bar { height: 8px; border-radius: 999px; background: #eef0f4; overflow: hidden; }
.p-bar i { display: block; height: 8px; background: var(--brand-primary); border-radius: 999px; }
.p-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px; }
.p-step { display: flex; gap: 16px; align-items: flex-start; }
.p-step-n { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--brand-accent); color: var(--brand-on-accent, #fff); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 19px; }
.p-step h3 { font-size: 18px; }
.p-step p { margin: 0; color: var(--brand-muted, #4a4f5a); font-size: 15px; }
.p-step a { color: var(--brand-primary-ink, var(--brand-primary)); font-weight: 600; }
.p-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.p-filter { padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; border: 1.5px solid var(--brand-accent); background: #fff; color: var(--brand-accent-on-white, var(--brand-accent)); cursor: pointer; text-decoration: none; }
.p-filter.is-active { background: var(--brand-accent); color: var(--brand-on-accent, #fff); }
.p-card[hidden] { display: none; }
.p-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.p-card { display: flex; flex-direction: column; background: #fff; border: 2px solid #e6e8ee; border-radius: 8px; overflow: hidden; transform-origin: center; transition: transform .18s ease, box-shadow .18s ease, border-color .15s ease; }
.p-card:hover { transform: translateY(-3px) scale(1.015); box-shadow: 0 18px 40px -20px rgba(20, 24, 40, .35); }
.p-card.is-picked { border-color: #2f8a57; }
@media (prefers-reduced-motion: reduce) { .p-card { transition: none; } .p-card:hover { transform: none; } }
.p-tile { position: relative; height: 200px; background: #fff; border-bottom: 1px solid #eef0f4; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.p-tile::before { content: attr(data-initial); position: absolute; font-size: 48px; font-weight: 700; color: #e3e6ec; }
.p-tile img { position: relative; width: 100%; height: 100%; object-fit: contain; padding: 14px; box-sizing: border-box; display: block; background: #fff; }
.p-card-body { padding: 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.p-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.p-card-head h3 { font-size: 17px; }
.p-card-head span { font-weight: 700; color: var(--brand-text); white-space: nowrap; font-size: 15px; }
.p-card-note { font-size: 12.5px; color: var(--brand-muted, #4a4f5a); }
.p-card p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--brand-muted, #4a4f5a); }
.p-card-foot { margin-top: auto; padding-top: 10px; }
.p-pick { position: relative; display: block; width: 100%; cursor: pointer; }
.p-pick input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
/* Both labels and both icons are stacked in the same grid cell, so picking swaps colour and state without moving a pixel. */
.p-pick-btn { width: 100%; box-sizing: border-box; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.p-pick-btn .fa-solid { font-size: .9em; }
.p-pick-label { display: grid; }
.p-pick-label > span { grid-area: 1 / 1; white-space: nowrap; }
.p-pick-on, .p-pick:has(input:checked) .p-pick-off { visibility: hidden; }
.p-pick:has(input:checked) .p-pick-on { visibility: visible; }
.p-pick-ico-on, .p-pick:has(input:checked) .p-pick-ico-off { display: none; }
.p-pick:has(input:checked) .p-pick-ico-on { display: inline-block; }
.p-page .p-pick:has(input:checked) .p-pick-btn { background: #eef8f1; border-color: #2f8a57; color: #1f6a40; box-shadow: none; }
.p-pick:has(input:focus-visible) .p-pick-btn { outline: 3px solid color-mix(in srgb, var(--brand-primary) 40%, #fff); outline-offset: 2px; }
.p-story { display: flex; flex-wrap: wrap; gap: 48px; align-items: stretch; }
.p-story-img { flex: 1 1 420px; min-width: 0; border-radius: 8px; overflow: hidden; min-height: 380px; position: relative; background: var(--brand-accent); }
.p-story-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.p-story-copy { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 14px; justify-content: center; }
.p-story-copy p { margin: 0; font-size: 17px; color: var(--brand-muted, #4a4f5a); }
.p-facts { margin-top: 10px; background: var(--brand-accent); color: var(--brand-on-accent, #fff); border-radius: 8px; padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.p-facts h3 { color: var(--brand-on-accent, #fff); font-size: 19px; }
.p-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.p-facts-grid div { display: flex; flex-direction: column; gap: 2px; }
.p-facts-grid .p-eyebrow { color: color-mix(in srgb, var(--brand-on-accent, #fff) 80%, transparent); font-size: 11px; }
.p-facts-grid b { font-size: 16px; font-weight: 600; }
.p-trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 48px; }
.p-trust > div { display: flex; gap: 14px; align-items: flex-start; }
.p-trust h3 { font-size: 17px; }
.p-trust p { margin: 0; font-size: 14.5px; color: var(--brand-muted, #4a4f5a); }
.p-ico { width: 48px; height: 48px; flex: none; border-radius: 50%; background: #fff; color: var(--brand-accent-on-white, var(--brand-accent)); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 3px rgba(20, 23, 28, .08); }
.p-close { background: var(--brand-accent); color: var(--brand-on-accent, #fff); padding: 72px 40px 80px; text-align: center; }
.p-close .inner { max-width: 680px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.p-close h2 { color: var(--brand-on-accent, #fff); font-size: clamp(1.9rem, 3.4vw, 2.6rem); }
.p-close p { margin: 0; font-size: 17px; color: color-mix(in srgb, var(--brand-on-accent, #fff) 88%, transparent); }
.p-tray { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 0 16px 16px; box-sizing: border-box; pointer-events: none; }
.p-tray[hidden] { display: none; }
.p-tray-inner { max-width: 1180px; margin: 0 auto; background: #fff; border: 1px solid #dfe2ea; border-radius: 10px; box-shadow: 0 24px 60px -18px rgba(20, 24, 40, .45); overflow: hidden; pointer-events: auto; }
.p-tray-row { display: flex; align-items: center; gap: 16px; padding: 14px 18px; flex-wrap: wrap; }
.p-tray-count { width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--brand-accent); color: var(--brand-on-accent, #fff); display: flex; align-items: center; justify-content: center; font-weight: 700; }
.p-tray-copy { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; }
.p-tray-copy b { font-weight: 700; color: var(--brand-accent-on-white, var(--brand-accent)); font-size: 17px; }
.p-tray-copy span { font-size: 14px; color: var(--brand-muted, #4a4f5a); }
.p-tray-list { border-top: 1px solid #eef0f4; padding: 8px 18px 14px; display: flex; flex-direction: column; }
.p-tray-list[hidden] { display: none; }
.p-tray-list div { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid #f3f4f7; font-size: 15px; }
.p-tray-list div b { color: var(--brand-accent-on-white, var(--brand-accent)); }
.p-tray-toggle { background: none; border: 0; padding: 8px 4px; color: var(--brand-accent-on-white, var(--brand-accent)); font-weight: 700; font-size: 14px; text-decoration: underline; cursor: pointer; }
.p-continue-nojs { display: flex; justify-content: flex-end; }

/* Builder tabs and per-item context, driven by hidden inputs so they work without JavaScript */
.builder-panel, .builder-hint { display: none; }
.builder:has(#mode-custom:checked) .builder-panel[data-mode="custom"], .builder:has(#mode-ideas:checked) .builder-panel[data-mode="ideas"], .builder:has(#mode-suggest:checked) .builder-panel[data-mode="suggest"] { display: block; }
.builder:has(#mode-custom:checked) .builder-hint[data-mode="custom"], .builder:has(#mode-ideas:checked) .builder-hint[data-mode="ideas"], .builder:has(#mode-suggest:checked) .builder-hint[data-mode="suggest"] { display: block; }
.builder:has(#mode-custom:checked) .builder-mode[for="mode-custom"], .builder:has(#mode-ideas:checked) .builder-mode[for="mode-ideas"], .builder:has(#mode-suggest:checked) .builder-mode[for="mode-suggest"] { background: var(--sn-ink); color: #fff; }
.builder:has(#mode-custom:focus-visible) .builder-mode[for="mode-custom"], .builder:has(#mode-ideas:focus-visible) .builder-mode[for="mode-ideas"], .builder:has(#mode-suggest:focus-visible) .builder-mode[for="mode-suggest"] { outline: 3px solid var(--sn-sky); }
.builder-item { position: relative; }
.builder-item-row { padding-right: 60px; }
.builder-item .builder-context { display: none; }
.builder-item:has(.builder-ctx-check:checked) .builder-context { display: flex; }
.builder-item:has(.builder-ctx-check:checked) .builder-context-toggle { background: var(--sn-tint); color: var(--sn-blue); }
.builder-remove-form { position: absolute; right: 18px; top: 10px; height: 45px; display: flex; align-items: center; }
.money-field.is-sm { height: 45px; }

/* Landing photo under the hanging tags */
.hero-body { z-index: 1; }
.hero-photo { flex: 1 1 320px; min-width: 260px; max-width: 520px; margin-left: auto; margin-top: 48px; position: relative; z-index: 0; }
.hero-photo img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border-radius: 18px; border: 10px solid #fff; box-shadow: 0 30px 60px -28px rgba(20, 40, 40, .45); transform: rotate(1.5deg); }
@media (max-width: 1099px) { .hero-photo { margin-top: 0; max-width: 420px; } }

/* Idea pills: compact, with the full name on hover */
.chips { gap: 6px; }
.chip { font-size: 13px; padding: 6px 10px; gap: 6px; max-width: 240px; }
.chip .chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.chip .price { flex: none; font-size: 12px; }

/* Save page: connect row */

/* Partner buttons: solid brand primary, white secondary */
.p-btn { background-image: none; background: var(--brand-primary); }
.p-btn:hover { background: color-mix(in srgb, var(--brand-primary) 88%, #000); }
.p-btn-light, .p-btn-light:hover { background: #fff; border-color: #fff; color: var(--brand-accent-on-white, var(--brand-accent)); }

/* A family's public wishlist page */
.wl-hero { display: flex; flex-wrap: wrap; gap: 40px; align-items: center; padding: 48px 0 40px; }
.wl-hero-photo { flex: 0 1 380px; min-width: 240px; }
.wl-hero-photo img, .wl-hero-photo div { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; background: #dceefb; }
.wl-hero-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.wl-progress { display: flex; flex-wrap: wrap; gap: 24px; align-items: baseline; }
.wl-progress b { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; font-size: 32px; color: var(--sn-ink); letter-spacing: -.02em; }
.wl-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; padding-bottom: 56px; }
.wl-item { display: flex; flex-direction: column; gap: 10px; padding: 20px; }
.wl-item.is-covered { background: #f3faf5; }
.wl-item-photo { height: 150px; border-radius: 8px; overflow: hidden; background: var(--sn-cream); }
.wl-item-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wl-item h3 { font-size: 17px; }
.wl-item p { margin: 0; font-size: 14px; color: var(--sn-text); line-height: 1.5; }
.wl-bar { height: 8px; border-radius: 999px; background: var(--sn-line); overflow: hidden; }
.wl-bar i { display: block; height: 100%; background: var(--sn-green); border-radius: 999px; }
.wl-item-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 14px; }
.wl-item-foot b { font-family: "FT Polar", system-ui, sans-serif; font-weight: 500; font-size: 18px; color: var(--sn-ink); }
.wl-covered { display: inline-flex; align-items: center; gap: 6px; color: var(--sn-green-dark); font-weight: 600; font-size: 13px; }
.wl-share { background: var(--sn-sky); padding: 56px 40px; text-align: center; }
.wl-share .inner { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.p-page a.p-btn, .p-page .p-btn { color: var(--brand-on-primary, #fff); }
.p-page a.p-btn-light, .p-page .p-btn-light, .p-page .p-btn-light:hover { color: var(--brand-accent-on-white, var(--brand-accent)); }

/* Public wishlist page: callout to the family's full Support Page */
.wl-full-page { display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; padding: 28px 32px; margin: -24px 0 56px; background: #fff; }
.wl-full-page-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wl-full-page .sn-btn { flex: none; }

/* Creator intake landing: a person rallying families, so the brand primary leads and there is no product grid */
.pc-page { --pc-tint: color-mix(in srgb, var(--brand-primary) 10%, white); --pc-tint-deep: color-mix(in srgb, var(--brand-primary) 22%, white); --pc-muted: color-mix(in srgb, var(--brand-text) 80%, white); --pc-shadow: 0 18px 40px -28px color-mix(in srgb, var(--brand-text) 55%, transparent); }
.pc-page .p-eyebrow { color: var(--brand-primary-on-white, var(--brand-primary)); }
.pc-page .p-eyebrow.pc-eyebrow-muted { color: var(--pc-muted); }
.pc-page .p-step-n, .pc-page .p-close { background: var(--brand-primary); --brand-on-accent: var(--brand-on-primary, #fff); }
.pc-page .p-ico, .pc-page a.p-btn-light, .pc-page .p-btn-light, .pc-page .p-btn-light:hover { color: var(--brand-primary-on-white, var(--brand-primary)); }
.pc-page .p-btn-outline, .pc-page a.p-btn-outline { background: transparent; border-color: var(--brand-primary); color: var(--brand-primary-on-white, var(--brand-primary)); box-shadow: none; }
.pc-page .p-btn-outline:hover { background: var(--pc-tint); }
.pc-hero { background: radial-gradient(55% 70% at 88% 12%, var(--pc-tint-deep) 0, transparent 62%), radial-gradient(40% 50% at 6% 92%, var(--pc-tint) 0, transparent 60%), var(--pc-tint); }
.pc-hero-inner { max-width: 1180px; margin: 0 auto; padding: 56px 40px 48px; display: flex; flex-direction: column; gap: 44px; }
.pc-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.pc-give { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 22px; background: #fff; border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, white); border-radius: 16px; box-shadow: var(--pc-shadow); }
.pc-give-ico { width: 46px; height: 46px; flex: none; border-radius: 50%; background: var(--pc-tint-deep); color: var(--brand-primary-on-white, var(--brand-primary)); display: flex; align-items: center; justify-content: center; }
.pc-give-copy { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pc-give-copy b { font-family: var(--brand-heading-font); font-size: 17px; color: var(--brand-text); }
.pc-give-copy span { font-size: 14.5px; line-height: 1.5; color: var(--pc-muted); }
.pc-hero-copy { display: flex; flex-direction: column; gap: 18px; }
.pc-hero-copy h1 { font-size: clamp(2.1rem, 4.4vw, 3.4rem); line-height: 1.06; letter-spacing: -.02em; margin: 0; }
.pc-lede { margin: 0; font-size: clamp(1rem, 1.4vw, 1.15rem); line-height: 1.55; color: var(--pc-muted); max-width: 560px; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.pc-trust { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: var(--pc-muted); }
.pc-trust span { display: inline-flex; align-items: center; gap: 7px; }
.pc-trust svg { color: var(--brand-primary); flex: none; }
.pc-hero-side { display: flex; flex-direction: column; gap: 14px; }
.pc-polaroid { background: #fff; padding: 12px 12px 14px; border-radius: 18px; box-shadow: var(--pc-shadow); transform: rotate(-2.5deg); }
.pc-polaroid img { display: block; width: 100%; height: 300px; object-fit: cover; border-radius: 10px; }
.pc-polaroid-caption { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 12px 6px 0; font-size: 13.5px; color: var(--pc-muted); }
.pc-speech { position: relative; margin: 10px 18px 0 -10px; background: var(--brand-primary); color: var(--brand-on-primary, #fff); border-radius: 18px; padding: 18px 20px; transform: rotate(1.2deg); box-shadow: var(--pc-shadow); }
.pc-speech::before { content: ''; position: absolute; left: 34px; top: -10px; width: 22px; height: 22px; background: var(--brand-primary); transform: rotate(45deg); border-radius: 4px; }
.pc-speech p { margin: 0; font-family: var(--brand-quote-font); font-style: italic; font-size: 16px; line-height: 1.45; }
.pc-letter { background: linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 85%, white) 0%, var(--brand-primary) 55%, color-mix(in srgb, var(--brand-primary) 80%, black) 100%); color: var(--brand-on-primary, #fff); }
.pc-letter-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 40px; align-items: center; padding: 64px 40px; }
.pc-letter-photo img { width: 100%; height: 400px; object-fit: cover; border-radius: 22px; display: block; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .6); }
.pc-letter-copy { display: flex; flex-direction: column; gap: 14px; }
.pc-letter-copy .p-eyebrow { color: color-mix(in srgb, var(--brand-on-primary, #fff) 85%, transparent); }
.pc-letter-copy p { margin: 0; font-size: 17px; line-height: 1.6; }
.pc-letter-copy a { color: var(--brand-on-primary, #fff); }
.pc-signature { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-top: 6px; }
.pc-signature-name { font-family: var(--brand-quote-font); font-style: italic; font-size: 28px; line-height: 1; }
.pc-signature a { font-size: 14px; opacity: .85; }
.pc-ideas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; align-items: start; }
.pc-ideas-copy { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 24px; }
.pc-cards { display: flex; flex-direction: column; gap: 10px; }
.pc-cards .landing-card { padding: 16px 18px; }
.pc-page .landing-card-icon { background: var(--pc-tint); color: var(--brand-primary-on-white, var(--brand-primary)); }
.pc-page .landing-card-body b { font-family: var(--brand-heading-font); color: var(--brand-text); }
.pc-page .landing-card-body p { color: var(--pc-muted); }
.pc-families { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.pc-family { display: flex; flex-direction: column; gap: 12px; padding: 20px; background: #fff; border: 1px solid color-mix(in srgb, var(--brand-text) 10%, white); border-radius: 14px; color: inherit; text-decoration: none; box-shadow: var(--pc-shadow); transition: transform .18s ease; }
.pc-family:hover { transform: translateY(-2px); color: inherit; }
.pc-family-head { display: flex; align-items: center; gap: 12px; }
.pc-family-head > div { display: flex; flex-direction: column; }
.pc-family-head b { font-family: var(--brand-heading-font); font-size: 17px; color: var(--brand-text); }
.pc-family-head span { font-size: 13px; color: var(--pc-muted); }
.pc-family-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--pc-tint-deep); color: var(--brand-primary-on-white, var(--brand-primary)); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 18px; }
.pc-family p { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--pc-muted); }
.pc-family small { font-size: 12.5px; color: var(--brand-primary-on-white, var(--brand-primary)); font-weight: 700; letter-spacing: .04em; margin-top: auto; }
@media (max-width: 900px) {
  .pc-hero-grid, .pc-letter-inner, .pc-ideas { grid-template-columns: 1fr; }
  .pc-ideas { gap: 28px; }
  .pc-ideas-copy { position: static; }
  .pc-hero-side { max-width: 420px; }
  .pc-speech { margin: 12px 0 0; transform: none; }
  .pc-letter-photo img { height: 300px; }
}
@media (max-width: 640px) {
  .pc-hero-inner, .pc-letter-inner { padding-left: 20px; padding-right: 20px; }
  .pc-give { padding: 16px 18px; }
  .pc-hero-inner { padding-top: 36px; padding-bottom: 44px; }
  .pc-polaroid img { height: 240px; }
}