:root{
    --bg:#F3F0FB; --card:#FFFFFF; --card-2:#EAE3F8; --text:#1B1740; --muted:#69618E; --line:rgba(27,23,64,0.16);
    --pink:#FF3E8E; --pink-text:#B80F62; --mint-text:#0A6B59; --on-pink:#1A0A14;
    --glow-a:rgba(255,62,142,0.18); --glow-b:rgba(139,123,255,0.22);
    --shadow:0 1px 2px rgba(27,23,64,0.08), 0 14px 34px rgba(27,23,64,0.10);
    --bezel:#1B1740;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0B0A1F; --card:#171533; --card-2:#1F1C42; --text:#F5F1FF; --muted:#9C93C9; --line:rgba(245,241,255,0.10);
      --pink-text:#FF3E8E; --mint-text:#35E6C4;
      --glow-a:rgba(255,62,142,0.20); --glow-b:rgba(139,123,255,0.20);
      --shadow:0 18px 44px rgba(0,0,0,0.45);
      --bezel:#05040f;
    }
  }
  :root[data-theme="dark"]{
    --bg:#0B0A1F; --card:#171533; --card-2:#1F1C42; --text:#F5F1FF; --muted:#9C93C9; --line:rgba(245,241,255,0.10);
    --pink-text:#FF3E8E; --mint-text:#35E6C4;
    --glow-a:rgba(255,62,142,0.20); --glow-b:rgba(139,123,255,0.20);
    --shadow:0 18px 44px rgba(0,0,0,0.45);
    --bezel:#05040f;
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth; scroll-padding-top:76px;}
  body{margin:0; background:var(--bg); color:var(--text); font-family:'Inter',sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased;}
  img{max-width:100%; display:block;}
  a{color:inherit;}
  h1,h2,h3{font-family:'Baloo 2',sans-serif; margin:0; text-wrap:balance; line-height:1.12;}
  p{margin:0;}
  .wrap{max-width:1120px; margin:0 auto; padding-inline:20px;}
  :focus-visible{outline:2px solid var(--pink); outline-offset:3px; border-radius:6px;}
  .skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--pink); color:#0B0A1F; font-weight:700; padding:12px 18px; border-radius:10px; text-decoration:none;}
  .skip:focus{top:12px;}
  main:focus{outline:none;}

  /* buttons */
  .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 22px; border-radius:999px; font-weight:700; font-size:15px; text-decoration:none; border:1.5px solid transparent; transition:transform .12s ease, background .2s ease, border-color .2s ease;}
  .btn:active{transform:scale(0.97);}
  .btn svg{width:18px; height:18px;}
  .btn.primary{background:var(--pink); color:var(--on-pink); box-shadow:0 8px 24px rgba(255,62,142,0.30);}
  .btn.primary:hover{background:#ff5a9f;}
  .btn.ghost{background:transparent; color:var(--text); border-color:var(--line);}
  .btn.ghost:hover{border-color:var(--muted);}

  /* Heritage Day banner */
  .heritage-banner{
    display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap;
    background:rgba(53,230,196,0.12); border-bottom:1px solid rgba(53,230,196,0.25);
    color:var(--text); text-decoration:none; font-size:13.5px; font-weight:600;
    padding:10px 18px; text-align:center;
  }
  .heritage-banner span{font-weight:800; color:var(--mint-text);}
  .heritage-banner svg{width:15px; height:15px; flex:0 0 auto;}
  .heritage-banner:hover{background:rgba(53,230,196,0.18);}

  /* top bar */
  .bar{position:sticky; top:0; z-index:20; background:color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid var(--line);}
  .bar .wrap{display:flex; align-items:center; gap:18px; min-height:64px;}
  .brand{display:flex; align-items:center; gap:10px; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:24px; text-decoration:none;}
  .brand svg{width:30px; height:30px;}
  .brand .dot{color:var(--pink);}
  .bar nav{display:flex; gap:22px; margin-left:auto; align-items:center;}
  .bar nav a{font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none;}
  .bar nav a:hover{color:var(--text);}
  .bar .btn{min-height:42px; padding:0 18px; font-size:14px; box-shadow:none;}

  /* hero */
  .hero{position:relative; overflow:hidden; padding-block:72px 84px;}
  .hero::before{content:''; position:absolute; inset:-10% -10% auto auto; width:70%; height:120%; background:radial-gradient(closest-side, var(--glow-b), transparent 70%); pointer-events:none;}
  .hero::after{content:''; position:absolute; left:-15%; top:20%; width:60%; height:90%; background:radial-gradient(closest-side, var(--glow-a), transparent 70%); pointer-events:none;}
  .hero .wrap{position:relative; z-index:1; display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center;}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--mint-text); margin-bottom:18px;}
  .eyebrow i{width:8px; height:8px; border-radius:50%; background:#35E6C4;}
  h1{font-size:clamp(40px, 6vw, 68px); font-weight:800; letter-spacing:-0.015em;}
  h1 em{font-style:normal; color:var(--pink);}
  .lede{font-size:19px; color:var(--muted); max-width:46ch; margin-top:20px;}
  .cta-row{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px;}
  .fine{font-size:13.5px; color:var(--muted); margin-top:16px;}
  .cats{list-style:none; padding:0; margin:34px 0 0; display:flex; flex-wrap:wrap; gap:8px;}
  .cats li{display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:999px; background:var(--card); border:1px solid var(--line); font-size:13px; font-weight:600;}
  .cats i{width:10px; height:10px; border-radius:50%;}

  .phones{position:relative; width:100%; max-width:470px; margin-inline:auto; aspect-ratio:1/1.12;}
  .phone{position:absolute; border-radius:34px; background:var(--bezel); padding:8px; box-shadow:var(--shadow);}
  .phone img{border-radius:27px; width:100%; height:auto; aspect-ratio:390/844; object-fit:cover; object-position:top;}
  .phone.a{left:0; top:0; width:62%; transform:rotate(-3deg);}
  .phone.b{right:0; bottom:0; width:54%; transform:rotate(4deg);}

  /* sections */
  section{padding-block:84px;}
  .head{max-width:640px; margin-bottom:38px;}
  .head .kicker{font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--pink-text); margin-bottom:12px;}
  h2{font-size:clamp(30px, 4.2vw, 46px); font-weight:800; letter-spacing:-0.01em;}
  .head p{color:var(--muted); font-size:17px; margin-top:14px;}

  /* pins of the week */
  #pins{background:var(--card-2);}
  .pins-top{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:34px;}
  .pins-top .head{margin:0;}
  .week{font-size:14px; font-weight:600; color:var(--muted); background:var(--card); border:1px solid var(--line); border-radius:999px; padding:9px 16px;}
  .pin-grid{display:grid; grid-template-columns:repeat(2, 1fr); gap:20px;}
  .pin-card{display:grid; grid-template-columns:180px 1fr; gap:22px; background:var(--card); border:1px solid var(--line); border-radius:22px; padding:16px; box-shadow:var(--shadow);}
  .pin-img{width:180px; height:180px; border-radius:16px; object-fit:cover; background:var(--card-2);}
  .pin-card.ended{opacity:0.74;}
  .pin-img.ended{filter:grayscale(0.5) blur(1.5px);}
  .passed-badge{font-size:12px; font-weight:700; color:var(--muted); background:var(--card-2); padding:4px 11px; border-radius:999px;}
  .pin-top{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;}
  .cat{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--muted);}
  .cat i{width:10px; height:10px; border-radius:50%;}
  .price{font-size:13px; font-weight:700; color:var(--mint-text);}
  .pin-body h3{font-size:22px; font-weight:700; margin-top:8px;}
  .pin-facts{margin:12px 0 0; display:grid; gap:6px;}
  .pin-facts div{display:grid; grid-template-columns:52px 1fr; gap:8px; font-size:14px;}
  .pin-facts dt{color:var(--muted); font-weight:600;}
  .pin-facts dd{margin:0; font-weight:600;}
  .pin-why{font-size:14.5px; color:var(--muted); margin-top:12px; max-width:60ch;}
  .pin-actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px;}
  .pin-actions .btn{min-height:44px; padding:0 18px; font-size:14px;}
  .note{font-size:13px; color:var(--muted); margin-top:22px;}

  /* how it works */
  .how{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
  .steps{list-style:none; padding:0; margin:0; counter-reset:s; display:grid; gap:22px;}
  .steps li{counter-increment:s; display:grid; grid-template-columns:44px 1fr; gap:16px; align-items:start;}
  .steps li::before{content:counter(s); width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-family:'Baloo 2',sans-serif; font-weight:800; font-size:20px; background:var(--pink); color:var(--on-pink);}
  .steps h3{font-size:20px; font-weight:700;}
  .steps p{color:var(--muted); font-size:15.5px; margin-top:4px;}
  .duo{position:relative; display:flex; gap:16px; justify-content:center; align-items:flex-start;}
  .duo .phone{position:relative; width:47%;}
  .duo .phone:nth-child(2){margin-top:44px;}

  /* features */
  .features{display:grid; grid-template-columns:repeat(3, 1fr); gap:16px;}
  .feature{background:var(--card); border:1px solid var(--line); border-radius:18px; padding:22px;}
  .feature .ic{width:44px; height:44px; border-radius:12px; background:var(--card-2); display:flex; align-items:center; justify-content:center; color:var(--pink-text);}
  .feature .ic svg{width:22px; height:22px;}
  .feature h3{font-size:19px; font-weight:700; margin-top:16px;}
  .feature p{color:var(--muted); font-size:15px; margin-top:6px;}

  /* testers */
  .testers{background:linear-gradient(135deg, #2A1250 0%, #14103A 55%, #0B0A1F 100%); color:#F5F1FF; border-radius:28px; padding:48px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:36px; align-items:center; position:relative; overflow:hidden;}
  .testers::after{content:''; position:absolute; right:-80px; top:-80px; width:320px; height:320px; background:radial-gradient(closest-side, rgba(255,62,142,0.35), transparent 70%);}
  .testers > *{position:relative; z-index:1;}
  .testers h2{color:#F5F1FF;}
  .testers .lede{color:#C9C2EC; font-size:17px;}
  .tsteps{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
  .tsteps li{display:flex; gap:14px; align-items:flex-start; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:16px; padding:14px 16px; font-size:15.5px;}
  .tsteps b{flex:0 0 28px; height:28px; border-radius:50%; background:#FF3E8E; color:#1A0A14; display:flex; align-items:center; justify-content:center; font-size:14px;}
  .tform{background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:20px; padding:26px 24px; display:grid; gap:14px; justify-items:start;}
  .tform h3{margin:0; font-size:22px; color:#F5F1FF;}
  .tform p{margin:0; color:#C9C2EC; font-size:16px; line-height:1.55;}
  .tform .btn{margin-top:6px;}
  .socials{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px;}
  .social{display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border-radius:999px; background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16); color:#F5F1FF; text-decoration:none; font-weight:600; font-size:14.5px;}
  .social svg{width:20px; height:20px;}
  .social:hover{background:rgba(255,255,255,0.14);}

  /* faq */
  .faq{max-width:760px;}
  details{background:var(--card); border:1px solid var(--line); border-radius:16px; margin-bottom:10px;}
  summary{cursor:pointer; list-style:none; padding:18px 20px; font-weight:700; font-size:16.5px; display:flex; justify-content:space-between; gap:12px; min-height:56px; align-items:center;}
  summary::-webkit-details-marker{display:none;}
  summary::after{content:'+'; font-family:'Baloo 2',sans-serif; font-size:24px; color:var(--pink-text); transition:transform .2s ease;}
  details[open] summary::after{transform:rotate(45deg);}
  details p{padding:0 20px 18px; color:var(--muted); font-size:15.5px;}

  footer{border-top:1px solid var(--line); padding-block:44px 56px;}
  footer .wrap{display:grid; grid-template-columns:1.2fr 1fr; gap:28px;}
  footer .brand{font-size:22px;}
  footer p{color:var(--muted); font-size:14px; margin-top:12px; max-width:52ch;}
  .flinks{display:flex; flex-wrap:wrap; gap:8px 22px; align-content:flex-start; justify-content:flex-end;}
  .flinks a{font-size:14.5px; font-weight:600; color:var(--muted); text-decoration:none; padding:6px 0;}
  .flinks a:hover{color:var(--text);}

  @media (max-width:900px){
    .hero{padding-block:44px 56px;}
    .hero .wrap, .how, .testers, footer .wrap{grid-template-columns:1fr;}
    .pin-grid{grid-template-columns:1fr;}
    .features{grid-template-columns:1fr 1fr;}
    .testers{padding:30px 22px;}
    .flinks{justify-content:flex-start;}
    .bar nav a:not(.btn){display:none;}
    section{padding-block:60px;}
  }
  @media (max-width:560px){
    .pin-card{grid-template-columns:1fr;}
    .pin-img{width:100%; height:auto; aspect-ratio:16/10; object-position:center;}
    .features{grid-template-columns:1fr;}
    .lede{font-size:17px;}
  }
  @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto;} .btn, summary::after{transition:none;} }

  .pins-empty{grid-column:1 / -1; color:var(--muted); font-size:16px; background:var(--card); border:1px solid var(--line); border-radius:18px; padding:26px; text-align:center;}
  .pin-img.noimg{display:none;}

  .pin-why{display:-webkit-box; -webkit-line-clamp:4; line-clamp:4; -webkit-box-orient:vertical; overflow:hidden;}