:root{ --paper:#FAF8F3; --paper-2:#F2EFE6; --card:#FFFFFF; --ink:#16181B; --body:#33363B; --muted:#6B6E73; --line:#E2DED3; --brand:#00BF63; --brand-ink:#0A7F45; --up:#0A7F45; --down:#B8321F; --up-bg:#E3F2E9; --down-bg:#F7E4DF; --shadow:0 1px 2px rgba(22,24,27,.05); }
  /* 21 Oct 2026: the Pro pages use cards with fixed light backgrounds, so the dark colour scheme (dark page, light text) made titles vanish on dark-mode phones; the Pro pages now stay in the light look in every mode. */
  html{color-scheme:light}
  *{box-sizing:border-box; margin:0; padding:0;}
  body{background:var(--paper); color:var(--body); font:15px/1.55 "IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif; padding:0 16px 70px;}
  .wrap{max-width:1180px; margin:0 auto;}
  .up{color:var(--up);} .down{color:var(--down);}
  .hero{padding:22px 0 6px;} .hero h1{font:700 2.1rem/1.1 Georgia,"Times New Roman",serif; color:var(--ink);} .hero p{color:var(--muted); margin-top:4px;}
  .pill{display:inline-flex; align-items:center; gap:8px; margin-top:12px; font:600 .8rem system-ui,sans-serif; color:var(--brand-ink); background:var(--up-bg); padding:6px 12px; border-radius:999px;}
  .login{max-width:380px; margin:48px auto; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:26px; box-shadow:var(--shadow);}
  .login h2{font:700 1.3rem Georgia,serif; color:var(--ink);} .login p{color:var(--muted); font-size:.9rem; margin:6px 0 16px;}
  .login input[type=password]{width:100%; font:500 1rem system-ui,sans-serif; padding:11px 14px; border:1px solid var(--line); background:var(--paper); color:var(--ink); border-radius:8px;}
  .login input:focus{outline:2px solid var(--brand-ink);}
  .login label{display:flex; gap:8px; align-items:center; font-size:.84rem; color:var(--muted); margin:12px 0;}
  .btn{font:700 .9rem system-ui,sans-serif; padding:11px 22px; border:none; background:var(--brand-ink); color:#fff; border-radius:999px; cursor:pointer;} .btn.ghost{background:transparent; color:var(--brand-ink); border:1.5px solid var(--brand-ink); padding:7px 16px; font-size:.78rem;}
  .err{color:var(--down); font-size:.86rem; margin-top:10px; min-height:1.2em;}
  .sec{margin-top:38px;} .sec>h2{font:700 1.35rem Georgia,serif; color:var(--ink);} .sec>.lead{color:var(--muted); font-size:.92rem; margin:2px 0 14px; max-width:780px;}
  .tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px;}
  .tile{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:16px 18px; box-shadow:var(--shadow);}
  .tile .k{font:700 .7rem system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);} .tile .v{font:700 1.8rem/1.15 Georgia,serif; margin:6px 0 2px; color:var(--ink);} .tile .s{font-size:.86rem; color:var(--muted);}
  .gauge{position:relative; height:10px; border-radius:5px; background:linear-gradient(90deg,var(--down-bg),var(--paper-2),var(--up-bg)); margin:12px 0 4px; border:1px solid var(--line);} .gauge i{position:absolute; top:-4px; width:4px; height:16px; background:var(--ink); border-radius:2px; transform:translateX(-2px);}
  .says{margin-top:14px; background:var(--card); border:1px solid var(--line); border-left:4px solid var(--brand); border-radius:10px; padding:12px 20px; font-size:.98rem;} .says b{color:var(--ink);}
  .tablewrap{overflow-x:auto; border:1px solid var(--line); border-radius:10px; background:var(--card);}
  table{border-collapse:collapse; width:100%; font-variant-numeric:tabular-nums; font-size:.9rem;}
  th,td{padding:10px 12px; text-align:right; border-bottom:1px solid var(--line); white-space:nowrap;} tbody tr:last-child td{border-bottom:none;}
  th{font:700 .68rem system-ui,sans-serif; letter-spacing:.09em; text-transform:uppercase; color:var(--muted); background:var(--paper-2);}
  th:first-child,td:first-child{text-align:left;} td:first-child a{color:var(--ink); text-decoration:none; font-weight:700;} td:first-child a:hover{color:var(--brand-ink);}
  td.why{white-space:normal; text-align:left; min-width:220px; font-size:.84rem; color:var(--muted);}
  .badge{display:inline-block; font:700 .68rem system-ui,sans-serif; padding:3px 9px; border-radius:999px; background:var(--paper-2); color:var(--muted);} .badge.turn{background:var(--down-bg); color:var(--down);} .badge.turn.s{background:var(--up-bg); color:var(--up);}
  td.lv{text-align:left;} td.lv .lp{display:inline-block; min-width:74px; text-align:right;} td.lv .lc{display:inline-block; min-width:66px; text-align:right;} td.lv .badge.lg{display:inline-block; min-width:90px; text-align:center; margin-left:8px;}
  th:nth-child(7){text-align:left;}
  .dots{display:inline-flex; gap:3px; vertical-align:middle;} .dots i{width:10px; height:10px; border-radius:2px; display:block;} .dots .lb,.dots .sc{background:var(--up);} .dots .sb,.dots .lu{background:var(--down);}
  .legend{font-size:.78rem; color:var(--muted); margin-top:8px;}
  .empty,.loading{color:var(--muted); padding:14px 0;}
  .note{margin-top:34px; font:.8rem/1.6 system-ui,sans-serif; color:var(--muted); max-width:860px; border-top:1px solid var(--line); padding-top:16px;} .note b{color:var(--ink);}
  .top{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
  .sitebar{position:sticky;top:0;z-index:30;background:#00BF63;margin:0 -16px;padding:0 16px;border-bottom:3px solid #0A7F45}
  .sb-in{max-width:1180px;margin:0 auto;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;padding:9px 0}
  .sb-logo{display:flex;align-items:center;flex:none}.sb-logo img{height:30px;width:auto;display:block}
  .sb-links{display:flex;gap:2px 18px;flex-wrap:wrap;margin-left:auto}
  .sb-links a{font:700 .76rem system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent;opacity:.92}
  .sb-links a:hover,.sb-links a[aria-current]{border-bottom-color:#fff;opacity:1}
  @media (max-width:560px){.sb-links{margin-left:0;width:100%;justify-content:space-between;gap:2px 8px} .hero h1{font-size:1.75rem;}}
  .hub{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px; margin-top:26px;}
  .hb{display:block; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:22px 22px 20px; text-decoration:none; box-shadow:var(--shadow); transition:border-color .15s;}
  .hb:hover,.hb:focus-visible{border-color:var(--brand-ink);}
  .hb h3{font:700 1.25rem Georgia,serif; color:var(--ink);} .hb p{color:var(--muted); font-size:.92rem; margin-top:6px;}
  .hb .go{display:inline-block; margin-top:14px; font:700 .84rem system-ui,sans-serif; color:var(--brand-ink);}
  .hb.soon{border-style:dashed; box-shadow:none; cursor:default;} .hb.soon:hover{border-color:var(--line);} .hb.soon h3{color:var(--muted);}
  .crumb{margin-top:18px; font:600 .86rem system-ui,sans-serif;} .crumb a{color:var(--brand-ink); text-decoration:none;} .crumb a:hover{text-decoration:underline;}

  /* "How stretched are the big players?" cards (Crowded positions page): coloured top edge, icon chip, bigger figure, zone bar with the window ends, and a plain-words pill */
  .tiles.st{gap:16px}
  .tiles.st .tile{position:relative; overflow:hidden; padding:20px 22px 18px; border-radius:16px; box-shadow:0 2px 10px rgba(22,24,27,.07); transition:transform .15s, box-shadow .15s;}
  .tiles.st .tile:hover{transform:translateY(-2px); box-shadow:0 8px 20px rgba(22,24,27,.12);}
  .tiles.st .tile:before{content:""; position:absolute; left:0; right:0; top:0; height:5px; background:var(--acc,#0A7F45);}
  .tiles.st .t-fii{--acc:linear-gradient(90deg,#0B2545,#2B6CB0);} .tiles.st .t-net.neg{--acc:linear-gradient(90deg,#B8321F,#E8796B);} .tiles.st .t-net.pos{--acc:linear-gradient(90deg,#0A7F45,#00BF63);} .tiles.st .t-cli{--acc:linear-gradient(90deg,#B7791F,#FFD84D);}
  .tiles.st .k{display:flex; align-items:center; gap:9px;}
  .tiles.st .ic{flex:none; width:28px; height:28px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; background:var(--paper-2); color:var(--ink);} .tiles.st .ic svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .tiles.st .t-fii .ic{background:rgba(43,108,176,.14); color:#2B6CB0;} .tiles.st .t-net.neg .ic{background:var(--down-bg); color:var(--down);} .tiles.st .t-net.pos .ic{background:var(--up-bg); color:var(--up);} .tiles.st .t-cli .ic{background:rgba(183,121,31,.16); color:#B7791F;}
  .tiles.st .v{font-size:2.4rem; margin:10px 0 6px;}
  .zbar{position:relative; height:12px; border-radius:6px; background:linear-gradient(90deg,#EBA894,#F2EFE6 50%,#98D2AE); margin:14px 2px 6px;} .zbar i{position:absolute; top:-4px; width:20px; height:20px; border-radius:50%; background:var(--ink); border:3px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.35); transform:translateX(-10px);}
  .ze{display:flex; justify-content:space-between; font:700 .76rem system-ui,sans-serif; color:var(--muted);}
  .cbar{height:12px; border-radius:6px; background:var(--paper-2); margin:14px 2px 8px; overflow:hidden; border:1px solid var(--line);} .cbar b{display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#B7791F,#FFD84D);}
  .tiles.st .pill{display:inline-block; margin-top:10px; font:800 .74rem system-ui,sans-serif; letter-spacing:.02em; padding:4px 11px; border-radius:999px;}
  .tiles.st .pill.up{background:var(--up-bg); color:var(--up);} .tiles.st .pill.dn{background:var(--down-bg); color:var(--down);} .tiles.st .pill.mid{background:var(--paper-2); color:var(--body);}  .pronav{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; align-items:center; margin:14px 0 6px; position:sticky; top:51px; z-index:25; background:var(--paper); padding:10px 2px 12px; border-bottom:1px solid var(--line);}
  .pronav::-webkit-scrollbar{display:none} .pronav[hidden]{display:none}
  .pronav.ovr{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
  .pronav.ovl{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px); mask-image:linear-gradient(90deg,transparent,#000 56px)}
  .pronav.ovl.ovr{-webkit-mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent); mask-image:linear-gradient(90deg,transparent,#000 56px,#000 calc(100% - 56px),transparent)}
  .pn-badge{font:800 .64rem system-ui,sans-serif; font-style:normal; background:#0A7F45; color:#fff; border-radius:999px; min-width:19px; height:19px; display:inline-flex; align-items:center; justify-content:center; padding:0 5px; margin-left:2px; box-shadow:0 0 0 2px rgba(255,255,255,.7)}
  .pronav a.hl[aria-current="page"] .pn-badge{background:#FFD84D; color:#3A2A00}
  .pronav .pt{flex:none; display:inline-flex; align-items:center; gap:8px; font:800 .9rem system-ui,sans-serif; letter-spacing:.03em; color:#fff; background:linear-gradient(100deg,#05431F,#0A7F45 70%,#00BF63); padding:9px 14px; border-radius:12px; margin-right:6px; box-shadow:0 2px 8px rgba(5,67,31,.28);}
  .pronav .pt b{background:#FFD84D; color:#05431F; font-size:.64rem; letter-spacing:.1em; padding:2px 7px; border-radius:6px;}
  .pronav a{flex:none; display:inline-flex; align-items:center; gap:8px; font:700 .86rem system-ui,sans-serif; padding:9px 16px; border:1px solid var(--line); border-radius:12px; background:var(--card); color:var(--body); text-decoration:none; white-space:nowrap; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s, color .15s;}
  .pronav a svg{width:17px; height:17px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.85}
  .pronav a:hover{border-color:var(--brand-ink); color:var(--brand-ink); transform:translateY(-1px); box-shadow:0 5px 12px rgba(10,127,69,.16);}
  .pronav a[aria-current="page"]{background:linear-gradient(135deg,#0A7F45,#00BF63); border-color:transparent; color:#fff; box-shadow:0 5px 14px rgba(10,127,69,.32);}
  .pronav a[aria-current="page"] svg{opacity:1}
  .pronav a.hl{background:linear-gradient(135deg,#FFF6D1,#FFD84D); border-color:#E6B422; color:#3A2A00; box-shadow:0 3px 12px rgba(230,180,34,.4)} .pronav a.hl:hover{border-color:#B8860B; color:#3A2A00; box-shadow:0 6px 16px rgba(230,180,34,.55)}
  .pronav a.hl[aria-current="page"]{background:linear-gradient(135deg,#0A7F45,#00BF63); border-color:#FFD84D; color:#fff; box-shadow:0 0 0 3px #FFD84D}
  .pronav a, .pronav a.hl{--ac:#0A7F45; gap:9px; padding:6px 16px 6px 7px; border-radius:999px; border:1.5px solid #9FD3B7; border-color:color-mix(in srgb,var(--ac) 45%,#fff); background:linear-gradient(135deg,#E5F4EC,#fff 80%); background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 14%,#fff),#fff 80%); color:var(--ink,#1c1c1c); box-shadow:0 3px 10px rgba(0,0,0,.08); box-shadow:0 3px 10px color-mix(in srgb,var(--ac) 22%,transparent)}
  .pronav a svg{width:28px; height:28px; padding:6px; border-radius:50%; background:var(--ac); stroke:#fff; opacity:1}
  .pronav a:hover, .pronav a.hl:hover{border-color:var(--ac); color:var(--ink,#1c1c1c); transform:translateY(-2px); box-shadow:0 8px 18px rgba(0,0,0,.16); box-shadow:0 8px 18px color-mix(in srgb,var(--ac) 38%,transparent)}
  .pronav a[aria-current="page"], .pronav a.hl[aria-current="page"]{background:var(--ac); background:linear-gradient(135deg,color-mix(in srgb,var(--ac) 85%,#000),var(--ac)); border-color:var(--ac); color:#fff; box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ac),0 8px 18px rgba(0,0,0,.25)}
  .pronav a[aria-current="page"] svg{background:#fff; stroke:var(--ac)}
  .pronav a .pn-badge{background:var(--ac); color:#fff; box-shadow:none} .pronav a[aria-current="page"] .pn-badge{background:#fff; color:var(--ac)}
  a.hb.hl{border:2px solid #E6B422; background:linear-gradient(135deg,#FFFBE8,#FFF1BF)}
  @media (min-width:700px){ .pronav, .pronav.ovl, .pronav.ovr, .pronav.ovl.ovr{flex-wrap:wrap; overflow:visible; row-gap:8px; -webkit-mask-image:none; mask-image:none} .pronav .pt{margin-right:2px} }
  @media (max-width:560px){ .pronav a{padding:8px 13px; font-size:.82rem} .pronav .pt{padding:8px 12px} }  :root{ --h0:#ECE8DE; --u1:#CFE9D8; --u2:#98D2AE; --u3:#4DAF78; --u4:#0A7F45; --d1:#F4D6CE; --d2:#EBA894; --d3:#D66A50; --d4:#B8321F; }

  .mapbar{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:12px;} .mapbar .cnt{font:500 .86rem system-ui,sans-serif; color:var(--muted);}
  .sortsw{display:inline-flex; margin-left:auto;} .sortsw button{font:700 .7rem system-ui,sans-serif; letter-spacing:.03em; padding:6px 11px; border:1px solid var(--brand-ink); background:transparent; color:var(--brand-ink); cursor:pointer;}
  .sortsw button:first-child{border-radius:4px 0 0 4px;} .sortsw button:last-child{border-radius:0 4px 4px 0; border-left:none;} .sortsw button[aria-pressed="true"]{background:var(--brand-ink); color:#fff;}
  .heat{display:grid; grid-template-columns:repeat(auto-fill,minmax(84px,1fr)); gap:3px;}
  a.tile{padding:7px 4px; min-height:50px; display:flex; flex-direction:column; justify-content:center; text-align:center; background:var(--h0); color:var(--ink); border-radius:3px; text-decoration:none; overflow:hidden;}
  a.tile:hover{outline:2px solid var(--ink); outline-offset:-2px;}
  .tile b{font-size:.68rem; font-weight:600; letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} .tile span{font-size:.74rem; font-weight:500; margin-top:2px;}
  .tile.u1{background:var(--u1);} .tile.u2{background:var(--u2);} .tile.u3{background:var(--u3); color:#fff;} .tile.u4{background:var(--u4); color:#fff;}
  .tile.d1{background:var(--d1);} .tile.d2{background:var(--d2);} .tile.d3{background:var(--d3); color:#fff;} .tile.d4{background:var(--d4); color:#fff;}
  .hlegend{display:flex; align-items:center; gap:3px; margin-top:12px; font-size:.74rem; color:var(--muted);} .hlegend i{width:26px; height:10px; display:inline-block; border-radius:1px;} .hlegend span{margin:0 6px;}  .cbar{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin-bottom:16px;}
  .cb{position:relative;} .cb label{display:block; font:700 .7rem system-ui,sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:5px;}
  .cb input,.cb select{font:600 1rem system-ui,sans-serif; padding:11px 14px; border:1.5px solid var(--brand-ink); background:var(--card); color:var(--ink); border-radius:8px; min-width:230px;}
  .cb input:focus,.cb select:focus{outline:2px solid var(--brand-ink); outline-offset:1px;}
  #sl{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:40; max-height:320px; overflow-y:auto; list-style:none; background:var(--card); border:1px solid var(--line); border-radius:8px; box-shadow:0 8px 24px rgba(22,24,27,.14);}
  #sl li{padding:9px 14px; cursor:pointer; display:flex; justify-content:space-between; gap:12px; font-size:.92rem;} #sl li b{color:var(--ink);} #sl li small{color:var(--muted); text-align:right;}
  #sl li.on,#sl li:hover{background:var(--up-bg);} #sl li.grp{cursor:default; font:700 .66rem system-ui,sans-serif; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:var(--paper-2);} #sl li.grp:hover{background:var(--paper-2);}
  #oc-t td{text-align:right;} #oc-t td.k{text-align:center; font-weight:700; color:var(--ink); background:var(--paper-2);} #oc-t td.k.atm{background:var(--brand-ink); color:#fff;} #oc-t td.itm{background:var(--up-bg);} #oc-t th:first-child,#oc-t td:first-child{text-align:right;} #oc-t td:first-child{font-weight:400; color:inherit;}
  #oc-t thead tr.grp th{text-align:center; color:var(--ink);}
  .oibar{display:inline-block; height:6px; border-radius:3px; background:var(--down); vertical-align:middle; margin-left:6px;} .oibar.p{background:var(--brand-ink); margin-left:0; margin-right:6px;}

  /* 19 Oct 2026 (owner: lift the tool strip off the page, with its own background): the strip is an elevated panel with a green top edge, a tinted white background and a deep soft shadow. */
  .pronav{background:linear-gradient(180deg,#FFFFFF 0%,#EEF7F2 100%); border:1px solid #BFDCCB; border-top:4px solid #0A7F45; border-radius:20px; padding:14px 16px 14px; margin:18px 0 24px; box-shadow:0 18px 38px rgba(5,67,31,.20), 0 4px 10px rgba(0,0,0,.08), inset 0 1px 0 #fff}
  @media (max-width:560px){ .pronav{border-radius:16px; padding:11px 12px; margin:14px 0 18px} }

  /* 20 Oct 2026 (owner: 'looks too cluttered, reorganise, demarcate the sections'): grouped tool panel, coloured title banner, framed sections, closed note drawers. */
  .pronav{display:block; overflow:visible; flex-wrap:initial; -webkit-mask-image:none; mask-image:none; gap:0; padding:14px 18px 16px; border-top-color:var(--gc,#0A7F45)}
  .pronav .pgrow{display:flex; gap:10px; align-items:center; flex-wrap:wrap; padding-bottom:13px; margin-bottom:13px; border-bottom:1px solid #D2E3D9}
  .pronav button.pg{border:2px solid var(--gc); background:#fff; color:var(--gc); font:900 .92rem system-ui,sans-serif; letter-spacing:.02em; padding:9px 22px; border-radius:12px; cursor:pointer; transition:background .15s,color .15s,box-shadow .15s,transform .15s; display:inline-flex; align-items:center; gap:8px; white-space:nowrap}
  .pronav button.pg:hover{transform:translateY(-1px); box-shadow:0 6px 14px color-mix(in srgb,var(--gc) 28%,transparent)}
  .pronav button.pg[aria-selected="true"]{background:var(--gc); color:#fff; box-shadow:0 8px 18px color-mix(in srgb,var(--gc) 38%,transparent)}
  .pronav button.pg .pn-badge{background:#FFD84D; color:#3A2A00; box-shadow:none}
  .pronav .ptools{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
  .pronav .trialtag{margin-left:auto}
  @media (max-width:700px){ .pronav .ptools,.pronav .pgrow{flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:6px} .pronav .ptools::-webkit-scrollbar,.pronav .pgrow::-webkit-scrollbar{display:none} .pronav .pgrow{padding-bottom:11px} .pronav .trialtag{margin-left:8px} }
  .hero.tool{background:linear-gradient(120deg,var(--tc,#0A7F45),color-mix(in srgb,var(--tc,#0A7F45) 62%,#000)); color:#fff; border-radius:22px; padding:20px 26px 22px; margin-top:16px; box-shadow:0 14px 30px color-mix(in srgb,var(--tc,#0A7F45) 30%,transparent)}
  .hero.tool .eyebrow{font:800 .7rem system-ui,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.82); margin-bottom:4px}
  .hero.tool h1{color:#fff} .hero.tool p{color:rgba(255,255,255,.9); max-width:760px} .hero.tool p b{color:#fff}
  .hero.tool .btn.ghost{background:rgba(255,255,255,.14); color:#fff; border:1.5px solid rgba(255,255,255,.55)} .hero.tool .btn.ghost:hover{background:rgba(255,255,255,.26)}
  .sec{background:#fff; border:1px solid var(--line); border-radius:18px; padding:18px 22px 22px; margin-top:22px !important; box-shadow:0 2px 12px rgba(0,0,0,.05)}
  .sec>h2{display:flex; align-items:center; gap:10px; margin:0 0 6px; font:900 1.2rem system-ui,sans-serif; letter-spacing:.01em; color:var(--ink)}
  .sec>h2::before{content:""; flex:none; width:7px; height:1.2em; border-radius:4px; background:var(--tc,#0A7F45)}
  .sec>.lead{margin:0 0 14px}
  details.note-d{max-width:920px; margin-top:26px; background:#fff; border:1px solid var(--line); border-radius:14px; overflow:hidden}
  details.note-d>summary{cursor:pointer; list-style:none; padding:13px 18px; font:800 .9rem system-ui,sans-serif; color:var(--ink); display:flex; gap:10px; align-items:baseline; flex-wrap:wrap}
  details.note-d>summary::-webkit-details-marker{display:none} details.note-d>summary::before{content:"\25B8"; color:var(--tc,#0A7F45); font-size:1rem; transition:transform .15s} details[open].note-d>summary::before{transform:rotate(90deg)}
  details.note-d>summary span{font-weight:600; font-size:.76rem; color:var(--muted)}
  details.note-d[open]>summary{border-bottom:1px solid var(--line); background:#FAF8F3}
  details.note-d p.note{margin:0; border-top:0; padding:14px 18px 18px; max-width:none}
  /* Pro home: three framed groups of tools */
  .grp{border-top:5px solid var(--gc,#0A7F45)} .grp>h2::before{background:var(--gc,#0A7F45)}
  .hub2{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:12px}
  .hb2{display:block; text-decoration:none; color:inherit; background:#FBFAF6; border:1px solid var(--line); border-left:6px solid var(--ac,#0A7F45); border-radius:14px; padding:13px 15px; transition:transform .15s,box-shadow .15s}
  .hb2:hover{transform:translateY(-2px); box-shadow:0 10px 22px rgba(0,0,0,.10)} .hb2 h3{margin:0 0 3px; font:900 1rem system-ui,sans-serif; color:var(--ink)} .hb2 p{margin:0; font:.82rem/1.45 system-ui,sans-serif; color:var(--muted)} .hb2 .go{display:inline-block; margin-top:7px; font:800 .78rem system-ui,sans-serif; color:var(--ac,#0A7F45)}
  .px-tiles{margin-top:6px}
  details.note-d .fb-band, details.note-d .dk-band, details.note-d .ip-band{margin:0; border:0; border-radius:0; box-shadow:none; max-width:none}
  @media (max-width:700px){ .pronav .pgrow{overflow:visible; gap:8px} .pronav button.pg{flex:1 1 0; justify-content:center; padding:9px 4px; font-size:.74rem; border-radius:11px; min-width:0} .pronav .trialtag{display:none} .hero.tool{padding:16px 18px 18px} .hero.tool .top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px; flex-wrap:nowrap} .hero.tool h1{font-size:1.6rem} .hero.tool .btn.ghost{flex:none; padding:6px 12px; font-size:.78rem} }

/* Phones (21 Oct 2026, owner: 'the buttons are off the screen, the structure is very bad, difficult to access'): the site bar and the Pro strip no longer stay stuck over the content, the four tool buttons sit in two columns instead of a sideways-scrolling row, panels use less padding, and no grid forces a card wider than the screen. */
@media (max-width:700px){
  .sitebar{position:static !important}
  .pronav{position:static !important; top:auto !important; padding:12px 12px 12px !important; margin:12px 0 16px !important}
  .pronav .ptools{display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; overflow:visible !important; flex-wrap:initial !important; padding-bottom:2px !important}
  .pronav .ptools a{flex:none; min-width:0; width:100%; justify-content:flex-start; padding:9px 10px !important; gap:8px; white-space:normal !important; font-size:.8rem !important; line-height:1.2}
  .pronav .ptools a svg{flex:none}
  .pronav .pgrow{overflow:visible !important; flex-wrap:nowrap}
  .sec{padding:14px 12px 16px !important; border-radius:14px !important}
  .sec>h2{font-size:1.2rem}
  .hero.tool{border-radius:18px}
  img,svg,canvas,video,table{max-width:100%}
}
/* Group tab count badge no longer covers the tab name on phones (21 Oct 2026) */
@media (max-width:700px){ .pronav button.pg{position:relative; overflow:visible} .pronav button.pg .pn-badge{position:absolute; top:-8px; right:-4px; margin:0 !important; min-width:20px; height:20px; padding:0 5px; font-size:.64rem; line-height:20px; box-shadow:0 1px 3px rgba(0,0,0,.25)} }