/* Julia's "paid landing v2 (audit)" rules, copied verbatim from paid-landing-page-v2.html (Audit My Profile handover, October 2026).
   They rely on coming last in the cascade: link this file after additions.css. */
/* ===== paid landing v2 (audit) ===== */
:root{--ink-soft:#BDC7D1}
.paid-hero .hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px}
.paid-hero h1 em{font-style:normal;color:var(--accent)}
.hero-shot{margin:0;min-width:0}
.hero-shot img{display:block;width:100%;height:auto;filter:drop-shadow(0 26px 46px rgba(255,255,255,.13)) drop-shadow(0 4px 10px rgba(255,255,255,.06))}
.hero-shot figcaption{margin-top:16px;text-align:center;font-size:13px;color:var(--ink-faint);font-style:italic}
.under .vat,.buy .under .vat{font-weight:500;color:color-mix(in srgb,var(--ink-soft) 90%,var(--paper))}
.paid-hero .under span,.buy .under span{font-size:13.5px;color:var(--ink-soft);font-weight:600}
@media (max-width:900px){.paid-hero .hero-grid{grid-template-columns:minmax(0,1fr);gap:36px}}
@media (max-width:430px){.byline{display:none}}

/* what you get: animated panel left, text right */
.compact .wyg{padding:20px 0 76px}
.wyg2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;max-width:1120px;margin:0 auto}
.wyg2-text{min-width:0}
.compact .wyg .h2{font-size:clamp(24px,2.5vw,30px);font-weight:800;margin-bottom:12px}
.compact .wyg .lede{font-size:15.5px;max-width:58ch}
@media (min-width:901px){.wyg-h{white-space:nowrap}}
.wyg2 .getlist{margin-top:22px;gap:10px}
.wyg2 .getlist li{font-size:15px}
.ar-panel{background:linear-gradient(180deg,#141B23,#0E141A);border:1px solid var(--line);border-radius:18px;padding:22px 22px 24px;
  box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 0 1px rgba(255,255,255,.02) inset}
.ar-head{display:flex;align-items:center;gap:10px;margin-bottom:16px;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint)}
.ar-dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);animation:pulse 1.6s ease-in-out infinite}
.ar-panel.is-done .ar-dot{background:var(--working);box-shadow:0 0 0 4px var(--working-bg);animation:none}
@keyframes pulse{50%{opacity:.35}}
.ar-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;position:relative}
.ar-row{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:center;
  background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:12px;padding:12px 14px 12px 12px;
  font-size:14.5px;line-height:1.45;color:var(--ink-faint);
  transition:background .45s ease,border-color .45s ease,color .45s ease,transform .45s ease,box-shadow .45s ease}
.ar-row:not(:last-child)::after{content:"";position:absolute;left:26.5px;top:calc(100% + 1px);height:9px;width:1px;background:var(--line);transition:background .45s}
.ar-ico{width:30px;height:30px;border-radius:9px;background:#1B2430;border:1px solid var(--line);position:relative;display:block;transition:background .45s,border-color .45s}
.ar-ico::before{content:"";position:absolute;inset:9px;border-radius:50%;border:2px solid #3A4654;transition:border-color .3s}
/* active */
.ar-row.is-active{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 60%,var(--line));color:var(--ink);
  transform:translateX(6px);box-shadow:0 10px 28px rgba(46,91,255,.18)}
.ar-row.is-active .ar-txt{font-weight:700}
.ar-row.is-active .ar-ico{background:#20304F;border-color:color-mix(in srgb,var(--accent) 55%,var(--line))}
.ar-row.is-active .ar-ico::before{border-color:rgba(97,135,255,.25);border-top-color:var(--accent);animation:spin .9s linear infinite}
/* done */
.ar-row.is-done{color:var(--ink-soft)}
.ar-row.is-done::after{background:color-mix(in srgb,var(--working) 55%,var(--line))}
.ar-row.is-done .ar-ico::before{border:none;background:var(--working);inset:8px}
.ar-row.is-done .ar-ico::after{content:"";position:absolute;left:12px;top:9.5px;width:4px;height:8px;border:solid #0B1A12;border-width:0 2px 2px 0;transform:rotate(45deg)}
/* final */
.ar-row.ar-final.is-active{background:var(--working-bg);border-color:color-mix(in srgb,var(--working) 60%,var(--line));box-shadow:0 10px 28px rgba(76,185,138,.16)}
.ar-row.ar-final.is-active .ar-ico{background:#173323;border-color:color-mix(in srgb,var(--working) 55%,var(--line))}
.ar-row.ar-final.is-active .ar-ico::before{border:none;background:var(--working);inset:8px;animation:none}
.ar-row.ar-final.is-active .ar-ico::after{content:"";position:absolute;left:12px;top:9.5px;width:4px;height:8px;border:solid #0B1A12;border-width:0 2px 2px 0;transform:rotate(45deg)}
.ar-row.ar-final .ar-txt b{color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:900px){
  .wyg2{grid-template-columns:minmax(0,1fr);gap:30px}
  .wyg2-panel{order:2}
  .ar-row.is-active{transform:none}
  .compact .wyg{padding:36px 0 52px}
}
@media (prefers-reduced-motion:reduce){.ar-row,.ar-ico,.ar-ico::before{transition:none!important;animation:none!important}.ar-row.is-active{transform:none}.ar-dot{animation:none}}
@media (min-width:901px){.paid-hero .scanform input{flex:1 1 220px}.paid-hero .scanform .btn{flex:0 0 230px}.paid-hero .under{justify-content:flex-end}.paid-hero .under span{flex:0 0 230px}}

/* hero spacing + sizing tweaks */
.paid-hero{padding-top:110px}
.paid-hero .lede{text-wrap:balance}
@media (min-width:901px){
  .paid-hero .scanform{max-width:var(--formw,451px)}
  .paid-hero .scanform input{flex:1 1 200px}
  .paid-hero .scanform .btn{flex:0 0 200px}
  .paid-hero .under{max-width:var(--formw,451px)}
  .paid-hero .under span{flex:0 0 200px}
}
@media (min-width:1280px){
  .hero-shot{width:115%;margin-left:24px}
}

/* round 2 tweaks */
.wyg2{gap:80px}
.ar-panel{max-width:calc(100% - 15px)}
.paid-hero h1{font-size:clamp(26px,3vw,35px)}
@media (min-width:1280px){
  .hero-shot{width:122%;margin-left:-40px}
}
@media (min-width:901px){.paid-hero .scanform .btn{flex:0 0 190px}.paid-hero .under span{flex:0 0 190px}}

/* round 3 */
body{background:#06080B}
.compact{background:var(--paper)}
.hero-shot img{filter:drop-shadow(0 26px 50px rgba(255,255,255,.12)) drop-shadow(0 0 1px rgba(255,255,255,.25))}
.paid-hero .under span,.buy .under span{color:color-mix(in srgb,var(--ink-soft) 78%,var(--paper))}
.under .vat,.buy .under .vat{color:color-mix(in srgb,var(--ink-soft) 68%,var(--paper))}
.wyg2 .getlist{margin-top:34px}
.ar-txt{font-size:14px}

/* round 4: graphic pop, vat weight, form aligned to first lede line */
.hero-shot{position:relative}
.hero-shot::before{content:"";position:absolute;inset:-6% -4% 6% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 55% 45%,rgba(255,255,255,.10) 0%,rgba(140,165,255,.06) 35%,transparent 68%)}
.hero-shot img{filter:drop-shadow(0 0 .3px rgba(255,255,255,.55)) drop-shadow(0 0 22px rgba(255,255,255,.10)) drop-shadow(0 28px 56px rgba(255,255,255,.16))}
.under .vat,.buy .under .vat{font-weight:400}
.paid-hero .scanform,.paid-hero .under{max-width:var(--formw,451px)}
@media (max-width:900px){
  .paid-hero .scanform input,.paid-hero .scanform .btn{flex:1 1 100%}
  .paid-hero .under{justify-content:center}
  .paid-hero .under span{flex:1 1 100%}
}

.paid-hero{overflow-x:clip}
.paid-hero .scanform.stack input,.paid-hero .scanform.stack .btn{flex:1 1 100%}
.paid-hero .under.stack{justify-content:center}
.paid-hero .under.stack span{flex:1 1 100%}
.ar-head{color:var(--ink)}
.ar-panel.is-done .ar-head{color:var(--working)}
.paid-hero h1{font-size:clamp(27.3px,3.15vw,36.8px)}
.paid-hero .kicker{position:relative;top:-10px;color:color-mix(in srgb,var(--accent) 90%,#000)}

/* round 5: done rows tinted green, panel blue hairline */
.ar-row.is-done{background:color-mix(in srgb,var(--working-bg) 55%,transparent);border-color:color-mix(in srgb,var(--working) 28%,var(--line))}
.ar-row.ar-final.is-active{background:var(--working-bg)}
.ar-panel{border:.5px solid color-mix(in srgb,var(--accent) 70%,transparent);
  box-shadow:0 30px 60px rgba(0,0,0,.35),0 0 40px rgba(46,91,255,.08)}

/* round 6: price line closer to button; darker on light bands */
.paid-hero .under,.buy .under{margin-top:7px}
.light .buy .under span{color:color-mix(in srgb,var(--ink-soft) 92%,var(--paper))}
.light .buy .under .vat{color:color-mix(in srgb,var(--ink-soft) 82%,var(--paper))}

/* round 7: hero price line */
.paid-hero .under{margin-top:10px}
.paid-hero .under .vat{font-weight:400;color:color-mix(in srgb,var(--ink-soft) 68%,var(--paper))}

/* round 8: wider glow, graphic 10px up */
.hero-shot{top:-10px}
.hero-shot::before{inset:-18% -14% -6% -14%;
  background:radial-gradient(ellipse at 55% 45%,rgba(255,255,255,.09) 0%,rgba(140,165,255,.055) 40%,rgba(140,165,255,.02) 62%,transparent 80%)}
.hero-shot img{filter:drop-shadow(0 0 .3px rgba(255,255,255,.55)) drop-shadow(0 0 40px rgba(255,255,255,.09)) drop-shadow(0 36px 84px rgba(255,255,255,.14))}
.hero-shot{transform:translateY(-5%)}

/* mobile hero: full-width form, clean spacing */
@media (max-width:900px){
  .paid-hero{padding-top:36px;padding-bottom:48px}
  .paid-hero .scanform,.paid-hero .under{max-width:100%}
  .paid-hero .scanform{margin-top:26px}
  .paid-hero .under{margin-top:10px}
  .paid-hero .hero-grid{gap:44px}
  .hero-shot{transform:none;top:0}
  .hero-shot figcaption{margin-top:14px}
}

/* mobile round 2 */
@media (max-width:900px){ .paid-hero{padding-top:58px} }
@media (max-width:600px){
  .buy .scanform{max-width:100%}
  .buy .scanform input,.buy .scanform .btn{flex:1 1 100%}
  .buy .under{max-width:100%}
  .buy .under span{flex:1 1 100%}
  .shotwrap{padding:10px;margin-left:-8px;margin-right:-8px}
  .paid-hero h1{font-size:24px;line-height:1.18}
}
@media (max-width:430px){
  .byline{display:flex;padding-left:12px;gap:6px}
  .byline span{font-size:8.5px;max-width:58px;letter-spacing:.05em}
  .brandlock{gap:12px}
  .yps{height:19.5px}
  .fwgaf{height:17px}
}

/* mobile round 3 */
.br-m{display:none}
@media (max-width:600px){
  .br-m{display:inline}
  .compact .wyg{padding-top:21px}
}
@media (max-width:600px){.paid-hero .kicker{display:none}}

/* ---- Site addition, not Julia's: at 320px her one-line logo lockup is 335px wide and scrolls
   the page sideways, so the byline hides below 360px, as it did before. Flagged to Julia. ---- */
@media (max-width:359px){.byline{display:none}}