/* ============================================================
   FRND — About us  (about.html · Figma "FRND ABOUT · FINAL")
   Option B + Hero 1. Shares every token and atom with frnd.css; this file
   only adds the four sections:
     01 hero (launch stage)  02 turntable  03 bento  04 CTA
   Units: --s (frnd.css) everywhere except INSIDE the pinned turntable,
   which uses --k so the whole 1440x1180 composition fits one viewport.
   ============================================================ */
.chip--pink{ background:var(--pink); color:#fff; }
.chip--tang{ background:var(--tangerine); }

/* the feature-art sticker: image in a 2.5 ink frame with a hard ledge */
.astk{
  position:absolute; display:block;
  border-radius:calc(var(--w) * .12 * var(--s));
  overflow:hidden;
  width:calc(var(--w) * var(--s)); aspect-ratio:490/352;
  box-shadow:0 calc(7 * var(--s)) 0 var(--ink), inset 0 0 0 calc(2.5 * var(--s)) var(--ink);
  transform:rotate(var(--rot, 0deg));
}
.astk img{ width:100%; height:100%; object-fit:cover; display:block; }
/* the ink stroke sits ON TOP of the art (an inset shadow paints under content) */
.astk::after, .atile__stk::after{ content:''; position:absolute; inset:0; border-radius:inherit; box-shadow:inset 0 0 0 calc(2.5 * var(--s)) var(--ink); pointer-events:none; }

/* ── 01 / HERO — launch stage ──────────────────────────────── */
.ahero{
  position:relative; z-index:2; overflow:hidden;
  height:calc(960 * var(--s));
  background:var(--pink); color:#fff;
}
.ahero__glow{
  position:absolute; left:calc(320 * var(--s)); top:calc(420 * var(--s));
  width:calc(800 * var(--s)); height:calc(800 * var(--s)); border-radius:50%;
  background:#fff; opacity:.22; filter:blur(calc(120 * var(--s)));
  pointer-events:none;
}
.ahero__type{
  position:absolute; left:0; right:0; top:calc(170 * var(--s));
  display:flex; flex-direction:column; align-items:center; text-align:center;
  z-index:3;
}
.ahero__h1{
  margin:calc(22 * var(--s)) 0 0;
  font-family:var(--display); font-weight:900;
  font-size:calc(132 * var(--s)); line-height:.98; letter-spacing:-.03em;
  color:#fff;
}
.ahero__lead{
  margin:calc(20 * var(--s)) 0 0; width:calc(700 * var(--s));
  font-weight:500; font-size:calc(21 * var(--s)); line-height:1.52; color:#fff;
}
.ahero__stage{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.aph{
  position:absolute; height:auto; display:block;
  filter:drop-shadow(0 calc(30 * var(--s)) calc(36 * var(--s)) rgba(60,0,24,.35));
}
.aph--main{ left:calc(550 * var(--s)); top:calc(480 * var(--s)); width:calc(340 * var(--s)); z-index:3; }
.aph--l{    left:calc(380 * var(--s)); top:calc(560 * var(--s)); width:calc(190 * var(--s)); --rot:6deg; }
.aph--r{    left:calc(870 * var(--s)); top:calc(560 * var(--s)); width:calc(190 * var(--s)); --rot:-6deg; }
.aph--l, .aph--r{ transform:rotate(var(--rot)); }
.astk--1{ --w:190; left:calc(110 * var(--s));  top:calc(520 * var(--s)); }
.astk--2{ --w:180; left:calc(1150 * var(--s)); top:calc(500 * var(--s)); }
.astk--3{ --w:170; left:calc(170 * var(--s));  top:calc(790 * var(--s)); }
.astk--4{ --w:180; left:calc(1110 * var(--s)); top:calc(780 * var(--s)); }
.achip{ position:absolute; z-index:4; font-size:calc(18 * var(--s)); transform:rotate(var(--rot)); }
.achip--1{ left:calc(300 * var(--s));  top:calc(470 * var(--s)); }
.achip--2{ left:calc(1010 * var(--s)); top:calc(455 * var(--s)); }
.achip--3{ left:calc(1000 * var(--s)); top:calc(700 * var(--s)); }
.achip--4{ left:calc(190 * var(--s));  top:calc(700 * var(--s)); }

/* entry: the phones RISE out of the bottom edge (main first, the fan after),
   stickers and chips POP with overshoot — then everything drifts. The drift
   is on `translate`, a separate property, so it never fights the entry's
   `transform`. */
.js .aph{ opacity:0; translate:0 calc(240 * var(--s)); }
.js.is-ready .aph{
  opacity:1; translate:0 0;
  transition:opacity .7s var(--ease) var(--d), translate 1.25s var(--ease) var(--d);
}
.js .astk, .js .achip{ opacity:0; transform:rotate(var(--rot)) scale(.5); }
.js.is-ready .astk, .js.is-ready .achip{
  opacity:1; transform:rotate(var(--rot)) scale(1);
  transition:opacity .3s ease-out var(--d), transform .65s var(--bounce) var(--d);
  animation:abob 5.5s ease-in-out calc(var(--d) + 900ms) infinite alternate;
}
.astk--2, .achip--2, .astk--3{ animation-duration:6.4s !important; }
.achip--4, .astk--4{ animation-duration:4.8s !important; }
@keyframes abob{ from{ translate:0 0; } to{ translate:0 calc(-12 * var(--s)); } }

/* ── 02 / HOW PEOPLE CONNECT — the turntable ────────────────────
   The heading now scrolls in as a normal block with real air above and
   below it; the PINNED stage holds only the panel, the podium and the
   phones, so nothing competes for the viewport. */
.tt{ position:relative; z-index:2; background:var(--ink); color:#fff; }
.tt__head{ text-align:center; display:flex; flex-direction:column; align-items:center; }
.tt__head--flow{ padding:calc(150 * var(--s)) calc(120 * var(--s)) calc(10 * var(--s)); }
.tt__h2{
  margin:calc(26 * var(--s)) 0 0; font-family:var(--display); font-weight:900;
  font-size:calc(84 * var(--s)); line-height:.98; letter-spacing:-.03em; color:#fff;
}
.tt__lead{
  margin:calc(26 * var(--s)) auto 0; width:calc(780 * var(--s));
  font-weight:500; font-size:calc(21 * var(--s)); line-height:1.6; color:rgba(255,255,255,.75);
}


/* ── 02 / HOW PEOPLE CONNECT — THE REEL (2026-10-05, Figma 1203:6152) ──
   Design box 1440×990 (mobile 390×860), every length × --k. One phone held in
   a hand (https://d1jns1sy0m2jd7.cloudfront.net/frnd_media/post_media/frnd__frnd-web__assets__frnd__about__reel__hand.webp, 1274×1852 px); the screen window is
   a 615×1348 px strip mapped onto the phone's measured screen corners with a
   matrix3d, so the five real screens slide through it like a reel swipe.
   js/frnd-about.js drives φ 0…4 from scroll. */
.rl__track{ position:relative; height:520vh; }
.rl__stick{ position:sticky; top:0; height:100vh; height:100svh; overflow-x:clip; overflow-y:visible; display:flex; align-items:center; justify-content:center; }
.rl__box{ --k:min(var(--s), calc(100svh / 990)); position:relative; flex:none; width:calc(1440 * var(--k)); height:calc(990 * var(--k)); }
.rl__glow{ position:absolute; border-radius:50%; pointer-events:none; }
.rl__glow--a{ left:calc(700 * var(--k)); top:calc(60 * var(--k)); width:calc(820 * var(--k)); height:calc(820 * var(--k)); background:var(--pink); opacity:.3; filter:blur(calc(180 * var(--k))); }
.rl__glow--b{ left:calc(980 * var(--k)); top:calc(520 * var(--k)); width:calc(420 * var(--k)); height:calc(420 * var(--k)); background:#7A2AF3; opacity:.25; filter:blur(calc(160 * var(--k))); }
.rl__copy{ position:absolute; left:calc(150 * var(--k)); top:calc(210 * var(--k)); width:calc(600 * var(--k)); height:calc(720 * var(--k)); z-index:3; }
.rl__grps{ position:relative; height:calc(44 * var(--k)); }
.rl__grp{ position:absolute; left:0; top:0; font-size:calc(17 * var(--k)); padding:calc(8 * var(--k)) calc(16 * var(--k)); opacity:0; transform:translateY(calc(8 * var(--k))); transition:opacity .35s var(--ease), transform .45s var(--ease); white-space:nowrap; }
.rl__grp.is-on{ opacity:1; transform:none; }
.rl__index{ position:absolute; left:0; top:calc(60 * var(--k)); width:100%; height:calc(230 * var(--k)); margin:0; padding:0; list-style:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); mask-image:linear-gradient(to bottom, transparent 0, #000 16%, #000 80%, transparent 100%); }
.rl__row{ position:absolute; left:0; top:0; display:flex; align-items:center; gap:calc(16 * var(--k)); transform-origin:left center; white-space:nowrap; will-change:transform, opacity; }
.rl__n{ font-family:var(--mono); font-weight:500; font-size:calc(18 * var(--k)); letter-spacing:.06em; color:var(--pink); }
.rl__t{ margin:0; font-family:var(--display); font-weight:900; font-size:calc(62 * var(--k)); line-height:1.1; letter-spacing:-.03em; color:#fff; }
.rl__bodies{ position:absolute; left:0; top:calc(310 * var(--k)); width:calc(500 * var(--k)); }
.rl__b{ position:absolute; left:0; top:0; margin:0; font-weight:500; font-size:calc(17.5 * var(--k)); line-height:1.66; color:rgba(255,255,255,.8); opacity:0; will-change:opacity, transform; }
.rl__meta{ position:absolute; left:0; top:calc(680 * var(--k)); width:calc(470 * var(--k)); display:flex; flex-direction:column; gap:calc(14 * var(--k)); }
.rl__count{ font-family:var(--mono); font-weight:500; font-size:calc(15 * var(--k)); letter-spacing:.14em; color:rgba(255,255,255,.5); }
.rl__bar{ display:block; height:calc(3 * var(--k)); background:rgba(255,255,255,.15); border-radius:3px; overflow:hidden; }
.rl__bar i{ display:block; height:100%; width:20%; background:var(--pink); border-radius:3px; }
.rl__device{ position:absolute; left:calc(760 * var(--k)); top:calc(70 * var(--k)); width:calc(690 * var(--k)); height:calc(1003 * var(--k)); z-index:2; pointer-events:none; transform-origin:60% 40%; }
.rl__dev{ position:absolute; left:0; top:0; width:1274px; height:1852px; transform-origin:0 0; }
.rl__hand{ position:absolute; left:0; top:0; width:1274px; height:1852px; display:block; z-index:1; }
.rl__screen{ position:absolute; left:0; top:0; width:615px; height:1348px; transform-origin:0 0; transform:matrix3d(1.00557061,0.00474741,0,0.00000799,0.01312591,1.02546668,0,0.00001893,0,0,1,0,102.6,1.1,0,1); overflow:hidden; border-radius:46px; background:#0d0a12; z-index:2; }
.rl__strip{ position:absolute; inset:0; will-change:transform; }
/* horizontal (2026-10-05 v2): screen i sits one screen-width further LEFT,
   so as the strip moves right the next screen enters from the left */
.rl__strip img{ position:absolute; top:0; width:615px; height:1348px; display:block; }
.rl__strip img:nth-child(1){ left:0; }
.rl__strip img:nth-child(2){ left:-615px; }
.rl__strip img:nth-child(3){ left:-1230px; }
.rl__strip img:nth-child(4){ left:-1845px; }
.rl__strip img:nth-child(5){ left:-2460px; }
.rl__sheen{ position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 38%); }
.rl__stk{
  position:absolute; left:calc(380 * var(--k)); top:calc(80 * var(--k)); z-index:3;
  font-family:var(--display); font-weight:700; font-size:calc(22 * var(--k)); line-height:1; white-space:nowrap;
  padding:calc(11 * var(--k)) calc(18 * var(--k)); border-radius:999px; background:var(--yellow); color:var(--ink);
  box-shadow:0 calc(5 * var(--k)) 0 var(--ink), inset 0 0 0 calc(2.5 * var(--k)) var(--ink);
  opacity:0; transform:rotate(-6deg) scale(.6) translateY(calc(18 * var(--k))); transform-origin:left bottom;
  transition:opacity .25s ease, transform .55s var(--bounce);
}
.rl__stk--pink{ background:var(--pink); color:#fff; }
.rl__stk.is-on{ opacity:1; transform:rotate(-6deg) scale(1) translateY(0); }
/* entry: the hand rises in, the copy fades up (generic data-reveal) */
.js .rl__device[data-reveal]{ translate:0 calc(90 * var(--k)); }
.js .rl__device[data-reveal].is-in{ translate:0 0; transition:opacity .8s var(--ease), translate 1.1s var(--bounce); }

/* ── 03 / BENTO ─────────────────────────────────────────────── */
.abento{ position:relative; z-index:2; background:var(--page); padding:calc(110 * var(--s)) calc(150 * var(--s)) calc(124 * var(--s)); }
.abento__eye{ margin:0 0 calc(30 * var(--s)); display:inline-flex; }
.atile__eye{ margin:0 0 calc(-4 * var(--s)); }
.atile--talk .atile__eye{ background:#fff; color:var(--ink); }
.atile--rj .atile__eye{ background:var(--ink); color:#fff; }
.atile__eye--film{ position:absolute; left:calc(24 * var(--s)); top:calc(24 * var(--s)); z-index:2; background:#fff; color:var(--ink); }
.abento__grid{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:calc(24 * var(--s));
  grid-template-rows:calc(520 * var(--s)) calc(440 * var(--s));
}
.atile{
  --ledge:10; position:relative; overflow:hidden;
  border-radius:calc(36 * var(--s)); padding:calc(40 * var(--s)) calc(40 * var(--s));
  display:flex; flex-direction:column; align-items:flex-start; gap:calc(20 * var(--s));
  color:var(--ink); text-decoration:none;
}
.atile--talk{ grid-column:span 2; background:var(--violet); color:#fff; }
.atile--rj{ background:var(--yellow); }
.atile--film{ grid-column:span 2; padding:0; background:var(--ink); }
.atile--safe{ background:var(--ink); color:#fff; --ledge-color:var(--pink); --stroke:0; }
.atile__h{ margin:0; font-family:var(--display); font-weight:900; font-size:calc(46 * var(--s)); line-height:1.02; letter-spacing:-.03em; }
.atile--rj .atile__h, .atile--safe .atile__h{ font-size:calc(40 * var(--s)); }
.atile__p{ margin:0; font-weight:500; font-size:max(14px, calc(17 * var(--s))); line-height:1.62; }
.atile--rj .atile__p, .atile--safe .atile__p{ font-size:max(14px, calc(16 * var(--s))); }
.atile--talk .atile__p, .atile--safe .atile__p{ color:rgba(255,255,255,.88); }
.atile__chips{ margin:0; display:flex; flex-wrap:wrap; gap:calc(12 * var(--s)) calc(10 * var(--s)); }
.atile__chips .chip{ font-size:calc(19 * var(--s)); }
.atile__stk{
  position:relative; display:block; width:calc(150 * var(--s)); aspect-ratio:490/352; overflow:hidden; border-radius:calc(18 * var(--s));
  box-shadow:0 calc(5 * var(--s)) 0 var(--ink), inset 0 0 0 calc(2.5 * var(--s)) var(--ink); transform:rotate(-6deg);
}
.atile__stk img{ width:100%; height:100%; object-fit:cover; display:block; }
.atile--film img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.atile--film:hover img{ transform:scale(1.04); }
.atile__play{
  position:absolute; left:50%; top:50%; width:calc(88 * var(--s)); height:calc(88 * var(--s)); margin:calc(-44 * var(--s)) 0 0 calc(-44 * var(--s));
  border-radius:50%; background:#fff; box-shadow:0 calc(5 * var(--s)) 0 var(--ink), inset 0 0 0 calc(3 * var(--s)) var(--ink);
  transition:transform .35s var(--bounce);
}
.atile__play::after{
  content:''; position:absolute; left:54%; top:50%; transform:translate(-50%,-50%);
  border-style:solid; border-width:calc(15 * var(--s)) 0 calc(15 * var(--s)) calc(24 * var(--s));
  border-color:transparent transparent transparent var(--pink);
}
.atile--film:hover .atile__play{ transform:scale(1.12); }
.atile__cap{ position:absolute; left:calc(24 * var(--s)); bottom:calc(24 * var(--s)); font-size:calc(14 * var(--s)); max-width:calc(100% - 48 * var(--s)); white-space:normal; }

/* ── 04 / CTA ───────────────────────────────────────────────── */
/* 2026-10-05: PINK on every FRND child page, the same band as frnd.html's
   download section (.dl) — white display line + ink second line, ink pill
   eyebrow, ink store pills. */
.acta{
  position:relative; z-index:2; overflow:hidden; height:calc(760 * var(--s));
  background:var(--pink); color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.acta .astk{ transform:none; }
.astk--c1{ --w:200; left:calc(110 * var(--s));  top:calc(120 * var(--s)); }
.astk--c2{ --w:190; left:calc(1140 * var(--s)); top:calc(110 * var(--s)); }
.astk--c3{ --w:180; left:calc(140 * var(--s));  top:calc(500 * var(--s)); }
.astk--c4{ --w:200; left:calc(1120 * var(--s)); top:calc(480 * var(--s)); }
.acta .astk{ box-shadow:0 calc(7 * var(--s)) 0 var(--ink), inset 0 0 0 calc(2.5 * var(--s)) var(--ink); }
.acta__eye{ margin:0 0 calc(28 * var(--s)); position:relative; z-index:2; }
.acta__h{ margin:0; font-family:var(--display); font-weight:900; font-size:calc(110 * var(--s)); line-height:.98; letter-spacing:-.03em; }
.acta__h .line{ display:block; }
.acta__h .line--ink{ color:var(--ink); }
.acta__sub{ margin:calc(30 * var(--s)) 0 0; font-family:var(--display); font-weight:800; font-size:calc(30 * var(--s)); }
.acta__stores{ margin-top:calc(40 * var(--s)); display:flex; gap:calc(16 * var(--s)); }

/* ── mobile ─────────────────────────────────────────────────── */
@media (max-width:1040px){
  .astk{ --w:96; border-radius:14px; width:calc(var(--w) * 1px); box-shadow:0 5px 0 var(--ink), inset 0 0 0 2px var(--ink); }
  .ahero{ height:auto; min-height:860px; padding:126px 0 0; }
  .ahero__glow{ left:-40px; top:420px; width:470px; height:470px; filter:blur(80px); }
  .ahero__type{ position:relative; top:auto; padding:0 22px; }
  .ahero__h1{ font-size:clamp(56px, 19vw, 84px); margin-top:16px; }
  .ahero__lead{ width:auto; max-width:360px; font-size:16px; margin-top:14px; }
  .ahero__stage{ top:auto; bottom:0; height:400px; left:50%; width:390px; margin-left:-195px; }
  .aph--main{ left:95px; top:40px; width:200px; }
  .aph--l{ left:20px; top:100px; width:112px; }
  .aph--r{ left:258px; top:100px; width:112px; }
  .astk--1, .astk--2, .astk--3, .astk--4{ display:none; }
  .achip{ font-size:14px; padding:6px 12px; }
  .achip--1{ left:20px; top:8px; } .achip--2{ left:310px; top:8px; }
  .achip--3, .achip--4{ display:none; }
  .js .aph{ translate:0 160px; }

  .tt__head--flow{ padding:72px 22px 4px; }
  .tt__h2{ font-size:clamp(34px, 10vw, 44px); margin-top:16px; }
  .tt__lead{ width:auto; max-width:360px; font-size:15px; margin-top:14px; }
  .rl__track{ height:460vh; }
  .rl__box{ --k:min(calc(100vw / 390), calc(100svh / 940)); width:calc(390 * var(--k)); height:calc(940 * var(--k)); }
  .rl__glow--a{ left:calc(10 * var(--k)); top:calc(90 * var(--k)); width:calc(380 * var(--k)); height:calc(380 * var(--k)); filter:blur(calc(110 * var(--k))); }
  .rl__glow--b{ display:none; }
  .rl__device{ left:calc(104 * var(--k)); top:calc(84 * var(--k)); width:calc(300 * var(--k)); height:calc(436 * var(--k));
    -webkit-mask-image:linear-gradient(to bottom, #000 78%, transparent 100%); mask-image:linear-gradient(to bottom, #000 78%, transparent 100%); }
  .rl__stk{ left:calc(150 * var(--k)); top:calc(34 * var(--k)); font-size:calc(14 * var(--k)); padding:calc(8 * var(--k)) calc(13 * var(--k)); box-shadow:0 calc(4 * var(--k)) 0 var(--ink), inset 0 0 0 calc(2 * var(--k)) var(--ink); }
  .rl__copy{ left:calc(20 * var(--k)); top:calc(540 * var(--k)); width:calc(350 * var(--k)); height:calc(390 * var(--k)); }
  .rl__grps{ height:calc(32 * var(--k)); }
  .rl__grp{ font-size:calc(13 * var(--k)); padding:calc(6 * var(--k)) calc(12 * var(--k)); }
  .rl__index{ top:calc(40 * var(--k)); height:calc(52 * var(--k)); }
  .rl__n{ font-size:calc(13 * var(--k)); }
  .rl__t{ font-size:calc(34 * var(--k)); }
  .rl__bodies{ top:calc(100 * var(--k)); width:calc(350 * var(--k)); }
  .rl__b{ font-size:calc(14 * var(--k)); line-height:1.55; }
  .rl__meta{ top:calc(352 * var(--k)); width:calc(350 * var(--k)); gap:calc(10 * var(--k)); }
  .rl__count{ font-size:calc(12 * var(--k)); }

  .abento{ padding:64px 20px 72px; }
  .abento__eye{ margin-bottom:20px; }
  .acta__eye{ margin-bottom:18px; }
  .abento__grid{ grid-template-columns:1fr; grid-template-rows:none; gap:20px; }
  .atile{ grid-column:auto !important; padding:26px 22px; border-radius:26px; gap:14px; --ledge:7; }
  .atile__h{ font-size:32px; } .atile--rj .atile__h, .atile--safe .atile__h{ font-size:30px; }
  .atile__p{ font-size:15px; }
  .atile__chips .chip{ font-size:14px; padding:7px 12px; }
  .atile__stk{ width:110px; border-radius:14px; }
  .atile--film{ aspect-ratio:16/9; padding:0; }
  .atile__play{ width:56px; height:56px; margin:-28px 0 0 -28px; }
  .atile__play::after{ border-width:10px 0 10px 16px; }
  .atile__cap{ display:none; }

  .acta{ height:auto; padding:96px 22px; }
  .acta .astk{ display:none; }
  .acta__h{ font-size:clamp(40px, 12vw, 56px); }
  .acta__sub{ font-size:20px; margin-top:16px; }
  .acta__stores{ flex-direction:column; align-items:center; gap:10px; margin-top:24px; }
}

@media (prefers-reduced-motion: reduce){
  .rl__stk, .rl__grp{ transition:none; }
  .js .aph, .js .astk, .js .achip{ opacity:1 !important; translate:none !important; transform:rotate(var(--rot)) !important; transition:none !important; animation:none !important; }
}