/* At My Age: atmyage.app. One page, four views set by the script on <body data-view>:
   intro (default) | invite (?r=CODE) | auth (?auth=TOKEN) | invalid (bad ?r= or ?auth=).
   Intro = direction 2b (the page is the timeline). Invite/auth/invalid = direction 1a (share card).
   Mobile first; desktop layout from 900px. Plus Jakarta Sans loaded from Google Fonts in index.html. */
:root{
  --bg:#F3F0FF; --line:#DAD4F2; --ink:#17132B; --ink-2:#3A3555; --ink-3:#5A5575; --ink-4:#6E6A85;
  --violet:#6B4EFF; --lime:#D6F36B; --flag:#FF5C7A; --white:#fff;
  --yellow:#FFE27A; --pink:#FFB8D9; --peach:#FFC9A3; --mint:#A8F0D1;
  --font:"Plus Jakarta Sans","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",system-ui,-apple-system,"Segoe UI",sans-serif;
  --ages:rgba(107,78,255,.09);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
[hidden]{display:none !important}
a{color:var(--violet)}
a:hover{color:var(--ink)}
a:focus-visible,button:focus-visible{outline:3px solid var(--violet);outline-offset:3px}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
.dot{color:var(--violet)}

/* top block: header + whichever view is showing */
.top{position:relative;isolation:isolate;overflow:hidden;background:var(--bg);color:var(--ink)}
.mast{display:flex;align-items:center;height:56px}
.brand{display:inline-flex;align-items:center;text-decoration:none;color:inherit}
.brand img{display:block;height:22px;width:auto}
.brand .on-violet,body:not([data-view="intro"]) .brand .on-lav{display:none}
body:not([data-view="intro"]) .brand .on-violet{display:block}
.hero h1 img{display:block;width:min(275px,74vw);height:auto;margin:4px 0 16px}
.pitch .q{display:block;font-weight:400;color:var(--ink-3,#5A5575)}
.pitch strong{display:block;font-weight:700;color:var(--ink);font-size:1.18em;margin-top:6px;letter-spacing:-.3px}
.brand:hover{color:inherit}
body:not([data-view="intro"]) .top{background:var(--violet);color:#fff;padding-bottom:28px;--ages:rgba(255,255,255,.11)}
body:not([data-view="intro"]) .dot{color:var(--lime)}

/* background: age numerals rolling upward, very slowly. Decorative only. */
.ages{position:absolute;z-index:-1;left:0;right:0;top:0;height:700px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent)}
.ages-col{position:absolute;top:0;right:12px;animation:ageroll 70s linear infinite;will-change:transform}
.ages-col div{font-size:120px;line-height:1.05;font-weight:700;letter-spacing:-6px;text-align:right;color:var(--ages)}
@keyframes ageroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}

/* ---------- INTRO ---------- */
.hero{display:grid;gap:36px;padding-top:8px}
.legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:8px 0 14px;padding:0;list-style:none;font-size:13px;font-weight:600}
.legend li{display:inline-flex;align-items:center;gap:8px}
.legend i{flex:none;width:10px;height:10px;border-radius:50%;box-sizing:border-box}
.legend .y{background:var(--yellow)}
.legend .p{background:var(--pink)}
.legend .m{background:var(--mint)}
.legend .you{border:1.5px dashed var(--violet)}
.hero h1{margin:0 0 14px;font-size:80px;font-weight:700;letter-spacing:-4px;line-height:.92}
.pitch{margin:0 0 20px;font-size:17px;line-height:1.45;color:var(--ink-2)}

/* store badges: official artwork, untouched. One row, equal height, fill the width.
   Apple SVG 2.99:1. Google PNG is 646x250 with 41px of built-in clear space; the visible badge is 564x168 (3.36:1). */
.stores-block{display:flex;flex-direction:column;gap:10px;width:100%}
.soon{margin:0;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.badges{display:flex;gap:10px;align-items:flex-start;width:100%;max-width:400px}   /* capped: on a wide column the pair would grow past 100px tall (tablet widths); 400px keeps them at 61px or less */
.badge{display:block;position:relative;min-width:0;border-radius:8px}
.badge.apple{flex:2.99 1 0;aspect-ratio:2.99/1}
.badge.apple img{display:block;width:100%;height:100%}
.badge.gp{flex:3.36 1 0;aspect-ratio:3.36/1}
.badge.gp img{position:absolute;display:block;width:114.5%;max-width:none;left:-7.27%;top:-24.4%}
a.badge[href]:hover{filter:brightness(1.15)}

/* timeline mock (Compare screen) */
.tl{position:relative;margin:0;padding:0 20px 0 0;list-style:none}
.tl::before,.feat::before{content:"";position:absolute;left:67px;top:0;bottom:0;width:2px;background:var(--line)}
.tl li{position:relative;padding:8px 0 8px 84px}
.tl .age{position:absolute;left:0;top:10px;width:56px;text-align:right;line-height:1}
.tl .age b{display:block;font-size:34px;font-weight:700;letter-spacing:-1.5px}
.tl .age span{display:block;margin-top:4px;font-size:10px;color:var(--ink-4)}
.tl .pt{position:absolute;left:64px;top:20px;width:8px;height:8px;border-radius:50%;background:var(--violet)}
.tl .pt.future{background:var(--bg);border:2px solid var(--violet)}
.tl .ev{border-radius:16px;padding:12px}
.tl .ev + .ev{margin-top:8px}
.tl .who{margin:0;font-size:11px;font-weight:700}
.tl .what{margin:0;font-size:15px;line-height:1.35;font-weight:500}
.tl .ev.jobs{background:var(--yellow)}
.tl .ev.curie{background:var(--mint)}
.tl .ev.plan{border:1.5px dashed var(--violet);padding:10.5px 12px}
.tl .ev.plan .who{color:var(--violet)}
.tl .ev.plan .what{color:var(--ink-4);font-weight:400}
.tl li.now{height:44px;padding:0}
.tl .pole{position:absolute;left:67px;top:9px;width:2px;height:26px;background:var(--flag)}
.tl .flag{position:absolute;left:69px;top:9px;height:26px;display:flex;align-items:center;padding:0 22px 0 10px;background:var(--flag);color:#fff;font-size:11px;font-weight:700;letter-spacing:.3px;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%)}

/* features: entries on the same axis (phone), a row under a horizontal axis (desktop) */
.feat{position:relative;margin:0;padding:0 20px 8px 0;list-style:none}
.feat li{position:relative;padding:8px 0 8px 84px}
.feat .lab{position:absolute;left:0;top:22px;width:56px;text-align:right;font-size:12px;font-weight:700;color:var(--violet)}
.feat .node{position:absolute;left:64px;top:30px;width:8px;height:8px;border-radius:50%;background:var(--violet)}
.feat .card{background:#fff;border-radius:20px;padding:16px}
.feat h2{margin:0 0 4px;font-size:17px;font-weight:700;letter-spacing:-.3px}
.feat p{margin:0;font-size:14px;line-height:1.45;color:var(--ink-3)}

/* ---------- HANDOFF (invite / auth / invalid) ---------- */
.handoff{display:grid;gap:20px;padding-top:12px;position:relative;z-index:1}
.ho-eyebrow{margin:0 0 8px;font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:#fff}
.handoff h1{margin:0;font-size:56px;font-weight:700;letter-spacing:-2.2px;line-height:.98}
body[data-view="auth"] .handoff h1,body[data-view="invalid"] .handoff h1{font-size:44px;letter-spacing:-1.6px;line-height:1.02}
.panel{display:flex;flex-direction:column;gap:16px;background:#fff;color:var(--ink);border-radius:28px;padding:20px}
.reward{display:flex;align-items:center;gap:14px}
.reward-num{flex:none;width:64px;height:64px;border-radius:20px;background:var(--lime);display:flex;align-items:center;justify-content:center;font-size:48px;font-weight:700;letter-spacing:-2px;line-height:1}
.reward-main{margin:0;font-size:18px;font-weight:700;letter-spacing:-.3px;line-height:1.25}
.ho-text{margin:2px 0 0;font-size:14px;line-height:1.4;color:var(--ink-3)}
body:not([data-view="invite"]) .ho-text{margin:0;font-size:16px;line-height:1.45;color:var(--ink-2)}
body:not([data-view="invite"]) .reward-num,body:not([data-view="invite"]) .reward-main{display:none}
.ho-code{display:flex;align-items:center;gap:12px;border:1.5px dashed var(--violet);border-radius:20px;background:var(--bg);padding:10px 10px 10px 16px}
.ho-code-text{flex:1;min-width:0}
.ho-code-label{display:block;font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-3)}
.ho-code b{display:block;font-size:28px;font-weight:700;letter-spacing:4px;line-height:1.1;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.copy{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;min-width:44px;padding:0 14px;border-radius:12px;border:2px solid var(--ink);background:#fff;color:var(--ink);font:700 14px/1 var(--font);cursor:pointer}
.copy:hover{background:var(--bg)}
.copy svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}
.btn{display:flex;align-items:center;justify-content:center;min-height:56px;padding:0 24px;border-radius:999px;background:var(--violet);color:#fff;font-size:17px;font-weight:700;text-decoration:none;text-align:center}
.btn:hover{color:#fff;filter:brightness(1.08)}
#handoff-stores{border-top:1.5px solid var(--line);padding-top:16px}

.steps{padding:28px 20px 8px}
.steps h2{margin:0 0 14px;font-size:20px;font-weight:700;letter-spacing:-.4px}
.ho-steps{margin:0;padding:0;list-style:none;counter-reset:s;display:flex;flex-direction:column;gap:14px}
.ho-steps li{counter-increment:s;position:relative;padding-left:40px;min-height:28px}
.ho-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;background:var(--lime);color:var(--ink);font-size:14px;font-weight:700;display:flex;align-items:center;justify-content:center}
.ho-steps b{display:block;font-size:16px;line-height:28px}
.ho-steps span{display:block;font-size:14px;line-height:1.45;color:var(--ink-3)}
.ho-note{margin:14px 0 0;font-size:13px;color:var(--ink-3)}

/* confetti: one short fall on load and on Copy; invite view only */
.confetti{position:absolute;left:0;right:0;top:0;height:560px;overflow:hidden;pointer-events:none;z-index:2}
.confetti i{position:absolute;top:0;display:block;animation:cf var(--t) var(--d) cubic-bezier(.25,.6,.4,1) both}
@keyframes cf{0%{transform:translate3d(0,-30px,0) rotate(0);opacity:1}75%{opacity:1}100%{transform:translate3d(var(--dx),560px,0) rotate(var(--r));opacity:0}}
@media (prefers-reduced-motion:reduce){.confetti{display:none}.ages-col{animation:none}}

/* footer */
.foot{margin-top:auto;padding:28px 20px 40px;font-size:13px;line-height:1.55;color:var(--ink-4)}
.foot nav{display:flex;flex-wrap:wrap;gap:6px 18px;margin-bottom:12px;font-size:14px;font-weight:600}
.foot nav a{color:var(--ink-2);text-decoration:none}
.foot nav a:hover{color:var(--violet)}
.foot p{margin:0 0 8px;max-width:640px}

@media (min-width:640px){.wrap,.foot,.steps{padding-left:32px;padding-right:32px}.tl,.feat{max-width:520px}}
@media (min-width:900px){
  .wrap,.foot,.steps{padding-left:40px;padding-right:40px}
  .mast{height:80px}
  .ages{height:760px}
  .ages-col{right:max(40px,calc((100% - 1100px)/2 + 460px))}
  .ages-col div{font-size:190px;letter-spacing:-10px}
  .hero{grid-template-columns:minmax(0,1fr) 440px;gap:80px;align-items:start;padding-top:24px}
  .legend{gap:8px 24px;margin:0 0 22px;font-size:15px}
  .hero h1{font-size:152px;letter-spacing:-7px;line-height:.88;margin-bottom:24px}
  .pitch{font-size:22px;line-height:1.4;max-width:560px;margin-bottom:28px}
  .hero .stores-block{max-width:380px}
  .tl,.feat{max-width:none}
  .tl{padding-right:8px}
  .tl::before{left:79px}
  .tl li{padding-left:100px}
  .tl .age{width:68px}
  .tl .age b{font-size:48px;letter-spacing:-2px}
  .tl .age span{font-size:11px}
  .tl .pt{left:76px;top:24px}
  .tl .ev{padding:14px}
  .tl .ev.plan{padding:12.5px 14px}
  .tl .who{font-size:12px}
  .tl .what{font-size:17px}
  .tl li.now{height:48px}
  .tl .pole{left:79px;top:10px;height:28px}
  .tl .flag{left:81px;top:10px;height:28px;font-size:12px;padding:0 24px 0 12px}
  .feat{margin-top:56px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .feat::before{left:0;right:0;top:5px;bottom:auto;width:auto;height:2px}
  .feat li{padding:0}
  .feat .lab{display:none}
  .feat .node{position:relative;left:auto;top:auto;width:12px;height:12px;box-shadow:0 0 0 6px var(--bg)}
  .feat .card{margin-top:16px;padding:24px;border-radius:24px}
  .feat h2{font-size:20px}
  .feat p{font-size:16px}
  body:not([data-view="intro"]) .top{padding-bottom:72px}
  .handoff{grid-template-columns:minmax(0,1fr) 460px;gap:72px;align-items:center;padding-top:32px}
  .ho-eyebrow{font-size:13px;margin-bottom:14px}
  .handoff h1{font-size:112px;letter-spacing:-5px;line-height:.95}
  body[data-view="auth"] .handoff h1,body[data-view="invalid"] .handoff h1{font-size:72px;letter-spacing:-3px}
  .panel{border-radius:32px;padding:32px;gap:20px}
  .reward-num{width:84px;height:84px;border-radius:24px;font-size:64px;letter-spacing:-3px}
  .reward-main{font-size:22px;letter-spacing:-.4px;line-height:1.2}
  .ho-text{font-size:15px;margin-top:4px}
  .ho-code{padding:12px 12px 12px 20px}
  .ho-code b{font-size:34px;letter-spacing:5px}
  .copy{padding:0 16px;font-size:15px}
  .btn{min-height:60px;font-size:18px}
  .steps{padding-top:48px}
  .ho-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
  .ho-steps li{padding:38px 0 0}
  .ho-steps b{font-size:18px}
  .ho-steps span{font-size:15px}
}