:root{
    --void:#000; --card:#fff; --ink:#000;
    --cap:#d7d7d7; --bio:#ececec; --url:#cfcfcf; --hair:rgba(255,255,255,.16);
    --max:480px; --pad:18px;
    --disp:"Alfa Slab One",Georgia,"Times New Roman",serif;
    --body:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
    --mono:"Space Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{background:var(--void);-webkit-text-size-adjust:100%}
  body{
    background:var(--void); color:#fff; font-family:var(--body);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    -webkit-tap-highlight-color:transparent; overscroll-behavior-y:none;
  }
  img{display:block; max-width:100%}
  button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}
  a{color:inherit; text-decoration:none}
  :focus-visible{outline:3px solid #fff; outline-offset:3px; border-radius:4px}

  .app{max-width:var(--max); margin:0 auto; min-height:100svh;
    padding:0 var(--pad) calc(22px + env(safe-area-inset-bottom)); position:relative}

  @keyframes rise{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
  .app > *{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .app > main{animation-delay:.05s}
  .app > .foot{animation-delay:.1s}

  /* top bar */
  .topbar{display:flex; align-items:center; justify-content:space-between;
    padding-top:calc(14px + env(safe-area-inset-top)); padding-bottom:8px}
  .handle{font-weight:800; font-size:20px; letter-spacing:-.02em}
  .tools{display:flex; align-items:center; gap:4px}
  .iconbtn{width:44px; height:44px; display:grid; place-items:center; border-radius:50%; color:#fff}
  .iconbtn:active{background:rgba(255,255,255,.08)}
  .iconbtn svg{width:26px; height:26px}

  /* profile */
  .profile{display:flex; gap:16px; align-items:center; margin-top:6px}
  .avatar{width:118px; height:118px; flex:0 0 auto; border-radius:50%; background:#fff;
    display:grid; place-items:center; overflow:hidden}
  .avatar img{width:72%}
  .pmeta{min-width:0; flex:1 1 auto}
  .title{font-family:var(--disp); font-weight:400; font-size:clamp(27px,8.4vw,40px);
    line-height:.99; letter-spacing:.004em}
  .stats{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px}
  .stat{font-weight:700; font-size:12.5px; line-height:1.25}
  .dot{display:inline-block; width:7px; height:7px; border-radius:50%; background:#fff;
    margin-right:5px; vertical-align:1px; animation:pulse 2.6s ease-out infinite}
  @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
    70%{box-shadow:0 0 0 7px rgba(255,255,255,0)} 100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

  /* bio + url */
  .bio{font-weight:500; font-size:16.5px; line-height:1.5; color:var(--bio); margin-top:18px}
  .url{display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:15.5px;
    color:var(--url); margin-top:10px; word-break:break-word}
  .url svg{width:18px; height:18px; flex:0 0 auto; opacity:.85}
  .url:active{color:#fff}

  /* cta row */
  .cta{display:flex; gap:10px; align-items:stretch; margin-top:18px}
  .btn{flex:1 1 0; min-width:0; background:#fff; color:#000; border-radius:26px;
    font-weight:800; font-size:15px; line-height:1.1; padding:14px 10px; text-align:center;
    display:grid; place-items:center; transition:transform .12s ease}
  .btn:active{transform:scale(.97)}
  .chev{flex:0 0 auto; width:56px; border:2px solid rgba(255,255,255,.85); border-radius:50%;
    display:grid; place-items:center; color:#fff; transition:transform .12s ease, background .15s}
  .chev:active{transform:scale(.95); background:rgba(255,255,255,.1)}
  .chev svg{width:26px; height:26px}

  /* socials */
  .socials{display:flex; justify-content:space-between; gap:8px; margin-top:22px}
  .soc{flex:1 1 0; min-width:0; display:flex; flex-direction:column; align-items:center; gap:9px}
  .soc .ring{width:60px; height:60px; transition:transform .12s ease}
  .soc:active .ring{transform:scale(.92)}
  .soc .cap{font-weight:600; font-size:12px; color:var(--cap); text-align:center; line-height:1.15}

  /* pills */
  .links{margin-top:24px; display:flex; flex-direction:column; gap:13px}
  .pill{display:flex; align-items:center; gap:14px; background:#fff; color:#000;
    border-radius:32px; padding:9px 18px 9px 9px; width:100%; text-align:left;
    transition:transform .12s ease}
  .pill:active{transform:scale(.985)}
  .pill .chip{width:50px; height:50px; flex:0 0 auto; border-radius:50%; background:#000;
    display:grid; place-items:center; overflow:hidden}
  .pill .chip img{width:64%}
  .pill .lbl{flex:1 1 auto; font-family:var(--disp); font-weight:400;
    font-size:clamp(18px,5.5vw,23px); line-height:1.02; letter-spacing:.004em}
  .pill .arw{flex:0 0 auto; color:#000; display:grid; place-items:center}
  .pill .arw svg{width:26px; height:26px}

  /* footer */
  .foot{font-family:var(--mono); font-size:11px; letter-spacing:.12em;
    color:rgba(255,255,255,.6); text-align:center; padding-top:30px}
  .foot b{color:#fff; font-weight:400}

  /* drawer */
  .drawer{position:fixed; inset:0; z-index:60; background:#000; display:flex; flex-direction:column;
    padding:calc(14px + env(safe-area-inset-top)) var(--pad) calc(24px + env(safe-area-inset-bottom));
    opacity:0; visibility:hidden; transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease}
  .drawer.open{opacity:1; visibility:visible; transform:none}
  .drawer-top{display:flex; align-items:center; justify-content:space-between}
  .drawer-nav{margin:auto 0; display:flex; flex-direction:column; gap:2px}
  .dlink{font-family:var(--disp); font-weight:400; font-size:clamp(24px,8vw,36px);
    padding:9px 0; border-bottom:1px solid var(--hair); text-align:left}
  .dlink:active{opacity:.6}

  /* toast */
  .toast{position:fixed; left:50%; bottom:calc(28px + env(safe-area-inset-bottom));
    transform:translate(-50%,12px); background:#fff; color:#000; font-weight:700; font-size:14px;
    padding:12px 18px; border-radius:30px; opacity:0; pointer-events:none;
    transition:opacity .2s ease, transform .2s ease; z-index:80; max-width:86vw; text-align:center}
  .toast.show{opacity:1; transform:translate(-50%,0)}

  @media (max-width:360px){ :root{--pad:15px} .avatar{width:104px; height:104px} }
  @media (prefers-reduced-motion:reduce){
    *{animation:none !important}
    .btn,.pill,.chev,.soc .ring,.drawer,.toast{transition:none}
  }

  /* ---- sub-page components (same tokens as home) ---- */
  .back{font-weight:800;font-size:14px;color:#fff;display:inline-flex;align-items:center;gap:6px;padding:8px 4px;text-decoration:none}
  .back svg{width:18px;height:18px}
  .headcard{background:#fff;color:#000;border-radius:32px;padding:26px 22px 20px;margin-top:8px}
  .htitle{font-family:var(--disp);font-weight:400;font-size:clamp(38px,13vw,60px);line-height:.93;letter-spacing:.003em}
  .hsub{font-weight:700;font-size:15px;color:#222;margin-top:12px}
  .pill .num{width:50px;height:50px;flex:0 0 auto;border-radius:50%;background:#000;color:#fff;display:grid;place-items:center;font-family:var(--disp);font-weight:400;font-size:20px}
  .pill .stk{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
  .pill .stk .l1{font-family:var(--disp);font-weight:400;font-size:clamp(17px,5vw,21px);line-height:1.05}
  .pill .stk .l2{font-weight:500;font-size:13.5px;color:#444;margin-top:5px;line-height:1.3}

  /* directory */
  .pill .grp{flex:1 1 auto;min-width:0}
  .gname{font-family:var(--disp);font-weight:400;font-size:clamp(18px,5.4vw,22px);line-height:1.02;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .gcity{font-weight:500;font-size:13.5px;color:#555;margin-top:3px}
  .emptywrap{background:#fff;color:#000;border-radius:28px;padding:26px 22px;margin-top:14px;text-align:center}
  .emptywrap .et{font-family:var(--disp);font-weight:400;font-size:clamp(22px,7vw,30px);line-height:1.02}
  .emptywrap .ex{font-weight:500;font-size:15px;color:#333;margin:12px 0 18px;line-height:1.45}
  .dirnote{font-family:var(--mono);font-size:11.5px;color:#9a9a9a;text-align:center;margin-top:18px;letter-spacing:.04em}

  /* claim form */
  .form{margin-top:14px;display:flex;flex-direction:column;gap:12px}
  .fsec{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8f8f8f;margin:16px 0 -2px 4px}
  .field label{display:block;font-weight:600;font-size:13px;color:var(--cap);margin:0 0 6px 4px}
  .field input,.field textarea,.field select{width:100%;background:#fff;color:#000;border:0;border-radius:18px;padding:15px 16px;font-family:var(--body);font-weight:600;font-size:15.5px;-webkit-appearance:none;appearance:none}
  .field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 15px center;padding-right:44px}
  .field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:3px solid #fff;outline-offset:3px}
  .field textarea{min-height:88px;border-radius:20px;resize:vertical;line-height:1.4}
  .req{color:#fff}
  .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .consent{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:18px;padding:14px 16px;margin-top:18px}
  .consent input{flex:0 0 auto;width:22px;height:22px;margin-top:1px;accent-color:#fff}
  .consent label{font-weight:600;font-size:13.5px;line-height:1.42;color:#e9e9e9}
  .submit{width:100%;margin-top:16px;padding:16px;font-size:16px}
  .formnote{font-family:var(--mono);font-size:11.5px;color:#9a9a9a;text-align:center;margin-top:12px;line-height:1.5}
  .err{display:none;color:#fff;font-weight:600;font-size:14px;text-align:center;margin-top:12px}
  .ok{display:none;text-align:center;padding:14px 4px}
  .ok .big{font-family:var(--disp);font-weight:400;font-size:clamp(28px,9vw,38px);line-height:1.02}
  .refbox{background:#fff;color:#000;border-radius:20px;padding:16px;margin:18px auto;max-width:260px}
  .refbox span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#666}
  .refbox b{display:block;font-family:var(--mono);font-weight:700;font-size:30px;letter-spacing:.06em;margin-top:6px}
  .ok .sml{font-weight:500;font-size:14.5px;color:var(--bio);margin-top:6px;line-height:1.5}

  /* grupo template extras */
  .avatar .init{font-family:var(--disp);font-weight:400;font-size:42px;color:#000;line-height:1}
  .banner{border:1px dashed rgba(255,255,255,.42);border-radius:16px;padding:11px 14px;margin-top:12px;font-size:12.5px;color:#cfcfcf;line-height:1.45}
  .banner b{color:#fff;font-weight:700}
  .is-hidden{display:none !important}

  /* updates panel (home bell) */
  .updates{position:fixed;top:60px;right:12px;width:min(330px,88vw);max-height:78vh;overflow:auto;background:#fff;color:#000;border-radius:24px;padding:18px 18px 20px;z-index:80;opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transition:opacity .18s ease,transform .18s ease,visibility .18s;box-shadow:0 24px 60px rgba(0,0,0,.45)}
  .updates.open{opacity:1;visibility:visible;transform:none}
  .updates-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .updates-top h3{font-family:var(--disp);font-weight:400;font-size:24px;line-height:1}
  .uclose{background:none;border:0;color:#000;cursor:pointer;padding:4px;line-height:0}
  .uclose svg{width:22px;height:22px}
  .uitem{display:flex;gap:10px;align-items:flex-start;padding:11px 0;border-top:1px solid #ededed;font-weight:600;font-size:14px;line-height:1.35}
  .uitem .udot{flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#000;margin-top:6px}
  .ucap{margin-top:16px;background:#f3f3f3;border-radius:18px;padding:15px}
  .ucap .ut{font-weight:800;font-size:14px;margin-bottom:3px}
  .ucap .us{font-weight:500;font-size:12.5px;color:#555;margin-bottom:11px;line-height:1.4}
  .ucap form{display:flex;gap:8px}
  .ucap input{flex:1 1 auto;min-width:0;background:#fff;border:1px solid #ddd;border-radius:14px;padding:12px 13px;font-family:var(--body);font-weight:600;font-size:14px}
  .ucap button{flex:0 0 auto;background:#000;color:#fff;border:0;border-radius:14px;padding:0 16px;font-family:var(--body);font-weight:700;font-size:13.5px;cursor:pointer}
  .uerr{display:none;color:#000;font-weight:700;font-size:12.5px;margin-top:8px}
  .uok{display:none;font-weight:700;font-size:13.5px;margin-top:4px}

  /* ===== claim: multi-step request form (additive — does not affect other pages) ===== */
  .progress{display:flex;align-items:center;gap:12px;margin:16px 2px 2px}
  .pnum{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:#9a9a9a;text-transform:uppercase;white-space:nowrap}
  .pbar{flex:1;display:flex;gap:6px}
  .pseg{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}
  .pseg.on{background:#fff}
  .steptitle{font-family:var(--disp);font-weight:400;font-size:clamp(26px,8vw,34px);line-height:1;margin:16px 2px 2px}
  .stepsub{font-weight:500;font-size:14px;color:var(--bio);margin:9px 2px 2px;line-height:1.45}
  .step{display:none}
  .step.on{display:block}
  .counter{font-family:var(--mono);font-size:11px;color:#9a9a9a;text-align:right;margin:6px 4px 0}
  .counter.warn{color:#fff}
  .filewrap{margin-top:6px}
  .fileinput{display:none}
  .filebtn{display:flex;align-items:center;gap:12px;background:#fff;color:#000;border-radius:18px;padding:15px 16px;font-weight:700;font-size:15px;cursor:pointer}
  .filebtn svg{width:22px;height:22px;flex:0 0 auto}
  .filemeta{display:none;margin-top:10px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:12px;align-items:center;gap:12px}
  .filemeta.show{display:flex}
  .filemeta img{width:54px;height:54px;border-radius:12px;object-fit:cover;flex:0 0 auto;background:#fff}
  .filemeta .fname{flex:1;min-width:0;font-weight:600;font-size:13px;color:#e9e9e9;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .filemeta .fclear{background:none;border:0;color:#cfcfcf;font-weight:700;font-size:12.5px;cursor:pointer;padding:4px;text-decoration:underline}
  .prow{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:13px 14px;margin-top:11px}
  .prow .plabel{font-weight:700;font-size:14px;margin-bottom:9px;display:flex;align-items:center;gap:8px}
  .prow .plabel img{width:22px;height:22px}
  .prow input[type=url],.prow input[type=text]{width:100%;background:#fff;color:#000;border:0;border-radius:14px;padding:13px 14px;font-family:var(--body);font-weight:600;font-size:15px;-webkit-appearance:none}
  .togrow{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
  .tog{position:relative;display:inline-flex;align-items:center;gap:7px;cursor:pointer;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:8px 13px;font-weight:600;font-size:12.5px;color:#e9e9e9;user-select:none}
  .tog input{position:absolute;opacity:0;width:0;height:0}
  .tog .box{width:18px;height:18px;border-radius:6px;border:2px solid rgba(255,255,255,.5);display:grid;place-items:center;flex:0 0 auto}
  .tog .box svg{width:12px;height:12px;opacity:0;color:#000}
  .tog input:checked ~ .box{background:#fff;border-color:#fff}
  .tog input:checked ~ .box svg{opacity:1}
  .tog input:focus-visible ~ .box{outline:2px solid #fff;outline-offset:2px}
  .addbtn{width:100%;margin-top:11px;background:none;border:1.5px dashed rgba(255,255,255,.32);border-radius:16px;padding:13px;color:#e9e9e9;font-family:var(--body);font-weight:700;font-size:14px;cursor:pointer}
  .subhead{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8f8f8f;margin:22px 2px 2px}
  .subnote{font-weight:500;font-size:13px;color:#9a9a9a;margin:5px 2px 0;line-height:1.45}
  .mrow{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:13px 14px;margin-top:11px;display:flex;flex-direction:column;gap:9px}
  .mrow select,.mrow input[type=url]{width:100%;background:#fff;color:#000;border:0;border-radius:14px;padding:13px 14px;font-family:var(--body);font-weight:600;font-size:15px;-webkit-appearance:none;appearance:none}
  .mrow select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:42px}
  .stepnav{display:flex;gap:10px;margin-top:24px}
  .stepnav .btn{flex:1}
  .btn.ghost{background:transparent;color:#fff;border:1.5px solid rgba(255,255,255,.4)}
  .consents{margin-top:18px;display:flex;flex-direction:column;gap:10px}
  .consent a{color:#fff;text-decoration:underline}
  /* success */
  .minihead{margin-top:10px}
  .minihead h1{font-family:var(--disp);font-weight:400;font-size:clamp(30px,10vw,44px);line-height:.96}
  .minihead .sub{font-weight:600;font-size:15px;color:var(--bio);margin-top:10px}
  .codecard{background:#fff;color:#000;border-radius:22px;padding:20px;margin:20px 0;text-align:center}
  .codecard .clab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#666}
  .codecard .cval{font-family:var(--mono);font-weight:700;font-size:clamp(30px,10vw,40px);letter-spacing:.10em;margin-top:8px}
  .flow{counter-reset:f;margin-top:6px;padding:0;list-style:none}
  .flow li{counter-increment:f;position:relative;padding:13px 0 13px 46px;border-top:1px solid rgba(255,255,255,.14);font-weight:600;font-size:14.5px;line-height:1.42;color:#e9e9e9}
  .flow li::before{content:counter(f);position:absolute;left:0;top:12px;width:30px;height:30px;border-radius:50%;background:#fff;color:#000;font-family:var(--disp);font-size:15px;display:grid;place-items:center}
  .vacct{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px;margin-top:18px}
  .vacct .vk{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a}
  .vacct .vv{font-weight:700;font-size:15px;margin-top:6px;word-break:break-word}
  .correct{font-weight:500;font-size:13.5px;color:#9a9a9a;margin-top:18px;line-height:1.55}
  /* prose */
  .prose{margin-top:16px}
  .prose h2{font-family:var(--disp);font-weight:400;font-size:clamp(20px,6vw,26px);line-height:1.06;margin:24px 0 8px}
  .prose h2:first-of-type{margin-top:4px}
  .prose p{font-weight:500;font-size:14.5px;line-height:1.6;color:#cfcfcf;margin:8px 0}
  .prose ul{margin:8px 0;padding:0;list-style:none}
  .prose li{font-weight:500;font-size:14.5px;line-height:1.55;color:#cfcfcf;padding:5px 0 5px 18px;position:relative}
  .prose li::before{content:"";position:absolute;left:2px;top:13px;width:6px;height:6px;border-radius:50%;background:#fff}
  .prose a{color:#fff;text-decoration:underline}
  .updated{font-family:var(--mono);font-size:11px;color:#9a9a9a;letter-spacing:.04em;margin-top:6px}

  /* ===== production lock: step-2 density + grupo bio 3-line clamp ===== */
  .prow{padding:11px 12px;margin-top:9px}
  .prow .plabel{margin-bottom:7px}
  .togrow{margin-top:8px}
  .mrow{padding:11px 12px;margin-top:9px;gap:8px}
  .subhead{margin-top:15px}
  .subnote{margin-top:4px}
  .addbtn{padding:11px;margin-top:9px}
  .bio-clamp{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}

  .prow label.flab{display:block;font-weight:600;font-size:12px;color:var(--cap);margin:0 0 5px 2px}

  /* ===== branded share panel (additive — homepage only; reusable component) ===== */
  /* backdrop is the scroll container so the panel top (heading) can never be clipped;
     the sheet centers via auto margins and pins to top only if it ever exceeds the viewport */
  .sbk{position:fixed;inset:0;z-index:90;display:flex;flex-direction:column;
    overflow-y:auto;-webkit-overflow-scrolling:touch;
    padding:max(14px,env(safe-area-inset-top)) 20px max(14px,env(safe-area-inset-bottom));
    background:rgba(0,0,0,.72);
    -webkit-backdrop-filter:blur(6px) saturate(118%);backdrop-filter:blur(6px) saturate(118%);
    opacity:0;visibility:hidden;transition:opacity .22s ease,visibility .22s ease}
  .sbk.open{opacity:1;visibility:visible}
  .sheet{position:relative;width:100%;max-width:360px;margin:auto;background:#000;border:1px solid var(--hair);
    border-radius:30px;padding:clamp(18px,5vw,24px) clamp(16px,4.5vw,22px) clamp(18px,5vw,22px);
    box-shadow:0 30px 90px rgba(0,0,0,.65);text-align:center;
    transform:translateY(10px) scale(.985);transition:transform .24s cubic-bezier(.2,.7,.2,1)}
  .sbk.open .sheet{transform:none}
  .sheet-x{position:absolute;top:12px;right:12px;width:40px;height:40px;display:grid;place-items:center;
    border-radius:50%;color:#fff}
  .sheet-x:active{background:rgba(255,255,255,.1)}
  .sheet-x svg{width:24px;height:24px}
  .sheet-logo{width:74px;height:74px;margin:2px auto 0;border-radius:50%;background:#fff;
    display:grid;place-items:center;overflow:hidden}
  .sheet-logo img{width:72%}
  .sheet-h{font-family:var(--disp);font-weight:400;font-size:clamp(26px,8vw,32px);line-height:1.05;
    letter-spacing:.004em;margin-top:10px}
  .sheet-sub{font-weight:600;font-size:13.5px;line-height:1.4;color:var(--cap);
    margin:7px auto 0;max-width:30ch}
  .sheet-qr{background:#fff;border-radius:22px;padding:13px;margin:13px auto 0;width:min(202px,58vw)}
  .sheet-qr svg{width:100%;height:auto;display:block}
  .sheet-url{font-family:var(--mono);font-size:14px;letter-spacing:.02em;color:var(--bio);
    margin-top:9px;word-break:break-word}
  .sheet-acts{display:flex;flex-direction:column;gap:8px;margin-top:12px}
  .sheet-btn{background:#fff;color:#000;border-radius:26px;font-weight:800;font-size:15.5px;
    line-height:1.1;padding:13px 16px;text-align:center;transition:transform .12s ease}
  .sheet-btn:active{transform:scale(.97)}
  .sheet-note{max-height:0;opacity:0;overflow:hidden;color:#fff;font-weight:700;font-size:13px;
    line-height:1.35;transition:opacity .2s ease,max-height .2s ease,margin-top .2s ease}
  .sheet-note.show{opacity:1;max-height:56px;margin-top:11px}

  /* scroll lock while share panel is open (iOS-safe) */
  .pg-lock body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

  @media (prefers-reduced-motion:reduce){
    .sbk,.sheet,.sheet-btn,.sheet-note,.sheet-x{transition:none}
  }
  @media (max-width:360px){
    .sheet-logo{width:66px;height:66px}
    .sheet-qr{width:min(184px,56vw)}
  }
  /* short viewports (small phones like iPhone SE, and landscape): compress further so
     the full panel still fits with no scroll; QR stays above the scannable floor */
  @media (max-height:680px){
    .sbk{padding:max(10px,env(safe-area-inset-top)) 18px max(10px,env(safe-area-inset-bottom))}
    .sheet{padding:14px 16px}
    .sheet-logo{width:60px;height:60px;margin-top:0}
    .sheet-h{margin-top:6px}
    .sheet-sub{margin-top:4px}
    .sheet-qr{width:min(188px,52vw);padding:12px;margin-top:8px}
    .sheet-url{margin-top:6px}
    .sheet-acts{gap:6px;margin-top:8px}
    .sheet-btn{padding:11px 16px}
  }

  /* ===== why page: dark "purpose" chapter (additive — homepage Why pill + /why/ route) ===== */
  /* homepage Why pill: inverted dark variant of the shared link pill.
     Scoped to .pill--why only — never touches generic .pill / .chip / .arw, so other routes are unaffected.
     border-box keeps the hairline border inside the locked pill dimensions (width/radius/padding unchanged). */
  .pill--why{background:#000;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
  .pill--why .chip{background:#fff}
  .pill--why .arw{color:#fff}

  /* hero: black page directly (no headcard), white logo mark, mono eyebrow, oversized stacked title */
  .why-hero{margin-top:18px;padding:4px 2px 2px}
  .why-mark{width:96px;height:96px;border-radius:50%;background:#fff;display:grid;place-items:center;overflow:hidden}
  .why-mark img{width:72%}
  .why-eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--cap);margin-top:22px}
  .why-title{font-family:var(--disp);font-weight:400;color:#fff;font-size:clamp(56px,18.5vw,84px);line-height:.9;letter-spacing:.004em;margin-top:10px}
  .why-title span{display:block}
  .why-sub{font-weight:700;font-size:clamp(16px,4.6vw,19px);line-height:1.4;color:#fff;margin-top:16px;max-width:26ch}

  /* three reason pills: white, pill-family radius, black logo chip on the left — no checks, no arrows */
  .why-reasons{margin-top:30px;display:flex;flex-direction:column;gap:14px}
  .why-reason{display:flex;gap:15px;align-items:center;background:#fff;color:#000;border-radius:30px;padding:20px 20px 20px 16px}
  .why-reason-mark{width:56px;height:56px;flex:0 0 auto;border-radius:50%;background:#000;display:grid;place-items:center;overflow:hidden}
  .why-reason-mark img{width:64%}
  .why-reason-body{flex:1 1 auto;min-width:0}
  .why-reason-h{font-family:var(--disp);font-weight:400;font-size:clamp(20px,5.6vw,24px);line-height:1.04;letter-spacing:.003em}
  .why-reason-x{font-weight:500;font-size:clamp(14px,3.9vw,15.5px);line-height:1.46;color:#222;margin-top:8px}

  /* final cta: white full-width pill, black text + black arrow, route /claim/ */
  .why-cta{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:#000;border-radius:30px;padding:18px 20px;margin-top:18px;transition:transform .12s ease}
  .why-cta:active{transform:scale(.985)}
  .why-cta .lbl{font-family:var(--disp);font-weight:400;font-size:clamp(20px,5.6vw,24px);line-height:1;letter-spacing:.004em}
  .why-cta .arw{flex:0 0 auto;display:grid;place-items:center;color:#000}
  .why-cta .arw svg{width:26px;height:26px}

  @media (max-width:360px){
    .why-mark{width:88px;height:88px}
    .why-reason{padding:18px 18px 18px 14px;gap:13px}
    .why-reason-mark{width:52px;height:52px}
  }
  @media (prefers-reduced-motion:reduce){ .why-cta{transition:none} }

  /* ===== tugrupo page: "your grupo's home" explainer (additive — /tugrupo/ route only) ===== */
  /* All scoped to .tg-* — never touches generic or shared rules, so every other route is unaffected.
     Hero reuses .why-hero/.why-mark/.why-eyebrow/.why-sub; pills reuse .why-reason*; CTA reuses .why-cta;
     CTA sub-line reuses .formnote. Only the pieces below have no existing equivalent. B&W + existing font vars only. */

  /* fit-safe stacked title: same oversized Alfa Slab look as .why-title, sized down so "Tu Grupo."
     (wider than /why/'s words because of the period) never clips at 320/360/390/desktop */
  .tg-title{font-family:var(--disp);font-weight:400;color:#fff;font-size:clamp(48px,16vw,76px);line-height:.9;letter-spacing:.004em;margin-top:10px}
  .tg-title span{display:block}

  /* official-link card: white card, mono label + big mono URL (responsive, wrap-safe) + caption */
  .tg-link{background:#fff;color:#000;border-radius:24px;padding:20px 18px;margin-top:22px;text-align:center}
  .tg-link .lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#666}
  .tg-link .val{font-family:var(--mono);font-weight:700;font-size:clamp(15px,4.4vw,22px);letter-spacing:.01em;line-height:1.15;margin-top:9px;word-break:break-word;overflow-wrap:anywhere}
  .tg-link .cap{font-weight:500;font-size:13.5px;line-height:1.5;color:#444;margin:12px auto 0;max-width:34ch}

  /* section label above the "what lives here" pills (mono eyebrow, same rhythm as hero eyebrow) */
  .tg-seclabel{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--cap);margin:30px 2px -14px}

  /* ethos statement: centered white brand line */
  .tg-ethos{font-weight:600;font-size:clamp(15px,4vw,16.5px);line-height:1.55;color:#fff;text-align:center;margin:28px auto 4px;max-width:32ch}

  /* ===== homepage: Live Grupos tray (additive — / route only) =====
     Inline disclosure attached beneath the CTA row: the .chev toggles it open/closed.
     Closed by default; expands in normal flow (grid-rows 0fr->1fr), pushing socials down.
     No scroll, route, modal, drawer, or scroll-lock. Scoped entirely to .live-* and the
     chevron's own aria-controls selector — never edits generic/shared rules, so every
     other route is unaffected. B&W + existing font vars only.
     Swap-ready: later, replace the zero-state inside .live-card with 1-2 verified grupo
     cards; a "VIEW ALL GRUPOS ->" link may appear once /grupos/ has content. No new routes
     in this patch. */
  .live{display:grid;grid-template-rows:0fr;transition:grid-template-rows .28s cubic-bezier(.2,.7,.2,1)}
  .live-inner{overflow:hidden;min-height:0}
  .live.is-open{grid-template-rows:1fr}
  .live-card{margin-top:12px;background:rgba(255,255,255,.05);border:1px solid var(--hair);border-radius:20px;padding:17px 18px}
  .live-title{font-family:var(--disp);font-weight:400;font-size:clamp(20px,5.8vw,25px);line-height:1;letter-spacing:.004em;text-transform:uppercase}
  .live-meta{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a9a9a;margin-top:7px}
  .live-empty{font-weight:500;font-size:13.5px;line-height:1.55;color:#cfcfcf;margin-top:11px}
  /* chevron rotates up while its tray is open (additive — does not edit the base .chev rule) */
  .chev[aria-controls="liveTray"] svg{transition:transform .25s cubic-bezier(.2,.7,.2,1)}
  .chev[aria-controls="liveTray"][aria-expanded="true"] svg{transform:rotate(180deg)}
  @media (prefers-reduced-motion:reduce){
    .live{transition:none}
    .chev[aria-controls="liveTray"] svg{transition:none}
  }

  /* ===== /app/ route — "The App" doorway (additive — scoped to .pgapp-*) =====
     Native PGA sibling of /tugrupo/: wordmark .why-hero + white mono data-blocks +
     chip-led .why-reason rows + an integrated notify card + a calm return. Reuses the
     shared hero (.why-hero/.why-mark/.why-eyebrow/.why-sub), reason rows (.why-reason*),
     and button language verbatim — never edits a shared/generic rule, so every other
     route is unaffected. Honest app status; no store badges, no fake download. Reuses the
     shared #launchForm / #uemail / #ubtn / #uerr / #uok email contract in purogrupo.js so
     signups land in the SAME relay inbox + "app-launch" list as the bell. Migrates to
     purogrupo.app later by swapping the fourth circle's href only; this page is unaffected. */
  /* fit-safe stacked hero title — same Alfa Slab look as .why-title, sized so "Grupo App" never clips at 320/360/390 */
  .pgapp-title{font-family:var(--disp);font-weight:400;color:#fff;font-size:clamp(42px,13.5vw,68px);line-height:.92;letter-spacing:.004em;margin-top:10px}
  .pgapp-title span{display:block}
  /* mono section label (same rhythm as the hero eyebrow) */
  .pgapp-seclabel{font-family:var(--mono);font-size:12px;letter-spacing:.3em;color:var(--cap);margin:30px 2px 0}
  /* status / release data-block: white card, mono label + mono readout value + caption */
  .pgapp-data{background:#fff;color:#000;border-radius:24px;padding:19px 18px;margin-top:22px}
  .pgapp-seclabel + .pgapp-data{margin-top:13px}
  .pgapp-seclabel + .why-reasons{margin-top:13px}
  .pgapp-data .lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:#666}
  .pgapp-data .val{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-weight:700;font-size:clamp(17px,4.8vw,21px);letter-spacing:.02em;line-height:1.1;margin-top:9px}
  .pgapp-data .cap{font-weight:500;font-size:13.5px;line-height:1.5;color:#444;margin-top:11px}
  .pgapp-data .live{width:9px;height:9px;flex:0 0 auto;border-radius:50%;background:#000;animation:pgapp-pulse 2.6s ease-out infinite}
  @keyframes pgapp-pulse{0%{box-shadow:0 0 0 0 rgba(0,0,0,.4)}70%{box-shadow:0 0 0 8px rgba(0,0,0,0)}100%{box-shadow:0 0 0 0 rgba(0,0,0,0)}}
  /* integrated notify card — dark translucent, same tokens as the homepage Live Grupos tray card */
  .pgapp-notify{border:1px solid var(--hair);background:rgba(255,255,255,.05);border-radius:24px;padding:19px 18px;margin-top:24px}
  .pgapp-notify .lab{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--cap)}
  .pgapp-notify .ask{font-weight:600;font-size:14.5px;line-height:1.45;color:#fff;margin-top:8px}
  .pgapp-notify form{display:flex;gap:9px;margin-top:13px}
  .pgapp-notify input{flex:1 1 auto;min-width:0;background:#fff;color:#000;border:0;border-radius:16px;padding:14px 15px;font-family:var(--body);font-weight:600;font-size:15.5px;-webkit-appearance:none;appearance:none}
  .pgapp-notify button{flex:0 0 auto;background:#fff;color:#000;border:0;border-radius:16px;padding:0 18px;font-family:var(--body);font-weight:700;font-size:14.5px;letter-spacing:.01em;cursor:pointer;transition:transform .12s ease}
  .pgapp-notify button:active{transform:scale(.96)}
  .pgapp-err{display:none;font-weight:700;font-size:12.5px;color:#fff;margin-top:10px}
  .pgapp-ok{display:none;font-weight:700;font-size:13.5px;color:#fff;margin-top:10px}
  /* calm return — body-scale, not a second hero */
  .pgapp-return{display:block;text-align:center;margin:30px auto 2px}
  .pgapp-return .eq{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#8f8f8f;margin-bottom:8px}
  .pgapp-return .lk{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:15.5px;color:#fff}
  .pgapp-return .lk svg{width:18px;height:18px}
  .pgapp-return:active .lk{opacity:.7}
  /* ---- polish pass: energy + momentum (additive, B&W, reuses existing rise/pulse keyframes) ---- */
  /* section-label index number — forward-counting rhythm (echoes the numbered steps on /how/) */
  .pgapp-seclabel .ix{color:#fff;margin-right:10px}
  /* inverted "LIVE" status card — bold dark punctuation w/ white pulse dot (homepage .pill--why + .dot language) */
  .pgapp-data--dark{background:#000;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
  .pgapp-data--dark .lab{color:var(--cap)}
  .pgapp-data--dark .val{color:#fff}
  .pgapp-data--dark .cap{color:#cfcfcf}
  .pgapp-data--dark .live{background:#fff;animation:pulse 2.6s ease-out infinite}
  /* staggered entrance — blocks rise in sequence; reuses the site's own rise keyframe.
     container's own fade is disabled so only the children stagger (no double-animation) */
  .app > .pgapp-main{animation:none}
  .pgapp-main > *{animation:rise .5s cubic-bezier(.2,.7,.2,1) both}
  .pgapp-main > *:nth-child(2){animation-delay:.06s}
  .pgapp-main > *:nth-child(3){animation-delay:.13s}
  .pgapp-main > *:nth-child(4){animation-delay:.20s}
  .pgapp-main > *:nth-child(5){animation-delay:.27s}
  .pgapp-main > *:nth-child(6){animation-delay:.34s}
  .pgapp-main > *:nth-child(7){animation-delay:.41s}
  .pgapp-main > *:nth-child(8){animation-delay:.48s}
  .pgapp-main > *:nth-child(9){animation-delay:.55s}
  /* return arrow nudge on press */
  .pgapp-return .lk svg{transition:transform .15s ease}
  .pgapp-return:active .lk svg{transform:translateX(3px)}
  @media (prefers-reduced-motion:reduce){ .pgapp-notify button{transition:none} .pgapp-data .live{animation:none} .pgapp-data--dark .live{animation:none} .pgapp-main > *{animation:none} .pgapp-return .lk svg{transition:none} }

  /* ── polish: desktop / tablet drawer alignment (additive; mobile untouched) ──
     At >=768px, center ONLY the drawer's chrome (.drawer-top: handle + close)
     and links (.drawer-nav) to the same centered 480px PGA column as .app, so
     they stop stranding at the far-left edge of a wide monitor. The .drawer
     itself is not touched: it stays full-viewport true-black. Below 768px the
     mobile drawer is byte-for-byte unchanged. */
  @media (min-width:768px){
    .drawer-top,
    .drawer-nav{ width:100%; max-width:var(--max); margin-left:auto; margin-right:auto }
  }

/* ===== RELEASE-003A additive (S4): footer trust links — appended only, nothing above edited ===== */
.foot a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.28);padding-bottom:1px}
.foot a:active{opacity:.7}

/* ===== RELEASE-004D additive · /tugrupo/ dark CTA — appended only, nothing above edited =====
   Route-scoped modifier. Reuses the homepage 3rd-pill (.pill--why) dark treatment values
   exactly. Compound selector .why-cta.tg-cta--dark applies ONLY to the tugrupo CTA element;
   base .why-cta, .pill--why, /why/, and all other routes are unaffected. */
.why-cta.tg-cta--dark{background:#000;color:#fff;border:1.5px solid rgba(255,255,255,.7)}
.why-cta.tg-cta--dark .arw{color:#fff}

/* ===== RELEASE-006F additive: PGA drawer pill rows + icons + go arrows + powered-by — appended only, nothing above edited ===== */
  .drawer-nav{gap:10px}
  .dlink{display:flex; align-items:center; gap:13px;
    font-size:clamp(17px,5.2vw,21px); line-height:1.05;
    padding:15px 17px 15px 15px;
    border:1.5px solid rgba(255,255,255,.5); border-radius:999px}
  .dlink-ic{width:22px; height:22px; flex:0 0 auto}
  .dlink-t{flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden}
  .dlink-go{width:16px; height:16px; flex:0 0 auto; opacity:.9}
  .drawer-foot{font-family:var(--mono); font-size:11px; letter-spacing:.18em;
    text-transform:uppercase; color:var(--cap); text-align:center; padding-top:16px}
  .drawer-foot b{font-weight:700; color:var(--cap)}
  @media (min-width:768px){
    .drawer-foot{width:100%; max-width:var(--max); margin-left:auto; margin-right:auto}
  }

/* ===== RELEASE-007C additive: ES|EN language selector (B-04 locked · topbar tools, left slot) — appended only, nothing above edited ===== */
  .langsel{display:inline-flex; align-items:center; gap:6px; height:44px; padding:0 10px;
    font-family:var(--mono); font-size:12px; letter-spacing:.08em; color:#fff; text-decoration:none; border-radius:999px}
  .langsel:active{background:rgba(255,255,255,.08)}
  .langsel .ls-cur{opacity:1}
  .langsel .ls-alt{opacity:.5}
  .langsel .ls-sep{opacity:.3}