/* ============================================================
   Marci about page ("Marci About" in the design project).
   Loaded after landing.css, which supplies the fonts, tokens,
   lockup, avatars (.av), the highlight stroke (.hi), the
   waitlist bar and the footer.

   The page speaks in the app's own vocabulary from the design
   system SPEC: Marci's orb + bubble (Piazzolla), the user's
   marigold bubble, "what I know" tray chips, app cards with
   one hero number, and the mascots' four temperaments.
   ============================================================ */

:root {
  --cream: #FDF4E7;
  --tint: #FBE8D0;
  --hair: #EDEBE8;
  --chip: #F6F5F3;
  --deep: #DD7A18;
  --card-shadow: 0 14px 34px rgba(120,60,10,0.10), 0 1px 3px rgba(120,60,10,0.06);
}

.about { position: relative; overflow: clip; }
:where(.about) :where(h1, h2, h3, p, dl, dd, ul, ol, figure, blockquote) { margin: 0; }
.ab-shell { max-width: 1160px; margin: 0 auto; padding: 0 40px; }
.micro { font: 500 10.5px 'DM Sans', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }

/* ---- shared bits: orb, bubbles, tray chips ---- */
.orb {
  /* Marci's avatar: the app icon from the brand kit (loop on a dark tile) */
  width: 26px; height: 26px; border-radius: 22%; flex-shrink: 0; display: inline-block;
  background: url('/assets/brand/1-favicon/favicon.svg') center / cover no-repeat;
  box-shadow: 0 6px 14px rgba(120,60,10,0.22);
  animation: m-breathe 6s ease-in-out infinite;
}
.orb-sm { width: 22px; height: 22px; box-shadow: 0 4px 10px rgba(120,60,10,0.2); }
.orb-xl { width: 72px; height: 72px; box-shadow: 0 16px 34px rgba(120,60,10,0.28); }

.st-bubble {
  display: inline-block; background: #fff; color: var(--ink);
  font: 400 15px/1.4 'Piazzolla', Georgia, serif;
  border-radius: 18px 18px 18px 6px; padding: 9px 14px;
  box-shadow: 0 6px 16px rgba(120,60,10,0.10), 0 0 0 1px rgba(120,60,10,0.05);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  padding: 6px 11px; border-radius: 999px; background: #fff; border: 1px solid var(--tint);
  font: 500 12px 'DM Sans', sans-serif; color: var(--deep);
  box-shadow: 0 4px 12px rgba(120,60,10,0.08);
}
.chip svg { width: 12px; height: 12px; fill: none; stroke: var(--deep); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.av-ph { border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 2.6px #fff, 0 6px 14px rgba(120,60,10,0.18); }

/* ---- buttons ---- */
.ab-btn {
  height: 42px; padding: 0 20px; border-radius: 999px;
  background: var(--ink); color: #fff; font: 500 14.5px 'DM Sans', sans-serif;
  display: inline-flex; align-items: center; white-space: nowrap;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.ab-btn:hover { background: #333; }
.ab-btn:active { transform: scale(0.96); }
.ab-btn-lg { height: 52px; padding: 0 26px; font-size: 15.5px; }
.ab-btn-ghost { background: #fff; color: var(--ink); box-shadow: 0 0 0 1px #E7E5E2, 0 6px 18px rgba(120,60,10,0.06); }
.ab-btn-ghost:hover { background: #fff; color: var(--deep); }

/* ---- sticky frosted top bar ---- */
.ab-bar {
  position: sticky; top: 0; z-index: 50;
  background: rgba(251,232,208,0.72);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  transition: box-shadow 0.3s var(--ease), background 0.3s var(--ease);
}
.ab-bar.is-stuck { background: rgba(254,252,248,0.82); box-shadow: 0 1px 0 rgba(120,60,10,0.06), 0 8px 24px rgba(120,60,10,0.06); }
.ab-bar .top { padding-top: 16px; padding-bottom: 16px; gap: 20px; }
.ab-nav { display: flex; align-items: center; gap: 28px; }
.ab-nav a:not(.ab-btn) { font: 500 14.5px 'DM Sans', sans-serif; color: var(--muted); transition: color 0.2s var(--ease); }
.ab-nav a:not(.ab-btn):hover { color: var(--deep); }

/* ---- hero ---- */
.ab-band { background: linear-gradient(180deg, var(--tint) 0%, var(--cream) 58%, var(--paper) 100%); }
.ab-hero { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: 48px; padding-top: 56px; padding-bottom: 40px; }
.ab-hero-copy { display: flex; flex-direction: column; gap: 22px; }
.ab-eyebrow { font: 500 12px 'DM Sans', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: #A54B06; }
.ab-hero h1 { font: 400 54px/1.08 'Piazzolla', Georgia, serif; letter-spacing: -0.03em; text-wrap: pretty; }
.ab-hero p { max-width: 540px; font: 400 18.5px/1.55 'DM Sans', sans-serif; color: var(--muted); text-wrap: pretty; }
.ab-ctas { display: flex; gap: 10px; flex-wrap: wrap; padding-top: 8px; }

/* the stage: one request becoming one running app */
.stage { position: relative; width: min(440px, 100%); height: 500px; justify-self: center; }
.st-user {
  position: absolute; top: 0; right: 0; max-width: 260px;
  background: linear-gradient(140deg, #FDC257 0%, #FAAE30 52%, #E4780A 100%); color: #2A1A05;
  font: 500 14px/1.4 'DM Sans', sans-serif; padding: 10px 15px;
  border-radius: 18px 18px 6px 18px; box-shadow: 0 8px 18px rgba(228,120,10,0.25);
}
.st-say { position: absolute; top: 82px; left: 0; display: flex; align-items: flex-end; gap: 8px; max-width: 300px; }
.st-tray { position: absolute; top: 150px; right: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; z-index: 3; }
.st-tray .micro { margin-right: 4px; }
.st-mascot { position: absolute; left: 44px; bottom: 206px; width: 112px; height: auto; z-index: 1; transform: rotate(-10deg); }
.st-app {
  position: absolute; left: 22px; right: 36px; bottom: 0; z-index: 2;
  background: #fff; border-radius: 28px; padding: 22px 22px 18px;
  box-shadow: 0 30px 60px rgba(120,60,10,0.16), 0 2px 6px rgba(120,60,10,0.06);
  transform: rotate(-2deg);
  display: flex; flex-direction: column; gap: 14px;
}
.st-app-top { display: flex; justify-content: space-between; align-items: center; }
.st-live { display: inline-flex; align-items: center; gap: 6px; font: 500 11px 'DM Sans', sans-serif; color: #3FA97C; }
.st-live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #3FA97C; box-shadow: 0 0 0 3px rgba(63,169,124,0.16); }
.st-hero-num { font: 600 44px/1 'DM Sans', sans-serif; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 10px; }
.st-hero-num small { font: 400 14px 'DM Sans', sans-serif; letter-spacing: 0; color: var(--dim); }
.st-seg { display: flex; gap: 4px; height: 10px; }
.st-seg i { flex: 1; border-radius: 999px; }
.s-mint { background: linear-gradient(150deg, #7FD3B0, #3FA97C); }
.s-peri { background: linear-gradient(150deg, #93A7EE, #6E85DE); }
.s-mari { background: var(--marigold); }
.s-due { background: repeating-linear-gradient(135deg, #F6F5F3 0 5px, #EDEBE8 5px 10px); }
.st-people { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.st-people > span { display: flex; flex-direction: column; align-items: center; gap: 7px; font: 500 11.5px 'DM Sans', sans-serif; color: var(--dim); }
.st-people .av, .st-people .av-ph { width: 28px; height: 28px; font-size: 12px; }
.st-people .due { color: var(--deep); }
.st-foot { display: flex; align-items: center; gap: 8px; padding-top: 12px; border-top: 1px solid #F2EFEA; font: 400 14px/1.35 'Piazzolla', Georgia, serif; color: var(--ink); }

/* ---- section scaffolding ---- */
.ab-sec { padding-top: 120px; scroll-margin-top: 72px; }
#what { padding-top: 64px; }
.ab-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 40px; max-width: 760px; }
.ab-num { font: 500 12px 'DM Sans', sans-serif; letter-spacing: 0.14em; text-transform: uppercase; color: var(--deep); }
.ab-sec h2 { font: 400 44px/1.1 'Piazzolla', Georgia, serif; letter-spacing: -0.025em; text-wrap: balance; }

/* 01: three surfaces (personal apps, shared apps, rooms) + what's underneath */
.surfs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.surf { background: #fff; border-radius: 28px; padding: 22px 22px 28px; box-shadow: var(--card-shadow); display: flex; flex-direction: column; gap: 8px; }
.surf-vis { height: 250px; border-radius: 20px; background: var(--cream); margin-bottom: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 18px; padding: 20px; }
.surf-kind { font: 500 11px 'DM Sans', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--deep); padding: 0 6px; }
.surf h3 { font: 400 28px/1.15 'Piazzolla', Georgia, serif; letter-spacing: -0.02em; padding: 0 6px; }
.surf p { font: 400 15px/1.55 'DM Sans', sans-serif; color: var(--muted); text-wrap: pretty; padding: 0 6px; }

/* personal apps: your sentence, a doodled arrow, the rule landing in a calorie tracker */
.vis-personal { position: relative; justify-content: flex-end; align-items: stretch; gap: 0; padding: 18px; }
.said-sm {
  position: absolute; top: 18px; right: 18px; max-width: 200px;
  font: 500 13px/1.35 'DM Sans', sans-serif; color: #2A1A05;
  background: linear-gradient(140deg, #FDC257 0%, #FAAE30 52%, #E4780A 100%);
  border-radius: 16px 16px 6px 16px; padding: 8px 12px; box-shadow: 0 8px 18px rgba(228,120,10,0.25);
}
.doodle { position: absolute; top: 40px; left: 22px; width: 84px; height: 66px; transform: rotate(-4deg); }
.doodle path { fill: none; stroke: #F09B3E; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cal { background: #fff; border-radius: 18px; padding: 14px 14px 10px; box-shadow: 0 10px 24px rgba(120,60,10,0.10); display: flex; flex-direction: column; gap: 9px; }
.cal-top { display: flex; justify-content: space-between; align-items: baseline; }
.cal-num { font: 600 20px 'DM Sans', sans-serif; letter-spacing: -0.02em; }
.cal-num small { font: 400 11.5px 'DM Sans', sans-serif; color: var(--dim); margin-left: 4px; letter-spacing: 0; }
.cal-bar { height: 7px; border-radius: 999px; background: var(--cream); overflow: hidden; }
.cal-bar i { display: block; height: 100%; width: var(--w); border-radius: inherit; background: var(--marigold); }
.cal-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: 10px; }
.cal-row.hl { background: var(--cream); }
.cal-row b { font: 500 12.5px 'DM Sans', sans-serif; flex: 1; }
.cal-row em { font: 600 12.5px 'DM Sans', sans-serif; font-style: normal; font-variant-numeric: tabular-nums; }
.cal-row .tag { font: 500 10px 'DM Sans', sans-serif; letter-spacing: 0.04em; color: var(--deep); background: #fff; border: 1px solid var(--tint); border-radius: 999px; padding: 2px 7px; }
.cal-row .dot { width: 22px; display: flex; justify-content: center; }
.cal-row .dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #7FD3B0; }
.pan { width: 22px; height: 20px; flex-shrink: 0; }
.pan ellipse, .pan path { fill: #FDE9C8; stroke: #8A5A2B; stroke-width: 1.5; stroke-linecap: round; }
.pan path { fill: none; }
.pan .butter { fill: #FFE7A0; stroke: #8A5A2B; stroke-width: 1.3; }
.pan .syrup { stroke: #E4780A; stroke-width: 2; }

.mini-app { width: 100%; background: #fff; border-radius: 20px; padding: 16px; box-shadow: 0 10px 24px rgba(120,60,10,0.10); display: flex; flex-direction: column; gap: 12px; }
.mini-top { display: flex; justify-content: space-between; align-items: center; }
.lb { display: grid; grid-template-columns: 26px 44px 1fr auto; align-items: center; gap: 8px; }
.lb .av, .lb .av-ph { width: 26px; height: 26px; font-size: 11px; }
.lb b { font: 500 12.5px 'DM Sans', sans-serif; }
.lb i { height: 8px; border-radius: 999px; background: var(--cream); position: relative; overflow: hidden; }
.lb i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: var(--marigold); }
.lb em { font: 500 12px 'DM Sans', sans-serif; font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; }

.inbox { width: 100%; display: flex; flex-direction: column; gap: 7px; }
.rm { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 14px; padding: 7px 10px; box-shadow: 0 4px 12px rgba(120,60,10,0.07); }
.rm .orb, .rm > .av { width: 30px; height: 30px; font-size: 12px; flex-shrink: 0; }
.rm > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rm b { font: 600 13px 'DM Sans', sans-serif; }
.rm span:not(.av):not(.orb):not(.stack-sm) { font: 400 11.5px 'DM Sans', sans-serif; color: var(--dim); }
.rm em { font: 500 10.5px 'DM Sans', sans-serif; font-style: normal; color: var(--deep); background: var(--cream); border-radius: 999px; padding: 4px 8px; white-space: nowrap; }
.stack-sm { display: flex; flex-shrink: 0; width: 42px; }
.stack-sm .av { width: 20px; height: 20px; font-size: 9px; margin-left: -9px; box-shadow: 0 0 0 1.5px #fff; }
.stack-sm .av:first-child { margin-left: 0; }

.under-head { margin: 44px 0 16px; }
.under { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.uc { background: #fff; border-radius: 20px; padding: 20px; box-shadow: 0 0 0 1px var(--hair); display: flex; flex-direction: column; gap: 6px; }
.uc svg { width: 22px; height: 22px; margin-bottom: 6px; fill: none; stroke: var(--deep); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.uc h3 { font: 600 15.5px 'DM Sans', sans-serif; }
.uc p { font: 400 14px/1.5 'DM Sans', sans-serif; color: var(--muted); text-wrap: pretty; }

/* 02: comparison */
.vs { position: relative; background: #fff; border-radius: 28px; box-shadow: var(--card-shadow); padding: 10px 34px; }
.vs-mascot { position: absolute; right: 30px; top: -104px; width: 108px; height: auto; z-index: -1; }
.vs-row { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.25fr); gap: 28px; align-items: baseline; padding: 22px 0; border-top: 1px solid #F2EFEA; }
.vs-row:first-of-type { border-top: 0; }
.vs-row h3 { font: 500 12px 'DM Sans', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: var(--dim); }
.vs-them { font: 400 15.5px/1.5 'DM Sans', sans-serif; color: #A8A49E; }
p.vs-them { text-decoration: line-through; text-decoration-color: rgba(168,164,158,0.55); text-decoration-thickness: 1px; }
.vs-us { font: 400 18px/1.45 'Piazzolla', Georgia, serif; color: var(--ink); text-wrap: pretty; }
.vs-headrow { padding: 18px 0 14px; align-items: center; }
.vs-headrow .vs-them { font: 500 13px 'DM Sans', sans-serif; color: var(--dim); }
.vs-headrow .vs-us { display: inline-flex; align-items: center; gap: 8px; font: 600 15px 'DM Sans', sans-serif; }

/* 03: who */
.who {
  position: relative; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; align-items: center;
  background: linear-gradient(160deg, var(--tint) 0%, var(--cream) 60%); border-radius: 36px; padding: 56px 56px 56px;
}
.who-copy { display: flex; flex-direction: column; gap: 16px; padding-bottom: 110px; }
.who-copy h2 { font-size: 52px; }
.who-copy p { font: 400 17px/1.55 'DM Sans', sans-serif; color: var(--muted); max-width: 380px; }
.who-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.who-list li {
  display: flex; align-items: center; gap: 14px; background: #fff; border-radius: 999px; padding: 10px 22px 10px 10px;
  font: 500 15px/1.35 'DM Sans', sans-serif; box-shadow: 0 6px 16px rgba(120,60,10,0.07);
}
.who-list li:nth-child(even) { margin-left: 28px; }
.who-list .av { width: 34px; height: 34px; font-size: 14px; }
.who-mascot { position: absolute; left: 56px; bottom: 0; width: 104px; height: auto; }

/* 04: founder letter */
.letter {
  position: relative; background: #fff; border-radius: 32px; box-shadow: var(--card-shadow);
  padding: 72px 72px 44px; display: flex; flex-direction: column; gap: 36px;
}
.letter .q {
  position: absolute; left: 60px; top: 6px; font: 400 120px/1 'Piazzolla', Georgia, serif;
  background: var(--marigold); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.letter blockquote { font: 400 30px/1.4 'Piazzolla', Georgia, serif; letter-spacing: -0.015em; text-wrap: pretty; max-width: 900px; }
.sig { display: flex; align-items: center; gap: 18px; padding-top: 28px; border-top: 1px solid #F2EFEA; flex-wrap: wrap; }
.sig img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 10px 22px rgba(120,60,10,0.2); }
.sig > div:not(.soc) { flex: 1 1 260px; display: flex; flex-direction: column; gap: 4px; }
.sig h3 { font: 600 18px 'DM Sans', sans-serif; }
.sig h3 span { font-weight: 400; color: var(--dim); margin-left: 8px; font-size: 14.5px; }
.sig p { font: 400 15px/1.5 'DM Sans', sans-serif; color: var(--muted); }

/* 05: steps + stats */
.steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; position: relative; }
.steps::before { content: ''; position: absolute; left: 22px; right: 22px; top: 21px; border-top: 2px dashed #EAD9C0; }
.steps li { position: relative; display: flex; flex-direction: column; gap: 8px; }
.steps .dot {
  width: 44px; height: 44px; border-radius: 50%; margin-bottom: 10px;
  background: var(--marigold); box-shadow: 0 0 0 6px var(--paper), 0 8px 16px rgba(228,120,10,0.3);
  display: inline-flex; align-items: center; justify-content: center; font: 600 16px 'DM Sans', sans-serif; color: #fff;
}
.steps h3 { font: 600 17px 'DM Sans', sans-serif; }
.steps p { font: 400 15px/1.5 'DM Sans', sans-serif; color: var(--muted); max-width: 230px; }
.stats { margin-top: 48px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.stats div { background: var(--cream); border-radius: 20px; padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.stats dt { font: 500 11px 'DM Sans', sans-serif; letter-spacing: 0.1em; text-transform: uppercase; color: #A54B06; }
.stats dd { font: 400 19px/1.3 'Piazzolla', Georgia, serif; }
.stats a, .facts a { color: var(--deep); }
.stats a:hover, .facts a:hover { text-decoration: underline; }
.stats dd a { font: 500 14.5px 'DM Sans', sans-serif; }

/* 06: key facts, a two-column spec sheet */
.facts { background: #fff; border-radius: 28px; box-shadow: var(--card-shadow); padding: 12px 34px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; }
.facts div { display: flex; gap: 20px; padding: 17px 0; border-bottom: 1px solid #F2EFEA; }
.facts div.wide { grid-column: span 2; }
.facts div:last-child { border-bottom: 0; }
.facts dt { flex: 0 0 120px; font: 500 14px 'DM Sans', sans-serif; color: var(--dim); }
.facts dd { font: 500 15px/1.45 'DM Sans', sans-serif; }
.facts .links { display: flex; gap: 14px; flex-wrap: wrap; }

/* 07: FAQ, two columns of cards */
.faqs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.faq { background: #fff; border-radius: 24px; padding: 26px 28px; box-shadow: 0 0 0 1px var(--hair); display: flex; flex-direction: column; gap: 10px; }
.faq h3 { font: 500 20px/1.3 'Piazzolla', Georgia, serif; letter-spacing: -0.01em; }
.faq p { font: 400 15px/1.6 'DM Sans', sans-serif; color: var(--muted); text-wrap: pretty; }

/* ---- closing waitlist card (reuses .join / .join-bar from landing.css) ---- */
.ab-cta { padding-top: 120px; }
.cta {
  position: relative;
  border-radius: 40px; background: radial-gradient(120% 90% at 50% 0%, #FFE3B8 0%, var(--tint) 40%, var(--cream) 100%);
  padding: 72px 32px 48px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px;
}
.cta h2 { max-width: 640px; font: 400 46px/1.1 'Piazzolla', Georgia, serif; letter-spacing: -0.025em; text-wrap: balance; margin-bottom: 44px; }
.ab-cta .join { width: 100%; margin: 0; }
.about .foot { padding: 40px 0 36px; }

/* ---- one-shot reveal on scroll (never always-on) ---- */
.js .rv { opacity: 0; transform: translateY(16px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); }
.js .rv.in { opacity: 1; transform: none; }
.js .st-app.rv { transform: translateY(16px) rotate(-2deg); }
.js .st-app.rv.in { transform: rotate(-2deg); }

/* ---- tablet ---- */
@media (max-width: 1020px) {
  .ab-hero { grid-template-columns: 1fr; gap: 56px; padding-top: 48px; }
  .surfs { grid-template-columns: 1fr; max-width: 560px; }
  .under { grid-template-columns: 1fr 1fr; }
  .vs-row { grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px; }
  .who { grid-template-columns: 1fr; padding: 48px 40px 140px; }
  .who-copy { padding-bottom: 0; }
  .who-mascot { left: auto; right: 40px; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 36px; }
  .steps::before { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
}

/* ---- mobile ---- */
@media (max-width: 760px) {
  .ab-shell { padding: 0 20px; }
  .ab-bar .top { padding-top: 12px; padding-bottom: 12px; }
  .ab-nav { gap: 0; }
  .ab-nav a:not(.ab-btn) { display: none; }
  .ab-btn { height: 38px; padding: 0 16px; font-size: 13.5px; }
  .ab-btn-lg { height: 48px; padding: 0 20px; font-size: 14.5px; }
  .ab-hero { padding-top: 36px; padding-bottom: 64px; gap: 44px; }
  .ab-hero h1 { font-size: 36px; line-height: 1.1; }
  .ab-hero p { font-size: 16px; }
  .stage { height: 470px; }
  .st-user { max-width: 230px; font-size: 13.5px; }
  .st-say { top: 80px; max-width: 270px; }
  .st-bubble { font-size: 14px; }
  .st-tray { top: 146px; }
  .st-mascot { width: 92px; left: 26px; bottom: 214px; }
  .st-app { left: 6px; right: 14px; padding: 20px 18px 16px; }
  .st-hero-num { font-size: 38px; }

  .ab-sec { padding-top: 84px; }
  .ab-head { margin-bottom: 28px; }
  .ab-sec h2 { font-size: 32px; }
  .surf-vis { height: auto; min-height: 210px; }
  .vis-personal { min-height: 262px; }
  .surf h3 { font-size: 26px; }
  .under { grid-template-columns: 1fr; gap: 10px; }
  .uc { padding: 16px 18px; }

  .vs { padding: 4px 20px; border-radius: 24px; }
  .vs-mascot { width: 84px; top: -80px; right: 16px; }
  .vs-headrow { display: none; }
  .vs-row { grid-template-columns: 1fr; gap: 6px; padding: 20px 0; }
  .vs-headrow + .vs-row { border-top: 0; }
  .vs-us { font-size: 17px; }

  .who { padding: 32px 22px 124px; border-radius: 28px; gap: 28px; }
  .who-copy h2 { font-size: 38px; }
  .who-list li { padding: 8px 16px 8px 8px; font-size: 14px; border-radius: 22px; }
  .who-list li:nth-child(even) { margin-left: 0; }
  .who-mascot { width: 84px; right: 22px; }

  .letter { padding: 60px 24px 28px; border-radius: 26px; gap: 28px; }
  .letter .q { left: 20px; top: 0; font-size: 96px; }
  .letter blockquote { font-size: 22px; }
  .sig { gap: 14px; }
  .sig img { width: 60px; height: 60px; }
  .sig h3 span { display: block; margin: 2px 0 0; }

  .steps { grid-template-columns: 1fr; row-gap: 22px; }
  .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 16px; row-gap: 4px; }
  .steps .dot { grid-row: span 2; margin: 0; }
  .stats { margin-top: 32px; gap: 10px; }
  .stats dd { font-size: 17px; }

  .facts { grid-template-columns: 1fr; padding: 6px 20px; border-radius: 24px; }
  .facts div.wide { grid-column: auto; }
  .facts div { flex-direction: column; gap: 3px; padding: 14px 0; }
  .facts dt { flex: none; font-size: 13px; }

  .faqs { grid-template-columns: 1fr; gap: 12px; }
  .faq { padding: 22px; }
  .faq h3 { font-size: 18px; }

  .ab-cta { padding-top: 84px; }
  .cta { padding: 52px 18px 32px; border-radius: 28px; gap: 18px; }
  .cta h2 { font-size: 30px; margin-bottom: 40px; }
  .about .foot { padding: 28px 0; }
}

@media (prefers-reduced-motion: reduce) {
  .orb { animation: none; }
  .js .rv, .js .st-app.rv { opacity: 1; transition: none; }
  .js .rv { transform: none; }
  .js .st-app.rv { transform: rotate(-2deg); }
}

/* social links as icon chips (key facts, founder card) */
.soc { display: flex; gap: 8px; }
.soc a {
  width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--chip); color: var(--ink); transition: color 0.2s var(--ease), background 0.2s var(--ease);
}
.soc a:hover { background: var(--cream); color: var(--deep); text-decoration: none; }
.soc svg { width: 15px; height: 15px; }