/* ============================================================
   Fybrus — v4 reskin (Aug 2026)
   Loaded AFTER base.css (+ any page sheet) on every subpage.
   Rebrands the emerald/rounded design language to match the v4
   homepage: single amber accent on near-black/white, square
   corners, hairline rules, no gradients / glows / auroras.
   Layout and content are untouched — this is colour, shape and
   type only.
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  --ink:#0A0A0A;
  --black:#0A0A0A;
  --panel:#0A0A0A;
  --body-c:#5C5C57;
  --muted:#74746F;
  --faint:#85857F;
  --hair:rgba(10,10,10,.14);
  --hair-2:rgba(10,10,10,.22);
  --accent:#B36B00;          /* accent on light — AA contrast */
  --accent-bright:#E08A00;   /* accent on dark */
  --paper:#F5F5F2;
  --canvas:#FFFFFF;
  --d-hair:rgba(255,255,255,.13);
  --d-text:#A9A9A2;
  --d-muted:#85857F;
  /* flatten every gradient token to a solid v4 surface */
  --panel-grad:#0A0A0A;
  --card-grad:#0A0A0A;
  --ic-grad:#1A1A1A;
  --hot-grad:#FFFFFF;
}

/* ---------- Global shape: square everything ---------- */
*,*::before,*::after{border-radius:0 !important}
/* except genuinely circular dots */
.dot-pulse,.dot-static,.footer-status-dot,.marquee-dot{border-radius:50% !important}

body{background:#FFFFFF;color:#0A0A0A}

/* ---------- Type ---------- */
.container{max-width:1280px;padding-left:max(22px,5vw);padding-right:max(22px,5vw)}
@media (min-width:1400px){.container{padding-left:56px;padding-right:56px}}

h1{font-weight:800 !important;letter-spacing:-.05em !important}
h2{font-weight:800 !important;letter-spacing:-.04em !important}
.kicker,.doc-kicker{
  font:500 11px 'Schibsted Grotesk',sans-serif !important;
  letter-spacing:.26em !important;text-transform:uppercase;color:var(--muted) !important;
}
/* the emerald gradient headline treatment → flat amber */
.grad-text{background:none !important;-webkit-text-fill-color:#B36B00;color:#B36B00 !important}
.section-sub{color:var(--body-c)}

/* ---------- Buttons: v4 (square, flat, ink/amber) ---------- */
.btn{transition:background .2s ease,border-color .2s ease,color .2s ease}
.btn:hover{transform:none}
.btn-primary,.btn-book,.btn-submit,.btn-submit-grad{
  background:#0A0A0A !important;color:#FFFFFF !important;
  box-shadow:none !important;font-weight:700 !important;
}
.btn-primary:hover,.btn-book:hover,.btn-submit:hover,.btn-submit-grad:hover{background:#E08A00 !important;color:#0A0A0A !important}
.btn-primary:hover svg *,.btn-book:hover svg *,.btn-submit:hover svg *{stroke:#0A0A0A !important}
.btn-nav{
  background:#FFFFFF !important;color:#0A0A0A !important;box-shadow:none !important;
  font:700 12px 'Schibsted Grotesk',sans-serif !important;padding:11px 18px !important;
}
.btn-nav:hover{background:#E08A00 !important}
.btn-outline{background:#FFFFFF;border:1px solid var(--hair-2);color:#0A0A0A;font-weight:700 !important}
.btn-outline:hover{border-color:#0A0A0A;background:#0A0A0A;color:#FFFFFF}
.btn-white{background:#FFFFFF !important;color:#0A0A0A !important;font-weight:700 !important}
.btn-white:hover{background:#E08A00 !important}
.btn-outline-white{border:1px solid var(--d-hair);color:#F2F2EF;font-weight:700 !important}
.btn-outline-white:hover{border-color:#E08A00;color:#E08A00}
.btn-done{background:#FFFFFF;border:1px solid var(--hair-2);color:#0A0A0A}
.btn-done:hover{border-color:#0A0A0A}
.pill-hero{
  background:#FFFFFF;border:1px solid var(--hair-2);color:var(--muted);
  font:400 10.5px 'Space Mono',monospace !important;letter-spacing:.2em !important;
}

/* ---------- Nav (match homepage) ---------- */
.nav{
  background:#000000 !important;
  border-bottom:1px solid rgba(255,255,255,.13) !important;
  box-shadow:none !important;
}
.nav.scrolled{background:#000000 !important;box-shadow:none !important}
.nav-inner{padding-top:20px;padding-bottom:20px}
.nav-mark{display:none}                      /* v4 nav is wordmark-only */
.nav-wordmark{height:13px;opacity:.92}
.nav-links{
  gap:30px !important;
  font:500 11px 'Schibsted Grotesk',sans-serif !important;
  letter-spacing:.14em !important;text-transform:uppercase;
}
.nav-links a{color:#85857F}
.nav-links a:hover,.nav-links a.is-active{color:#F2F2EF}
.nav-book{
  font:500 11px 'Schibsted Grotesk',sans-serif !important;
  letter-spacing:.14em !important;text-transform:uppercase;color:#85857F;
}
.nav-book:hover{color:#F2F2EF}
.nav-menu{background:#0A0A0A;border-bottom:1px solid rgba(255,255,255,.13);box-shadow:none}
.nav-menu-links a{color:#F2F2EF;border-bottom-color:rgba(255,255,255,.13)}
.nav-menu-links a:first-child{border-top-color:rgba(255,255,255,.13)}
.nav-menu-cta .btn-nav{background:#FFFFFF;color:#0A0A0A}
.nav-menu-cta .nav-book{
  color:#F2F2EF;border:1px solid rgba(255,255,255,.24);
  font-size:14px !important;letter-spacing:.1em !important;
}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{background:#F2F2EF}
.nav-toggle.open .nav-toggle-bars{background:transparent}

/* ---------- Surfaces: flatten cards, kill lift/glow ---------- */
.card,.cap-card,.trust-item,.how-step,.do-card,.fyb-card,.activity-card,
.price-card,.bps-rate,.cohort,.contact-card,.bal-table,.bps-table,.bps-fee{
  background:#FFFFFF !important;border:1px solid var(--hair) !important;
  box-shadow:none !important;
}
.card:hover,.cap-card:hover,.trust-item:hover,.how-step:hover,.do-card:hover,
.price-card:hover,.bps-rate:hover{
  transform:none !important;box-shadow:none !important;border-color:#0A0A0A !important;
}
.contact-card::before{display:none}          /* emerald edge-glow */
.hero-aurora{display:none !important}        /* emerald aurora blobs */

/* dark variants → flat near-black */
.card-dark,.how-step-dark,.do-card-dark,.price-card-dark,.bps-rate-us{
  background:#0A0A0A !important;border:1px solid rgba(255,255,255,.13) !important;
}
.card-dark:hover,.how-step-dark:hover,.do-card-dark:hover{
  border-color:rgba(255,255,255,.3) !important;box-shadow:none !important;
}
.card-ic,.do-ic,.how-step-num,.bal-ic-usd,.bal-ic-bank,.bal-ic-sm-usd{background:#0A0A0A !important}
/* the teal brand mark inside cards → mono ink (v4 uses the wordmark only) */
.fyb-card-title img,.activity-head img{filter:brightness(0) saturate(0)}
.bal-ic-fyb,.bal-ic-sm-eur,.success-ic{background:#E08A00 !important}
.bal-ic-fyb img,.success-ic svg *{filter:none}
.card-dark .card-ic,.do-card-dark .do-ic,.how-step-dark .how-step-num{background:rgba(255,255,255,.12) !important}

/* accent-coloured text/marks */
.cap-num,.activity-link,.bps-fee-us,.bps-save,.bal-amt-in,.doc-body a{color:#B36B00 !important}
.badge-live{color:#B36B00;border:1px solid var(--hair)}
.dot-pulse,.dot-static,.marquee-dot,.footer-status-dot{background:#E08A00 !important}
.trust-item > svg *,.hero-m-checks svg *,.price-item svg *{stroke:#B36B00 !important}
.chip-accent{color:#B36B00;background:#FFFFFF;border-color:rgba(179,107,0,.4)}
.ind-item{border-top:1px solid #0A0A0A}

/* the "accent rule" motif from the homepage */
.trust-item{box-shadow:inset 3px 0 0 0 #E08A00 !important;padding-left:26px}

/* ---------- Marquee ---------- */
.marquee{background:#0A0A0A;border-bottom:1px solid rgba(255,255,255,.13)}
.marquee-label{color:#74746F}
.marquee-item{color:#A9A9A2}

/* ---------- Doc pages (pricing / legal) ---------- */
.doc-hero{background:#0A0A0A;border-bottom:1px solid rgba(255,255,255,.13)}
.doc-hero-inner{max-width:1280px;padding:104px max(22px,5vw) 72px}
.doc-hero .doc-kicker{color:#85857F !important}
.doc-title{
  font-weight:800 !important;font-size:clamp(31px,4.4vw,52px) !important;line-height:1.02 !important;
  letter-spacing:-.05em !important;color:#F2F2EF !important;
}
.doc-sub{color:#85857F !important;font-size:17px !important;max-width:640px}
.doc-meta{color:#5C5C57 !important}
.doc-body{max-width:900px;padding:88px max(22px,5vw) 120px}
.doc-body h2{font:800 clamp(24px,2.7vw,32px)/1.1 'Schibsted Grotesk',sans-serif !important;letter-spacing:-.03em !important;margin:56px 0 18px}
.doc-body h3{font-weight:700 !important;font-size:17px !important;margin:30px 0 8px}
.doc-body p,.doc-body li{font-size:15.5px !important;line-height:1.78 !important;color:var(--body-c) !important}
.doc-divider{background:var(--hair);margin:56px 0}

/* ---------- Pricing components ---------- */
.price-tag,.bps-rate-tag,.cohort-n,.cohort-state{font-family:'Space Mono',monospace !important}
.price-tag{color:#B36B00;border:1px solid var(--hair)}
.price-card-dark .price-tag{color:#E08A00;border-color:rgba(224,138,0,.4)}
.bps-rate-num,.cohort-bps,.bal-amt,.total-bal-amt,.stat-num,.bps-fee-v{font-family:'Space Mono',monospace !important}
.bps-rate-us .bps-rate-tag{color:#E08A00;border-color:rgba(224,138,0,.4)}
.bps-rate-us .bps-rate-num span{color:#E08A00}
.bps-head{background:var(--paper)}
.bps-us{background:rgba(224,138,0,.12);box-shadow:inset 1px 0 0 rgba(224,138,0,.4),inset -1px 0 0 rgba(224,138,0,.4)}
.bps-c.bps-us{color:#8A5200;font-weight:700}
.bps-head .bps-c.bps-us{color:#B36B00}
.bps-fee-side{background:#FFFFFF}
.bps-fee-side.us{background:rgba(224,138,0,.09)}
.cohort-open{
  background:#FFFFFF !important;border:1px solid #E08A00 !important;
  box-shadow:inset 0 3px 0 0 #E08A00 !important;
}
.cohort-open .cohort-bps,.cohort-open .cohort-state{color:#B36B00 !important}
.cohort-std{background:#0A0A0A !important;border-color:#0A0A0A !important}
.cohort-std .cohort-bps{color:#FFFFFF !important}
.cohort-std .cohort-n,.cohort-std .cohort-bps i,.cohort-std .cohort-state{color:#85857F !important}

/* ---------- FAQ ---------- */
details.faq>summary{font-weight:700 !important}
details.faq[open]>summary{color:#B36B00}

/* ---------- Final CTA panel ---------- */
.cta-panel{
  background:#0A0A0A !important;border:1px solid rgba(255,255,255,.13) !important;
  padding:104px 48px !important;
}
.cta-mark{opacity:.04}
.cta-panel h2,.h2-start{color:#F2F2EF !important}
.cta-sub{color:#85857F !important}

/* ---------- Footer ---------- */
.footer{background:#0A0A0A !important;border-top:1px solid rgba(255,255,255,.13)}
.footer-brand img{display:none}
.footer-brand span{font:500 13px 'Schibsted Grotesk',sans-serif;letter-spacing:.22em;color:#F2F2EF}
.footer-desc{color:#5C5C57}
.footer-head{
  font:500 9.5px 'Schibsted Grotesk',sans-serif !important;
  letter-spacing:.2em !important;color:#5C5C57 !important;
}
.footer-links a,.footer-email{color:#A9A9A2}
.footer-links a:hover,.footer-email:hover{color:#E08A00}
.footer-bottom{border-top:1px solid rgba(255,255,255,.13)}
.footer-copy,.footer-status{color:#5C5C57}

/* ---------- Modal (match homepage) ---------- */
.modal{background:rgba(10,10,10,.66);-webkit-backdrop-filter:none;backdrop-filter:none}
.modal-dialog{border:1px solid var(--hair);box-shadow:none;max-width:440px}
.modal-brand img{display:none}
.modal-brand span{font:500 11px 'Schibsted Grotesk',sans-serif;letter-spacing:.26em;color:var(--muted)}
.modal-title,.success-title{font-weight:800 !important;letter-spacing:-.04em !important}
.form-fields input,.form-fields select,.form-fields textarea{border:1px solid rgba(10,10,10,.18)}
.form-fields input:focus,.form-fields select:focus,.form-fields textarea:focus{border-color:#0A0A0A}
.modal .btn-submit{background:#E08A00 !important;color:#0A0A0A !important}
.modal .btn-submit:hover{background:#F0A020 !important}
.modal .btn-submit svg *{stroke:#0A0A0A !important}

/* ---------- Responsive type (mirror the homepage clamps) ---------- */
@media (max-width:900px){
  h1{font-size:clamp(31px,7vw,42px) !important}
  h2{font-size:clamp(24px,5vw,30px) !important}
  .cta-panel{padding:72px 26px !important}
  .doc-hero-inner{padding-top:72px;padding-bottom:52px}
  .doc-body{padding-top:64px;padding-bottom:88px}
}
@media (max-width:620px){
  .nav-wordmark{display:block}   /* base.css hides it; v4 nav needs it (mark is gone) */
  .trust-item{padding-left:22px}
}