:root {
  color-scheme:light;
  --paper:#f8f9f5;
  --ink:#20231d;
  --muted:#60645a;
  --lime:#d6ed69;
  --line:#dadfd2;
  --white:#fff;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none}
* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:2rem}
body {
  margin:0}
a {
  color:inherit;
  text-decoration:none}
button {
  font:inherit}
button,a {
  -webkit-tap-highlight-color:transparent}
a:focus-visible,button:focus-visible {
  outline:3px solid #547116;
  outline-offset:6px}
img {
  display:block;
  max-width:100%;
  height:auto}
p {
  line-height:1.65}
h1,h2,h3,p {
  margin:0}
em {
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400}
button {
  color:inherit}
.container {
  width:min(1280px,calc(100% - 112px));
  margin-inline:auto}
.skip-link {
  position:absolute;
  top:-100px;
  left:20px;
  z-index:10;
  background:var(--ink);
  color:white;
  padding:15px}
.skip-link:focus {
  top:12px}
.site-header {
  height:110px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--line)}
.brand {
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:1.45rem;
  font-weight:700;
  letter-spacing:-.065em}
.brand img {
  width:38px;
  mix-blend-mode:multiply}
.site-header nav,.site-footer nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:0.9rem}
.site-header nav a:hover,.site-footer a:hover {
  text-decoration:underline;
  text-underline-offset:5px}
.nav-support {
  display:flex;
  gap:25px;
  align-items:center;
  border:1px solid #bfc5b6;
  border-radius:30px;
  padding:12px 19px}
.hero {
  display:grid;
  grid-template-columns:1.02fr 1fr;
  gap:20px;
  align-items:center;
  padding-top:64px;
  padding-bottom:70px;
  min-height:704px}
.eyebrow {
  font-size:0.75rem;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:10px}
.eyebrow-line {
  width:24px;
  height:2px;
  background:var(--ink)}
h1 {
  font-size:clamp(4.3rem,7.1vw,6.65rem);
  line-height:1.01;
  letter-spacing:-.075em;
  font-weight:600;
  margin-top:29px;
  margin-bottom:26px}
h1 em {
  letter-spacing:-.08em;
  position:relative;
  z-index:0}
h1 em:after {
  position:absolute;
  content:'';
  left:2%;
  right:-5%;
  height:16px;
  background:var(--lime);
  bottom:8px;
  z-index:-1;
  transform:rotate(-3deg)}
.hero-description {
  font-size:1.0625rem;
  color:var(--muted);
  line-height:1.8;
  max-width:440px}
.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  background:var(--ink);
  color:var(--white);
  border:1px solid var(--ink);
  border-radius:50px;
  padding:18px 24px;
  font-size:0.9rem;
  font-weight:600;
  transition:background .2s,transform .2s;
  margin-top:31px}
.button:hover {
  background:#404b2e;
  transform:translateY(-2px)}
.button span {
  font-size:1.3rem;
  font-weight:400}
.hero-note {
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:33px}
.note-symbol {
  font-size:2.3rem;
  line-height:1}
.hero-note p {
  font-size:0.8rem;
  color:var(--muted);
  line-height:1.5}
.hero-note strong {
  font-weight:400;
  color:var(--ink)}
.network-scene {
  position:relative;
  padding:22px 10px 5px;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center}
.scene-topline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:0.85rem;
  padding-inline:15px}
.mini-label {
  font-size:0.75rem;
  letter-spacing:.12em;
  color:#707768}
.network-graph {
  position:relative;
  width:100%;
  aspect-ratio:600/520}
.network-lines {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  overflow:visible}
.center-node {
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:112px;
  height:112px;
  border:1px solid var(--ink);
  border-radius:50%;
  box-shadow:0 0 0 9px var(--paper),0 0 0 10px var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  background:var(--paper);
  gap:2px;
  font-size:0.8rem}
.center-node img {
  width:50px;
  height:50px;
  mix-blend-mode:multiply}
.person {
  position:absolute;
  transform:translate(-50%,-50%);
  background:none;
  border:0;
  cursor:pointer;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  transition:transform .2s}
.person:hover {
  transform:translate(-50%,-50%) scale(1.08)}
.person-maya {
  left:21.67%;
  top:24.62%}
.person-alex {
  left:77.83%;
  top:25.58%}
.person-mum {
  left:21.33%;
  top:72.69%}
.person-sam {
  left:79.67%;
  top:72.89%}
.avatar {
  position:relative;
  display:grid;
  place-items:center;
  width:66px;
  height:66px;
  border:5px solid var(--paper);
  outline:1px solid #cdd2c4;
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:1.65rem}
.person[aria-pressed=true] .avatar {
  outline:2px solid var(--ink)}
.avatar-lilac {
  background:#d9ccec}
.avatar-blue {
  background:#c8dded}
.avatar-peach {
  background:#f1d4bc}
.avatar-lime {
  background:#dceaa3}
.node-symbol {
  position:absolute;
  right:-8px;
  bottom:-5px;
  border:3px solid var(--paper);
  border-radius:50%;
  background:var(--ink);
  color:white;
  font-family:Arial,sans-serif;
  font-size:0.85rem;
  display:grid;
  place-items:center;
  width:26px;
  height:26px}
.person-label {
  display:flex;
  flex-direction:column;
  font-size:0.8rem;
  gap:3px;
  background:var(--paper);
  padding:0 4px;
  font-weight:600}
.person-label span {
  font-size:0.75rem;
  color:var(--muted);
  font-weight:400}
.graph-caption {
  position:absolute;
  left:50%;
  top:83%;
  transform:translateX(-50%) rotate(-6deg);
  white-space:nowrap;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1rem}
.gift-toast {
  display:flex;
  gap:13px;
  align-items:center;
  background:white;
  border:1px solid var(--line);
  border-radius:13px;
  box-shadow:0 9px 26px #20231d08;
  padding:17px 20px;
  width:86%;
  margin:-8px auto 0;
  position:relative}
.toast-icon {
  width:40px;
  height:40px;
  background:var(--lime);
  border-radius:10px;
  display:grid;
  place-items:center;
  font-size:1.5rem;
  flex-shrink:0}
.gift-toast strong {
  display:block;
  font-size:0.85rem;
  font-weight:600}
.gift-toast div>span {
  display:block;
  font-size:0.75rem;
  color:var(--muted);
  line-height:1.5;
  margin-top:5px}
.toast-arrow {
  margin-left:auto;
  font-size:1.3rem}
.demo-label {
  text-align:center;
  font-size:0.75rem;
  color:#72776b;
  margin-top:13px}
.intro-strip {
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:27px 0}
.intro-strip .container {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  font-size:1rem}
.intro-strip em {
  font-size:1.15rem}
.strip-star {
  font-size:1.7rem;
  color:#737d51}
.gifting-section {
  padding-block:96px 100px}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  margin-bottom:38px;
  gap:30px}
h2 {
  font-size:clamp(2.7rem,4.5vw,4.25rem);
  line-height:1.07;
  letter-spacing:-.055em;
  font-weight:500}
.section-heading h2 {
  margin-top:16px}
.section-heading>p {
  font-size:1rem;
  color:var(--muted);
  padding-bottom:6px}
.gift-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:23px}
.feature-visual {
  height:320px;
  border-radius:18px;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow:hidden}
.money-visual {
  background:#e4eadc}
.money-example {
  background:#fff;
  transform:rotate(-7deg);
  width:80%;
  padding:24px 22px;
  border-radius:10px;
  box-shadow:3px 12px 20px #2a321412}
.small-label {
  display:block;
  font-size:0.75rem;
  letter-spacing:.09em}
.money-amount {
  display:flex;
  align-items:baseline;
  font-size:4.5rem;
  letter-spacing:-.09em;
  margin:12px 0 4px}
.money-amount small {
  font-size:0.75rem;
  letter-spacing:0;
  margin-right:7px}
.money-star {
  color:#a5bc42;
  font-size:3rem;
  margin-left:auto}
.money-message {
  font-family:Georgia,serif;
  font-size:1rem;
  font-style:italic}
.money-rule {
  display:block;
  height:1px;
  background:var(--line);
  margin-block:20px 12px}
.money-footer {
  font-size:0.75rem;
  display:flex;
  justify-content:space-between;
  align-items:center}
.money-footer>span {
  font-size:1.4rem}
.card-visual {
  background:#ded9ed;
  flex-direction:column;
  gap:22px}
.gift-card-example {
  width:79%;
  min-height:190px;
  background:#262421;
  color:#f8f6ef;
  padding:21px 22px;
  border-radius:12px;
  transform:rotate(7deg);
  box-shadow:4px 15px 24px #39254a19}
.gift-card-example>span:first-child {
  font-size:0.75rem;
  display:flex;
  justify-content:space-between}
.gift-card-example strong {
  font-weight:400;
  display:block;
  font-size:2.7rem;
  line-height:.95;
  letter-spacing:-.06em;
  margin-block:15px 23px}
.gift-card-example em {
  color:#e1d0ec}
.gift-card-bottom {
  font-size:0.75rem;
  letter-spacing:.06em;
  display:flex;
  justify-content:space-between;
  align-items:center}
.gift-card-bottom>span {
  font-size:1.3rem}
.card-caption {
  font-size:0.75rem;
  font-family:Georgia,serif;
  font-style:italic}
.greeting-visual {
  background:#f5e4c8;
  padding:28px}
.greeting-visual img {
  width:83%;
  border:5px solid white;
  transform:rotate(-6deg);
  box-shadow:5px 10px 22px #4834191c}
.feature-copy {
  padding:25px 2px 0}
.feature-number {
  font-size:0.75rem;
  color:#666d5d}
.feature-copy h3 {
  font-size:1.5rem;
  font-weight:500;
  letter-spacing:-.04em;
  margin-block:12px}
.feature-copy p {
  font-size:0.9375rem;
  color:var(--muted);
  line-height:1.8;
  max-width:350px}
.connection-section {
  border-top:1px solid var(--line);
  padding-block:92px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:center}
.connection-copy h2 {
  font-size:clamp(2.6rem,4vw,3.8rem);
  margin-block:20px 25px}
.connection-copy>p:not(.eyebrow) {
  max-width:470px;
  color:var(--muted);
  font-size:1rem;
  margin-bottom:15px}
.text-link {
  display:inline-flex;
  gap:24px;
  align-items:center;
  font-size:0.875rem;
  border-bottom:1px solid var(--ink);
  padding-bottom:7px;
  margin-top:13px}
.text-link:hover {
  color:#577215}
.card-pair {
  height:410px;
  position:relative}
.card-pair img {
  position:absolute;
  width:57%;
  border:7px solid white;
  box-shadow:0 10px 30px #28301b16;
  border-radius:4px}
.thank-you-card {
  left:0;
  top:14px;
  transform:rotate(-12deg)}
.thinking-card {
  right:0;
  top:94px;
  transform:rotate(11deg)}
.handwritten {
  position:absolute;
  left:8%;
  bottom:5px;
  font-family:Georgia,serif;
  font-size:1.7rem;
  font-style:italic;
  line-height:1.1;
  transform:rotate(-8deg)}
.closing {
  background:var(--ink);
  color:var(--paper);
  border-radius:22px;
  padding:56px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  margin-top:10px;
  margin-bottom:74px}
.closing .eyebrow {
  color:#d1d8c6}
.closing h2 {
  margin-top:19px;
  font-size:clamp(2.5rem,3.8vw,3.7rem)}
.closing em {
  color:var(--lime)}
.button-light {
  background:var(--lime);
  color:var(--ink);
  border:0;
  margin-top:0;
  white-space:nowrap}
.button-light:hover {
  background:#e5f7a2}
.footer-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:30px;
  border-bottom:1px solid var(--line)}
.footer-top>p {
  font-family:Georgia,serif;
  font-size:0.95rem;
  font-style:italic;
  color:var(--muted)}
.footer-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding-block:23px 32px;
  gap:15px;
  font-size:0.75rem;
  color:var(--muted)}
.footer-bottom a {
  font-size:0.8rem}
.footer-bottom a span {
  margin-left:12px}
@media(min-width:1500px) {
  .hero {
  min-height:760px}
.network-scene {
  padding-left:25px;
  padding-right:20px}
}
@media(max-width:1100px) {
  .container {
  width:calc(100% - 64px)}
.hero {
  gap:10px;
  padding-top:48px;
  padding-bottom:48px;
  min-height:640px}
h1 {
  font-size:clamp(3.8rem,7.1vw,5.8rem)}
.hero-description {
  font-size:1rem}
.desktop-break {
  display:none}
.center-node {
  width:90px;
  height:90px}
.center-node img {
  width:40px;
  height:40px}
.avatar {
  width:58px;
  height:58px}
.gift-toast {
  width:96%;
  padding:14px}
.feature-visual {
  height:270px}
.money-example {
  padding:20px 17px}
.money-amount {
  font-size:3.8rem}
.gift-card-example {
  padding:18px}
.connection-section {
  gap:35px}
.card-pair {
  height:340px}
.closing {
  padding:42px}
.footer-top>p {
  display:none}
}
@media(max-width:760px) {
  .container {
  width:calc(100% - 40px)}
.site-header {
  height:86px}
.brand {
  font-size:1.2rem;
  gap:7px}
.brand img {
  width:31px}
.site-header nav {
  gap:17px;
  font-size:0.8rem}
.nav-support {
  padding:0;
  border:0;
  gap:5px}
.hero {
  grid-template-columns:1fr;
  padding-top:42px;
  gap:34px;
  padding-bottom:38px}
.hero-copy {
  max-width:570px}
h1 {
  font-size:clamp(3.8rem,12vw,5.7rem);
  margin-top:22px}
.hero-description {
  max-width:400px}
.button {
  margin-top:24px;
  padding:17px 22px}
.hero-note {
  margin-top:22px}
.network-scene {
  width:min(100%,530px);
  margin:auto;
  padding:20px 0 0}
.scene-topline {
  padding-inline:6px}
.network-graph {
  margin-block:4px 10px}
.center-node {
  width:99px;
  height:99px}
.center-node img {
  width:47px;
  height:47px}
.avatar {
  width:65px;
  height:65px}
.gift-toast {
  width:92%;
  padding:16px}
.demo-label {
  font-size:0.75rem}
.intro-strip {
  padding:22px 0}
.intro-strip .container {
  flex-wrap:wrap;
  justify-content:center;
  gap:10px 16px;
  font-size:0.9rem}
.intro-strip .container>span:last-child,.intro-strip .strip-star:nth-last-child(2) {
  display:none}
.strip-star {
  font-size:1.2rem}
.gifting-section {
  padding-block:59px}
.section-heading {
  display:block;
  margin-bottom:28px}
.section-heading>p {
  margin-top:20px;
  font-size:0.95rem}
.gift-grid {
  grid-template-columns:1fr;
  gap:38px}
.feature-visual {
  height:330px}
.money-example {
  width:min(77%,320px);
  padding:26px}
.money-amount {
  font-size:4.8rem}
.small-label {
  font-size:0.75rem}
.gift-card-example {
  width:min(77%,320px);
  padding:24px}
.gift-card-bottom {
  font-size:0.75rem}
.greeting-visual img {
  width:260px}
.feature-copy {
  padding-top:20px}
.feature-copy p {
  max-width:none}
.feature-number {
  font-size:0.75rem}
.connection-section {
  padding-block:55px 30px;
  grid-template-columns:1fr;
  gap:30px}
.connection-copy h2 {
  font-size:clamp(2.45rem,8vw,3.8rem)}
.card-pair {
  height:390px;
  max-width:480px;
  width:100%;
  margin:auto}
.closing {
  padding:34px 25px;
  display:block;
  margin-bottom:45px}
.closing .eyebrow {
  font-size:0.75rem}
.closing h2 {
  font-size:2.7rem;
  max-width:320px}
.closing .button {
  margin-top:26px}
.footer-top {
  flex-wrap:wrap;
  gap:25px}
.site-footer nav {
  gap:25px;
  font-size:0.875rem}
.footer-bottom {
  align-items:flex-start;
  flex-direction:column;
  font-size:0.75rem}
.eyebrow {
  font-size:0.75rem}
}
@media(max-width:390px) {
  .container {
  width:calc(100% - 32px)}
.brand {
  font-size:1.1rem}
.brand img {
  width:27px}
.site-header nav {
  gap:12px;
  font-size:0.75rem}
.nav-support span {
  display:none}
.center-node {
  width:82px;
  height:82px}
.avatar {
  width:56px;
  height:56px}
.gift-toast strong {
  font-size:0.78rem}
.gift-toast div>span {
  font-size:0.75rem}
.card-pair {
  height:320px}
.graph-caption {
  font-size:0.9rem}
.intro-strip .strip-star {
  display:none}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  transition:none!important;
  animation:none!important}
}
@media(forced-colors:active) {
  .person[aria-pressed=true] {
  outline:2px solid Highlight}
.center-node,.avatar {
  border:1px solid CanvasText}
.network-lines {
  forced-color-adjust:none}
}


/* Shared navigation for the homepage and Gift Types page. */
.site-header a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
.gift-types-link{margin-top:34px}
@media(max-width:760px){
  .site-header{height:auto;min-height:86px;padding-block:20px;flex-wrap:wrap;gap:20px}
  .site-header nav{flex-wrap:wrap;gap:20px;font-size:.875rem}
  .site-footer nav{flex-wrap:wrap}
}
@media(max-width:520px){
  .site-header{align-items:flex-start;flex-direction:column;gap:17px}
  .site-header nav{width:100%;justify-content:space-between;gap:10px}
}

/* Keep the caption close to the outer ring on small screens. */
@media(max-width:760px){
  .graph-caption{top:91%}
}