:root{
    --bg:#0B0907;
    --surface:#161210;
    --surface-2:#1E1815;
    --surface-3:#241D18;
    --gold:#D4A24E;
    --gold-light:#F2CE8B;
    --gold-deep:#B8863A;
    --text:#F5EDE1;
    --text-muted:#A99A87;
    --text-dim:#7D7264;
    --line:rgba(245,237,225,0.10);
    --line-strong:rgba(245,237,225,0.18);
    --radius:14px;
  }

  *{box-sizing:border-box;}
  /* Reserve the scrollbar's width whether or not the page needs one. Without
     it a centred layout shifts by ~15px between a page that scrolls and one
     that does not — /404 and an empty /settings against a long /admin table —
     and because the header is centred too, that reads as the logo twitching
     sideways on every navigation. The other half of the same complaint is the
     container geometry, which is why both stylesheets declare the same one. */
  html{scroll-behavior:smooth;scrollbar-gutter:stable;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--text);
    font-family:'Inter',sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block;}
  a{color:inherit;text-decoration:none;}
  ul{list-style:none;margin:0;padding:0;}
  h1,h2,h3{font-family:'Fraunces',serif; margin:0; letter-spacing:-0.01em;}
  .container{max-width:1240px;margin:0 auto;padding:0 32px;}
  @media (max-width:640px){.container{padding:0 20px;}}

  .gold-text{
    background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));
    -webkit-background-clip:text;
    background-clip:text;
    color:transparent;
  }

  .eyebrow{
    font-family:'Inter',sans-serif;
    font-size:12px;
    font-weight:600;
    letter-spacing:0.2em;
    text-transform:uppercase;
    color:var(--gold);
  }

  .section-title{
    text-align:center;
    font-size:clamp(24px,3.4vw,32px);
    font-weight:600;
    margin-bottom:10px;
  }
  .section-sub{
    text-align:center;
    color:var(--text-muted);
    font-size:15px;
    max-width:480px;
    margin:0 auto 44px;
  }
  .divider-flourish{
    display:flex;align-items:center;justify-content:center;gap:10px;
    margin-bottom:14px;
  }
  .divider-flourish::before,.divider-flourish::after{
    content:"";width:34px;height:1px;background:var(--line-strong);
  }
  .divider-flourish svg{width:14px;height:14px;stroke:var(--gold);}

  /* ---------- HEADER ---------- */
  header.site{
    position:sticky;top:0;z-index:50;
    background:rgba(11,9,7,0.86);
    backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
  }
  .header-inner{
    display:flex;align-items:center;justify-content:space-between;
    height:78px;
  }
  .logo{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:19px;font-weight:600;letter-spacing:0.02em;}
  .logo svg{width:26px;height:26px;stroke:var(--gold);}
  .logo .light{font-weight:400;color:var(--text);}
  .logo .accent{color:var(--gold);}

  nav.primary{display:flex;align-items:center;gap:34px;}
  nav.primary a{
    font-size:14px;color:var(--text-muted);position:relative;padding:6px 0;
    transition:color .15s ease;
  }
  nav.primary a:hover{color:var(--text);}
  nav.primary a.active{color:var(--gold);}
  nav.primary a.active::after{
    content:"";position:absolute;left:0;right:0;bottom:-2px;height:1px;background:var(--gold);
  }

  .btn{
    display:inline-flex;align-items:center;gap:8px;
    font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
    letter-spacing:0.04em;text-transform:uppercase;
    padding:13px 22px;border-radius:9px;cursor:pointer;border:none;
    transition:transform .12s ease, box-shadow .2s ease, background .2s ease;
  }
  .btn-gold{
    background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));
    color:#1B1108;
    box-shadow:0 10px 30px -10px rgba(212,162,78,0.5);
  }
  .btn-gold:hover{transform:translateY(-1px);box-shadow:0 14px 36px -10px rgba(212,162,78,0.65);}
  .btn-ghost{
    background:transparent;color:var(--text);border:1px solid var(--line-strong);
  }
  .btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
  .btn-block{width:100%;justify-content:center;padding:15px 22px;font-size:13.5px;}

  .menu-toggle{display:none;background:none;border:none;color:var(--text);}
  .menu-toggle svg{width:24px;height:24px;stroke:currentColor;}

  @media (max-width:960px){
    nav.primary{display:none;}
    .header-cta{display:none;}
    .menu-toggle{display:block;}
  }

  /* ---------- HERO ---------- */
  .hero{
    padding:76px 0 60px;
    background:
      radial-gradient(ellipse 700px 400px at 78% 20%, rgba(212,162,78,0.14), transparent 70%),
      var(--bg);
    overflow:hidden;
  }
  .hero-inner{
    display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;
  }
  .hero h1{
    font-size:clamp(38px,5.4vw,58px);
    line-height:1.06;font-weight:700;
    margin-bottom:22px;
  }
  .hero h1 span{display:block;}
  .hero p.lead{
    font-size:16.5px;line-height:1.7;color:var(--text-muted);
    max-width:460px;margin-bottom:32px;
  }
  .trust-row{
    display:flex;flex-wrap:wrap;gap:24px;margin-top:30px;
  }
  .trust-row .item{
    display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-muted);
  }
  .trust-row svg{width:16px;height:16px;stroke:var(--gold);flex-shrink:0;}

  .hero-art{position:relative;width:100%;aspect-ratio:1/0.82;}
  .hero-art svg{width:100%;height:100%;}

  @media (max-width:960px){
    .hero-inner{grid-template-columns:1fr;}
    .hero-art{order:-1;max-width:420px;margin:0 auto 20px;}
  }

  /* ---------- LAYOUT: content + sticky form ---------- */
  .layout{
    display:grid;grid-template-columns:1fr 400px;gap:48px;
    align-items:start;
    padding:70px 0 100px;
  }
  .content-col > section{margin-bottom:88px;}
  .content-col > section:last-child{margin-bottom:0;}

  .sidebar{position:sticky;top:100px;}

  @media (max-width:1080px){
    .layout{grid-template-columns:1fr;}
    .sidebar{position:static;order:-1;margin-bottom:60px;}
  }

  /* ---------- STEPS ---------- */
  .steps{
    display:grid;grid-template-columns:repeat(3,1fr);gap:0;
    position:relative;
  }
  .step{text-align:center;padding:0 18px;position:relative;}
  .step-icon{
    width:74px;height:74px;border-radius:50%;
    border:1px solid var(--line-strong);
    background:var(--surface);
    display:flex;align-items:center;justify-content:center;
    margin:0 auto 20px;position:relative;z-index:2;
  }
  .step-icon svg{width:26px;height:26px;stroke:var(--gold);}
  .step-num{
    font-family:'Fraunces',serif;font-style:italic;color:var(--gold);
    font-size:14px;margin-bottom:8px;
  }
  .step h3{font-size:17px;font-weight:600;margin-bottom:8px;}
  .step p{font-size:13.5px;color:var(--text-muted);line-height:1.6;}
  .step-arrow{
    position:absolute;top:37px;right:-8px;z-index:1;
    color:var(--text-dim);
  }
  .step-arrow svg{width:18px;height:18px;stroke:currentColor;}
  @media (max-width:720px){
    .steps{grid-template-columns:1fr;gap:36px;}
    .step-arrow{display:none;}
  }

  /* ---------- EXAMPLES ---------- */
  .examples-grid{
    display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:34px;
  }
  @media (max-width:820px){.examples-grid{grid-template-columns:1fr;}}
  .example-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:18px;
  }
  .cover{
    width:100%;aspect-ratio:1/0.72;border-radius:9px;margin-bottom:16px;
    position:relative;overflow:hidden;
  }
  .cover svg{width:100%;height:100%;}
  .cover img{width:100%;height:100%;object-fit:cover;display:block;}
  .example-card h4{font-family:'Fraunces',serif;font-weight:600;font-size:16px;margin-bottom:3px;}
  .example-card .sub{font-size:12.5px;color:var(--text-muted);margin-bottom:16px;}
  .player{display:flex;align-items:center;gap:10px;}
  .play-btn{
    width:34px;height:34px;border-radius:50%;background:var(--gold);
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    border:none;cursor:pointer;
  }
  .play-btn svg{width:13px;height:13px;fill:#1B1108;}
  /* Which of the two icons shows follows a class on the button, not a
     style="" attribute the player toggles: an attribute in the card markup
     would need 'unsafe-inline' in style-src, and the whole policy would
     then allow every inline style an injection could write. Setting
     .style.display from script is CSSOM and CSP does not govern it, but
     the initial hidden state has to come from somewhere, and this is it. */
  .play-btn .icon-pause{display:none;}
  .play-btn.playing .icon-play{display:none;}
  .play-btn.playing .icon-pause{display:block;}
  .track-bar{flex:1;height:3px;background:var(--line-strong);border-radius:2px;position:relative;cursor:pointer;}
  .track-bar::after{content:"";position:absolute;left:0;top:0;bottom:0;width:var(--progress,0%);background:var(--gold);border-radius:2px;}
  .time{font-size:10.5px;color:var(--text-dim);font-variant-numeric:tabular-nums;}
  .examples-empty{text-align:center;color:var(--text-muted);font-size:14px;grid-column:1/-1;padding:20px 0;}

  /* ---------- PRICING ---------- */
  .pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  @media (max-width:720px){.pricing-grid{grid-template-columns:1fr;}}
  .price-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:32px 28px;position:relative;
  }
  .price-card.featured{
    border-color:var(--gold);
    background:linear-gradient(180deg,var(--surface-3),var(--surface));
    box-shadow:0 24px 60px -30px rgba(212,162,78,0.4);
  }
  .badge-pop{
    position:absolute;top:-13px;left:50%;transform:translateX(-50%);
    background:var(--gold);color:#1B1108;font-size:10.5px;font-weight:700;
    letter-spacing:0.08em;text-transform:uppercase;
    padding:6px 14px;border-radius:20px;white-space:nowrap;
  }
  .price-card .plan-name{
    text-align:center;font-family:'Fraunces',serif;font-size:19px;font-weight:600;margin-bottom:6px;
  }
  .price-card .plan-from{text-align:center;font-size:12px;color:var(--text-dim);margin-bottom:2px;}
  .price-card .plan-amount{
    text-align:center;font-family:'Fraunces',serif;font-size:38px;font-weight:700;color:var(--gold);
    margin-bottom:22px;
  }
  .plan-features{margin-bottom:26px;}
  .plan-features li{
    display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--text-muted);
    padding:7px 0;
  }
  .plan-features svg{width:15px;height:15px;stroke:var(--gold);flex-shrink:0;margin-top:1px;}

  /* ---------- TESTIMONIALS ---------- */
  .testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  @media (max-width:820px){.testi-grid{grid-template-columns:1fr;}}
  .testi-card{
    background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
    padding:26px 24px;
  }
  .testi-card .quote-mark{font-family:'Fraunces',serif;font-size:34px;color:var(--gold);line-height:1;margin-bottom:6px;}
  .testi-card p{font-size:13.5px;line-height:1.65;color:var(--text-muted);margin-bottom:18px;}
  .testi-foot{display:flex;justify-content:space-between;align-items:center;}
  .testi-foot .name{font-size:13px;font-weight:600;}
  .stars{display:flex;gap:2px;}
  .stars svg{width:12px;height:12px;fill:var(--gold);stroke:none;}

  /* ---------- FAQ ---------- */
  .faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;}
  @media (max-width:720px){.faq-grid{grid-template-columns:1fr;}}
  .faq-item{
    background:var(--surface);border:1px solid var(--line);border-radius:11px;overflow:hidden;
  }
  .faq-q{
    width:100%;background:none;border:none;color:var(--text);text-align:left;
    font-family:'Inter',sans-serif;font-size:14px;font-weight:500;cursor:pointer;
    padding:17px 18px;display:flex;justify-content:space-between;align-items:center;gap:12px;
  }
  .faq-q svg{width:16px;height:16px;stroke:var(--gold);flex-shrink:0;transition:transform .2s ease;}
  .faq-item.open .faq-q svg{transform:rotate(180deg);}
  .faq-a{
    max-height:0;overflow:hidden;transition:max-height .25s ease;
  }
  .faq-a p{padding:0 18px 18px;font-size:13px;line-height:1.6;color:var(--text-muted);margin:0;}

  /* ---------- SIDEBAR FORM ---------- */
  .order-card{
    background:var(--surface);border:1px solid var(--line);border-radius:18px;
    padding:30px 26px 26px;
  }
  .order-card h2{
    text-align:center;font-size:20px;font-weight:600;margin-bottom:10px;
  }
  .order-card .divider-flourish{margin-bottom:22px;}

  .field{margin-bottom:16px;}
  .field label{
    display:block;font-size:12.5px;font-weight:500;margin-bottom:7px;color:var(--text);
  }
  .field label .req{color:var(--gold);}
  .field label .opt{color:var(--text-dim);font-weight:400;}

  input[type=text],input[type=email],input[type=tel],select,textarea{
    width:100%;background:var(--surface-2);border:1px solid var(--line-strong);
    border-radius:8px;padding:11px 13px;font-family:'Inter',sans-serif;font-size:13.5px;
    color:var(--text);outline:none;transition:border-color .15s ease, box-shadow .15s ease;
  }
  input::placeholder,textarea::placeholder{color:var(--text-dim);}
  textarea{resize:vertical;min-height:70px;line-height:1.5;}
  select{
    appearance:none;-webkit-appearance:none;
    background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23A99A87' stroke-width='2'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    background-repeat:no-repeat;background-position:right 12px center;padding-right:34px;
  }
  input:focus,select:focus,textarea:focus{
    border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,162,78,0.15);
  }

  .checkbox-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;}
  .checkbox-item{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--text-muted);}
  .checkbox-item input{width:15px;height:15px;accent-color:var(--gold);}

  .plan-select{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  .plan-option{
    position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
    background:var(--surface-2);border:1px solid var(--line-strong);border-radius:10px;
    padding:14px 10px;cursor:pointer;text-align:center;
    transition:border-color .15s ease, background .15s ease;
  }
  .plan-option input{position:absolute;opacity:0;pointer-events:none;}
  .plan-option-name{font-size:13px;font-weight:600;}
  .plan-option-price{font-size:12.5px;color:var(--gold);font-weight:600;}
  .plan-option.selected{
    border-color:var(--gold);
    background:linear-gradient(180deg,var(--surface-3),var(--surface-2));
    box-shadow:0 0 0 1px var(--gold);
  }

  .order-note{
    display:flex;align-items:center;justify-content:center;gap:7px;
    font-size:11.5px;color:var(--text-dim);margin-top:14px;text-align:center;
  }
  .order-note svg{width:13px;height:13px;stroke:var(--text-dim);flex-shrink:0;}

  .ticket{display:none;text-align:center;padding:14px 4px 6px;}
  .ticket.show{display:block;}
  .ticket .stamp{
    width:56px;height:56px;margin:0 auto 16px;border:1.5px solid var(--gold);border-radius:50%;
    display:flex;align-items:center;justify-content:center;
  }
  .ticket .stamp svg{width:24px;height:24px;stroke:var(--gold);}
  .ticket h3{font-size:19px;font-weight:600;margin-bottom:8px;}
  .ticket p{font-size:13px;color:var(--text-muted);line-height:1.6;margin-bottom:6px;}
  .ticket .order-id{
    font-family:'Inter',sans-serif;font-size:11.5px;letter-spacing:0.06em;color:var(--gold);
    border:1px dashed var(--line-strong);border-radius:8px;padding:8px 12px;display:inline-block;margin-top:8px;
  }

  form.hide{display:none;}

  .form-error{
    display:none;background:rgba(196,68,68,0.12);border:1px solid rgba(196,68,68,0.4);
    color:#F0B4B4;font-size:12.5px;line-height:1.55;border-radius:9px;padding:12px 14px;margin-bottom:16px;
  }
  .form-error.show{display:block;}

  .field.field-error input,
  .field.field-error select,
  .field.field-error textarea{border-color:#C44444;}
  .field-error-msg{font-size:11.5px;color:#E38B8B;margin-top:5px;}

  button.btn[disabled]{opacity:0.6;cursor:not-allowed;transform:none !important;}

  /* Honeypot. Moved out of sight rather than hidden: display:none and
     type=hidden are exactly what an automated filler skips, and being off-screen
     is what makes filling it evidence. aria-hidden plus tabindex=-1 keep it away
     from screen readers and the tab order, so no person ever reaches it. */
  .hp-field{
    position:absolute;left:-9999px;top:auto;width:1px;height:1px;
    overflow:hidden;opacity:0;pointer-events:none;
  }

  /* ---------- FOOTER ---------- */
  footer.site{border-top:1px solid var(--line);padding:48px 0 28px;}
  .footer-inner{
    display:flex;flex-wrap:wrap;gap:30px;justify-content:space-between;align-items:flex-start;
    margin-bottom:34px;
  }
  .footer-brand .logo{margin-bottom:10px;}
  .footer-brand p{font-size:12.5px;color:var(--text-muted);line-height:1.7;}
  .footer-contact{font-size:13px;color:var(--text-muted);}
  .footer-contact div{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
  .footer-contact svg{width:15px;height:15px;stroke:var(--gold);}
  .footer-social-label{font-size:12px;color:var(--text-dim);margin-bottom:10px;}
  .footer-social{display:flex;gap:12px;}
  .footer-social a{
    width:34px;height:34px;border:1px solid var(--line-strong);border-radius:50%;
    display:flex;align-items:center;justify-content:center;transition:border-color .15s ease, color .15s ease;
  }
  .footer-social a svg{width:15px;height:15px;stroke:currentColor;color:var(--text-muted);}
  .footer-social a:hover{border-color:var(--gold);}
  .footer-social a:hover svg{color:var(--gold);}
  .footer-bottom{
    border-top:1px solid var(--line);padding-top:22px;
    font-size:11.5px;color:var(--text-dim);text-align:center;
  }

  /* ---------- RODO: CONSENTS IN THE ORDER FORM ---------- */
  .consent-block{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);}
  .consent-item{
    display:flex;align-items:flex-start;gap:10px;font-size:11.5px;line-height:1.55;
    color:var(--text-muted);margin-bottom:12px;cursor:pointer;
  }
  .consent-item input{
    width:15px;height:15px;flex-shrink:0;margin-top:1px;accent-color:var(--gold);
  }
  .consent-item a{color:var(--gold);text-decoration:underline;}
  .consent-item .req{color:var(--gold);}
  .consent-item .opt{color:var(--text-dim);}
  .field.field-error .consent-item{color:#E38B8B;}

  .rodo-note{
    margin-top:14px;border:1px solid var(--line);border-radius:10px;
    background:var(--surface-2);font-size:11.5px;color:var(--text-dim);
  }
  .rodo-note summary{
    cursor:pointer;padding:10px 13px;font-weight:600;color:var(--text-muted);
    list-style:none;display:flex;align-items:center;gap:7px;
  }
  .rodo-note summary::-webkit-details-marker{display:none;}
  .rodo-note summary::after{content:"+";margin-left:auto;color:var(--gold);}
  .rodo-note[open] summary::after{content:"–";}
  .rodo-note .rodo-note-body{padding:0 13px 12px;line-height:1.65;}
  .rodo-note p{margin:0 0 8px;}
  .rodo-note a{color:var(--gold);text-decoration:underline;}

  /* ---------- COOKIE CONSENT BANNER ---------- */
  .cookie-banner{
    display:none;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:var(--surface);border-top:1px solid var(--line-strong);
    box-shadow:0 -12px 40px rgba(0,0,0,0.45);
  }
  .cookie-banner.show{display:block;}
  .cookie-banner-inner{
    max-width:1240px;margin:0 auto;padding:18px 32px 20px;
    display:flex;flex-wrap:wrap;gap:16px 26px;align-items:flex-start;
  }
  @media (max-width:640px){.cookie-banner-inner{padding:16px 20px 18px;}}
  .cookie-banner-text{flex:1;min-width:260px;}
  .cookie-banner-text strong{display:block;font-size:13.5px;margin-bottom:6px;color:var(--text);}
  .cookie-banner-text p{margin:0;font-size:12px;line-height:1.6;color:var(--text-muted);}
  .cookie-banner-text a{color:var(--gold);text-decoration:underline;}
  .cookie-options{flex-basis:100%;display:flex;flex-direction:column;gap:9px;}
  .cookie-option{
    display:flex;align-items:flex-start;gap:9px;font-size:11.5px;line-height:1.55;
    color:var(--text-muted);cursor:pointer;
  }
  .cookie-option input{width:15px;height:15px;flex-shrink:0;margin-top:1px;accent-color:var(--gold);}
  .cookie-option strong{color:var(--text);}
  .cookie-banner-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
  .cookie-btn{
    font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
    border-radius:9px;padding:10px 16px;cursor:pointer;border:1px solid var(--line-strong);
    background:none;color:var(--text-muted);transition:border-color .15s ease,color .15s ease;
  }
  .cookie-btn-ghost:hover{border-color:var(--gold);color:var(--gold);}
  .cookie-btn-gold{
    background:linear-gradient(180deg,var(--gold-light),var(--gold-deep));
    color:#1B1108;border-color:transparent;
  }

  /* ---------- LEGAL / PRIVACY POLICY PAGE ---------- */
  .legal{max-width:840px;margin:0 auto;padding:54px 0 70px;}
  .legal h1{font-size:34px;margin-bottom:10px;}
  @media (max-width:640px){.legal h1{font-size:26px;}}
  .legal .legal-meta{font-size:12px;color:var(--text-dim);margin-bottom:30px;}
  .legal h2{
    font-size:19px;margin:38px 0 12px;padding-top:18px;border-top:1px solid var(--line);
  }
  .legal h3{font-size:15px;margin:22px 0 8px;color:var(--text);}
  .legal p,.legal li{font-size:13.5px;line-height:1.75;color:var(--text-muted);}
  .legal p{margin:0 0 12px;}
  .legal ul{margin:0 0 14px;padding-left:0;}
  .legal ul li{position:relative;padding-left:18px;margin-bottom:7px;}
  .legal ul li::before{
    content:"";position:absolute;left:2px;top:9px;width:5px;height:5px;
    border-radius:50%;background:var(--gold);opacity:0.8;
  }
  .legal a{color:var(--gold);text-decoration:underline;}
  /* A button inside prose is still a button. `.legal a` (0,1,1) outranks
     `.btn-gold` (0,1,0), so the 404 page's "Wróć na stronę główną" rendered as
     gold text on the gold gradient, underlined — a button you could see but
     not read. Re-assert the button's own colours at a specificity that wins.
     Note this has to be an extra rule rather than a `:not(.btn)` on the line
     above: that would raise the prose rule to 0,2,1 and it would then start
     beating `.legal-toc a` below, underlining the whole privacy-policy
     contents list. */
  .legal a.btn{text-decoration:none;}
  .legal a.btn-gold{color:#1B1108;}
  .legal a.btn-ghost{color:var(--text);}
  .legal strong{color:var(--text);}
  .legal-toc{
    background:var(--surface);border:1px solid var(--line);border-radius:12px;
    padding:18px 22px;margin-bottom:34px;
  }
  .legal-toc ol{margin:0;padding-left:20px;font-size:13px;line-height:1.9;color:var(--text-muted);}
  .legal-toc a{text-decoration:none;}
  .legal-toc a:hover{text-decoration:underline;}
  .legal-table-wrap{overflow-x:auto;margin-bottom:16px;}
  .legal-table{
    width:100%;border-collapse:collapse;font-size:12.5px;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  }
  .legal-table th,.legal-table td{
    text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);
    vertical-align:top;line-height:1.6;color:var(--text-muted);
  }
  .legal-table th{
    background:var(--surface-2);color:var(--text);font-size:11px;
    text-transform:uppercase;letter-spacing:0.05em;font-weight:600;
  }
  .legal-table tr:last-child td{border-bottom:none;}
  .legal-card{
    background:var(--surface);border:1px solid var(--line);border-radius:14px;
    padding:24px 26px;margin:18px 0 8px;
  }
  @media (max-width:640px){.legal-card{padding:20px 18px;}}
  .legal-card .field{margin-bottom:14px;}
  .legal-card .btn{margin-top:4px;}
  .legal-back{
    display:inline-flex;align-items:center;gap:7px;font-size:12.5px;
    color:var(--text-muted);margin-bottom:26px;
  }
  .legal-back:hover{color:var(--gold);}
  .footer-legal{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px 20px;margin-bottom:12px;
  }
  .footer-legal a{color:var(--text-muted);}
  .footer-legal a:hover{color:var(--gold);text-decoration:underline;}
  .legal code{
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;
    background:var(--surface-2);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:var(--text);
  }
  .legal .field label{color:var(--text);}
  .legal .consent-block{border-top:none;margin-top:8px;padding-top:0;}