:root{
    --bg:#F6F7F4; --card:#FFFFFF; --text:#111512; --muted:#6C736B;
    --accent:#129A5B; --accent-dark:#0C7A47; --accent-ink:#0C7A47; --soft:#E7F5EC;
    --border:#E4E7E0; --ink:#0E120F;
    --radius:22px;
    --max:1120px;
  }
  *{box-sizing:border-box}
  html{scroll-behavior:smooth}
  body{
    margin:0; background:var(--bg); color:var(--text);
    font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    -webkit-font-smoothing:antialiased; line-height:1.55;
  }
  a{color:inherit}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 24px}

  /* nav */
  .nav{
    position:sticky; top:0; z-index:20;
    background:rgba(246,247,244,.86); backdrop-filter:blur(12px);
    border-bottom:1px solid rgba(228,231,224,.8);
  }
  .nav-in{display:flex; align-items:center; gap:18px; height:66px}
  .brand{display:flex; align-items:center; gap:10px; font-weight:750; letter-spacing:-.02em; text-decoration:none}
  .brand svg{width:26px; height:26px}
  .nav-links{display:flex; gap:22px; margin-left:auto; font-size:14px; color:var(--muted)}
  .nav-links a{text-decoration:none}
  .nav-links a:hover{color:var(--text)}
  .pill{
    margin-left:auto; background:var(--ink); color:#fff; text-decoration:none;
    padding:9px 16px; border-radius:999px; font-size:14px; font-weight:600;
    transition:transform .18s ease, background .18s ease;
  }
  .pill:hover{background:#000; transform:translateY(-1px)}
  .nav-links + .pill{margin-left:0}

  /* hero */
  .hero{padding:72px 0 40px}
  .hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center}
  .eyebrow{
    display:inline-flex; align-items:center; gap:8px; margin:0 0 18px;
    font-size:12.5px; font-weight:650; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-dark);
  }
  .eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)}
  h1{
    margin:0; font-size:clamp(2.6rem,5.4vw,4.15rem); line-height:1.02;
    letter-spacing:-.035em; font-weight:780;
  }
  h1 em{font-style:normal; color:var(--accent)}
  .lede{margin:22px 0 0; max-width:33em; font-size:17px; color:var(--muted)}
  .cta-row{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:30px}
  .btn{
    display:inline-flex; align-items:center; gap:12px; text-decoration:none;
    background:var(--accent-ink); color:#fff; padding:15px 22px; border-radius:16px;
    font-weight:650; font-size:16px; box-shadow:0 10px 26px -14px rgba(18,154,91,.9);
    transition:transform .18s ease, background .18s ease;
  }
  .btn:hover{background:#096237; transform:translateY(-1px)}
  .btn small{display:block; font-size:12px; font-weight:500; color:rgba(255,255,255,.94); letter-spacing:.01em}
  .btn .arrow{font-size:18px; line-height:1}
  .fineprint{font-size:13px; color:var(--muted); margin:0; width:100%; max-width:none}

  /* phone */
  .phone-stage{display:flex; justify-content:center}
  .phone{
    width:298px; padding:9px; border-radius:42px; background:#0d0f0e;
    box-shadow:0 40px 70px -30px rgba(17,21,18,.45), 0 0 0 1px rgba(17,21,18,.08);
  }
  .phone-screen{
    background:var(--bg); border-radius:34px; overflow:hidden; height:660px;
    display:flex; flex-direction:column;
  }
  .sb{display:flex; justify-content:space-between; padding:11px 18px 0; font-size:11px; font-weight:600; color:#2b312c}
  .sb span:last-child{letter-spacing:.12em}
  .app{padding:10px 15px 0; flex:1; overflow:hidden}
  .app h3{margin:4px 0 0; font-size:21px; letter-spacing:-.03em}
  .app .sub{margin:3px 0 12px; font-size:10.5px; color:var(--muted); line-height:1.35}
  .status{background:var(--soft); border-radius:16px; padding:11px 13px 12px}
  .status .head{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700}
  .status .head i{width:7px;height:7px;border-radius:50%;background:var(--accent); display:block}
  .status p{margin:5px 0 0; font-size:10.5px; color:#5A6159; line-height:1.4}
  .status .count{display:block; margin-top:7px; font-size:10.5px; font-weight:700; color:var(--accent-ink)}
  .status .manage{
    display:inline-block; margin-top:10px; background:var(--accent-ink); color:#fff;
    font-size:10.5px; font-weight:700; padding:7px 13px; border-radius:9px;
  }
  .label{margin:10px 0 6px; font-size:9px; font-weight:700; letter-spacing:.14em; color:var(--muted)}
  .rows{background:var(--card); border:1px solid var(--border); border-radius:16px; overflow:hidden}
  .row{display:flex; align-items:center; gap:9px; padding:6px 11px}
  .row + .row{border-top:1px solid var(--border)}
  .tile{
    width:25px;height:25px;border-radius:7px; display:grid; place-items:center;
    color:#fff; font-size:11px; font-weight:800; flex:none; font-style:normal;
  }
  .row b{display:block; font-size:11px; line-height:1.2}
  .row small{display:block; font-size:9px; color:var(--muted); line-height:1.3}
  .row .meta{flex:1}
  .sw{width:30px;height:17px;border-radius:999px;background:#DDE1DA;position:relative;flex:none}
  .sw::after{content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.18);transition:none}
  .sw.on{background:var(--accent)}
  .sw.on::after{left:15px}
  .opts{display:flex; gap:5px}
  .opt{flex:1; text-align:center; font-size:8.5px; font-weight:700; padding:6px 0; border-radius:8px; background:var(--card); border:1px solid var(--border)}
  .opt.on{background:var(--accent-ink); border-color:var(--accent-ink); color:#fff}
  .opt-row{display:flex; align-items:center; gap:8px; margin-top:4px; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:6px 10px}
  .opt-row .meta{flex:1; min-width:0}
  .opt-row b{display:block; font-size:11px; line-height:1.2}
  .opt-row small{display:block; font-size:9px; color:var(--muted); line-height:1.3}
  .foot-note{padding:7px 4px 0; text-align:center; font-size:8.5px; color:#5A6159}

  /* sections */
  section{padding:64px 0}
  .kicker{margin:0 0 10px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
  h2{margin:0; font-size:clamp(1.7rem,3.2vw,2.4rem); letter-spacing:-.03em; line-height:1.1; font-weight:750}
  .section-lede{margin:14px 0 0; max-width:44em; color:var(--muted)}
  .grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px}
  .card{
    background:var(--card); border:1px solid var(--border); border-radius:var(--radius);
    padding:24px; display:flex; flex-direction:column; gap:8px;
  }
  .card h3{margin:0; font-size:17px; letter-spacing:-.015em}
  .card p{margin:0; font-size:14.5px; color:var(--muted)}
  .card .num{font-size:12px; font-weight:700; color:var(--accent-ink); letter-spacing:.08em}

  .apps{display:flex; flex-wrap:wrap; gap:10px; margin-top:26px}
  .chip{
    display:inline-flex; align-items:center; gap:9px; background:var(--card);
    border:1px solid var(--border); border-radius:999px; padding:9px 15px 9px 10px;
    font-size:14px; font-weight:600;
  }
  .chip i{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-size:10px;font-weight:800;font-style:normal}

  .steps{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:34px; counter-reset:s}
  .step{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:24px; position:relative}
  .step::before{
    counter-increment:s; content:counter(s);
    display:grid; place-items:center; width:28px; height:28px; border-radius:9px;
    background:var(--soft); color:var(--accent-dark); font-weight:750; font-size:14px; margin-bottom:14px;
  }
  .step h3{margin:0 0 6px; font-size:16px}
  .step p{margin:0; font-size:14.5px; color:var(--muted)}
  .step code{background:#EEF1EA; color:#4F564F; padding:1px 6px; border-radius:6px; font-size:12.5px}

  .limits{background:#FBFBF8; border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
  .limits ul{margin:24px 0 0; padding:0; list-style:none; display:grid; gap:14px}
  .limits li{position:relative; padding-left:26px; font-size:15px; color:var(--muted); max-width:62em}
  .limits li b{color:var(--text); font-weight:650}
  .limits li::before{content:"—"; position:absolute; left:0; top:0; color:var(--accent); font-weight:700}

  details{border-top:1px solid var(--border); padding:18px 0}
  details:last-of-type{border-bottom:1px solid var(--border)}
  summary{cursor:pointer; font-weight:650; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:16px}
  summary::-webkit-details-marker{display:none}
  summary::after{content:"+"; color:var(--accent); font-weight:700}
  details[open] summary::after{content:"–"}
  details p{margin:12px 0 0; color:var(--muted); font-size:15px; max-width:58em}

  .download{margin-top:8px; background:var(--ink); color:#fff; border-radius:28px; padding:40px; display:grid; grid-template-columns:1.2fr .8fr; gap:32px; align-items:center}
  .download h2{color:#fff}
  .download p{color:#A9B2AA; margin:12px 0 0; font-size:15px}
  .download .btn{background:var(--accent-ink)}
  .download .btn:hover{background:#096237}
  .download .btn-ghost{background:transparent; border:1px solid rgba(255,255,255,.3); box-shadow:none; color:#fff}
  .download .btn-ghost:hover{background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.55)}
  .download .btn-ghost small{color:rgba(255,255,255,.78)}
  .hash{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:11px; color:#8E9990; word-break:break-all; margin-top:16px; line-height:1.7}
  .specs{display:grid; gap:10px; font-size:13.5px; color:#C7CEC8}
  .specs div{display:flex; justify-content:space-between; gap:12px; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:8px}
  .specs span:first-child{color:#8E9990}

  footer{padding:36px 0 48px; font-size:13px; color:var(--muted); display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap}
  footer a{color:var(--muted)}

  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr; gap:40px}
    .phone-stage{order:2}
    .grid3,.steps{grid-template-columns:1fr}
    .download{grid-template-columns:1fr; padding:30px}
    .nav-links{display:none}
    .nav-links + .pill{margin-left:auto}
    .hero{padding:48px 0 24px}
    section{padding:48px 0}
  }
  @media (max-width:420px){
    .phone{width:100%; max-width:300px}
    .phone-screen{height:652px}
    .wrap{padding:0 18px}
  }
  @media (max-width:380px){
    h1{font-size:2.15rem}
    .eyebrow{font-size:11px; letter-spacing:.05em}
    .lede{font-size:15.5px}
    section{padding:40px 0}
    .card,.step{padding:20px}
    .cta-row{gap:12px}
    .cta-row .btn{width:100%; justify-content:space-between}
  }
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *{transition:none !important}
  }
  /* facts strip */
  .facts{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:44px; border-top:1px solid var(--border); padding-top:22px}
  .facts div{display:flex; flex-direction:column; gap:2px}
  .facts b{font-size:19px; letter-spacing:-.02em}
  .facts span{font-size:12.5px; color:var(--muted)}

  /* install callout */
  .steps.four{grid-template-columns:repeat(4,1fr)}
  .note{margin-top:20px; background:var(--soft); border:1px solid #CFE9D8; border-radius:var(--radius); padding:24px}
  .note h3{margin:0 0 10px; font-size:16px}
  .note ul{margin:0; padding-left:20px; display:grid; gap:9px; font-size:14.5px; color:#3D4A41}
  .note li b{color:var(--text)}

  /* Play Protect hard block */
  .blocked{margin-top:26px; background:#FFF8EC; border:1px solid #F1DFC0; border-radius:24px; padding:34px}
  .blocked .kicker{color:#8A5A12}
  .blocked .section-lede{max-width:62em}
  .fixes{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:26px}
  .fix{background:#fff; border:1px solid #F0E3CB; border-radius:18px; padding:20px}
  .fix-n{display:inline-flex; align-items:center; justify-content:center; width:27px; height:27px; border-radius:9px; background:#F6E7C8; color:#7A4E0A; font-weight:700; font-size:13px}
  .fix h3{font-size:15.5px; margin:11px 0 7px}
  .fix p{margin:0; font-size:14px; color:#5B5245}
  .fix code{font-size:12px; background:#F4F0E6; color:#4A4238; padding:1px 5px; border-radius:5px; word-break:break-all}
  .blocked .note{margin-top:18px; background:#fff; border-color:#F0E3CB}
  .blocked .note p{margin:0; font-size:14.5px; color:#5B5245}
  .appeal{margin:18px 0 0; font-size:14px; color:#5B5245; max-width:62em}
  .appeal code{font-size:12.5px; background:#F4F0E6; color:#4A4238; padding:1px 5px; border-radius:5px; word-break:break-all}
  .dl-help{margin:16px 0 0; font-size:13.5px; color:#A9B2AA}
  .dl-help a{color:#7FE0AE; text-decoration:none}
  .dl-help a:hover{text-decoration:underline}
  @media (max-width:920px){
    .blocked{padding:24px 20px; border-radius:20px}
    .fixes{grid-template-columns:1fr}
  }

  /* mobile install bar */
  .mobile-bar{display:none}
  @media (max-width:920px){
    .mobile-bar{
      display:flex; align-items:center; gap:12px; position:fixed; left:0; right:0; bottom:0; z-index:30;
      background:rgba(255,255,255,.96); backdrop-filter:blur(12px); border-top:1px solid var(--border);
      padding:10px 16px calc(10px + env(safe-area-inset-bottom));
    }
    .mobile-bar div{display:flex; flex-direction:column; min-width:0; flex:1}
    .mobile-bar b{font-size:14px; letter-spacing:-.01em}
    .mobile-bar span{font-size:11.5px; color:var(--muted)}
    .mobile-bar .btn{padding:12px 18px; font-size:14px; border-radius:13px; box-shadow:none}
    body{padding-bottom:76px}
  }

  /* legal / prose pages */
  .doc{padding:56px 0 72px}
  .doc h1{font-size:clamp(2rem,4vw,3rem)}
  .doc .meta{margin:14px 0 0; font-size:13px; color:var(--muted)}
  .doc .lead{margin:18px 0 0; font-size:17px; color:var(--muted); max-width:46em}
  .doc-body{margin-top:36px; display:grid; grid-template-columns:minmax(0,1fr); gap:36px; max-width:52em}
  .doc-body section{scroll-margin-top:90px; min-width:0}
  .doc-body h2{font-size:1.35rem; margin:0 0 10px}
  .doc-body h3{font-size:1rem; margin:18px 0 6px}
  .doc-body p{margin:0 0 10px; color:var(--muted)}
  .doc-body p:last-child{margin-bottom:0}
  .doc-body ul{margin:0; padding-left:20px; color:var(--muted); display:grid; gap:7px}
  .doc-body li b,.doc-body p b{color:var(--text)}
  .doc-body code{background:#EEF1EA; color:#3F4A42; padding:1px 6px; border-radius:6px; font-size:13px; word-break:break-all; overflow-wrap:anywhere}
  .doc-body .box{background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px}
  .doc-body table{width:100%; border-collapse:collapse; font-size:14px; margin-top:8px}
  .doc-body th,.doc-body td{text-align:left; padding:9px 0; border-bottom:1px solid var(--border); vertical-align:top; word-break:break-word}
  .doc-body th{font-weight:650; color:var(--text); font-size:13px}
  .doc-body td{color:var(--muted)}
  .doc-body td:last-child{text-align:right}
  .toc{display:flex; flex-wrap:wrap; gap:8px; margin-top:24px}
  .toc a{font-size:13px; text-decoration:none; border:1px solid var(--border); background:var(--card); border-radius:999px; padding:7px 13px; color:var(--muted)}
  .toc a:hover{color:var(--text); border-color:#C9CFC6}
  .back{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); text-decoration:none; margin-bottom:18px}
  .back:hover{color:var(--text)}
  footer .links{display:flex; gap:16px; flex-wrap:wrap}
  footer .links a{text-decoration:none}
  footer .links a:hover{color:var(--text)}
  @media (max-width:920px){
    .facts{grid-template-columns:repeat(2,1fr); gap:16px}
    .steps.four{grid-template-columns:1fr}
    .doc{padding:36px 0 56px}
  }