/* ==========================================================================
   orkut.com — brand layer, from the Orkut Figma style guide
   Type:   Fraunces SemiBold (Hero 80/88, Display 48, Title 26/36)
           Inter (Header 1 ExtraBold 32/36, Header 2 Bold 26/36,
                  20/26, 16/22, 13/19, 10/16; Black for emphasis)
   Color:  Mist #F2F3F9 · Ink #21110C · Pink #FF5EA8 · Violet #673DD9
           Mint #3DD984 · Leaf #57A258 · Periwinkle scale
   Shape:  pill actions (r 72), cards r 16, soft periwinkle shadows
   ========================================================================== */

:root{
  --mist:#f2f3f9;
  --ink:#21110c;
  --ink-2:#676767;
  --ink-3:#a4a09e;
  --pink:#ff5ea8;
  --pink-ink:#c2246d;          /* pink darkened for small text on white (AA) */
  --pink-deep:#B2166F;         /* signature + counter, from orkut-index-en.html */
  --violet:#673dd9;
  --mint:#3dd984;
  --leaf:#57a258;
  --peri-50:#e5eaf4;
  --peri-100:#cfd8ec;
  --peri-200:#a6b5d6;
  --peri-300:#a0aee9;
  --peri-600:#5b6cb0;
  --blush:#fef7f9;
  --white:#fff;
  --danger:#DC2626;
  --purple-deep:#512a81;

  --grad-action:linear-gradient(90deg,var(--violet) 0%,var(--pink) 100%);
  --grad-mint:linear-gradient(90deg,var(--mint) 0%,var(--leaf) 100%);

  --shadow-card:0 8px 32px rgba(166,181,214,.25);
  --shadow-action:0 0 8px rgba(33,17,12,.15);
  --shadow-avatar:0 4px 4px rgba(81,42,129,.15);

  --r-card:16px;
  --r-pill:72px;

  --serif:"Fraunces Variable",Georgia,"Times New Roman",serif;
  --hand:"Caveat Variable",cursive;
  --num:"Manrope Variable",system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:"Inter Variable",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gutter:clamp(16px,4vw,40px);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--mist);color:var(--ink);
  font-family:var(--sans);font-size:16px;line-height:22px;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img,svg{max-width:100%}
img{height:auto}
h1,h2,h3,p{margin:0}
a{color:inherit}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}

.sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter)}

/* Label style from the guide: Inter Medium 11, uppercase, 10% tracking */
.kicker,.tag,.stat-label,.msgbox .k,.supporter-card .k,.supporter-card .label{
  font:500 11px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;
}

/* ---------- Header ---------- */
header{padding:20px 0 0;position:relative;z-index:3}
/* Everything in the row scales fluidly with the viewport (no stepped breakpoints), and
   nowrap keeps it on one line. */
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(8px,2vw,24px);flex-wrap:nowrap}
.wordmark{display:inline-flex;align-items:center;color:var(--pink);text-decoration:none;flex:none}
.wordmark svg{height:clamp(28px,1.1vw + 24.5px,34px);width:auto;display:block}
header nav{display:flex;align-items:center;gap:clamp(2px,0.8vw,6px);min-width:0}
header nav a{white-space:nowrap;font:500 clamp(11px,0.9vw + 8px,15px)/1 var(--sans);text-decoration:none;color:var(--ink);padding:clamp(6px,1vw,10px) clamp(5px,1vw,10px);border-radius:var(--r-pill)}
header nav a:hover,header nav a[aria-current="page"]{background:var(--white)}
.lang{display:inline-flex;align-items:center;margin-left:2px;flex:none}
/* Wide screens: the pill shows the full language name (width fits the longest option).
   Below 600px the script swaps the closed label to the 2-letter code and the pill shrinks
   to a fixed compact width. (ltr + plenty of padding — no clipped codes.) */
.lang select{appearance:none;-webkit-appearance:none;border:0;cursor:pointer;width:auto;field-sizing:content;
  background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2321110c' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right .6rem center/10px;
  font:500 clamp(12px,0.7vw + 10px,14px)/1.5 var(--sans);padding:7px 1.5rem 7px .9rem;border-radius:var(--r-pill);box-shadow:var(--shadow-card);direction:rtl;text-align:left}
/* direction:rtl anchors the OPEN dropdown to the pill's right edge so it stays on-screen;
   option ltr + text-align:left keep the labels reading normally. line-height 1.5 leaves room
   for descenders/accents so the closed code/name is never vertically clipped. */
.lang select option{direction:ltr;text-align:left}
/* field-sizing (above) makes the pill size to its current label — full name on wide, 2-letter
   code on narrow, 日本語 for Japanese. Fallback where it is unsupported: a fixed compact width. */
@supports not (field-sizing:content){@media (max-width:600px){.lang select{width:3.6rem}html[lang="ja"] .lang select{width:5.5rem}}}
/* Subtitle kicker under the logo, as on the other pages. */
.page-kicker{margin:6px auto 14px}
.page-kicker .tag{color:var(--pink-ink)}

/* ---------- Hero ---------- */
/* --board-gap: the space between the board's columns, reused above and below the map panel */
:root{--board-gap:24px}
.hero{padding:clamp(12px,2.5vw,28px) 0 var(--board-gap)}
.hero .shell{
  position:relative;display:grid;isolation:isolate;
  /* Same two columns and gap as the board below, so the orbit's centre lines up with the
     centre of the petition panel under it. */
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-areas:"top orbit" "board board";
  column-gap:var(--board-gap);row-gap:clamp(20px,3vw,40px);align-items:center;
}
.hero .top{grid-area:top;position:relative;z-index:2}
.pills{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-bottom:28px}
.pill{
  display:inline-flex;align-items:center;gap:10px;background:var(--white);
  font:400 13px/1 var(--sans);color:var(--ink-2);
  padding:9px 16px 9px 12px;border-radius:var(--r-pill);box-shadow:var(--shadow-card);
}
.tag{color:var(--ink)}

/* live dot = the guide's 8px leaf ring with a 4px mint centre */
.dot{
  flex:none;width:8px;height:8px;border-radius:50%;display:inline-block;
  background:radial-gradient(circle,var(--mint) 0 2px,var(--leaf) 2.5px);
  box-shadow:0 0 0 0 rgba(61,217,132,.5);animation:ping 2.4s ease-out infinite;
}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(61,217,132,.55)}70%,100%{box-shadow:0 0 0 7px rgba(61,217,132,0)}}

.hero h1{
  font:600 clamp(28px,6vw + 8px,80px)/1.1 var(--serif);
  letter-spacing:-.005em;max-width:11ch;text-wrap:balance;
  font-variation-settings:"opsz" 144;
}
.lede{margin-top:28px;font:400 clamp(17px,1.6vw,20px)/1.3 var(--sans);color:var(--ink);max-width:34rem}

/* Orbit graphic — rebuilt from the "graphic pink / blue" symbol (522 × 522 grid) */
.orbit{
  grid-area:orbit;justify-self:center;position:relative;
  --w:min(528px,100%);width:var(--w);aspect-ratio:1;
  container-type:inline-size;
}
.orbit > *{--u:calc(100cqw / 522)}
.orbit .blob,.orbit .disc,.orbit .glow,.orbit .mark,.orbit .av{position:absolute;border-radius:50%}
/* Soft glows are painted as radial gradients, not blurred solid circles: iOS WebKit re-rasterises
   a filter:blur() layer to its square bounds when a sibling (a dragged planet) is promoted, which
   showed up as a square halo. A gradient composites as the circle it is drawn as. closest-side
   fades to transparent at the inscribed circle, so the box corners never carry colour. */
.orbit .blob{left:0;top:0;width:100%;height:100%;opacity:.6;
  background:radial-gradient(circle closest-side,var(--peri-300) 0%,var(--peri-300) 52%,rgba(160,174,233,0) 100%)}
.orbit .disc{background:rgba(255,255,255,.01);box-shadow:0 calc(var(--u)*-40) calc(var(--u)*60) rgba(166,181,214,.5)}
.orbit .d3{left:18.6%;top:18.4%;width:63%;height:63.2%}
.orbit .d2{left:25.5%;top:25.3%;width:49.2%;height:49.4%}
.orbit .d1{left:32%;top:31.8%;width:36.2%;height:36.4%}
.orbit .glow{left:16.5%;top:38.1%;width:68%;height:68%;opacity:.9;
  background:radial-gradient(circle closest-side,var(--blush) 0%,var(--blush) 38%,rgba(254,247,249,0) 100%)}
.orbit .mark{left:42.3%;top:42.3%;width:15.3%;height:15.3%;border-radius:0;color:var(--pink)}
.orbit .av{
  width:calc(var(--s) * 100% / 522);height:auto;aspect-ratio:1;object-fit:cover;
  left:calc((var(--x) + 130) * 100% / 522);top:calc((var(--y) + 140) * 100% / 522);
  box-shadow:var(--shadow-avatar);border:2px solid var(--white);
}
.hero .note{
  /* z:2 — above the orbit rings/glow/centre-O (z<=1), below the faces (planets, z:3),
     so avatars pass over the handwriting while the orbit background stays behind it. */
  grid-area:orbit;align-self:end;justify-self:end;position:relative;z-index:2;
  margin-bottom:clamp(0px,3vw,32px);transform:rotate(-6deg);
}
.hand{font:italic 500 clamp(20px,2vw,26px)/1.15 var(--serif);color:var(--pink-ink);font-variation-settings:"opsz" 72,"WONK" 1}

/* ---------- Board (letter · counter · form) ---------- */
.board{
  grid-area:board;display:grid;gap:var(--board-gap);align-items:stretch;
  grid-template-columns:repeat(2,minmax(0,1fr));
}
/* Panels sit in two rows so each pair shares a height: the letter beside the petition,
   "a human internet and AI" beside the example card. The column wrappers step aside for this. */
.board > .stack{display:contents}
.board .msg{grid-column:1;grid-row:1}
.board .sign{grid-column:2;grid-row:1}
/* Deep-link target (#sign): leave a little breathing room above the form when jumped to. */
#sign{scroll-margin-top:24px}
.board .pitch{grid-column:1;grid-row:2}
.board #cardWrap{grid-column:2;grid-row:2}
.msg,.pitch,.sign,.panel{background:var(--white);border-radius:var(--r-card);box-shadow:var(--shadow-card)}
.msg,.pitch,.sign{padding:clamp(24px,2.6vw,36px)}
.board h2{font:600 26px/36px var(--serif)!important;letter-spacing:0;text-transform:none}
.board h2::first-letter{text-transform:uppercase}

.msg blockquote{margin:16px 0 0;padding:0}
.msg blockquote p{font:400 16px/24px var(--sans)}
.msg blockquote p + p{margin-top:12px}
.msg blockquote p.small{font:400 14px/21px var(--sans)}
.sig{display:inline-block;margin:20px 0 .2rem;font:600 2.2rem/1 var(--hand);color:var(--pink-deep);transform:rotate(-4deg)}
.msg .who{margin-top:16px;font:900 16px/22px var(--sans)}
.msg .role{font:400 13px/19px var(--sans);color:var(--ink-2)}
.more,.go{
  display:inline-flex;align-items:center;gap:6px;margin-top:20px;
  font:600 15px/1 var(--sans);color:var(--pink-ink);text-decoration:none;
}
.more:hover,.item:hover .go{text-decoration:underline;text-underline-offset:4px}

.tally{margin:20px 0 24px;padding:20px 0 24px;border-top:1px solid var(--peri-50);border-bottom:1px solid var(--peri-50)}
.stack{display:flex;flex-direction:column;gap:24px;min-width:0}
.pitch p{margin-top:12px;font:400 15px/22px var(--sans);color:var(--ink)}
.live{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--sans);color:var(--ink-2)}
.digits{
  position:relative;display:flex;gap:.03em;margin:1.1rem 0 .3rem;max-width:100%;
  font:700 clamp(2.2rem,4.4vw,3.3rem)/1 var(--num);letter-spacing:0;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,#B2166F,#E94FB5);-webkit-background-clip:text;background-clip:text;color:transparent;
}
/* Each digit carries its own slice of the gradient (set up by alignDigits in index.html): WebKit
   does not paint an animating child through the parent's background-clip:text, so with the
   gradient only on .digits a bumping digit was invisible on iPhone until its animation ended.
   The parent gradient stays as the fallback before the script has measured the digits. */
.digits .d{display:inline-block;min-width:.56em;text-align:center;
  background:linear-gradient(90deg,#B2166F,#E94FB5) var(--x,0) 0/var(--digits-w,100%) 100% no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent}
.digits .sep{min-width:auto}
.digits .bump{animation:bump .35s cubic-bezier(.2,.8,.2,1)}
/* The new digit is fully visible from the first frame; it only settles into place. */
@keyframes bump{0%{transform:translateY(.18em)}100%{transform:none}}
.stat-label{margin:0;font:700 .7rem/1 var(--num);letter-spacing:.3em;text-transform:uppercase;color:var(--pink-deep)}
/* Live pill and its pulsing dot, as in orkut-index-en.html; centred in the column with the label below */
.tally .live{display:flex;width:fit-content;margin:0 auto;gap:.5rem;padding:.4rem .9rem;border-radius:999px;background:#FBE6F3;color:var(--pink-deep);font:600 .82rem/1.2 var(--sans)}
.tally .live .dot{width:7px;height:7px;background:#E94FB5;box-shadow:0 0 0 0 rgba(233,79,181,.6);animation:pulse 1.8s ease-out infinite}
@keyframes pulse{to{box-shadow:0 0 0 10px rgba(233,79,181,0)}}
.tally .stat-label{text-align:center}
.tally .digits{justify-content:center}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:20px;background:var(--mist);border-radius:var(--r-card)}
.stats > div{padding:14px 12px;text-align:center}
.stats > div + div{border-left:1px solid var(--white)}
.stats b{display:block;font:900 20px/26px var(--sans)}
.stats span{font:400 13px/19px var(--sans);color:var(--ink-2)}
.tickrow{display:flex;align-items:center;gap:14px;margin-top:20px}
.avatars{display:flex;flex:none}
.avatars span{
  width:36px;height:36px;border-radius:50%;display:grid;place-items:center;
  font:700 13px/1 var(--sans);color:var(--white);background:var(--grad-action);
  border:2px solid var(--white);box-shadow:var(--shadow-avatar);
}
.avatars span:nth-child(2){background:var(--grad-mint)}
.avatars span:nth-child(3){background:linear-gradient(135deg,var(--peri-300),var(--peri-600))}
.avatars span + span{margin-left:-10px}
.ticker{font:400 14px/19px var(--sans)}
.ticker em{font-style:normal;font-weight:700}
.ticker .flag{width:16px;height:12px;border-radius:2px;vertical-align:-1px;margin-right:4px;object-fit:cover;box-shadow:0 0 0 1px rgba(34,32,58,.15)}
.tickrow small{display:block;font:400 12px/16px var(--sans);color:var(--ink-2);margin-top:2px}

/* Form */
.sign .sub{font:400 15px/22px var(--sans);color:var(--ink);margin-top:10px}
.sign .aside{font-size:13px;line-height:19px;color:var(--ink-2);margin-bottom:22px;text-align:center}
.sign .hint{font:400 12px/16px var(--sans);color:var(--ink-2);margin:-4px 0 14px;text-align:center}
.sign .hint em{font-style:normal}
.sign .sub.hint{margin-left:4px}
.hint.center{text-align:center;margin:14px 0 0!important}
.hp-field{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}

.field{
  position:relative;display:flex;align-items:center;gap:10px;
  min-height:56px;padding:0 20px;margin-bottom:12px;
  background:var(--mist);border-radius:var(--r-pill);
  box-shadow:inset 0 0 0 1.5px transparent;transition:box-shadow .15s,background .15s;
}
.field.field-error{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--pink),0 0 0 4px rgba(255,94,168,.15)}
.field > svg,.tel-number > svg{flex:none;width:20px;height:20px;color:var(--peri-600)}
.field input,.field select{
  flex:1;min-width:0;height:56px;border:0;background:transparent;outline:none;
  font:400 16px/22px var(--sans);color:var(--ink);
}
.field input::placeholder{color:var(--ink-2);opacity:1}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235b6cb0' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 0 center/10px}
.field select:invalid{color:var(--ink-2)}
.field :disabled{cursor:not-allowed}
/* Faded only while the field itself is switched off. (A plain :disabled also matched the greyed-out
   first option of the age, country and dial lists, so those fields stayed faded even when active.) */
.field:has(:is(input,select):disabled){opacity:.55}
/* Highlighted fields: a pink outline that pulses. It marks where the form starts (the age field,
   until an age is picked) and whichever field is being filled in. Only the outline pulses; the
   field itself stays still. */
.field:focus-within,.field:has(#age:invalid:not(:disabled)){background:var(--white)}
.field:focus-within::after,.field:has(#age:invalid:not(:disabled))::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--pink),0 0 0 4px rgba(255,94,168,.2);
  animation:field-pulse 1.8s ease-in-out infinite;
}
.field:focus-within > svg,.field:focus-within .tel-number > svg,.field:has(#age:invalid:not(:disabled)) > svg{color:var(--pink-ink)}
@keyframes field-pulse{50%{opacity:.25}}
#ageHint em{color:var(--pink-ink);font-style:normal;font-weight:500}
.field.tel{padding:0 0 0 18px;gap:0}
/* No flag in the dial any more — just "+code" + arrow — so it no longer reserves flag width. */
.field.tel #dial{flex:0 0 58px;padding-right:16px;background-position:right 5px center}
.tel-number{position:relative;flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:0 20px 0 16px;border-left:1.5px solid var(--white);height:36px}
.tel-number input{height:36px;width:100%}
.tel-number .ph{position:absolute;left:46px;pointer-events:none;color:var(--ink-2);font:400 16px/1 var(--sans)}
.tel-number .ph small{font-size:13px}
/* the "phone (optional)" prompt stays while the empty field is selected, and goes once a number is typed */
.tel-number input:not(:placeholder-shown) ~ .ph{display:none}
.field-suggestion{font:400 13px/19px var(--sans);color:var(--ink);margin:-4px 0 12px 20px}
.field-suggestion a,.field-suggestion button{background:none;border:0;padding:0;color:var(--violet);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:3px}

.optIn{display:flex;gap:12px;align-items:flex-start;margin:14px 4px 0;font:400 13px/19px var(--sans);color:var(--ink);cursor:pointer}
.optIn > div{display:flex;gap:12px;align-items:flex-start}
.optIn input{flex:none;width:18px;height:18px;margin:1px 0 0;accent-color:var(--violet)}
/* Once a consent row is revealed and still unticked, its box pulses like a highlighted field's outline. */
.optIn.is-open input:not(:checked):not(:disabled){border-radius:5px;animation:optin-pulse 1.8s ease-in-out infinite}
@keyframes optin-pulse{0%,100%{box-shadow:0 0 0 4px rgba(255,94,168,.3)}50%{box-shadow:0 0 0 4px rgba(255,94,168,.06)}}
#smsOptInRow,#emailOptInRow{display:none}
#smsOptInRow.is-open,#emailOptInRow.is-open{display:flex;animation:reveal .25s ease-out}
/* The name hint only appears once the name field is live (i.e. after an age is picked). */
.sign .field:has(#firstName:disabled) + .hint{display:none}
@keyframes reveal{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Action — the guide's .wc-action pill */
.btn{
  width:100%;min-height:64px;margin-top:22px;border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 16px 0 28px;border-radius:var(--r-pill);
  background:var(--grad-action);color:var(--white);
  font:600 16px/1 var(--sans);text-align:left;box-shadow:var(--shadow-action);
  transition:transform .15s,box-shadow .15s,filter .15s;
}
.btn::first-letter{text-transform:uppercase}
.btn:only-child,.btn:not(:has(span)){justify-content:center;padding:0 28px}
.btn > span{
  flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;
  background:rgba(255,255,255,.14);font:400 17px/1 var(--sans);
}
.btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 6px 20px rgba(103,61,217,.3)}
.btn:active:not(:disabled){transform:none}
.btn:disabled{cursor:not-allowed;filter:saturate(.35);opacity:.6}
#under18 .btn{margin-top:14px}
/* Submit — matches the "sign the petition" button in orkut-index-en.html */
#submitBtn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  width:100%;min-height:0;padding:1rem 1.4rem;border-radius:999px;
  background:linear-gradient(90deg,#E94FB5,#C61F87);color:#fff;
  font:600 1.05rem/1.6 var(--num);text-align:center;
  box-shadow:0 10px 24px rgba(198,31,135,.28);
  transition:transform .15s ease,background .15s ease,filter .15s ease;
}
#submitBtn > span{display:inline;width:auto;height:auto;border-radius:0;background:none;font:inherit}
#submitBtn:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 10px 24px rgba(198,31,135,.28)}
#submitBtn:disabled{filter:none;opacity:.5}

.msgbox{background:var(--mist);border-radius:var(--r-card);padding:16px 18px;margin-top:12px}
.msgbox .k{color:var(--ink-2);margin-bottom:8px}
.msgbox p:last-child{font:400 15px/22px var(--sans)}

.signing{margin-top:22px;text-align:center;font:600 15px/1 var(--sans);color:var(--violet)}
.toast{margin-top:12px;font:600 14px/19px var(--sans);color:var(--pink-ink);text-align:center}
.toast:empty{display:none}
.perk{
  display:flex;align-items:center;gap:12px;margin-top:20px;padding:12px 16px;
  background:var(--mist);border-radius:var(--r-card);font:500 13px/19px var(--sans);
}
.perk i{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:rgba(104,63,217,.16);color:var(--violet)}
.perk i svg{width:16px;height:16px}
.safe{margin-top:18px;text-align:center;font:400 12px/16px var(--sans);color:var(--ink-2)}
.safe a{color:var(--ink-2);text-underline-offset:3px}

/* ---------- Map + supporter card ---------- */
.mapsec{padding:0 0 var(--board-gap)}
.panel{padding:clamp(24px,3vw,40px)}
.kicker{color:var(--ink-2);margin-bottom:14px}
.mapsec h2,.cta h2{font:600 clamp(34px,3.6vw,48px)/1.08 var(--serif);letter-spacing:-.005em;margin-bottom:14px;text-wrap:balance;font-variation-settings:"opsz" 144}
.quiet{color:var(--ink-2);font-size:16px!important;line-height:22px}

.mapwrap{position:relative;margin:28px 0 8px}
#worldmap{display:block;width:100%;height:auto}
#worldmap path{stroke:var(--white);stroke-width:.5;transition:fill .2s,opacity .2s}
#worldmap .base{fill:var(--peri-100)}
#worldmap .top{fill:var(--violet)}
#worldmap .top[style*="237, 37, 144"]{fill:var(--pink)!important}
#worldmap .top[style*="144, 120, 236"]{fill:var(--violet)!important}
#worldmap .top:hover{opacity:.8}
.tip{
  position:absolute;z-index:4;pointer-events:none;white-space:nowrap;
  background:var(--ink);color:var(--white);font:500 12px/1 var(--sans);
  padding:8px 12px;border-radius:var(--r-pill);box-shadow:var(--shadow-action);
}
.tip:empty{display:none}
/* The country name + rank on top, the share below; the flag is a small inline chip (without a size
   it renders at the SVG's intrinsic size and blows the tooltip up). */
.tip strong{display:block;margin-bottom:3px;font:700 14px/1.2 var(--sans)}
.tip .flag{width:20px;height:15px;border-radius:3px;object-fit:cover;vertical-align:-2px;margin-right:6px}
.legend{display:flex;align-items:center;gap:10px;margin-top:14px;font:400 12px/1 var(--sans);color:var(--ink-2)}
.legend i{flex:0 1 160px;height:8px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--peri-100),var(--violet) 70%,var(--pink))}

.side{margin-top:28px}
/* Two columns filled top-to-bottom then across: 1-5 down the left, 6-10 down the right
   (grid-auto-flow:column over 5 explicit rows), not 1,3,5,.. / 2,4,6,.. */
.toplist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,auto);grid-auto-flow:column;column-gap:28px}
.toplist li{display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--peri-50);font:400 14px/19px var(--sans)}
.toplist .n{font:900 12px/1 var(--sans);color:var(--peri-200)}
.toplist li > span:nth-child(2){display:flex;align-items:center;gap:8px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toplist .sw{flex:none;width:8px;height:8px;border-radius:50%}
.toplist .sw[style*="237, 37, 144"]{background:var(--pink)!important}
.toplist .sw[style*="144, 120, 236"]{background:var(--violet)!important}
.toplist .flag{flex:none;width:18px;height:13px;border-radius:2px;object-fit:cover}
.toplist .pct{font:600 14px/1 var(--sans);font-variant-numeric:tabular-nums}
.mapcta p{margin-top:16px;font:400 12px/16px var(--sans);color:var(--ink-2)}

.card-wrap{display:flex;flex-direction:column}
.stack .card-wrap{padding:clamp(24px,2.6vw,36px)}
.card-frame{
  position:relative;flex:1;display:grid;place-items:center;overflow:hidden;
  min-height:420px;padding:clamp(24px,4vw,48px) clamp(5px,1.3vw,24px);border-radius:var(--r-card);
  background:
    radial-gradient(55% 45% at 50% 72%,var(--blush) 0,rgba(254,247,249,0) 100%),
    radial-gradient(70% 70% at 50% 45%,rgba(160,174,233,.75) 0,rgba(160,174,233,0) 100%),
    var(--mist);
}
.card-frame::before,.card-frame::after{
  content:"";position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);
  background:rgba(255,255,255,.01);box-shadow:0 -30px 50px rgba(166,181,214,.5);
}
.card-frame::before{width:118%;aspect-ratio:1}
.card-frame::after{width:88%;aspect-ratio:1}
.supporter-card{
  position:relative;z-index:1;width:100%;max-width:320px;background:var(--white);
  border-radius:24px;padding:24px;box-shadow:0 16px 48px rgba(91,108,176,.25);
  container-type:inline-size;
}
.supporter-card .row{display:flex;align-items:center;justify-content:space-between}
.supporter-card .mark{height:22px;width:auto;color:var(--pink);display:block}
.supporter-card .label{padding:7px 12px;border-radius:var(--r-pill);background:rgba(255,94,168,.12);color:var(--pink-ink)}
.supporter-card .front{margin-top:22px;font:600 26px/32px var(--serif);text-wrap:balance}
.supporter-card .support{margin-top:10px;font:400 13px/19px var(--sans);color:var(--ink-2)}
.supporter-card .meta{margin-top:20px;padding-top:18px;border-top:1px solid var(--peri-50)}
/* The name spans the full width above; the QR sits lower beside country + code, so a long
   name wraps over the top rather than crowding the QR. */
.supporter-card .meta-row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px 16px;margin-top:12px}
.supporter-card .k{font-size:10px;color:var(--ink-3);margin-top:12px}
.supporter-card .k:first-child{margin-top:0}
.supporter-card .who,.supporter-card .where{font:900 16px/22px var(--sans);margin-top:4px}
.supporter-card .who{overflow-wrap:anywhere}
.supporter-card .where{font-weight:500}
/* The flag beside the country on the card: small, like the flags in the ticker and the top-10 list */
.supporter-card .where .flag{display:inline-block;width:18px;height:13px;border-radius:2px;object-fit:cover;vertical-align:-1px;margin-right:6px;box-shadow:0 0 0 1px rgba(34,32,58,.15)}
/* The code shrinks with the card (container units) so it + the QR fit side-by-side down to
   narrower cards before stacking; nowrap keeps it on one line. */
/* The code eases down ~2px on smaller screens (15px → 13px floor), still one line. */
.supporter-card .code{margin-top:4px;font:700 clamp(13px,4.7cqi,15px)/1 var(--sans);letter-spacing:.06em;color:var(--violet);font-variant-numeric:tabular-nums;white-space:nowrap}
.qr-cell{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
/* As the card tightens, pull the QR into the right padding to buy width; keep it as-is at full size. */
@container (max-width:308px){.qr-cell{margin-right:-12px}}
/* max-width:none overrides the global svg{max-width:100%} so the QR keeps its 88px and never shrinks. */
#qr{display:block;width:88px;height:88px;max-width:none;padding:6px;background:var(--white);border-radius:10px;box-shadow:inset 0 0 0 1px var(--peri-50)}
#qr g{fill:var(--ink)}
.qr-link{display:block;margin-top:6px;font:500 11px/1 var(--sans);color:var(--ink-2);text-decoration:none}
.since{margin-top:16px;font:400 10px/15px var(--sans);color:var(--ink-3)}

/* ---------- Share band — the guide's "Background Art B1" ---------- */
.band{padding:0 0 var(--board-gap)}
.panel.cta{
  position:relative;overflow:hidden;color:var(--white);
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);align-items:center;gap:32px;
  padding:clamp(32px,5vw,72px);
  /* The wave is the design file's Background Art; the dark wash keeps the copy readable over it. */
  background:
    linear-gradient(90deg,rgba(26,8,48,.92) 0%,rgba(26,8,48,.7) 45%,rgba(26,8,48,.1) 100%),
    url(/assets/images/plum-globe.webp) center 60%/cover no-repeat,
    #2a0a4a;
  box-shadow:0 20px 60px rgba(103,61,217,.25);
}
.panel.cta > div{position:relative;z-index:1}
.badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 8px;border-radius:var(--r-pill);background:rgba(255,255,255,.12);font:500 13px/1 var(--sans);margin-bottom:24px}
.badge img{width:22px;height:auto}
/* A filled heart that beats like a real one: a strong beat, a softer echo, then a rest. */
.badge .beat{flex:none;width:22px;height:22px;fill:var(--pink);filter:drop-shadow(0 0 6px rgba(255,94,168,.55));
  transform-origin:50% 55%;animation:heartbeat 1.1s ease-in-out infinite}
@keyframes heartbeat{0%,40%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1.02)}32%{transform:scale(1.14)}}
.cta h2{color:var(--white);max-width:14ch}
.cta .copy{font:400 17px/25px var(--sans);color:rgba(255,255,255,.82);max-width:36rem}
.cta .hand{position:relative;z-index:1;color:#ffb8d8;justify-self:end;transform:rotate(-4deg);font-size:clamp(33px,3.45vw,45px);line-height:1.1}
/* Keep each of the note's three lines whole: on wide screens the note's column sizes to fit it. */
@media (min-width:1101px){.panel.cta{grid-template-columns:minmax(0,1fr) auto}.cta .hand{white-space:nowrap}}
.cta .people{display:none}
.cta .btn{width:auto;max-width:100%;min-height:56px;margin-top:28px;display:inline-flex;gap:24px}
.cta .people g{fill:var(--peri-300)}

/* ---------- Features ---------- */
.features{padding:0 0 18px}
/* Back to top — same treatment as the other pages. */
.site-foot{padding:4px 0 40px}
.site-foot .backlink{margin:0;text-align:left;font:600 14px/1 var(--sans)}
.site-foot .backlink a{color:var(--pink-ink);text-decoration:none;display:inline-flex;align-items:center;gap:6px;padding:15px 12px;margin:-15px -12px}
.site-foot .backlink a:hover{text-decoration:underline;text-underline-offset:4px}
.features .panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:8px}
.item{display:flex;gap:24px;align-items:center;padding:clamp(6px,0.8vw,9px) clamp(10px,1.3vw,14px);border-radius:12px;text-decoration:none;color:inherit;transition:background .15s}
.item:hover{background:var(--mist)}
.item i{flex:none;display:grid;place-items:end center;width:112px;height:112px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 70%,var(--blush),var(--peri-100))}
.item i img{width:92%;height:auto}
.item h3{font:800 22px/28px var(--sans);letter-spacing:-.01em}
.item p{margin-top:6px;font:400 15px/22px var(--sans);color:var(--ink-2)}
.item .go{margin-top:12px}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
}
@media (max-width:860px){
  .hero .shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"orbit" "top" "board";row-gap:16px}
  .orbit{--w:min(374px,90%)}
  .hero .note{margin-top:0;margin-right:8px}
  .hero h1{max-width:14ch}
  .board{grid-template-columns:minmax(0,1fr)}
  .board .msg,.board .sign,.board .pitch,.board #cardWrap{grid-column:1;grid-row:auto}
  .board .sign{order:-2}
  .board #cardWrap{order:-1}
  .panel.cta{grid-template-columns:minmax(0,1fr)}
  .cta .hand{justify-self:start}
  .features .panel{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .toplist{grid-template-columns:1fr;grid-template-rows:none;grid-auto-flow:row}
  .item{flex-direction:column;align-items:flex-start;gap:16px}
  .item i{width:88px;height:88px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* From index-feeling.html: headline stroke, letter tape and stamp, pink labels */
.hero h1::after{
  content:"";display:block;width:min(280px,62%);aspect-ratio:13/1;margin-top:14px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 20'%3E%3Cpath d='M3 13c40-9 82-12 124-8s86 6 130-3' fill='none' stroke='%23ff5ea8' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat left center/contain;
}
.msg{position:relative}
.msg::before{
  content:"";position:absolute;top:-11px;left:50%;width:108px;height:24px;
  transform:translateX(-50%) rotate(-3deg);border-radius:3px;
  background:rgba(255,94,168,.22);box-shadow:0 1px 2px rgba(33,17,12,.06);
}
.msg .stamp{position:absolute;top:18px;right:18px;width:54px;height:62px;transform:rotate(7deg);filter:drop-shadow(0 2px 3px rgba(33,17,12,.12))}
.msg h2{padding-right:64px}
.tag,.mapsec .kicker{color:var(--pink-ink)}

/* Feature images: a colour wheel in the brand colours turns slowly behind each illustration,
   so the circle keeps shifting colour. The soft centre keeps the illustration easy to see. */
.item i{position:relative;isolation:isolate;background:var(--blush)}
.item i::before{
  content:"";position:absolute;inset:-40%;z-index:-2;
  /* the page's own palette: the violet-to-pink of the buttons, softened by periwinkle and blush */
  background:conic-gradient(from 0deg,var(--pink),var(--violet),var(--peri-300),var(--blush),var(--pink));
  filter:blur(10px) saturate(1.1);animation:orbit-hue 9s linear infinite;
}
.item i::after{
  content:"";position:absolute;inset:0;z-index:-1;border-radius:50%;
  background:radial-gradient(circle at 50% 62%,rgba(255,255,255,.7) 0,rgba(255,255,255,.25) 45%,rgba(255,255,255,0) 72%);
}
.item + .item i::before{animation-duration:12s;animation-direction:reverse}
@keyframes orbit-hue{to{transform:rotate(1turn)}}

/* ---------- "a human internet and AI": AI coordinates, humans connect ---------- */
.pitch{display:flex;flex-direction:column}
.bond{
  position:relative;flex:1;min-height:250px;margin-top:22px;border-radius:14px;overflow:hidden;
  background:
    radial-gradient(34% 44% at 50% 62%,#fff 0,rgba(255,255,255,0) 100%),
    radial-gradient(70% 80% at 12% 105%,rgba(255,94,168,.20),rgba(255,94,168,0) 70%),
    radial-gradient(70% 80% at 90% -5%,rgba(160,174,233,.55),rgba(160,174,233,0) 70%),
    var(--blush);
}
.bond::before,.bond::after{content:"";position:absolute;left:50%;top:62%;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 -18px 40px rgba(166,181,214,.35);background:rgba(255,255,255,.25)}
.bond::before{width:min(92%,420px);aspect-ratio:1}
.bond::after{width:min(62%,280px);aspect-ratio:1}
.bond-lines{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible}
.bond-lines path{fill:none;vector-effect:non-scaling-stroke;stroke-linecap:round}
.bond-lines .ai-link{stroke:var(--violet);stroke-width:2;stroke-dasharray:2 7;opacity:.7;animation:ai-flow 1.6s linear infinite}
.bond-lines .human-link{stroke:var(--pink);stroke-width:3;opacity:.55}
@keyframes ai-flow{to{stroke-dashoffset:-18}}
.ai-node{position:absolute;left:50%;top:21.7%;z-index:3;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px 7px 9px;border-radius:var(--r-pill);background:var(--grad-action);color:var(--white);font:600 12px/1 var(--sans);white-space:nowrap;
  box-shadow:0 6px 18px rgba(103,61,217,.35)}
.ai-node svg{width:15px;height:15px;fill:currentColor;animation:twinkle 2.4s ease-in-out infinite}
@keyframes twinkle{50%{transform:scale(.8) rotate(20deg);opacity:.75}}
.person{position:absolute;z-index:2;top:56.7%;width:clamp(72px,24%,104px);aspect-ratio:1;border-radius:50%;object-fit:cover;
  transform:translate(-50%,-50%);border:4px solid var(--white);
  box-shadow:0 0 0 3px rgba(255,94,168,.35),0 10px 24px rgba(103,61,217,.18);animation:float 5s ease-in-out infinite}
.person.p1{left:28%}
.person.p2{left:72%;box-shadow:0 0 0 3px rgba(103,61,217,.3),0 10px 24px rgba(103,61,217,.18);animation-delay:-2.5s}
@keyframes float{50%{transform:translate(-50%,calc(-50% - 6px))}}
.bond-mark{position:absolute;left:50%;top:66%;z-index:3;width:38px;height:38px;transform:translate(-50%,-50%);display:grid;place-items:center;
  border-radius:50%;background:var(--white);box-shadow:0 4px 14px rgba(255,94,168,.35)}
.bond-mark svg{width:24px;height:24px;fill:var(--pink)}
.bond-mark::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2px var(--pink);animation:ripple 2.2s ease-out infinite}
@keyframes ripple{from{transform:scale(1);opacity:.7}to{transform:scale(2.2);opacity:0}}
.human-tag{position:absolute;left:50%;top:84%;z-index:3;transform:translate(-50%,-50%);padding:6px 12px;border-radius:var(--r-pill);
  background:var(--white);color:var(--pink-ink);font:600 12px/1 var(--sans);white-space:nowrap;box-shadow:var(--shadow-card)}
.ai-helps{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:14px 0 0;padding:0;list-style:none}
.ai-helps li{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 6px;border-radius:var(--r-pill);background:var(--mist);font:500 13px/1 var(--sans);color:var(--ink)}
.ai-helps i{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--white);color:var(--violet)}
.ai-helps svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- "a message from Orkut": as much of the letter as the panel has room for ---------- */
.msg{display:flex;flex-direction:column}
.msg h2{flex:none}
/* The window fills whatever height the petition beside it gives the row; the letter inside is
   taken out of the flow so it never makes the row taller, and fades out where the room runs out. */
.letter-window{position:relative;flex:1;min-height:320px;margin-top:16px;overflow:hidden}
.letter{position:absolute;inset:0 0 auto 0}
.letter p{font:400 16px/25px var(--sans);margin:0 0 14px}
.letter-window::after{content:"";position:absolute;left:0;right:0;bottom:0;height:120px;pointer-events:none;
  background:linear-gradient(to bottom,rgba(255,255,255,0),var(--white) 88%)}
.msg .sig{flex:none;align-self:flex-start;margin-top:4px}
.msg .who,.msg .role,.msg .more{flex:none}
.msg .more{align-self:flex-start}
@media (max-width:860px){.letter-window{flex:none;height:560px}}

/* ---------- Hero orbit: your universe. You are the O at the centre; your people orbit you.
   Close friends travel the inner orbit, friends the middle one, new acquaintances the far one,
   each ring at its own speed, like planets. Faces stay upright as they travel. ---------- */
.orbit .path{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.orbit .p-close{width:34%;aspect-ratio:1;border:1px solid rgba(255,94,168,.28)}
.orbit .p-friends{width:54%;aspect-ratio:1;border:1px solid rgba(103,61,217,.18)}
.orbit .p-new{width:78%;aspect-ratio:1;border:1px dashed rgba(103,61,217,.22)}
/* Planets are placed by the script below: each keeps travelling round you, and now and then
   moves one orbit in or out. Its size and ring colour follow the orbit it is on. */
.orbit .planet{position:absolute;left:50%;top:50%;width:0;height:0;z-index:3;will-change:transform}
.orbit .planet img{
  position:absolute;left:0;top:0;max-width:none;border-radius:50%;object-fit:cover;
  transform:translate(-50%,-50%);border:2px solid var(--white);
  transition:width 1.2s ease,height 1.2s ease,box-shadow 1.2s ease,opacity 1.2s ease;
}
.orbit .tier-close img{width:9.6cqw;height:9.6cqw;box-shadow:0 0 0 2px var(--pink),0 6px 16px rgba(255,94,168,.35)}
.orbit .tier-friends img{width:7.2cqw;height:7.2cqw;box-shadow:0 0 0 2px rgba(103,61,217,.35),var(--shadow-avatar)}
.orbit .tier-new img{width:5cqw;height:5cqw;box-shadow:var(--shadow-avatar);opacity:.9}
/* You, at the centre: the O breathes, and a soft ring goes out from it */
.orbit .mark{z-index:1;animation:you-breathe 4s ease-in-out infinite}
@keyframes you-breathe{50%{transform:scale(1.06)}}
.orbit .you-pulse{position:absolute;left:50%;top:50%;width:15.3%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%);
  box-shadow:0 0 0 2px rgba(255,94,168,.5);animation:you-ripple 4s ease-out infinite;pointer-events:none;z-index:1}
@keyframes you-ripple{from{transform:translate(-50%,-50%) scale(1);opacity:.8}to{transform:translate(-50%,-50%) scale(2.6);opacity:0}}

/* Drag and drop between orbits */
.orbit .planet img{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
.orbit .planet.dragging{z-index:6}
.orbit .planet.dragging img{cursor:grabbing;transform:translate(-50%,-50%) scale(1.15);box-shadow:0 0 0 3px var(--white),0 12px 28px rgba(103,61,217,.35)}
.orbit.is-dragging .path{transition:border-color .2s,border-width .2s}
.orbit .p-close.is-target{border:2px solid var(--pink)}
.orbit .p-friends.is-target{border:2px solid var(--violet)}
.orbit .p-new.is-target{border:2px dashed var(--violet)}
/* The "People belong here" note beside the orbit, 10% larger along with it */
.hero .note{font-size:clamp(22px,2.2vw,28.6px)}
/* Half the space under the navigation: the hero's top padding is halved above, and the orbit is
   drawn a little higher, since its soft glow already leaves room above its outer ring. */
.orbit{margin-top:calc(-.055 * var(--w));margin-bottom:calc(-.055 * var(--w))}
/* Ken Burns: each picture drifts slowly closer and a little sideways, then back */
.item i img{transform-origin:50% 100%;animation:ken-burns 16s ease-in-out infinite alternate;will-change:transform}
/* "waving" (about) sits smaller in its circle than "head", so more of the figure shows. */
.item + .item i img{width:72%;animation-duration:19s;animation-delay:-6s;transform-origin:45% 100%}
@keyframes ken-burns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.14) translate(-3%,-2%)}}
/* Highlighted fields: their prompt ("select your age", "your name", "select your country", "email",
   "phone (optional)") turns solid violet, so it stands out against the pink outline. */
.field:focus-within input::placeholder,
.field:focus-within select:invalid,
.field:has(#age:invalid:not(:disabled)) select,
.field:focus-within .tel-number .ph{color:var(--violet);opacity:1}

/* Postage stamp on the message panel — colored via tokens (no hardcoded hexes). */
:root{--pink-50:#ffe3ef}
.msg .stamp .pt-frame{fill:var(--white)}
.msg .stamp .pt-panel{fill:var(--pink-50)}
.msg .stamp .pt-ring{stroke:var(--pink)}
.msg .stamp .pt-heart{fill:var(--violet)}