/* ========================================================== Aurzon — site styles ---------------------------------------------------------- DIRECTION The product is about how you appear in a search result, and a search result is a white page. So the site is made of the same material as the thing it sells: soft paper, ink, generous measure, cards that lift rather than glow. The previous dark build looked like the tool. This looks like the output — which is what the customer is actually buying. The signature stays the two-result comparison. On white it works harder, because it now sits in its native material instead of being pasted onto black. Dark mode is preserved: add class="theme-dark" to . ========================================================== */ :root{ /* Paper is faintly cool and green-tinted, not cream. Cream plus a serif is the house style of every AI-generated landing page this year; this reads as paper without the tell. */ --paper:#F3F6F4; --surface:#FFFFFF; --surface-2:#FAFBFA; /* Ink is a near-black with green in it — ties to the mark and sits warmer against white than pure black. */ --ink:#0F1F19; --text:#1A2E27; --muted:#5C6F68; --faint:#687974; --line:#E2E9E5; --line-2:#CFDAD5; /* The bright logo green survives, but text and buttons use the deeper tone — #22D07A on white fails contrast badly. */ --green:#0A8049; --green-deep:#065C34; --green-bright:#22D07A; --green-wash:#EAF7F0; --amber:#8F5600; --amber-wash:#FDF3E3; --alert:#C0362C; --alert-wash:#FCEEEC; --display:'Bricolage Grotesque','Archivo',system-ui,sans-serif; --body:'Inter',system-ui,-apple-system,sans-serif; --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,monospace; --r:16px; --r-sm:10px; --wrap:1180px; --lift:0 1px 2px rgba(15,31,25,.04), 0 8px 24px -12px rgba(15,31,25,.10); --lift-2:0 2px 4px rgba(15,31,25,.05), 0 18px 44px -18px rgba(15,31,25,.16); } /* Dark mode retained — one class on swaps every token. */ body.theme-dark{ --paper:#0B0F14; --surface:#121820; --surface-2:#171F29; --ink:#E6EDF3; --text:#E6EDF3; --muted:#8A9BA8; --faint:#6B7C86; --line:#1E2A35; --line-2:#2A3947; --green:#22D07A; --green-deep:#1AA862; --green-wash:rgba(34,208,122,.09); --amber:#F5A524; --amber-wash:rgba(245,165,36,.10); --alert:#FF4D4D; --alert-wash:rgba(255,77,77,.10); --lift:none; --lift-2:none; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--paper); color:var(--text); font-family:var(--body); font-size:16.5px; line-height:1.68; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{max-width:100%;height:auto;display:block} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px} @media(min-width:900px){.wrap{padding:0 40px}} .wrap.narrow{max-width:840px} .wrap.wide{max-width:1180px} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} .skip{position:absolute;left:-9999px;top:12px;z-index:100; background:var(--green);color:#fff;padding:11px 20px;border-radius:var(--r-sm)} .skip:focus{left:24px} :focus-visible{outline:2.5px solid var(--green);outline-offset:2px;border-radius:3px} /* ---------- type ---------- */ h1,h2,h3{ font-family:var(--display); color:var(--ink); letter-spacing:-.022em; line-height:1.1; font-weight:700; text-wrap:balance; } h1{font-size:clamp(32px,5.2vw,58px);letter-spacing:-.032em} h2{font-size:clamp(25px,3.4vw,38px)} h3{font-size:19px;font-weight:600;letter-spacing:-.012em} .h-sm{ font-family:var(--body);font-size:12.5px;font-weight:600; letter-spacing:.07em;text-transform:uppercase;color:var(--faint);margin-bottom:14px; } .lede{color:var(--muted);font-size:clamp(16.5px,1.6vw,19.5px); max-width:60ch;margin-top:18px;text-wrap:pretty} /* Timecode eyebrow. Kept because it encodes a real sequence — these flows genuinely are ordered — and it is the one flourish. */ .tc{ font-family:var(--mono);font-size:11.5px;letter-spacing:.13em; color:var(--green);display:inline-flex;align-items:center;gap:10px; margin-bottom:18px;text-transform:uppercase;font-weight:500; } .tc::before{content:'';width:26px;height:1.5px;background:var(--green);border-radius:2px} /* ---------- header ---------- */ .site-top{ position:sticky;top:0;z-index:40; border-bottom:1px solid var(--line); background:rgba(243,246,244,.84); backdrop-filter:saturate(180%) blur(16px); -webkit-backdrop-filter:saturate(180%) blur(16px); } body.theme-dark .site-top{background:rgba(11,15,20,.86)} .site-top .wrap{display:flex;align-items:center;gap:22px;height:70px} .brand{ font-family:var(--display);font-weight:800;font-size:21px; letter-spacing:-.04em;text-decoration:none;flex:none;color:var(--ink); } .brand span{color:var(--green)} .brand img{height:26px;width:auto} .site-top nav{display:flex;gap:26px;font-size:15px;margin-left:10px} .site-top nav a{color:var(--muted);text-decoration:none;transition:color .16s} .site-top nav a:hover{color:var(--ink)} .topsearch{margin-left:auto} .topsearch input{ background:var(--surface);border:1px solid var(--line);border-radius:99px; padding:10px 18px;width:190px;font-size:14.5px; transition:width .22s ease,border-color .16s,box-shadow .16s; } .topsearch input:focus{width:250px;border-color:var(--green); box-shadow:0 0 0 3px var(--green-wash);outline:none} .topsignin{color:var(--muted);text-decoration:none;font-size:15px;white-space:nowrap} .topsignin:hover{color:var(--ink)} @media(max-width:980px){ .site-top nav,.topsearch{display:none} .site-top .wrap{justify-content:space-between;gap:12px} } /* ---------- buttons ---------- */ .btn{ display:inline-block;border:1.5px solid transparent;border-radius:var(--r-sm); padding:13px 26px;cursor:pointer;text-decoration:none;text-align:center; font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:-.005em; background:var(--green);color:#fff; transition:background .16s,transform .08s,box-shadow .16s; box-shadow:0 1px 2px rgba(10,128,73,.22); } .btn:hover{background:var(--green-deep);box-shadow:0 4px 14px -4px rgba(10,128,73,.42)} .btn:active{transform:translateY(1px)} .btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .btn-line{background:var(--surface);color:var(--ink);border-color:var(--line-2);box-shadow:var(--lift)} .btn-line:hover{background:var(--surface);border-color:var(--green);color:var(--green-deep)} .btn-sm{padding:9px 17px;font-size:14px} .btn-lg{padding:16px 34px;font-size:16.5px} .btn-full{display:block;width:100%} /* ---------- bands ---------- */ .hero{padding:80px 0 56px} .hero h1{max-width:17ch} .hero h1 em{font-style:normal;color:var(--green)} .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px} .microtrust{color:var(--faint);font-size:13.5px;margin-top:20px} .band{padding:76px 0} .band.alt{background:var(--surface)} .cta-band{text-align:center;background:var(--surface)} .cta-band .lede{margin-left:auto;margin-right:auto} .cta-band .btn{margin-top:28px} /* ---------- cards ---------- */ .grid{display:grid;gap:22px;margin-top:36px} .grid-3{grid-template-columns:1fr} @media(min-width:640px){.grid-3{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.grid-3{grid-template-columns:repeat(3,1fr)}} .card{ border:1px solid var(--line);border-radius:var(--r); background:var(--surface);overflow:hidden;box-shadow:var(--lift); transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s,border-color .2s; } .card:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:var(--line-2)} .card-thumb{display:block;position:relative;aspect-ratio:16/9;background:var(--surface-2)} .card-thumb img{width:100%;height:100%;object-fit:cover} .card-dur{ position:absolute;bottom:10px;right:10px; background:rgba(15,31,25,.86);color:#fff; font-family:var(--mono);font-size:11.5px;padding:3px 8px;border-radius:6px; } .card-flag{ position:absolute;top:10px;left:10px; font-size:10.5px;font-weight:600;letter-spacing:.03em; padding:4px 9px;border-radius:6px; background:rgba(255,255,255,.94);color:var(--ink); } .card-flag.p-youtube{background:#FF0000;color:#fff} .card-flag.p-tiktok,.card-flag.p-x{background:#111;color:#fff} .card-flag.p-instagram{background:#C13584;color:#fff} .card-flag.p-facebook{background:#1877F2;color:#fff} .card-flag.p-linkedin{background:#0A66C2;color:#fff} .card-flag.p-vimeo{background:#1AB7EA;color:#fff} .card-flag.p-soundcloud{background:#FF5500;color:#fff} .card-noimg{display:grid;place-items:center;height:100%;color:var(--faint); font-family:var(--mono);font-size:12px} .card-body{padding:18px 20px 20px} .card-body h3{font-family:var(--body);font-size:16.5px;line-height:1.4;font-weight:600} .card-body h3 a{text-decoration:none} .card-body h3 a:hover{color:var(--green-deep)} .card-sub{color:var(--faint);font-size:13.5px;margin-top:8px} .cat-card{ display:block;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);padding:28px;text-decoration:none; box-shadow:var(--lift);transition:transform .2s,box-shadow .2s,border-color .2s; } .cat-card:hover{transform:translateY(-3px);box-shadow:var(--lift-2);border-color:var(--green)} .cat-card h2{font-size:21px;margin-bottom:9px} .cat-card p{color:var(--muted);font-size:14.5px} .cat-card .count{display:inline-block;margin-top:16px;font-family:var(--mono); font-size:12px;color:var(--green);font-weight:500} .feature-grid .feat,.feat-col .feat{ border:1px solid var(--line);border-radius:var(--r); background:var(--surface);padding:28px;box-shadow:var(--lift); } .feature-grid h3,.feat-col h3{margin-bottom:11px} .feature-grid p,.feat-col p{color:var(--muted);font-size:15px} /* ---------- breadcrumbs ---------- */ .crumbs{border-bottom:1px solid var(--line);padding:15px 0;font-size:13.5px;background:var(--surface)} .crumbs .wrap{display:flex;gap:9px;align-items:center;flex-wrap:wrap} .crumbs a{color:var(--muted);text-decoration:none} .crumbs a:hover{color:var(--green-deep);text-decoration:underline} .crumbs span[aria-hidden]{color:var(--line-2)} .crumbs [aria-current]{color:var(--ink);font-weight:500} /* ---------- video page ---------- */ .v-grid{display:grid;gap:44px;padding:44px 0 88px} @media(min-width:1020px){.v-grid{grid-template-columns:minmax(0,1fr) 340px}} .v-main h1{font-size:clamp(27px,3.6vw,40px);margin-bottom:16px} .v-meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:26px} .v-channel{color:var(--green-deep);text-decoration:none;font-weight:600;font-size:15px} .v-channel:hover{text-decoration:underline} .pill{ font-family:var(--mono);font-size:12px;color:var(--muted); border:1px solid var(--line-2);border-radius:99px;padding:4px 12px;background:var(--surface); } .pill-on{border-color:var(--green);color:var(--green-deep);background:var(--green-wash)} .player{ position:relative;aspect-ratio:16/9;border-radius:var(--r); overflow:hidden;background:#000;cursor:pointer;box-shadow:var(--lift-2); } .player img{width:100%;height:100%;object-fit:cover} .player iframe{width:100%;height:100%;border:0;display:block} .player .play{ position:absolute;inset:0;margin:auto;width:72px;height:50px; border:0;background:none;color:rgba(255,255,255,.92);cursor:pointer; transition:color .18s,transform .18s; } .player:hover .play{color:#f00;transform:scale(1.07)} .player .play svg{filter:drop-shadow(0 3px 12px rgba(0,0,0,.45))} .embed{position:relative;border-radius:var(--r);overflow:hidden;background:#000;box-shadow:var(--lift-2)} .embed iframe{width:100%;aspect-ratio:16/9;border:0;display:block} .embed-tall{max-width:400px} .embed-tall iframe{aspect-ratio:9/16} .embed-html{background:transparent;display:flex;justify-content:center;box-shadow:none} .embed-html blockquote{margin:0!important;max-width:100%!important} .embed-fallback{display:block;border-radius:var(--r);overflow:hidden; text-decoration:none;background:var(--surface);box-shadow:var(--lift-2)} .embed-fallback img{width:100%;display:block} .embed-fallback span{display:block;padding:16px 20px;color:var(--green-deep); font-weight:600;font-size:15px;border-top:1px solid var(--line)} .embed-fallback:hover span{background:var(--green-wash)} .chapters{margin-top:30px} .chapters ol{list-style:none;display:grid;gap:2px} .chapter{ display:flex;gap:15px;align-items:baseline;width:100%; background:none;border:0;border-radius:var(--r-sm); padding:10px 13px;cursor:pointer;text-align:left;color:var(--text); transition:background .14s; } .chapter:hover{background:var(--surface)} .tcode{font-family:var(--mono);font-size:12.5px;color:var(--green-deep); flex:none;min-width:54px;font-weight:500} .v-summary{margin-top:40px;font-size:17px;line-height:1.78;max-width:68ch} .v-summary h2{margin-bottom:18px} .v-summary p{margin-bottom:18px} .v-faq{margin-top:48px} .v-faq h2{margin-bottom:20px} details{border-bottom:1px solid var(--line);padding:20px 0} summary{cursor:pointer;font-weight:600;font-size:16.5px;list-style:none; padding-right:32px;position:relative;color:var(--ink)} summary::-webkit-details-marker{display:none} summary::after{content:'+';position:absolute;right:0;top:-2px;color:var(--green); font-family:var(--mono);font-size:20px;font-weight:400} details[open] summary::after{content:'\2212'} details p{color:var(--muted);margin-top:12px;max-width:70ch} .v-tags{margin-top:44px} .tagrow{display:flex;flex-wrap:wrap;gap:9px} .tag{ font-size:13.5px;padding:7px 15px;border-radius:99px; border:1px solid var(--line-2);color:var(--muted);background:var(--surface); text-decoration:none;transition:border-color .16s,color .16s,background .16s; } .tag:hover{border-color:var(--green);color:var(--green-deep);background:var(--green-wash)} .tagrow.big .tag{font-size:15px;padding:10px 20px} .tagrow.big .tag span{font-family:var(--mono);font-size:12px;color:var(--green);margin-left:7px} .v-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:44px} .v-side .panel{ border:1px solid var(--line);border-radius:var(--r); background:var(--surface);padding:24px;margin-bottom:20px;box-shadow:var(--lift); } .v-side p{color:var(--muted);font-size:14.5px;margin-bottom:18px} .mini-list{list-style:none;display:grid;gap:15px} .mini-list a{display:flex;gap:13px;text-decoration:none;align-items:flex-start} .mini-list img{border-radius:8px;flex:none;width:106px;height:60px;object-fit:cover} .mini-list span{font-size:14px;line-height:1.42;color:var(--text)} .mini-list a:hover span{color:var(--green-deep)} /* ---------- the console ---------- */ .console{ margin-top:40px;border:1px solid var(--line); border-radius:var(--r);background:var(--surface);overflow:hidden;box-shadow:var(--lift-2); } .console-bar{display:flex;gap:10px;padding:16px;border-bottom:1px solid var(--line); background:var(--surface-2)} .console-bar input{ flex:1;background:var(--surface);border:1px solid var(--line-2); padding:15px 17px;border-radius:var(--r-sm); font-family:var(--mono);font-size:14px;min-width:0; } .console-bar input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)} .console-body{padding:28px;min-height:210px;display:grid;gap:28px} @media(min-width:880px){.console-body{grid-template-columns:1.1fr .9fr}} .state{color:var(--muted);font-size:15px} .state.err{color:var(--alert)} /* THE SIGNATURE — a Google result. On white it now sits in its own material, so the framing is a hairline rather than a floating card. */ .serp{ background:#fff;color:#202124;border-radius:12px;padding:20px 22px; font-family:arial,sans-serif;border:1px solid var(--line); } .serp .crumb{font-size:12.5px;color:#4d5156} .serp .crumb b{font-weight:400;color:#202124} .serp h3{color:#1a0dab;font-size:21px;font-weight:400;line-height:1.3; margin:6px 0 4px;font-family:arial,sans-serif;letter-spacing:0} .serp p{font-size:14px;color:#4d5156;line-height:1.58} .serp .row{display:flex;gap:15px;align-items:flex-start;margin-top:11px} .serp .row img{width:134px;height:75px;object-fit:cover;border-radius:9px;flex:none} .serp .badge{font-family:var(--mono);font-size:11px;background:#f1f3f4;color:#5f6368; border-radius:5px;padding:3px 7px;display:inline-block;margin-top:8px} .serp-thin{opacity:.72;background:#fafafa} .serp-moments{display:flex;flex-direction:column;gap:5px;margin-top:10px; padding-left:12px;border-left:3px solid #dadce0} .serp-moments span{font-size:12.5px;color:#1a0dab} .score-row{display:flex;align-items:center;gap:17px;margin-bottom:20px} .dial{ width:74px;height:74px;border-radius:50%;flex:none; display:grid;place-items:center;font-family:var(--mono); font-size:22px;font-weight:500;border:3px solid var(--line-2);color:var(--muted); } .dial.ok{border-color:var(--green);color:var(--green-deep);background:var(--green-wash)} .dial.warn{border-color:var(--amber);color:var(--amber);background:var(--amber-wash)} .dial.bad{border-color:var(--alert);color:var(--alert);background:var(--alert-wash)} .score-row small{display:block;color:var(--faint);font-size:13px;margin-top:4px} .dialrow{display:flex;gap:16px;align-items:center} .chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .chip{ font-family:var(--mono);font-size:11.5px;padding:6px 12px; border-radius:99px;border:1px solid var(--line-2);color:var(--muted);background:var(--surface); } .chip.on{border-color:var(--green);color:var(--green-deep);background:var(--green-wash)} .fixes{margin-top:20px;border-top:1px solid var(--line);padding-top:18px;list-style:none} .fixes li{font-size:13.5px;color:var(--muted);margin-bottom:11px;padding-left:22px;position:relative} .fixes li::before{content:'!';position:absolute;left:0;color:var(--amber); font-family:var(--mono);font-weight:500} /* ---------- plans ---------- */ .plans{display:grid;gap:20px;margin-top:38px} @media(min-width:880px){.plans{grid-template-columns:repeat(3,1fr)}} .plan{ position:relative;display:flex;flex-direction:column; border:1px solid var(--line);border-radius:var(--r); background:var(--surface);padding:30px;cursor:pointer; box-shadow:var(--lift);transition:transform .2s,box-shadow .2s,border-color .2s; } .plan:hover{transform:translateY(-3px);box-shadow:var(--lift-2)} .plan.pop{border-color:var(--green);border-width:2px;box-shadow:var(--lift-2)} .plan .flag{ position:absolute;top:-12px;left:30px;background:var(--green);color:#fff; font-size:10.5px;font-weight:600;padding:4px 12px;border-radius:99px;letter-spacing:.05em; } .plan-tag{color:var(--faint);font-size:14px;margin-top:6px} .plan .amt{font-family:var(--mono);font-size:40px;margin:16px 0 2px; letter-spacing:-.035em;color:var(--ink);font-weight:500} .plan .amt sup{font-size:18px;top:-15px;position:relative;color:var(--faint)} .plan .amt .per{font-family:var(--body);font-size:15px;color:var(--faint);letter-spacing:0} .plan .turn{font-family:var(--mono);font-size:12.5px;color:var(--faint)} .plan ul{margin:24px 0;flex:1;list-style:none} .plan li{font-size:14.5px;color:var(--muted);padding-left:26px;position:relative;margin-bottom:12px} .plan li::before{content:'\2713';position:absolute;left:0;color:var(--green);font-weight:600} .plan input{position:absolute;opacity:0;pointer-events:none} .pick{ display:block;text-align:center;padding:14px;border-radius:var(--r-sm); border:1.5px solid var(--line-2);font-weight:600;font-size:15px; text-decoration:none;color:var(--ink);background:var(--surface); transition:background .16s,color .16s,border-color .16s; } .plan input:checked ~ .pick,.plan:hover .pick{background:var(--green);color:#fff;border-color:var(--green)} .plans-foot{color:var(--faint);font-size:14px;margin-top:28px;max-width:68ch} /* ---------- forms ---------- */ .formcol{max-width:640px;margin-top:52px} .field{margin-bottom:22px} .field label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:var(--ink)} .field .hint{font-weight:400;color:var(--faint);font-size:13px;margin-left:6px} .field input,.field textarea{ width:100%;background:var(--surface);border:1px solid var(--line-2); padding:14px 16px;border-radius:var(--r-sm);font-size:15.5px; transition:border-color .16s,box-shadow .16s; } .field textarea{min-height:110px;resize:vertical;line-height:1.6} .field input:focus,.field textarea:focus{outline:none;border-color:var(--green); box-shadow:0 0 0 3px var(--green-wash)} .field input[readonly]{background:var(--surface-2);color:var(--muted)} .hp{position:absolute;left:-9999px} .fineprint{color:var(--faint);font-size:13.5px;margin-top:16px} .fineprint a{color:var(--green-deep)} .bigsearch{display:flex;gap:10px;margin:28px 0 36px;max-width:640px} .bigsearch input{flex:1;background:var(--surface);border:1px solid var(--line-2); padding:15px 20px;border-radius:var(--r-sm);font-size:16.5px} .bigsearch input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px var(--green-wash)} .sortbar{display:flex;gap:8px;margin-top:28px;flex-wrap:wrap} .sortbar a{ font-size:14px;padding:9px 18px;border-radius:99px;text-decoration:none; border:1px solid var(--line-2);color:var(--muted);background:var(--surface); } .sortbar a.on{border-color:var(--green);color:#fff;background:var(--green)} /* ---------- notices ---------- */ .notice{border-radius:var(--r-sm);padding:18px 20px;margin:26px 0;font-size:15px;max-width:660px} .notice.bad{background:var(--alert-wash);border:1px solid rgba(192,54,44,.28);color:#8C2820} .notice.good{background:var(--green-wash);border:1px solid rgba(10,128,73,.30);color:var(--green-deep)} body.theme-dark .notice.bad{color:#FFB3B3} body.theme-dark .notice.good{color:#9FEBC4} .notice ul{margin:10px 0 0 20px} .ref{font-family:var(--mono);font-size:23px;color:var(--green-deep);letter-spacing:.08em;font-weight:500} .ymyl-note{ margin-top:20px;max-width:70ch;padding:14px 18px; border-left:3px solid var(--amber);background:var(--amber-wash); border-radius:0 var(--r-sm) var(--r-sm) 0;color:#7A4B00;font-size:14px; } body.theme-dark .ymyl-note{color:var(--muted)} .empty{text-align:center;padding:70px 20px} .empty h2{margin-bottom:12px} .empty p{color:var(--muted);margin-bottom:24px} .faqlist{margin-top:30px;max-width:840px} .pager{display:flex;gap:22px;align-items:center;justify-content:center;margin-top:48px;font-size:14.5px} .pager a{color:var(--green-deep);text-decoration:none;font-weight:500} .pager a:hover{text-decoration:underline} .pager span{color:var(--faint);font-family:var(--mono);font-size:13px} /* ---------- footer ---------- */ .site-foot{border-top:1px solid var(--line);padding:60px 0 30px;background:var(--surface)} .foot-grid{display:grid;gap:38px} /* Five columns now the "Also from us" block exists. At tablet width five would each be too narrow to hold a two-word link on one line, so it steps 1 → 2 → 3 → 5 rather than jumping straight to the full row. */ @media(min-width:600px){.foot-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:860px){.foot-grid{grid-template-columns:repeat(3,1fr)}} @media(min-width:1080px){.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}} /* The brand blurb spans the full row until there is space for it to sit beside the link columns. */ @media(min-width:600px) and (max-width:1079px){ .foot-grid > div:first-child{grid-column:1 / -1} } .foot-grid h3{font-family:var(--body);font-size:12.5px;text-transform:uppercase; letter-spacing:.07em;color:var(--faint);margin-bottom:16px;font-weight:600} .foot-grid ul{list-style:none;display:grid;gap:10px} .foot-grid a{color:var(--muted);text-decoration:none;font-size:14.5px} .foot-grid a:hover{color:var(--green-deep)} .foot-grid p{color:var(--muted);font-size:14.5px;margin-top:14px;max-width:38ch} .foot-base{ display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px; border-top:1px solid var(--line);margin-top:44px;padding-top:24px; color:var(--faint);font-size:13.5px; } .social{display:flex;gap:18px} .social a{color:var(--faint);text-decoration:none} .social a:hover{color:var(--green-deep)} /* ========================================================== Landing page ========================================================== */ .lp-hero{padding:76px 0 64px} .lp-hero-grid{display:grid;gap:52px;align-items:center} @media(min-width:1020px){.lp-hero-grid{grid-template-columns:1fr 1.02fr}} .lp-hero h1{max-width:14ch} .lp-hero h1 em{font-style:normal;color:var(--green)} .compare{display:grid;gap:20px} @media(min-width:560px){.compare{grid-template-columns:1fr 1fr}} .compare-col{display:flex;flex-direction:column;gap:13px} .compare-tag{ font-family:var(--mono);font-size:11px;letter-spacing:.09em; text-transform:uppercase;padding:5px 12px;border-radius:99px; align-self:flex-start;border:1px solid var(--line-2);color:var(--faint);background:var(--surface); } .compare-tag.good{border-color:var(--green);color:var(--green-deep);background:var(--green-wash)} .compare-col.win .serp{border-color:var(--green);border-width:2px;box-shadow:var(--lift-2)} .compare-notes{list-style:none;font-size:13px;color:var(--muted);display:grid;gap:7px} .compare-notes li{padding-left:19px;position:relative} .compare-notes li::before{content:'\00d7';position:absolute;left:0;color:var(--alert);font-weight:600} .compare-notes.ok li::before{content:'\2713';color:var(--green)} .lp-band{padding:80px 0} .lp-band.alt{background:var(--surface)} .steps-grid{display:grid;gap:20px;margin-top:40px} @media(min-width:640px){.steps-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1020px){.steps-grid{grid-template-columns:repeat(4,1fr)}} .step{border:1px solid var(--line);border-radius:var(--r);padding:28px; background:var(--surface);box-shadow:var(--lift)} .lp-band.alt .step{background:var(--paper)} .step-n{font-family:var(--mono);font-size:11.5px;color:var(--green);letter-spacing:.12em;font-weight:500} .step-ico{width:44px;height:44px;color:var(--green);margin:18px 0 16px;display:block} .step h3{font-size:17.5px;margin-bottom:10px} .step p{color:var(--muted);font-size:14.5px} .pricing-controls{display:flex;gap:18px;flex-wrap:wrap;align-items:center; justify-content:space-between;margin-top:34px} .toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line-2); border-radius:99px;padding:4px;box-shadow:var(--lift)} .toggle a{padding:10px 22px;border-radius:99px;text-decoration:none; font-size:14.5px;color:var(--muted);display:inline-flex;align-items:center;gap:8px} .toggle a.on{background:var(--green);color:#fff;font-weight:600} .toggle .save{font-family:var(--mono);font-size:10px;padding:3px 8px;border-radius:99px; background:var(--green-wash);color:var(--green-deep)} .toggle a.on .save{background:rgba(255,255,255,.24);color:#fff} .curswitch{display:inline-flex;gap:4px;border:1px solid var(--line-2); border-radius:99px;padding:4px;background:var(--surface);box-shadow:var(--lift)} .curswitch a{width:38px;height:34px;display:grid;place-items:center;border-radius:99px; text-decoration:none;color:var(--muted);font-size:15.5px} .curswitch a.on{background:var(--green);color:#fff} .cur-note{margin-top:18px;color:var(--green-deep);font-size:14px; background:var(--green-wash);border:1px solid rgba(10,128,73,.24); border-radius:var(--r-sm);padding:12px 16px;display:inline-block} .lp-plans{margin-top:30px} .lp-band.alt .lp-plans .plan{background:var(--paper)} .feat-grid{display:grid;gap:24px;margin-top:40px} @media(min-width:960px){.feat-grid{grid-template-columns:1.15fr 1fr}} .feat-big{border:1px solid var(--line);border-radius:var(--r);padding:34px; background:var(--surface);box-shadow:var(--lift)} .feat-big h3{font-size:23px;margin-bottom:14px} .feat-big > p{color:var(--muted);margin-bottom:28px} .feat-col{display:grid;gap:18px;align-content:start} .bar{position:relative;display:flex;justify-content:space-between;align-items:center; padding:12px 16px;border-radius:9px;margin-bottom:9px; background:var(--surface-2);overflow:hidden;font-size:14px;border:1px solid var(--line)} .bar::before{content:'';position:absolute;inset:0;width:var(--w); background:linear-gradient(90deg,var(--green-wash),rgba(10,128,73,.03))} .bar span,.bar b{position:relative} .bar b{font-family:var(--mono);color:var(--green-deep);font-weight:500} .feat-cap{color:var(--faint);font-size:12.5px;margin-top:14px;font-family:var(--mono)} .honest{display:grid;gap:22px;margin-top:36px} @media(min-width:760px){.honest{grid-template-columns:repeat(3,1fr)}} .honest > div{border-left:3px solid var(--amber);padding-left:20px} .honest h3{font-size:16.5px;margin-bottom:9px} .honest p{color:var(--muted);font-size:14.5px} /* The one dark band on the page — it closes the argument, and the contrast shift makes the final CTA land harder than another card. */ .lp-cta{padding:92px 0;text-align:center;background:var(--ink);color:#fff} .lp-cta h2{color:#fff} .lp-cta .lede{margin:18px auto 32px;color:rgba(255,255,255,.72)} .lp-cta .microtrust{color:rgba(255,255,255,.5)} .lp-cta .btn{background:var(--green-bright);color:#04140B} .lp-cta .btn:hover{background:#fff;color:var(--ink)} /* ========================================================== Customer account area ========================================================== */ .acct-bar{border-bottom:1px solid var(--line);background:var(--surface)} .acct-bar .wrap{display:flex;align-items:center;justify-content:space-between; gap:16px;min-height:56px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px} .acct-bar nav{display:flex;gap:24px;font-size:14.5px;flex-wrap:wrap} .acct-bar nav a{color:var(--muted);text-decoration:none;padding:4px 0} .acct-bar nav a:hover{color:var(--ink)} .acct-bar nav a.on{color:var(--green-deep);font-weight:600;box-shadow:inset 0 -2px 0 var(--green)} .acct-bal{display:flex;gap:20px;align-items:center;font-size:14px} .acct-bal a{text-decoration:none;color:var(--muted)} .bal-n{font-family:var(--mono);color:var(--green-deep);font-size:16px;font-weight:500} .auth-wrap{max-width:540px} .auth-wrap.wide{max-width:780px} .auth-form{margin-top:28px} .acct-stats{display:grid;gap:16px;margin-top:32px;grid-template-columns:repeat(2,1fr)} @media(min-width:720px){.acct-stats{grid-template-columns:repeat(4,1fr)}} .acct-stats .stat{border:1px solid var(--line);border-radius:var(--r); padding:22px;background:var(--surface);box-shadow:var(--lift)} .acct-stats .n{display:block;font-family:var(--mono);font-size:31px; letter-spacing:-.03em;color:var(--ink);font-weight:500} .acct-stats .l{display:block;color:var(--faint);font-size:13px;margin-top:4px} .acct-stats .btn{margin-top:14px} .svc-grid{display:grid;gap:20px;margin-top:26px} @media(min-width:700px){.svc-grid{grid-template-columns:repeat(2,1fr)}} @media(min-width:1080px){.svc-grid{grid-template-columns:repeat(4,1fr)}} .svc{border:1px solid var(--line);border-radius:var(--r);padding:24px; background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--lift)} .svc.short{opacity:.66} .svc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px} .svc h3{font-size:16.5px;line-height:1.35} .svc-cost{font-family:var(--mono);color:var(--green-deep);font-size:15px;flex:none; border:1px solid var(--green);background:var(--green-wash);border-radius:99px;padding:3px 11px} .svc p{color:var(--muted);font-size:14px;margin:11px 0 13px} .svc ul{list-style:none;flex:1;margin-bottom:16px} .svc li{font-size:13px;color:var(--muted);padding-left:18px;position:relative;margin-bottom:7px} .svc li::before{content:'\2713';position:absolute;left:0;color:var(--green)} .svc-need{font-size:12.5px;color:var(--amber);font-family:var(--mono); border-top:1px solid var(--line);padding-top:11px;margin-bottom:13px!important} .bal-card{border:2px solid var(--green);border-radius:var(--r);padding:28px; background:var(--green-wash);display:inline-flex;align-items:baseline;gap:14px;margin-top:26px} .bal-card .l{color:var(--muted);font-size:13.5px} .bal-card .n{font-family:var(--mono);font-size:40px;color:var(--green-deep); letter-spacing:-.035em;font-weight:500} .bal-card .s{color:var(--muted);font-size:14.5px} .packs{display:grid;gap:16px;margin-top:24px;grid-template-columns:repeat(2,1fr)} @media(min-width:700px){.packs{grid-template-columns:repeat(3,1fr)}} @media(min-width:1020px){.packs{grid-template-columns:repeat(5,1fr)}} .pack{border:1px solid var(--line-2);border-radius:var(--r);padding:22px; background:var(--surface);cursor:pointer;position:relative;text-align:center; box-shadow:var(--lift);transition:border-color .16s,transform .16s} .pack:hover{transform:translateY(-2px)} .pack.pop{border-color:var(--green)} .pack input{position:absolute;opacity:0} .pack:has(input:checked){border-color:var(--green);border-width:2px;background:var(--green-wash)} .pack-pay{display:block;font-family:var(--mono);font-size:25px;letter-spacing:-.03em;color:var(--ink)} .pack-cr{display:block;font-size:13.5px;margin-top:6px;color:var(--muted)} .pack-bonus{display:block;font-size:11.5px;color:var(--green-deep); font-family:var(--mono);margin-top:8px;font-weight:500} .pack-bonus.muted{color:var(--faint)} .acct-table{width:100%;border-collapse:collapse;margin-top:22px;font-size:14.5px; background:var(--surface);border-radius:var(--r);overflow:hidden;box-shadow:var(--lift)} .acct-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em; color:var(--faint);padding:14px;border-bottom:1px solid var(--line);font-weight:600} .acct-table td{padding:15px 14px;border-bottom:1px solid var(--line);vertical-align:middle} .acct-table tr:last-child td{border-bottom:0} .acct-table .r{text-align:right} .acct-table .pos{color:var(--green-deep);font-family:var(--mono);font-weight:500} .acct-table .neg{color:var(--alert);font-family:var(--mono);font-weight:500} .acct-table .thumbcell{width:100px} .acct-table .thumbcell img{border-radius:7px;object-fit:cover} .acct-table a{color:var(--green-deep);text-decoration:none;font-weight:500} .score-sm{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:50%; border:2px solid var(--line-2);font-family:var(--mono);font-size:13px;color:var(--muted)} .score-sm.ok{border-color:var(--green);color:var(--green-deep);background:var(--green-wash)} .score-sm.warn{border-color:var(--amber);color:var(--amber);background:var(--amber-wash)} .score-sm.bad{border-color:var(--alert);color:var(--alert);background:var(--alert-wash)} .ref-box{display:flex;gap:10px;margin-top:28px;max-width:620px} .ref-box input{flex:1;background:var(--surface);border:1px solid var(--line-2); padding:15px 17px;border-radius:var(--r-sm);font-size:14.5px;min-width:0} .upsell{margin-top:60px;border:1px solid var(--line);border-radius:var(--r); padding:34px;background:var(--surface);box-shadow:var(--lift)} .upsell h2{font-size:23px;margin-bottom:11px} .upsell p{color:var(--muted);max-width:64ch;margin-bottom:20px} .audit-out{margin-top:30px} .audit-out h2{font-size:20px;margin:32px 0 16px} .audit-out .field input,.audit-out .field textarea{background:var(--surface-2)} .mono{font-family:var(--mono)} .muted{color:var(--muted)} /* ---------- mobile ---------- */ @media(max-width:640px){ body{font-size:16px} .hero,.lp-hero{padding:52px 0 40px} .band,.lp-band{padding:56px 0} .lp-cta{padding:64px 0} .hero-cta{flex-direction:column;align-items:stretch} .hero-cta .btn{width:100%} .v-grid{padding:28px 0 60px;gap:34px} .console-body{padding:20px} .console-bar{flex-direction:column} .console-bar .btn{width:100%} .bigsearch{flex-direction:column} .bigsearch .btn{width:100%} .plan{padding:26px} .pricing-controls{flex-direction:column;align-items:stretch;gap:12px} .toggle{justify-content:center} .toggle a{flex:1;justify-content:center;padding:10px 12px;font-size:13.5px} .curswitch{justify-content:center} .compare{gap:16px} .serp{padding:16px 18px} .serp h3{font-size:19px} .serp .row img{width:104px;height:58px} .acct-bar nav{gap:16px;font-size:14px} .ref-box{flex-direction:column} .ref-box .btn{width:100%} .acct-table{font-size:13.5px} .acct-table th,.acct-table td{padding:11px 10px} .foot-base{flex-direction:column;gap:12px} .v-actions{flex-direction:column} .v-actions .btn{width:100%} .feat-big,.upsell{padding:24px} } @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important} html{scroll-behavior:auto} .card:hover,.plan:hover,.cat-card:hover,.pack:hover{transform:none} } @media print{ body{background:#fff} .site-top,.site-foot,.acct-bar,.hero-cta,.btn{display:none} .card,.plan,.panel{box-shadow:none;border:1px solid #ccc} } /* stragglers */ .v-page{background:var(--paper)} .feat-vis{margin-top:8px} .signout{color:var(--faint)!important} .signout:hover{color:var(--alert)!important} /* ========================================================== Split hero with the anatomy diagram ---------------------------------------------------------- The diagram is the argument, so on desktop it sits level with the headline rather than below it. On mobile the copy leads and the diagram follows, because a 640px-tall SVG above the fold on a phone pushes the call to action off screen entirely. ========================================================== */ .hero-split{padding-bottom:64px} .hero-split__grid{display:grid;gap:44px;align-items:center} @media(min-width:1000px){ .hero-split__grid{grid-template-columns:1.02fr .98fr;gap:56px} } .hero-split__copy h1{max-width:16ch} .hero-vis{margin:0;max-width:520px;width:100%} @media(max-width:999px){ .hero-vis{margin:0 auto;max-width:460px} } .hero-vis__svg{ width:100%;height:auto;display:block; overflow:visible; } .hero-vis__cap{ margin-top:20px;color:var(--faint);font-size:13px; text-align:center;max-width:44ch;margin-left:auto;margin-right:auto; } /* The numbered callouts crowd badly below tablet — the diagram still reads without them, so they go rather than shrink. */ @media(max-width:560px){ .hero-vis__svg .hv-call{display:none} .hero-vis__svg{margin-left:-8%;width:116%} } body.theme-dark .hero-vis__svg rect[fill="#FFFFFF"]{fill:#F5F7F6} /* ========================================================== Featured showcase ---------------------------------------------------------- A fixed panel beside a stacked list. The three-up grid left holes whenever fewer than three videos were featured, and a half-empty row reads as a bug. This fills at any count. ========================================================== */ .showcase{background:var(--surface)} .showcase__grid{display:grid;gap:36px;margin-top:8px} @media(min-width:1000px){ .showcase__grid{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:52px;align-items:start} } .showcase__panel{ border:1px solid var(--line);border-radius:var(--r); background:var(--paper);padding:34px;box-shadow:var(--lift); position:relative;overflow:hidden; } /* a quiet corner wash so the panel reads as branded surface rather than another empty card */ .showcase__panel::after{ content:'';position:absolute;top:-90px;right:-90px; width:220px;height:220px;border-radius:50%; background:radial-gradient(circle,var(--green-wash),transparent 68%); pointer-events:none; } .showcase__panel h2{margin-bottom:14px} .showcase__panel > p{color:var(--muted);font-size:15.5px;max-width:42ch} .showcase__list{list-style:none;margin:28px 0 30px;display:grid;gap:18px} .showcase__list li{display:flex;gap:14px;align-items:flex-start} .showcase__ico{ flex:none;width:34px;height:34px;border-radius:9px; display:grid;place-items:center; background:var(--green-wash);color:var(--green); border:1px solid rgba(10,128,73,.16); } .showcase__ico svg{width:17px;height:17px} .showcase__list b{display:block;font-size:14.5px;color:var(--ink);font-weight:600;line-height:1.4} .showcase__list span{display:block;font-size:13.5px;color:var(--muted);margin-top:2px} .showcase__items{display:grid;gap:12px} /* ---------- horizontal video row ---------- */ .vrow{ display:flex;gap:16px;align-items:center;text-decoration:none; border:1px solid var(--line);border-radius:var(--r); background:var(--surface);padding:12px;box-shadow:var(--lift); transition:transform .18s cubic-bezier(.2,.8,.3,1),box-shadow .18s,border-color .18s; } .vrow:hover{transform:translateX(4px);box-shadow:var(--lift-2);border-color:var(--green)} .vrow__thumb{ position:relative;flex:none;width:148px;aspect-ratio:16/9; border-radius:10px;overflow:hidden;background:var(--surface-2); } .vrow__thumb img{width:100%;height:100%;object-fit:cover} .vrow__dur{ position:absolute;bottom:6px;right:6px; background:rgba(15,31,25,.86);color:#fff; font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:5px; } .vrow__body{flex:1;min-width:0} .vrow__title{ display:block;font-size:15.5px;font-weight:600;color:var(--ink); line-height:1.42;letter-spacing:-.008em; } .vrow:hover .vrow__title{color:var(--green-deep)} .vrow__meta{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:8px} .vrow__meta > span{font-size:12.5px;color:var(--faint)} .vrow__prov{ font-size:10.5px!important;font-weight:600;letter-spacing:.02em; padding:3px 8px;border-radius:5px; background:var(--surface-2);color:var(--muted)!important; border:1px solid var(--line); } .vrow__prov.p-youtube{background:#FF0000;color:#fff!important;border-color:#FF0000} .vrow__prov.p-tiktok,.vrow__prov.p-x{background:#111;color:#fff!important;border-color:#111} .vrow__prov.p-instagram{background:#C13584;color:#fff!important;border-color:#C13584} .vrow__prov.p-facebook{background:#1877F2;color:#fff!important;border-color:#1877F2} .vrow__prov.p-linkedin{background:#0A66C2;color:#fff!important;border-color:#0A66C2} .vrow__prov.p-vimeo{background:#1AB7EA;color:#fff!important;border-color:#1AB7EA} .vrow__prov.p-soundcloud{background:#FF5500;color:#fff!important;border-color:#FF5500} .vrow__score{ flex:none;width:40px;height:40px;border-radius:50%; display:grid;place-items:center;margin-right:6px; font-family:var(--mono);font-size:13px;font-weight:500; border:2px solid var(--line-2);color:var(--muted); } .vrow__score.ok{border-color:var(--green);color:var(--green-deep);background:var(--green-wash)} .vrow__score.warn{border-color:var(--amber);color:var(--amber);background:var(--amber-wash)} @media(max-width:560px){ .showcase__panel{padding:26px} .vrow{padding:10px;gap:12px} .vrow__thumb{width:112px} .vrow__title{font-size:14.5px} .vrow__score{display:none} .vrow:hover{transform:none} } /* ========================================================== Ad landing page (/start) ---------------------------------------------------------- No navigation anywhere. On an organic page exploration is good; on a page you paid for, every link that is not the conversion is a leak. The tool sits above the fold because letting someone experience the product beats describing it. ========================================================== */ .lp-top{border-bottom:1px solid var(--line);background:var(--surface)} .lp-top .wrap{display:flex;align-items:center;justify-content:space-between; gap:16px;height:66px;flex-wrap:wrap} .lp-top__trust{font-size:13px;color:var(--faint);font-family:var(--mono)} .ad-hero{padding:64px 0 56px} .ad-hero h1{max-width:16ch} .ad-hero h1 em{font-style:normal;color:var(--green)} .ad-hero .lede{max-width:58ch} .ad-hero .console{margin-top:36px;max-width:none} .ad-assure{ list-style:none;display:flex;gap:24px;flex-wrap:wrap; margin-top:22px;font-size:13.5px;color:var(--faint); } .ad-assure li{padding-left:20px;position:relative} .ad-assure li::before{content:'\2713';position:absolute;left:0;color:var(--green)} .ad-band{padding:72px 0} .ad-band.alt{background:var(--surface)} .ad-note{ margin-top:26px;color:var(--muted);font-size:14.5px;max-width:66ch; border-left:3px solid var(--line-2);padding-left:18px; } .ad-weights{margin-top:34px;max-width:640px} .ad-cols{display:grid;gap:22px;margin-top:36px} @media(min-width:820px){.ad-cols{grid-template-columns:1fr 1.08fr;align-items:start}} .ad-cols > div{ border:1px solid var(--line);border-radius:var(--r); background:var(--paper);padding:30px;box-shadow:var(--lift);position:relative; } .ad-cols__win{border-color:var(--green)!important;border-width:2px!important;box-shadow:var(--lift-2)!important} .ad-cols__flag{ position:absolute;top:-12px;left:30px;background:var(--green);color:#fff; font-size:10.5px;font-weight:600;padding:4px 12px;border-radius:99px;letter-spacing:.05em; } .ad-cols h3{font-size:20px;margin-bottom:10px} .ad-price{font-family:var(--mono);font-size:32px;color:var(--ink); letter-spacing:-.03em;margin-bottom:20px} .ad-price span{font-family:var(--body);font-size:14px;color:var(--faint);letter-spacing:0} .ad-cols ul{list-style:none;margin-bottom:24px} .ad-cols li{font-size:14.5px;color:var(--muted);padding-left:26px;position:relative;margin-bottom:11px} .ad-cols li::before{content:'\2713';position:absolute;left:0;color:var(--green);font-weight:600} .ad-close{padding:86px 0;text-align:center;background:var(--ink);color:#fff} .ad-close h2{color:#fff} .ad-close .lede{margin:18px auto 30px;color:rgba(255,255,255,.72)} .ad-close .btn{background:var(--green-bright);color:#04140B} .ad-close .btn:hover{background:#fff;color:var(--ink)} .lp-foot{border-top:1px solid var(--line);padding:28px 0;background:var(--surface)} .lp-foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px; color:var(--faint);font-size:13.5px} .lp-foot a{color:var(--muted);text-decoration:none} .lp-foot a:hover{color:var(--green-deep)} @media(max-width:640px){ .ad-hero{padding:44px 0 40px} .ad-band{padding:52px 0} .ad-close{padding:60px 0} .ad-assure{gap:10px;flex-direction:column} .ad-cols > div{padding:24px} .lp-top__trust{display:none} } /* ========================================================== Channel audit ========================================================== */ .ch-head{display:grid;gap:26px;align-items:end;margin-bottom:8px} @media(min-width:840px){.ch-head{grid-template-columns:1fr auto}} .ch-dial{display:flex;gap:16px;align-items:center} .ch-dial strong{display:block;font-size:15px;color:var(--ink)} .ch-dial small{display:block;color:var(--faint);font-size:13px;margin-top:2px} .ch-sub{margin-top:48px;font-size:21px} .ch-list{display:grid;gap:12px;margin-top:26px} .ch-row{ display:flex;gap:16px;align-items:center; border:1px solid var(--line);border-radius:var(--r); background:var(--paper);padding:12px;box-shadow:var(--lift); } .ch-row img{flex:none;width:152px;aspect-ratio:16/9;object-fit:cover;border-radius:10px} .ch-row__body{flex:1;min-width:0} .ch-row__title{display:block;font-size:15.5px;font-weight:600;color:var(--ink);line-height:1.42} .ch-row__meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:7px} .ch-row__meta span{font-size:12.5px;color:var(--faint)} .ch-flag{ color:var(--green-deep)!important;background:var(--green-wash); border:1px solid rgba(10,128,73,.2);border-radius:5px;padding:2px 8px; font-family:var(--mono);font-size:10.5px!important; } .ch-row__fix{display:block;font-size:12.5px;color:var(--muted);margin-top:8px; padding-left:18px;position:relative} .ch-row__fix::before{content:'!';position:absolute;left:0;color:var(--amber);font-family:var(--mono)} .ch-cap{ margin-top:44px;border:1px solid var(--line);border-radius:var(--r); background:var(--surface);padding:32px;box-shadow:var(--lift); border-left:4px solid var(--amber); } .ch-cap h3{font-size:19px;margin-bottom:14px} .ch-cap p{color:var(--muted);font-size:15px;margin-bottom:14px;max-width:76ch} .ch-cap .fineprint{margin-top:6px} @media(max-width:640px){ .ch-row{padding:10px;gap:12px} .ch-row img{width:110px} .ch-row__title{font-size:14.5px} .ch-row .vrow__score{display:none} .ch-cap{padding:24px} } /* ========================================================== Website SEO audit ========================================================== */ .chklist{list-style:none;display:grid;gap:2px;max-height:520px;overflow-y:auto;padding-right:4px} .chk{display:flex;gap:12px;align-items:flex-start;padding:11px 12px;border-radius:9px} .chk:hover{background:var(--surface-2)} .chk-i{ flex:none;width:22px;height:22px;border-radius:6px;display:grid;place-items:center; font-family:var(--mono);font-size:12px;font-weight:500;margin-top:1px; } .chk-good .chk-i{background:var(--green-wash);color:var(--green-deep)} .chk-warn .chk-i{background:var(--amber-wash);color:var(--amber)} .chk-bad .chk-i{background:var(--alert-wash);color:var(--alert)} .chk b{display:block;font-size:14px;color:var(--ink);font-weight:600} .chk-d{display:block;font-size:12.5px;color:var(--faint);margin-top:2px;font-family:var(--mono)} .chk-f{display:block;font-size:12.5px;color:var(--muted);margin-top:6px;line-height:1.5} .plan-not{font-size:12.5px;color:var(--faint);margin:-8px 0 18px;padding-top:12px; border-top:1px solid var(--line)} .two-up{display:grid;gap:0 18px} @media(min-width:620px){.two-up{grid-template-columns:1fr 1fr}} /* ========================================================== Mobile overflow ---------------------------------------------------------- A long URL pasted into a video description was pushing the layout wider than the screen, and body{overflow-x:hidden} then cropped it instead of scrolling — which is why text looked cut off on the left rather than simply running off the right. The root cause is that grid and flex children default to min-width:auto, meaning they refuse to shrink below the width of their longest unbreakable word. One 90-character URL is enough to blow out an entire page. Two fixes: let the columns shrink, and let long strings break. Both are needed — either alone leaves the other case broken. ========================================================== */ /* 1. Let every grid and flex child shrink below its content. */ .v-grid > *, .v-main, .v-side, .wrap > *, .grid > *, .card-body, .showcase__grid > *, .hero-split__grid > *, .console-body > *{ min-width:0; } /* 2. Let long strings break rather than forcing a wider column. "anywhere" rather than "break-word" because break-word will still refuse mid-word when the word is the only thing on the line — which is exactly the URL case. */ .v-summary, .v-summary p, .v-main h1, .card-body h3, .chapter, .mini-list span, .crumbs, .tagrow, details p, summary, .state, .ch-row__title, .vrow__title{ overflow-wrap:anywhere; word-break:break-word; } /* Bare URLs in prose get a softer break — at punctuation where possible, mid-string only when there is no alternative. */ .v-summary a{overflow-wrap:break-word} /* 3. Things that overflow on their own terms scroll rather than stretch the page. */ .v-summary pre, .v-summary table, .embed-html{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } .v-summary img, .v-side img, .player img, .embed-fallback img{ max-width:100%; height:auto; } /* Embedded blockquotes from TikTok and Instagram set their own min-width in the platform's own CSS, which is wider than a phone. This is the one place !important is warranted — the competing rule arrives from a third-party stylesheet we do not control and cannot reorder. */ .embed-html blockquote, .embed-html iframe{ max-width:100%!important; min-width:0!important; width:100%!important; } /* 4. The breadcrumb rail wraps instead of pushing the page wide. */ .crumbs .wrap{ flex-wrap:wrap; row-gap:4px; } /* 5. Long single-word titles in the sidebar rail. */ .mini-list a{min-width:0} .mini-list span{display:block;min-width:0} @media(max-width:640px){ /* The chapter timecode column was fixed-width, which left too little for the label on a narrow screen. */ .tcode{min-width:46px;font-size:12px} .chapter{gap:10px;padding:9px 6px} /* Tag pills wrap rather than forming one long row. */ .tagrow{gap:7px} .tag{max-width:100%;overflow-wrap:anywhere} /* Give the content the full width of the phone. The default 22px each side is right for prose but wasteful when the line length is already tight. */ .v-grid{padding:22px 0 50px;gap:28px} .v-main h1{font-size:clamp(23px,6.4vw,30px);line-height:1.22} .v-summary{font-size:16px} } /* A safety net for anything not listed above — but named element types rather than a universal selector. A blanket .v-page * would also hit absolutely positioned children and anything that legitimately needs its own width, and a rule that broad tends to cause the next bug rather than prevent it. */ .v-page{max-width:100%;overflow-x:clip} .v-page p, .v-page h1, .v-page h2, .v-page h3, .v-page li, .v-page span, .v-page a, .v-page td, .v-page th{ max-width:100%; } /* ========================================================== Left-edge cropping ---------------------------------------------------------- Content running off the RIGHT is an overflow problem. Content cropped on the LEFT is different: it means an element starts at a negative x position, and body{overflow-x:hidden} then clips it rather than letting the page scroll to reach it. Two things in this stylesheet could do that, and both are mine: 1. The hero visual pulls itself wider than its container on small screens with a negative margin, to buy the diagram more room. Correct in isolation; wrong if it ever renders outside the hero. 2. overflow-x:hidden on body clips a centred element on BOTH sides, so an element wider than the viewport loses its left edge as well as its right. That is indistinguishable from a layout bug and is why this was hard to place. overflow-x:clip on html is the modern replacement — it clips without creating a scroll container, which also stops it breaking position:sticky on the sidebar. ========================================================== */ html{overflow-x:clip} /* The negative pull is scoped to the hero, where it was intended, so it cannot apply anywhere the visual is reused. */ @media(max-width:560px){ .hero-vis__svg{margin-left:0;width:100%} .hero-split .hero-vis__svg{margin-left:-6%;width:112%} } /* Nothing on a page should start left of zero. Anything that legitimately needs to is inside .player or .embed, both of which clip their own contents. */ .wrap, .v-grid, .v-main, .v-side, .v-summary, .crumbs, .chapters{ margin-left:0; margin-right:0; } /* A sticky sidebar inside a scroll container silently stops being sticky. Stated here because overflow-x:hidden on an ancestor is the usual cause and it is easy to reintroduce. */ @media(min-width:1020px){ .v-side{position:sticky;top:88px;align-self:start} }