:root{
  --paper:#f6efdf;--cream:#fbf5e9;--ink:#111;--purple:#6846ef;--acid:#ddea18;--pink:#f2709d;--pink2:#f7a9c5;--red:#e45445;--green:#32b879;--gold:#f3bb39;
  --sans:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Arial Black","Franklin Gothic Heavy","Helvetica Neue",Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;color:var(--ink);font:16px/1.45 var(--sans);background:url("paper-texture.png"),var(--paper);background-size:600px 600px,auto}button,textarea{font:inherit}button{color:inherit}img,svg{display:block;max-width:100%}.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.grain{position:fixed;inset:0;z-index:999;pointer-events:none;opacity:.07;mix-blend-mode:multiply;background-image:radial-gradient(#000 .55px,transparent .55px);background-size:13px 13px}
.rail{position:fixed;left:0;top:0;bottom:0;width:42px;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:18px 7px;color:#eee4ff;background:linear-gradient(#4b27d8,#7447f4 70%,#6033e8)}.rail__icons{display:grid;gap:18px;font-size:16px}.rail__words{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.2em;white-space:nowrap}
.hero{position:relative;width:min(982px,calc(100vw - 42px));height:auto;aspect-ratio:982/622;margin-left:42px;overflow:visible}.hero__desktop-art{position:absolute;inset:0}.hero__desktop-art>img{width:100%;height:100%;object-fit:contain}.hero__motion{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.hero-packet{fill:#fff7a3;stroke:#fff;stroke-width:1.5}.hero-pulse{fill:none;stroke:rgba(221,234,24,.9);stroke-width:3;transform-origin:850px 570px;animation:pulse 2.1s ease-out infinite}.hero-pulse--2{animation-delay:1.05s}.hero__mobile-art{display:none}.brand-tag{position:absolute;left:20px;top:17px;z-index:5;padding:9px 15px 10px;background:#111;color:#fff;font:700 18px/1 var(--serif);box-shadow:0 5px 0 rgba(0,0,0,.14)}.hero-deck{position:absolute;left:55px;top:438px;z-index:6;margin:0;max-width:485px;font-size:24px;line-height:1.12;font-weight:950;letter-spacing:-.025em}.hero-deck mark{color:inherit;padding:0 .11em;background:linear-gradient(180deg,transparent 24%,var(--acid) 24% 92%,transparent 92%)}.privacy-line{position:absolute;left:58px;top:507px;z-index:6;display:inline-flex;align-items:flex-start;gap:9px;margin:0;padding-bottom:3px;color:#5c37df;font-size:14px;font-weight:800;border-bottom:2px dashed rgba(104,70,239,.42)}
.main{width:min(982px,calc(100vw - 42px));margin:-42px 0 0 42px;position:relative;z-index:20}.tool-row{display:grid;grid-template-columns:764fr 218fr;align-items:stretch}.tool-panel{position:relative;min-height:396px;padding:56px 26px 22px;background:url("black-texture.png"),#111;background-size:600px 600px,auto;color:#fff;clip-path:polygon(2.2% 0,100% 0,100% 100%,4.5% 100%,0 94%,0 10%);box-shadow:0 24px 42px rgba(0,0,0,.21)}.tool-label{position:absolute;left:28px;top:13px;z-index:3;padding:9px 15px;background:var(--acid);color:#111;font-weight:950;box-shadow:7px 6px 0 rgba(0,0,0,.18)}.tool-label span{margin-left:11px;animation:wag 3s ease-in-out infinite}.count{text-align:right;color:#9b9b9b;font:700 9px var(--mono);letter-spacing:.07em;text-transform:uppercase;margin:0 0 6px}.tool-panel textarea{display:block;width:100%;min-height:258px;resize:vertical;padding:17px 19px;border:1px solid rgba(255,255,255,.47);border-radius:2px;background:#0c0f14;color:#c6c8cd;font:12px/1.5 var(--mono);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}.tool-panel textarea:focus{outline:3px solid rgba(221,234,24,.65);outline-offset:2px}.actions{display:flex;gap:12px;margin-top:14px;flex-wrap:wrap}.btn{min-width:170px;border:0;border-radius:0;padding:15px 17px;background:var(--cream);font-weight:950;box-shadow:0 7px 0 rgba(0,0,0,.2);transition:transform .18s ease,box-shadow .18s ease}.btn:hover{transform:translateY(-2px);box-shadow:0 9px 0 rgba(0,0,0,.2)}.btn--go{background:var(--acid)}.btn span{float:right}.browser-note{margin:12px 0 0;color:#b79cff;font-size:12px;line-height:1.06;transform:rotate(-2deg)}.err{margin:12px 0 0;padding:11px 13px;background:#ffe0d6;color:#78291d;border-left:5px solid var(--red);font-weight:800}.privacy-burst{position:absolute;right:-44px;bottom:-4px;width:135px;height:135px;display:grid;place-items:center;text-align:center;background:var(--pink);color:#111;font-weight:1000;font-size:13px;line-height:1.02;clip-path:polygon(50% 0,61% 12%,75% 2%,80% 18%,95% 12%,92% 28%,100% 40%,87% 50%,100% 61%,87% 72%,95% 86%,79% 83%,76% 100%,61% 88%,50% 100%,39% 89%,24% 98%,22% 84%,7% 87%,12% 72%,0 61%,14% 50%,0 40%,12% 28%,4% 14%,20% 18%,24% 3%,38% 11%);transform:rotate(10deg);animation:burst 5s ease-in-out infinite}.side-ephemera{overflow:hidden;min-height:396px;background:#f7efdf}.side-ephemera img{width:100%;height:100%;object-fit:cover;object-position:center top}
#results{margin:18px 0 0}#results:empty{display:none}#results>.panel,#results>.result-panel{position:relative;margin:0 0 16px;padding:22px 24px;background:var(--cream);border:2px solid #111;border-radius:0;box-shadow:8px 8px 0 rgba(104,70,239,.18);overflow:hidden}#results>.panel:before,#results>.result-panel:before{content:"";position:absolute;left:0;top:0;bottom:0;width:7px;background:linear-gradient(var(--acid),var(--pink),var(--purple))}#results .h2,#results .result-title{margin:0 0 8px;font:1000 26px/1.02 var(--display);letter-spacing:-.03em}#results .sub,#results .result-sub{margin:0 0 16px;color:#625b55}#results .kvs{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:0}#results .kv{min-height:0;padding:13px 14px;border:1px solid #111;background:#fff;border-radius:0;box-shadow:none}#results .kv:before,#results .kv:after{display:none}#results .kv dt{margin:0 0 4px;font:800 9px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:#6a625b}#results .kv dd{margin:0;font-size:14px}#results .auths,#results .auth-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}#results .auth,#results .auth-card{padding:14px;border:1px solid #111;border-top:7px solid var(--purple);background:#fff;border-radius:0}#results .auth--pass{border-top-color:var(--green)}#results .auth--fail{border-top-color:var(--red)}#results .auth--warn{border-top-color:var(--gold)}#results .auth__hd{display:flex;justify-content:space-between;gap:8px}.auth__name{font-weight:950}#results .auth__res{font:800 9px var(--mono);padding:4px 6px;background:#ece8e2}#results .hops,#results .route-list{position:relative;list-style:none;margin:10px 0 0;padding:0}#results .hops:before,#results .route-list:before{content:"";position:absolute;left:24px;top:20px;bottom:24px;width:5px;background:repeating-linear-gradient(180deg,var(--acid) 0 9px,transparent 9px 16px);animation:resultRoute 1.2s linear infinite}#results .hop,#results .route-hop{display:grid;grid-template-columns:52px 1fr;gap:12px;padding-bottom:14px}#results .hop__mark,#results .route-node{position:relative;z-index:2;width:52px;height:52px;display:grid;place-items:center;border-radius:50%;border:4px solid var(--purple);background:#111;color:#fff;font:900 11px var(--mono)}#results .hop__card,#results .route-card{padding:13px 14px;border:1px solid #111;background:#fff;border-radius:0}#results .tablewrap{overflow:auto;border:1px solid #111;background:#fff}#results table{width:100%;border-collapse:collapse}#results th,#results td{padding:8px 9px;border-bottom:1px solid #ddd;text-align:left;vertical-align:top}#results th{background:#eee;font:800 9px var(--mono);text-transform:uppercase}#results td{font:11px/1.5 var(--mono);overflow-wrap:anywhere}
.editorial-row{display:grid;grid-template-columns:52% 40% 8%;align-items:stretch;margin-top:18px}.about-sheet{position:relative;min-height:450px;overflow:hidden;padding:28px 28px 130px;background:var(--acid)}.about-sheet h2,.guide-sheet h2{margin:0;font:1000 34px/1 var(--display);letter-spacing:-.04em}.about-sheet h2:after,.guide-sheet h2:after{content:"";display:block;width:108px;height:8px;margin-top:5px;background:#111;clip-path:polygon(0 60%,10% 40%,22% 72%,34% 33%,47% 76%,61% 31%,75% 72%,88% 42%,100% 58%,100% 100%,0 100%)}.guide-sheet h2:after{background:var(--pink)}.about-lead{margin:16px 0 0;max-width:455px;font-size:13px;font-weight:650}.about-features{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:23px}.about-features>div{position:relative;padding-right:9px}.about-features>div:not(:last-child):after{content:"";position:absolute;right:0;top:0;bottom:0;border-right:1px dotted rgba(0,0,0,.35)}.about-features span{font-size:24px}.about-features h3{margin:8px 0 6px;font-size:12px;font-weight:950}.about-features p{margin:0;font-size:11px;line-height:1.4}.about-decor{position:absolute;left:0;right:0;bottom:0;width:100%;height:118px;object-fit:cover;object-position:left bottom;mix-blend-mode:multiply}.guide-sheet{min-height:450px;padding:28px 22px 20px;background:var(--cream);border-left:1px solid rgba(0,0,0,.15)}.guide-lead{margin:13px 0 16px;font-size:12px}.switch{display:inline-flex;gap:6px;margin:0 0 15px;padding:5px;background:#111;box-shadow:5px 5px 0 rgba(0,0,0,.12)}.switch__btn{border:0;border-radius:0;padding:9px 11px;background:transparent;color:#fff;font-weight:900;font-size:12px;cursor:pointer}.switch__btn[aria-selected="true"]{background:var(--acid);color:#111}.switch__btn:focus-visible{outline:3px solid var(--purple);outline-offset:2px}.branch[hidden]{display:none}.branch:focus{outline:none}.guard{position:relative;margin:0 0 13px;padding:10px 10px 10px 34px;background:#fff0c9;border-left:5px solid var(--gold);font-size:10px;font-weight:700}.guard:before{content:"!";position:absolute;left:10px;top:9px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;background:#111;color:#fff;font-weight:1000}.guide-heading{margin:16px 0 7px;font:1000 14px/1.05 var(--display)}.steps{margin:0;padding-left:19px;font-size:10px}.steps li{margin-bottom:5px}.guide-note{margin:8px 0 0;padding-left:9px;border-left:2px solid var(--purple);color:#665f58;font-size:9px}.mono{padding:1px 4px;background:#111;color:#fff;font:700 .85em var(--mono)}.mobile-providers{display:grid;gap:6px;margin-top:10px}.mobile-providers>div{padding:9px;border:1px solid #111;background:#fff}.mobile-providers b{display:block;width:max-content;margin-bottom:4px;padding:3px 5px;background:#111;color:var(--acid);font:800 8px var(--mono);text-transform:uppercase}.mobile-providers span{font-size:9px}.fallback{padding:10px;background:#fff;border:1px dashed #111;font-size:9px}.fallback p{margin:0}.fallback ul{padding-left:16px}.desktop-guides{display:grid;grid-template-columns:1fr 1fr;gap:6px}.guide-sheet details{border:1px solid #111;background:#fff;overflow:hidden}.guide-sheet summary{list-style:none;cursor:pointer;padding:9px 10px;font-weight:950;font-size:10px;display:flex;justify-content:space-between;gap:6px}.guide-sheet summary::-webkit-details-marker{display:none}.guide-sheet summary:after{content:"→";color:var(--pink);font-size:13px}.guide-sheet details[open] summary{background:#111;color:#fff}.guide-sheet details[open] summary:after{transform:rotate(90deg)}.guide-sheet details ol,.guide-sheet details p{margin:0;padding:0 14px 10px 26px;font-size:9px}.guide-sheet details li{margin-bottom:4px}.fine{margin:13px 0 0;color:#6c645c;font-size:8.5px}.guide-ribbon{display:inline-block;margin-top:10px;padding:7px 9px;background:#111;color:#fff;font:700 8px var(--mono)}.pink-strip{padding:24px 6px;background:var(--pink2);display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center}.pink-strip strong{font:1000 15px/1.02 var(--display)}.pink-strip__track{position:relative;flex:1;width:2px;min-height:250px;margin:12px 0;background:repeating-linear-gradient(180deg,#111 0 8px,transparent 8px 15px)}.pink-strip__track span{position:absolute;left:50%;width:13px;height:13px;border:2px solid #111;border-radius:50%;background:var(--pink2);transform:translateX(-50%)}.pink-strip__track span:first-child{top:22%}.pink-strip__track span:last-child{bottom:18%}.pink-strip>b{font-size:22px}
.limits-drawer{margin-top:16px;background:url("black-texture.png"),#111;background-size:600px 600px;color:#fff;border:0}.limits-drawer>summary{list-style:none;cursor:pointer;padding:18px 22px;font:1000 28px/1 var(--display);letter-spacing:-.035em;display:flex;align-items:center;justify-content:space-between;gap:18px}.limits-drawer>summary::-webkit-details-marker{display:none}.limits-drawer>summary span{padding:6px 8px;background:var(--pink);color:#111;font:900 8px var(--mono);letter-spacing:.05em;white-space:nowrap}.limits-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:0;padding:0 18px 22px}.limit{min-height:190px;padding:14px 13px;background:var(--cream);color:#111}.limit dt{display:inline-block;margin-bottom:9px;padding:5px 6px;background:#111;color:#fff;font-weight:1000;font-size:10px}.limit dd{margin:0;font-size:10px}.limit--can{border-top:7px solid var(--green)}.limit--cannot{border-top:7px solid var(--red)}.limit--willnot{border-top:7px solid var(--purple)}.limit--wrong{border-top:7px solid var(--pink)}
.footer{margin-left:42px;width:min(982px,calc(100vw - 42px));padding:14px 18px;background:#111;color:#fff;display:grid;grid-template-columns:1fr 1.3fr auto;gap:20px;align-items:center}.footer__brand{display:flex;gap:10px;align-items:center;font-size:11px}.footer__mark{width:46px;height:46px;display:grid;place-items:center;background:var(--acid);color:#111;font-weight:1000}.footer p{margin:0;color:#ddd;font-size:9px}.footer__note{color:#b59bff;font:800 8px/1.2 var(--mono);text-align:right}
@keyframes pulse{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(1.5)}}@keyframes wag{0%,100%{transform:translateX(0) rotate(-4deg)}50%{transform:translateX(6px) rotate(4deg)}}@keyframes burst{0%,100%{transform:translateY(0) rotate(10deg)}50%{transform:translateY(-6px) rotate(7deg)}}@keyframes resultRoute{to{background-position:0 16px}}
@media(max-width:760px){
  .rail{position:absolute;left:0;right:0;top:0;bottom:auto;width:auto;height:40px;flex-direction:row;padding:5px 11px}.rail__icons{display:flex;gap:12px;font-size:14px}.rail__words{writing-mode:horizontal-tb;transform:none;font-size:8px;letter-spacing:.14em}
  .hero{width:100%;height:auto;aspect-ratio:auto;margin:0;padding:53px 9px 48px;overflow:hidden}.hero__desktop-art{display:none}.hero__mobile-art{display:block;position:relative}.hero__mobile-title{width:96%;margin:0 auto}.hero__mobile-route{width:96%;margin:18px -8px 0 auto}.brand-tag{left:15px;top:51px;font-size:15px;padding:8px 11px}.hero-deck{position:relative;left:auto;top:auto;margin:12px 10px 0;font-size:19px;max-width:none}.privacy-line{position:relative;left:auto;top:auto;margin:15px 10px 0;font-size:12px}.main{width:calc(100% - 12px);margin:-18px 6px 0}.tool-row{grid-template-columns:1fr}.tool-panel{min-height:auto;padding:55px 14px 20px}.side-ephemera{display:none}.privacy-burst{position:relative;right:auto;bottom:auto;margin:14px auto -16px}.actions{display:grid;grid-template-columns:1fr}.btn{width:100%;min-width:0}.tool-panel textarea{min-height:245px}.editorial-row{grid-template-columns:1fr}.about-sheet{min-height:0;padding:23px 16px 125px}.about-features{grid-template-columns:1fr 1fr}.guide-sheet{min-height:0;padding:23px 16px}.desktop-guides{grid-template-columns:1fr}.pink-strip{min-height:120px;flex-direction:row}.pink-strip__track{height:2px;min-height:0;min-width:150px;width:auto;margin:0 12px;background:repeating-linear-gradient(90deg,#111 0 8px,transparent 8px 15px)}.pink-strip__track span{top:50%;left:22%;transform:translate(-50%,-50%)}.pink-strip__track span:last-child{left:auto;right:18%;bottom:auto;transform:translate(50%,-50%)}.limits-drawer>summary{font-size:22px;align-items:flex-start}.limits-grid{grid-template-columns:1fr 1fr}.footer{margin-left:0;width:100%;grid-template-columns:1fr}.footer__note{text-align:left}#results .auths,#results .auth-grid{grid-template-columns:1fr}
}
@media(max-width:480px){.about-features{grid-template-columns:1fr}.about-features>div:not(:last-child):after{display:none}.limits-grid{grid-template-columns:1fr}.switch{display:grid;grid-template-columns:1fr 1fr;width:100%}.switch__btn{padding:9px 5px}.limits-drawer>summary{display:grid}.hero__mobile-route{width:108%;margin-left:-4%;margin-right:-4%}#results .kvs{grid-template-columns:1fr}#results .hop,#results .route-hop{grid-template-columns:42px 1fr;gap:9px}#results .hop__mark,#results .route-node{width:42px;height:42px}#results .hops:before,#results .route-list:before{left:19px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.hero-packet{display:none}}

/* ============================================================
   PAGE SHELL
   The hero art is a 982px raster, and .hero, .main and .footer were
   pinned to that width with a left margin, so every pixel of leftover
   space on a wide screen piled up on the right. The shell width is now
   its own token, the rail gets space through body padding instead of a
   margin on each block, and the column centres in what remains.
   Tune --shell in one place.
   ============================================================ */
:root{--rail:42px;--shell:1240px}
body{padding-left:var(--rail)}
.hero,.main,.footer{width:min(var(--shell),100%);margin-left:auto;margin-right:auto}
.main{margin-top:-42px}
@media(max-width:760px){
  body{padding-left:0}
  .hero,.footer{width:100%}
  .main{width:calc(100% - 12px)}
}

/* ------------------------------------------------------------
   FLUID HERO
   The overlay text was positioned in pixels against a 982px wide
   raster, so it only lined up at exactly that width. Every value is
   now expressed as a share of the hero's own width, using the same
   reference: a 982px measurement becomes (value / 982) * 100 cqw.
   The art and the words now scale together at any screen size.
   Font sizes are clamped so they stay readable and stop growing.
   ------------------------------------------------------------ */
@media(min-width:761px){
  .hero{container-type:inline-size}
  .brand-tag{left:2.04cqw;top:1.73cqw;padding:.92cqw 1.53cqw 1.02cqw;
    font-size:clamp(15px,1.83cqw,26px);box-shadow:0 .51cqw 0 rgba(0,0,0,.14)}
  .hero-deck{left:5.6cqw;top:44.60cqw;max-width:49.39cqw;
    font-size:clamp(19px,2.44cqw,34px)}
  .privacy-line{left:5.91cqw;top:51.63cqw;gap:.92cqw;
    font-size:clamp(12px,1.43cqw,20px)}
}
/* The deck wraps to three lines, so the privacy line was starting 11px
   before the deck finished. This existed at the original 982px width too. */
@media(min-width:761px){.privacy-line{top:56.01cqw}}

/* ============================================================
   1. TOOL PANEL SHAPE
   The notched panel used clip-path, which clips every descendant,
   so the privacy burst hanging off the right edge was cut in half.
   The shape moves to a background layer, leaving real content free
   to sit outside the panel edge as intended. The drop shadow moves
   with it, since clip-path was hiding the box shadow too.
   ============================================================ */
.tool-panel{clip-path:none;background:none;box-shadow:none}
.tool-panel::before{content:"";position:absolute;inset:0;z-index:-1;
  background:url("black-texture.png"),#111;background-size:600px 600px,auto;
  clip-path:polygon(2.2% 0,100% 0,100% 100%,4.5% 100%,0 94%,0 10%);
  filter:drop-shadow(0 18px 30px rgba(0,0,0,.21))}
.tool-row{overflow:visible}
@media(min-width:761px){.privacy-burst{position:absolute;right:-44px;bottom:-4px;z-index:2}}

/* ============================================================
   2. HERO OVERLAY ANCHORING
   The deck and the privacy line were pinned by their top edges, so
   a wrapped line pushed the privacy line down into the black panel,
   which overlaps the hero by 42px. Both now anchor to the bottom of
   the hero, so extra lines grow upward and nothing runs under the
   panel at any width.
   ============================================================ */
@media(min-width:761px){
  .hero-deck{top:auto;bottom:14.6cqw}
  .privacy-line{top:auto;bottom:8.15cqw}
}

/* ============================================================
   3. READABILITY
   Body text was set between 8.5px and 13px, which is too small to
   read comfortably for the audience this tool is aimed at. Reading
   text now has a 13.5px floor and sits mostly between 15px and 17px.
   Display type, labels and stamps are left alone.
   ============================================================ */
body{font-size:17px;line-height:1.55}
.about-lead{font-size:17px;line-height:1.5}
.about-features h3{font-size:15px}
.about-features p{font-size:14.5px;line-height:1.5}
.about-features span{font-size:26px}
.guide-lead{font-size:16px;line-height:1.5}
.guide-heading{font-size:17px}
.steps{font-size:15.5px;line-height:1.55}
.steps li{margin-bottom:6px}
.guide-note{font-size:14px;line-height:1.5}
.fallback{font-size:15px;line-height:1.5}
.fallback li{margin-bottom:5px}
.mobile-providers span{font-size:14px;line-height:1.45}
.mobile-providers b{font-size:10px}
.guard{font-size:14.5px;line-height:1.5}
.fine{font-size:13.5px;line-height:1.5}
.guide-ribbon{font-size:11px}
.desktop-guides summary{font-size:15.5px}
.desktop-guides ol,.desktop-guides p{font-size:15px;line-height:1.55}
.limit dt{font-size:15px}
.limit dd{font-size:15px;line-height:1.55}
.switch__btn{font-size:15px;padding:11px 20px}
.btn{font-size:15px}
.count{font-size:11.5px}
.tool-panel textarea{font-size:14px;line-height:1.55}
.footer__brand{font-size:13px}
.footer p{font-size:13.5px;line-height:1.5}
#results{font-size:16px}
#results p,#results dd,#results li,#results .auth__say,#results .hop__by{font-size:15.5px;line-height:1.55}
#results table.all td,#results table.all th{font-size:13.5px}
@media(max-width:760px){
  body{font-size:16.5px}
  .steps,.fallback,.desktop-guides ol,.desktop-guides p{font-size:15px}
  .switch__btn{font-size:14px;padding:10px 8px}
}
/* The label inherits body size, so the larger type pushed it past the
   panel edge on a narrow phone. */
@media(max-width:480px){.tool-label{left:16px;font-size:15px;padding:8px 11px}}
/* Between the phone breakpoint and roughly 900px the pink strip column is
   too narrow for its rotated wordmark, which then ran past the page edge. */
@media(min-width:761px) and (max-width:900px){
  .editorial-row{grid-template-columns:52% 48%}
  .pink-strip{display:none}
}
/* Four columns became unreadable at the larger type, three or four words to
   a line. Two columns give the text room. */
@media(min-width:761px){
  .about-features{grid-template-columns:1fr 1fr;row-gap:22px}
  .about-features>div:nth-child(2n):after{display:none}
}

/* ============================================================
   4. READABILITY, SECOND PASS
   Several rules were more specific than the first pass, so those
   sizes never took effect. The accordion step lists were still at
   9px, the footer note and the evidence button at 8px.
   ============================================================ */
.guide-sheet .desktop-guides ol,.guide-sheet .desktop-guides p{font-size:15.5px;line-height:1.55;padding:0 16px 14px 30px}
.guide-sheet .desktop-guides li{margin-bottom:7px}
.guide-sheet .desktop-guides summary{padding:12px 13px;line-height:1.25}
.guide-sheet .desktop-guides summary:after{flex:0 0 auto;align-self:flex-start;font-size:17px}
.guide-sheet .fine{font-size:15px;line-height:1.55}
.guide-sheet .guide-ribbon{font-size:12.5px;line-height:1.5;padding:10px 12px}
.limits-drawer>summary>span{font-size:13px;padding:9px 13px;letter-spacing:.1em}
.footer__brand{font-size:15px;line-height:1.4}
.footer p{font-size:15.5px;line-height:1.55}
.footer .footer__note{font-size:12px;line-height:1.35}

/* ============================================================
   5. THE RAIL
   Two 16px glyphs and 10px type in a 42px bar read as leftover
   space rather than a design element. The bar is now 58px, the
   glyphs are trail markers on a dashed route running the height of
   the page, and the wording sits on that route like a signpost.
   The route echoes the yellow path in the hero collage.
   ============================================================ */
:root{--rail:58px}
.rail{width:var(--rail);padding:22px 5px;
  background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.5) 0 6px,transparent 6px 15px),
    linear-gradient(#4b27d8,#7447f4 70%,#6033e8);
  background-size:2px 100%,100% 100%;
  background-position:center top,0 0;
  background-repeat:no-repeat,no-repeat}
.rail__icons{gap:0;position:relative;display:grid;justify-items:center;row-gap:24px}
.rail__icons span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;
  border:2px solid rgba(255,255,255,.62);background:#5b30e3;font-size:19px;line-height:1}
.rail__icons span:last-child{background:var(--acid);border-color:var(--acid);color:#111}
.rail__words{font-size:13px;font-weight:800;letter-spacing:.24em;
  padding:14px 4px;background:#6134e6;border-radius:999px}

/* ============================================================
   6. THE ABOUT ARTWORK
   It was set to a fixed 118px tall with object-fit cover, so the
   top of the collage was cut off. The strip now keeps the art's own
   proportions and the sheet reserves matching space beneath the
   text. 26.6% is the height of a 515 by 137 image at any width.
   ============================================================ */
.about-decor{height:auto;aspect-ratio:515/137;object-fit:contain;object-position:left bottom}
.about-sheet{padding-bottom:calc(26.6% + 26px)}

@media(max-width:760px){
  .rail{width:auto;height:46px;padding:6px 12px;
    background-image:linear-gradient(90deg,#4b27d8,#7447f4 70%,#6033e8);background-size:100% 100%}
  .rail__icons{display:flex;gap:10px;row-gap:0}
  .rail__icons span{width:28px;height:28px;font-size:15px}
  .rail__words{font-size:11px;letter-spacing:.16em;padding:4px 10px}
  .about-sheet{padding-bottom:calc(26.6% + 20px)}
}

/* ============================================================
   7. BUTTON TEXT AND THE BROWSER NOTE
   The panel sets color:#fff and the buttons inherited it, so every
   button was white text on a pale background. Measured 1.09:1 on
   the cream buttons and 1.32:1 on the acid one, against a 4.5:1
   minimum. Ink on those backgrounds gives 17.4:1 and 14.3:1.
   Nothing to do with dark mode, the colour was set in the CSS.
   ============================================================ */
.tool-panel .btn{color:#111}
.tool-panel .btn:disabled{color:#5c5c5c;background:#cfc9bb}

/* The browser promise is one of the main reasons to use Trail and it
   was sitting at 12px regular. Sized and weighted to match the claim. */
.browser-note{font-size:17px;font-weight:850;line-height:1.25;color:#cbb6ff;
  margin-top:16px;letter-spacing:.01em}
.browser-note::first-line{letter-spacing:.02em}
@media(max-width:760px){.browser-note{font-size:16px}}

/* ============================================================
   8. GETTING STARTED
   The panel named the input but never said where to get it. One
   instruction line, with a link that opens the guide on the branch
   that matches the device rather than whichever tab was last shown.
   ============================================================ */
.tool-hint{margin:0 0 10px;max-width:62ch;color:#d8d8d8;font-size:16px;line-height:1.5}
.hint-link{display:inline-block;color:var(--acid);font-weight:900;text-decoration:none;
  border-bottom:2px solid rgba(221,234,24,.55);padding-bottom:1px}
.hint-link:after{content:" \2193";font-weight:700}
.hint-link:hover{border-bottom-color:var(--acid)}
.hint-link:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.err a{color:#78291d;font-weight:900}
.err a:hover{text-decoration:none}
@media(max-width:760px){.tool-hint{font-size:15.5px}}
/* The promise line is rotated, so its corner reached into the error box. */
.tool-panel .err{margin-top:22px}

/* ============================================================
   9. VIOLET TEXT ON BLACK
   Both of these passed the contrast ratio, 10.5:1 and 8.2:1, which
   is why the earlier checks did not catch them. Ratio is not the
   whole story: saturated blue and violet on a dark ground reads as
   soft edged for a lot of people, because the eye focuses blue
   light on a different plane and the centre of vision carries few
   blue receptors. Text goes to near white, and the violet stays as
   an accent on the leading glyph.
   ============================================================ */
.browser-note{color:#F4F1FF}
.browser-note::first-letter{color:#b79cff;font-size:1.15em}
.footer .footer__note{color:#EDE6FF}
.footer .footer__note::first-letter{color:#b59bff}

/* ============================================================
   10. MOTION ON MOBILE
   The animated route lived inside the desktop art block, which is
   hidden on a phone, so the mobile hero was two flat images. The
   route in mobile-route.png was traced the same way as the desktop
   one and gets its own overlay. The pulse transform origin was also
   still pointing at the old desktop end point, so it was expanding
   off centre from the marker.
   ============================================================ */
.hero-pulse{transform-origin:827px 528px}
.hero__mobile-route-wrap{position:relative;width:96%;margin:18px -8px 0 auto}
.hero__mobile-route{width:100%;margin:0;display:block}
.hero__motion-mobile{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero__motion-mobile .hero-packet{fill:#fff;stroke:#6846ef;stroke-width:4}
.hero-pulse--m1,.hero-pulse--m2{transform-origin:737px 1195px}
.hero-pulse--m2{animation-delay:1.05s}
@media(max-width:480px){
  .hero__mobile-route-wrap{width:108%;margin-left:-4%;margin-right:-4%}
  .hero__mobile-route{width:100%;margin:0}
}

/* ============================================================
   11. THE NEW ABOUT ARTWORK
   The replacement is 2170 by 725 with white margins top and
   bottom, and a different shape from the one it replaced, so the
   old ratio was letterboxing it. Margins trimmed in the file, ratio
   and reserved space updated to match.
   The multiply blend also has to go. It was there to melt a white
   background into the acid sheet, but multiplying the new purple
   against acid yellow turns it brown, which is what you were
   seeing. With the white trimmed there is nothing left to hide.
   ============================================================ */
.about-decor{aspect-ratio:2170/589;mix-blend-mode:normal}
.about-sheet{padding-bottom:calc(27.14% + 26px)}
@media(max-width:760px){.about-sheet{padding-bottom:calc(27.14% + 20px)}}

/* ============================================================
   12. SUPPORT BUTTON AND FOOTER LINKS
   Acid fill, hard offset shadow and a slight tilt, matching the
   stamps already on the page. The heart beats and the shadow
   collapses on hover so the button presses into the page. All of
   it stops under prefers-reduced-motion, which is already handled
   globally further up the file.
   ============================================================ */
.support-btn{display:inline-flex;align-items:center;gap:9px;
  padding:11px 19px;background:var(--acid);color:#111;
  font:900 15px/1 var(--display);letter-spacing:.01em;text-decoration:none;
  border:2px solid #111;box-shadow:5px 5px 0 #111;
  transform:rotate(-1.6deg);
  transition:transform .16s ease,box-shadow .16s ease,background .16s ease}
.support-btn:hover{transform:rotate(-1.6deg) translate(3px,3px);box-shadow:2px 2px 0 #111;background:#e8f43c}
.support-btn:active{transform:rotate(-1.6deg) translate(5px,5px);box-shadow:0 0 0 #111}
.support-btn:focus-visible{outline:3px solid var(--violet2,#6846ef);outline-offset:4px}
.support-btn__heart{display:inline-block;color:#c1275f;font-size:17px;line-height:1;
  animation:supportBeat 2.4s ease-in-out infinite}
.support-btn:hover .support-btn__heart{animation-duration:.9s}
@keyframes supportBeat{
  0%,100%{transform:scale(1)}
  14%{transform:scale(1.28)}
  28%{transform:scale(1)}
  42%{transform:scale(1.18)}
  56%{transform:scale(1)}
}

/* Top button sits opposite the studio tag, on the hero's paper side. */
.support-btn--top{position:absolute;top:15px;right:auto;left:auto;z-index:6}
@media(min-width:761px){
  .support-btn--top{left:auto;right:auto;
    left:calc(2.04cqw + 24.5cqw);top:1.73cqw;
    padding:.92cqw 1.53cqw;font-size:clamp(14px,1.5cqw,21px);
    box-shadow:.4cqw .4cqw 0 #111}
  .support-btn--top:hover{box-shadow:.16cqw .16cqw 0 #111}
}
@media(max-width:760px){
  /* Top of the page on a phone: the button sits on the studio tag's row,
     pinned to the right so it clears the tag and lands on the quiet part of
     the wordmark rather than across a letterform. The hero gains a little top
     padding so the row has its own band. */
  /* The rail is a 46px bar across the top of the page on a phone, so both the
     tag and the button start below it. */
  .hero{padding-top:112px;padding-bottom:22px}
  .brand-tag{top:58px}
  .support-btn--top{position:absolute;top:57px;right:12px;left:auto;z-index:7;
    padding:9px 14px;font-size:14.5px;box-shadow:4px 4px 0 #111}
  .support-btn--top:hover{box-shadow:2px 2px 0 #111}
}
/* On the narrowest phones the two sit shoulder to shoulder, so the button
   drops to its own row underneath the tag rather than touching it. */
@media(max-width:360px){
  .hero{padding-top:152px}
  .support-btn--top{top:100px;right:auto;left:15px;padding:8px 12px;font-size:13.5px}
}

/* Footer: three columns become one on a phone. */
.footer{align-items:start}
.footer__mid p{margin:0}
.footer__meta{margin-top:8px !important;color:#c9c4d6;font-size:14px;line-height:1.5}
.footer__link{color:var(--acid);font-weight:800;text-decoration:none;
  border-bottom:2px solid rgba(221,234,24,.4);transition:border-color .16s ease}
.footer__link:hover{border-bottom-color:var(--acid)}
.footer__link:focus-visible{outline:3px solid var(--acid);outline-offset:3px}
.footer__right{display:flex;flex-direction:column;align-items:flex-end;gap:14px}
.support-btn--foot{margin-right:4px}
@media(max-width:760px){
  .footer__right{align-items:flex-start;gap:12px}
  .footer__note{text-align:left !important}
}

/* Legal links, quieter than the brand links above them. */
.footer__legal{margin:10px 0 0 !important;font-size:14px;letter-spacing:.02em}
.footer__legal span{color:#6f6a7d;margin:0 4px}

/* ============================================================
   13. SUPPORT BUTTON, RESTING MOTION
   The heart already beat, but the button itself sat still until
   hover, so it did not read as something to click. It now rocks
   gently on its tilt with a soft acid halo, and the shadow shifts
   with it so the depth stays consistent. Motion stops on hover,
   where the press interaction takes over, and stops completely
   under prefers-reduced-motion.
   ============================================================ */
.support-btn{animation:supportSway 3.6s ease-in-out infinite}
.support-btn:hover,.support-btn:focus-visible{animation-play-state:paused}
@keyframes supportSway{
  0%,100%{transform:rotate(-1.6deg) translateY(0)}
  30%{transform:rotate(-0.2deg) translateY(-3px)}
  60%{transform:rotate(-2.6deg) translateY(1px)}
}
/* The halo below is absolutely positioned against the button. The button is
   already position:absolute in the hero, so it is its own containing block and
   does not need position:relative here. Setting it broke that, which dropped the
   hero button out of place on phones. Only the footer button needs it. */
.support-btn--foot{position:relative}
.support-btn::after{content:"";position:absolute;inset:-3px;pointer-events:none;
  border:2px solid var(--acid);opacity:0;
  animation:supportHalo 3.6s ease-out infinite}
@keyframes supportHalo{
  0%{opacity:.55;transform:scale(1)}
  55%{opacity:0;transform:scale(1.14)}
  100%{opacity:0;transform:scale(1.14)}
}
.support-btn:hover::after{animation-play-state:paused;opacity:0}
/* The top button is absolutely positioned, so it needs its own sway that keeps
   the rotate without fighting the placement. */
.support-btn--foot{animation-delay:1.2s}
.support-btn--foot::after{animation-delay:1.2s}
@media(prefers-reduced-motion:reduce){
  .support-btn{animation:none;transform:rotate(-1.6deg)}
  .support-btn::after{animation:none;opacity:0}
}