/* ==========================================================================
   About page
   Ported from the "About us page mockups" design canvas (option 3a).

   The canvas rendered the page inside a fixed-width card, so its breakpoints
   were @container queries against that card. On a real page the container is
   the viewport, so they become @media queries here — same widths, same intent.

   Mobile-first: the base rules are single-column; each breakpoint adds columns.
   Design tokens come from styles.css, and the example requirement card reuses
   the .lc component from designer-feed.css.
   ========================================================================== */

/* The canvas scoped its spacing tokens to the preview card, and the port
   dropped that block — so --r3-pad and --r3-y resolved to nothing and the page
   rendered edge to edge with no section rhythm at every width. They map onto
   the site tokens so About shares the homepage's spacing scale. */
.r3{--r3-pad:var(--pad-x);--r3-y:var(--sect-y)}
.r3-wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--r3-pad);padding-right:var(--r3-pad)}
.r3-sect{padding-top:var(--r3-y);padding-bottom:var(--r3-y)}
.r3-sect--soft{background:var(--color-paper-soft);border-top:1px solid var(--color-line-faint);border-bottom:1px solid var(--color-line-faint)}
/* Hero */
.r3-hero{background:var(--color-forest);color:var(--color-paper);position:relative;overflow:hidden}
.r3-hero__inner{display:grid;gap:32px;align-items:center;padding-top:calc(var(--r3-y) + 4px);padding-bottom:calc(var(--r3-y) + 4px)}
.r3-eyebrow{margin:0 0 14px;font-size:11px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;color:rgba(246,244,237,.66)}
.r3-hero h1{font-family:var(--font-serif);font-weight:400;font-size:clamp(2rem,7.4vw,2.5rem);line-height:1.06;letter-spacing:-.012em;margin:0;color:var(--color-paper);max-width:20ch}
.r3-hero p{margin:18px 0 0;max-width:44ch;font-size:16.5px;line-height:1.68;color:rgba(246,244,237,.8)}
.r3-hero__cta{display:flex;flex-direction:column;align-items:stretch;gap:14px;margin-top:26px}
.r3-hero__cta .ib-btn-paper{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 26px;font-size:16px;font-weight:750;letter-spacing:.005em;border-radius:999px}
.r3-link{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font-size:14.5px;font-weight:700;color:rgba(246,244,237,.86);text-decoration:none;border:0}
.r3-link::after{content:"→";font-size:15px;transition:transform .2s ease}
.r3-link:hover{color:var(--color-paper)}
.r3-link:hover::after{transform:translateX(3px)}
.r3-viz{position:relative;padding:0}
.r3-viz__plan{display:none}
.r3-req{position:relative;width:100%;filter:drop-shadow(0 .75rem 2rem rgba(23,26,23,.3))}
.r3-req .lc{margin:0}
.r3-req .st,.r3-req .freq{white-space:nowrap}
.r3-reqlabel{position:absolute;top:-11px;left:16px;z-index:2;font-size:10.5px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;color:var(--color-sage-ink);background:var(--color-sage);padding:4px 9px;border-radius:999px}
/* Section heads */
.r3-head{max-width:44rem;margin:0 0 28px}
.r3-head--center{margin-inline:auto;text-align:center}
.r3-head--flush{margin-bottom:20px}
.r3-head h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.7rem,6vw,2.1rem);line-height:1.12;margin:0;color:var(--color-ink)}
.r3-head p{margin:14px 0 0;font-size:16px;line-height:1.68;color:var(--color-muted)}
.r3-eyebrow--ink{color:var(--color-sage-ink);margin-bottom:10px}
/* Flow */
.r3-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:22px}
.r3-flow li{position:relative;padding:0 0 0 26px}
.r3-flow li::before{content:"";position:absolute;left:4px;top:20px;bottom:-22px;width:1px;background:var(--color-line)}
.r3-flow li:last-child::before{display:none}
.r3-flow__dot{position:absolute;left:0;top:6px;display:block;width:9px;height:9px;border-radius:50%;background:var(--color-sage-ink);margin:0;box-shadow:0 0 0 4px var(--color-paper)}
.r3-flow__no{display:block;font-family:var(--font-serif);font-size:13px;color:var(--color-stone-dark);margin-bottom:4px}
.r3-flow h3{margin:0 0 6px;font-size:16px;font-weight:700;color:var(--color-ink)}
.r3-flow p{margin:0;font-size:14.5px;line-height:1.6;color:var(--color-muted);padding-right:0}
/* Value cards */
.r3-vals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.r3-val{background:var(--color-card);border:1px solid var(--color-line-warm);border-radius:var(--radius-card);padding:24px;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.r3-val:hover{transform:translateY(-2px);border-color:var(--color-ink);box-shadow:var(--shadow-soft)}
.r3-val:nth-child(2){background:var(--color-forest);border-color:var(--color-forest)}
.r3-val:nth-child(2) h3{color:var(--color-paper)}
.r3-val:nth-child(2) p{color:rgba(246,244,237,.8)}
.r3-val:nth-child(2) .r3-ico{color:var(--color-paper);border-color:rgba(246,244,237,.3)}
.r3-ico{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--color-line);color:var(--color-sage-ink);margin-bottom:18px}
.r3-val h3{margin:0 0 8px;font-size:17px;font-weight:700;color:var(--color-ink)}
.r3-val p{margin:0;font-size:15.5px;line-height:1.65;color:var(--color-muted);max-width:46ch}
/* Two-column prose + pricing panel */
.r3-two{display:grid;grid-template-columns:1fr;gap:28px;align-items:start}
.r3-two p{margin:0 0 14px;font-size:16.5px;line-height:1.72;color:var(--color-ink);max-width:52ch}
.r3-two p:last-child{margin-bottom:0}
.r3-pay{background:var(--color-card);border:1px solid var(--color-line-warm);border-radius:var(--radius-card);padding:22px}
.r3-pay__row{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:15px 0;border-top:1px solid var(--color-line-faint);font-size:15px;color:var(--color-ink)}
.r3-pay__row:first-of-type{border-top:0;padding-top:0}
.r3-pay__row--key{margin:2px -22px;padding:15px 22px;background:var(--color-sage);border-top-color:transparent}
.r3-pay__row--key span:first-child{font-weight:700}
.r3-pay__row--key span:last-child{color:var(--color-sage-ink)}
.r3-pay__row--key + .r3-pay__row{border-top-color:transparent}
.r3-pay__row span:last-child{font-size:16px;font-weight:750;font-variant-numeric:tabular-nums;color:var(--color-ink);text-align:right;white-space:nowrap}
.r3-pay__wallet{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;background:var(--color-sage);border-radius:var(--radius-sm);padding:18px;margin-top:18px}
.r3-pay__wallet strong{display:block;font-size:15px;color:var(--color-ink)}
.r3-pay__wallet span:not(.r3-req__btn){font-size:13.5px;color:var(--color-sage-ink)}
.r3-req__btn{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;font-size:13.5px;font-weight:750;color:var(--color-paper);background:var(--color-ink);border-radius:999px}
.r3-note{margin:14px 0 0;font-size:13.5px;line-height:1.6;color:var(--color-stone-dark)}
/* Transparency */
.r3-principles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:1px;background:var(--color-line);border:1px solid var(--color-line);border-radius:var(--radius-card);overflow:hidden}
.r3-principles li{background:var(--color-paper);padding:20px;display:flex;align-items:center;gap:12px;min-height:74px;font-size:15.5px;font-weight:500;line-height:1.45;color:var(--color-ink)}
.r3-principles svg{flex:none;color:var(--color-sage-ink)}
.r3-principles li > svg{width:26px;height:26px;padding:4px;box-sizing:border-box;border-radius:50%;background:var(--color-sage)}
/* Closing CTA */
.r3-cta{background:var(--color-forest);color:var(--color-paper)}
.r3-cta__inner{max-width:52rem;margin:0 auto;padding:calc(var(--r3-y) + 8px) var(--r3-pad);text-align:center}
.r3-cta h2{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.85rem,6.4vw,2.3rem);line-height:1.1;margin:0;color:var(--color-paper)}
.r3-cta p{margin:16px auto 0;max-width:44ch;font-size:16.5px;line-height:1.7;color:rgba(246,244,237,.8)}
.r3-cta__row{display:flex;flex-direction:column;gap:12px;margin-top:26px}
.r3-cta__reassure{margin:16px 0 0;font-size:13px;font-weight:600;letter-spacing:.03em;color:rgba(246,244,237,.62)}
.r3-cta__row .ib-btn-paper,.r3-cta__row .r3-link{min-height:52px;display:inline-flex;align-items:center;justify-content:center}
.r3-cta__row .ib-btn-paper{padding:0 26px;font-size:16px;font-weight:750;border-radius:999px}

/* Phones. The pricing rows are label/value pairs that read as one line until
   the value is long: "Price shown on the card" left the label 94px and three
   wrapped lines. Below 600px the value drops to its own line instead, and the
   wallet strip's text column is allowed to shrink so the pill stays beside it. */
@media (max-width:599px) {
  .r3-pay__row{flex-wrap:wrap;gap:2px 16px}
  .r3-pay__row > span:first-child{flex:1 1 9rem;min-width:0}
  .r3-pay__row > span:last-child{white-space:normal;margin-left:auto}
  .r3-pay__wallet > :first-child{flex:1 1 auto;min-width:0}
}

@media (min-width:600px) {
  .r3-hero__cta{flex-direction:row;align-items:center;gap:20px}
  .r3-hero__cta .ib-btn-paper{flex:none}
  .r3-cta__row{flex-direction:row;justify-content:center;gap:16px}
  .r3-vals{grid-template-columns:repeat(2,minmax(0,1fr))}
  .r3-flow{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:26px 24px}
  .r3-principles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .r3-head h2{font-size:clamp(1.9rem,3.4vw,2.35rem)}
}

@media (min-width:900px) {
  .r3-hero__inner{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(36px,5vw,72px)}
  .r3-hero h1{font-size:clamp(2.5rem,3.8vw,3.35rem)}
  .r3-hero p{margin-top:20px;font-size:17.5px;max-width:46ch}
  .r3-viz{padding:8px}
  .r3-req{margin-inline:auto;max-width:400px}
  .r3-two{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,64px)}
  .r3-pay{padding:26px}
  .r3-head{margin-bottom:clamp(32px,4vw,48px)}
}

@media (min-width:1100px) {
  .r3-viz__plan{display:block;width:100%;height:auto;color:rgba(246,244,237,.28)}
  .r3-req{position:absolute;right:0;bottom:8px;width:min(344px,92%);max-width:none;margin-inline:0}
  .r3-flow{grid-template-columns:repeat(5,minmax(0,1fr));gap:0}
  .r3-flow li{padding:0 20px 0 0}
  .r3-flow li::before{content:"";position:absolute;top:11px;left:0;right:0;bottom:auto;height:1px;width:auto;background:var(--color-line)}
  .r3-flow li:last-child::before{display:block;right:20px}
  .r3-flow__dot{position:relative;top:auto;left:auto;margin:7px 0 20px;box-shadow:0 0 0 5px var(--color-paper)}
  .r3-flow p{padding-right:8px}
  .r3-vals{grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(18px,2.2vw,24px)}
  .r3-val{padding:clamp(24px,2.6vw,32px)}
  .r3-val:nth-child(1){grid-column:span 7}
  .r3-val:nth-child(2){grid-column:span 5}
  .r3-val:nth-child(3){grid-column:span 5}
  .r3-val:nth-child(4){grid-column:span 7}
  .r3-head h2{font-size:clamp(2.1rem,3.2vw,2.6rem)}
}