/* tony.opfinances.com — E-Commerce Seller's Financial Blueprint (Tony Opee x Wholesale Universe)
   Built 2026-09-09 from Tony's brief + mockup. Mobile-first. Palette: navy + gold from the mockup,
   Wholesale Universe blue (#0071DC) reserved for the partnership strip so the partner reads as
   the partner and the page keeps its own financial-education identity. */

:root{
  --navy:#0F1B2D; --navy-2:#16263D; --navy-3:#1E3352;
  --gold:#C9A24A; --gold-2:#E2C275; --gold-ink:#141C2B;
  --ink:#1B2430; --muted:#5B6672; --line:#E3E7EC;
  --paper:#FFFFFF; --wash:#F4F6F9; --wash-2:#EEF3F8; --cream:#FFF4E1;
  --wu:#0071DC; --wu-deep:#00509E;
  --font-head:"Montserrat","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-body:"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --radius:14px; --shadow:0 18px 50px rgba(15,27,45,.16);
  --pad:clamp(1.1rem,5vw,3rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-head);line-height:1.12;margin:0;letter-spacing:-.01em}
p{margin:0 0 1rem}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--pad)}
.skip{position:absolute;left:-999px;top:0;background:var(--gold);color:var(--gold-ink);padding:.5rem 1rem;z-index:99}
.skip:focus{left:1rem}

/* ---------- topbar ---------- */
.topbar{background:var(--navy);color:#fff}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:68px;padding-top:.6rem;padding-bottom:.6rem}
.brands{display:flex;align-items:center;gap:.9rem;min-width:0}
.brands .wu{height:46px;width:auto;filter:brightness(0) invert(1);opacity:.95}
.brands .x{color:var(--gold-2);font-family:var(--font-head);font-weight:600;font-size:1rem;opacity:.9}
.wordmark{display:flex;align-items:center;gap:.55rem;text-decoration:none;color:#fff}
.wordmark .mono{width:36px;height:36px;border:1.5px solid var(--gold-2);border-radius:6px;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;color:var(--gold-2);font-size:.95rem;letter-spacing:.02em;flex:none}
.wordmark b{display:block;font-family:var(--font-head);font-weight:700;letter-spacing:.14em;font-size:.86rem;line-height:1.1;text-transform:uppercase}
.wordmark small{display:block;font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;color:#B7C2D0;line-height:1.2;margin-top:.2rem}
.tagline{display:none;font-style:italic;color:#C9D2DE;font-size:.86rem;text-align:right;max-width:16rem;line-height:1.35}
@media (min-width:900px){ .tagline{display:block} .brands .wu{height:54px} }

/* ---------- hero ---------- */
.hero{position:relative;background:linear-gradient(180deg,#F6F8FB 0%,#EEF2F7 100%);overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(60% 55% at 12% 60%, rgba(201,162,74,.16), transparent 70%),
  radial-gradient(45% 50% at 88% 10%, rgba(0,113,220,.10), transparent 70%)}
.hero .wrap{position:relative;display:grid;gap:1.6rem;padding-top:2.2rem;padding-bottom:2.4rem;grid-template-areas:"copy" "photo" "card"}
.hero .copy{grid-area:copy}
.hero .photo{grid-area:photo}
.hero .card{grid-area:card}
.hero .eyebrow{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.9rem}
.hero h1{font-size:clamp(2rem,6.2vw,3.3rem);color:var(--navy);font-weight:800}
.hero .sub{font-size:clamp(1.05rem,2.4vw,1.3rem);color:#2A3646;margin:1rem 0 0;max-width:30rem}
.rule{width:3.2rem;height:3px;background:var(--gold);border-radius:2px;margin:1.3rem 0}
.hero .support{color:var(--muted);max-width:30rem;font-size:1rem}
.hero .support b{color:var(--navy);font-weight:600}
.photo{position:relative;margin:0 auto;max-width:22rem}
.photo img{width:100%;height:auto;filter:drop-shadow(0 22px 30px rgba(15,27,45,.28))}
@media (min-width:900px){
  .hero .wrap{grid-template-columns:1.05fr 1fr;grid-template-areas:"copy card" "photo card";align-items:end;gap:1rem 2.5rem;padding-top:3rem;padding-bottom:0}
  .hero .copy{align-self:start}
  .hero .photo{max-width:22rem;margin:0;align-self:end}
  .hero .card{align-self:center;margin:2rem 0 2.5rem}
}
@media (min-width:1100px){
  .hero .wrap{max-width:1280px;grid-template-columns:330px minmax(0,1fr) 380px;grid-template-areas:"photo copy card";gap:2rem;padding-top:0}
  .hero h1{font-size:clamp(2rem,2.9vw,2.6rem)}
  .hero .copy{align-self:center;padding:3.5rem 0}
  .hero .photo{max-width:none;width:122%;margin-left:-14%}
  .hero .card{margin:2.5rem 0}
}
.nb{white-space:nowrap}
.btn-anchor{width:auto;margin:1.1rem 0 .2rem;padding:.9rem 1.3rem}
@media (min-width:900px){ .btn-anchor{display:none} }
.consent-text{font-size:.74rem;line-height:1.45;color:var(--muted);margin:.1rem 0 0;text-align:center}
.consent-text a{color:var(--navy)}
.sel{position:relative}
.sel select{width:100%;padding:.85rem 2.4rem .85rem .9rem;border:1px solid #D5DBE3;border-radius:9px;font:inherit;font-size:1rem;background:#FBFCFD;color:var(--ink);min-height:50px;appearance:none;-webkit-appearance:none}
.sel select:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent;background:#fff}
.sel::after{content:"";position:absolute;right:1rem;top:50%;width:8px;height:8px;border-right:2px solid #8A96A5;border-bottom:2px solid #8A96A5;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.sel select:invalid{color:#8A96A5}
.step2{display:grid;gap:.7rem;margin-top:.4rem}
.step2 .btn{width:100%}
.two{display:grid;gap:.7rem}
@media (min-width:600px){ .two{grid-template-columns:1fr 1fr} }
.note{background:var(--cream);border:1px solid #F0DDB0;border-radius:10px;padding:1rem 1.1rem;color:#5A4A1E;font-size:.95rem}
.note b{color:var(--navy)}
[hidden]{display:none!important}
/* ---------- seller application (2026-09-10) ---------- */
.card{max-width:28rem}
form.survey{gap:.6rem}
.field.plain input{padding-left:.9rem}
.grid5{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr))}
.ten .big{font-size:clamp(2.6rem,7vw,4.2rem);letter-spacing:-.02em}
.srcnote{text-align:center;font-size:.8rem;color:var(--muted);margin:1.4rem 0 0}
.srcnote a{color:var(--navy)}
.partner-feature{display:grid;gap:1.4rem;background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;color:var(--ink)}
.partner-feature img{width:100%;height:100%;object-fit:cover;min-height:14rem}
.partner-copy{padding:1.4rem 1.5rem 1.7rem}
.partner-copy h2{font-size:clamp(1.5rem,3.4vw,2rem);color:var(--navy);margin-bottom:.15rem}
.partner-copy .role{color:var(--wu);font-weight:600;font-family:var(--font-head);text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;margin-bottom:.9rem}
.partner-copy p{color:var(--muted)}
.partner-copy .actions{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.1rem}
.partner-copy .actions .btn{width:auto}
@media (min-width:820px){ .partner-feature{grid-template-columns:1.1fr 1fr;gap:0} .partner-copy{padding:2.2rem 2.4rem} }
.partner.feature .wrap{display:block;text-align:center;padding-top:2.6rem;padding-bottom:2.6rem}
.partner.feature .eyebrow{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1.2rem}
.partner.feature .partner-feature{text-align:left;max-width:60rem;margin:0 auto}
.flow.how .step{width:7.2rem}
.flow.how .step small{display:block;font-size:.64rem;line-height:1.3;color:#B7C2D0;margin-top:.3rem}
.ty h1 span[data-qualified-line]{display:block;color:var(--gold);font-size:clamp(1.2rem,3vw,1.7rem);margin-top:.35rem}
.ty h1 span[data-first-name]{display:inline;color:inherit;font-size:inherit;font-weight:inherit;margin:0}
.final .card p{color:var(--muted)}
.final .card .formerr{color:#8A2F1E}
.ty h1 span[data-first-name]{display:inline;color:inherit;font-size:inherit;font-weight:inherit;margin:0}

/* ---------- lead card ---------- */
.card{background:var(--paper);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;max-width:26rem;width:100%;margin:0 auto}
.card .head{background:var(--navy);color:#fff;padding:1.25rem 1.4rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;position:relative}
.card .head h2{font-size:1.15rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;line-height:1.15}
.card .head h2 span{display:block;color:var(--gold-2);font-size:1.45rem}
.guide{flex:none;width:74px;height:94px;border-radius:3px 7px 7px 3px;background:linear-gradient(160deg,#1E3352,#0F1B2D);border-left:5px solid var(--gold);box-shadow:6px 8px 18px rgba(0,0,0,.35);transform:rotate(-6deg);display:grid;place-content:center;padding:.4rem .3rem .4rem .35rem;text-align:center}
.guide b{font-family:var(--font-head);font-size:.5rem;line-height:1.25;letter-spacing:.06em;text-transform:uppercase;color:#fff}
.guide i{display:block;width:22px;height:2px;background:var(--gold-2);margin:.3rem auto}
.guide small{display:block;font-size:.45rem;color:var(--gold-2);letter-spacing:.12em;text-transform:uppercase}
form.lead{padding:1.3rem 1.4rem 1.4rem;display:grid;gap:.7rem}
.field{position:relative}
.field svg{position:absolute;left:.85rem;top:50%;transform:translateY(-50%);width:16px;height:16px;color:#8A96A5;pointer-events:none}
.field input{width:100%;padding:.85rem .9rem .85rem 2.5rem;border:1px solid #D5DBE3;border-radius:9px;font:inherit;font-size:1rem;background:#FBFCFD;color:var(--ink);min-height:50px}
.field input:focus{outline:2px solid var(--gold);outline-offset:1px;border-color:transparent;background:#fff}
.field input::placeholder{color:#8A96A5}
.hp{position:absolute;left:-9999px;opacity:0;height:0;width:0;overflow:hidden}
.consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.74rem;line-height:1.45;color:var(--muted);margin-top:.15rem}
.consent input{margin:.2rem 0 0;flex:none;width:16px;height:16px;accent-color:var(--navy)}
.consent a{color:var(--navy)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:0;border-radius:9px;padding:1rem 1.4rem;font-family:var(--font-head);font-weight:700;font-size:.92rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer;text-decoration:none;min-height:54px;transition:transform .15s ease,background .15s ease,box-shadow .15s ease}
.btn-gold{background:var(--gold);color:var(--gold-ink);box-shadow:0 10px 24px rgba(201,162,74,.35);width:100%}
.btn-gold:hover{background:#D4AE55;transform:translateY(-1px)}
.btn-gold[disabled]{opacity:.7;cursor:progress;transform:none}
.btn-navy{background:var(--navy);color:#fff}
.btn-navy:hover{background:var(--navy-3)}
.btn-line{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-line:hover{background:var(--navy);color:#fff}
.btn svg{width:16px;height:16px}
.formnote{text-align:center;font-size:.8rem;color:var(--muted);margin:0}
.formerr{display:none;background:#FDF1EF;color:#8A2F1E;border:1px solid #F1C9C2;border-radius:8px;padding:.6rem .8rem;font-size:.85rem;margin:0}
.formerr.on{display:block}

/* ---------- ten things ---------- */
.ten{padding:3.2rem 0 2.6rem;background:var(--paper)}
.ten .title{display:flex;align-items:center;gap:1rem;justify-content:center;text-align:center;flex-wrap:wrap;margin-bottom:2rem}
.ten .title .big{font-family:var(--font-head);font-weight:800;font-size:clamp(3rem,9vw,4.4rem);color:var(--gold);line-height:1}
.ten .title h2{font-size:clamp(1.3rem,3.4vw,1.9rem);color:var(--navy);font-weight:700}
.ten .title .line{flex-basis:100%;height:1px;background:var(--line);order:-1;display:none}
.grid10{display:grid;gap:.9rem;grid-template-columns:1fr}
@media (min-width:560px){ .grid10{grid-template-columns:repeat(2,1fr)} }
@media (min-width:900px){ .grid10{grid-template-columns:repeat(5,1fr);gap:.8rem} }
.pt{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.15rem 1.05rem 1.2rem;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.pt:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(15,27,45,.09);border-color:#D6DDE6}
.pt .row{display:flex;align-items:center;justify-content:space-between;margin-bottom:.7rem}
.pt .n{width:32px;height:32px;border-radius:50%;background:var(--navy);color:var(--gold-2);font-family:var(--font-head);font-weight:700;font-size:.8rem;display:grid;place-items:center}
.pt .ic{width:28px;height:28px;color:var(--navy)}
.pt h3{font-size:.98rem;color:var(--navy);font-weight:700;margin-bottom:.4rem}
.pt p{font-size:.86rem;color:var(--muted);margin:0;line-height:1.5}

/* ---------- framework + meet ---------- */
.fw{background:linear-gradient(120deg,#0B1526 0%,#16263D 60%,#1E3352 100%);color:#fff;position:relative;overflow:hidden}
.fw::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 90% at 100% 100%, rgba(201,162,74,.18), transparent 60%)}
.fw .wrap{position:relative;display:grid;gap:2.4rem;padding-top:3rem;padding-bottom:3rem}
.fw h2{font-size:clamp(1.35rem,3.4vw,1.8rem);font-weight:700;margin-bottom:1.5rem}
.flow{display:flex;flex-wrap:wrap;gap:.8rem .4rem;align-items:center}
.flow .step{display:flex;flex-direction:column;align-items:center;text-align:center;width:4.3rem}
.flow .step i{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--gold-2);display:grid;place-items:center;margin-bottom:.5rem;color:var(--gold-2);background:rgba(255,255,255,.03)}
.flow .step i svg{width:24px;height:24px}
.flow .step b{font-family:var(--font-head);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.3;font-weight:700}
.flow .arr{color:var(--gold-2);opacity:.85}
.flow .arr svg{width:18px;height:18px;display:block}
.meet{display:grid;gap:1.4rem;align-items:center}
.meet .txt h2{margin-bottom:.35rem}
.meet .role{font-family:var(--font-head);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:1rem;font-weight:600}
.meet p{color:#D7DEE8;font-size:.98rem}
.meet p b{color:#fff;font-weight:600}
.meet .pic{justify-self:center;width:min(100%,17rem);border-radius:14px;overflow:hidden;border:3px solid rgba(226,194,117,.8);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.meet .pic img{width:100%;height:100%;object-fit:cover;object-position:top}
@media (min-width:900px){
  .fw .wrap{grid-template-columns:1.3fr 1fr;gap:3rem}
  .meet{grid-template-columns:1fr auto}
  .meet .pic{width:13rem;height:15.5rem}
}

/* ---------- partnership ---------- */
.partner{background:var(--wash-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.partner .wrap{display:grid;gap:1.4rem;padding-top:2rem;padding-bottom:2rem;align-items:center;justify-items:center;text-align:center}
.partner .kicker{font-family:var(--font-head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:600}
.partner .pair{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:center}
.person{display:flex;align-items:center;gap:.8rem;text-align:left}
.person .av{width:60px;height:60px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 6px 16px rgba(15,27,45,.18);background:var(--navy);color:var(--gold-2);display:grid;place-items:center;font-family:var(--font-head);font-weight:700;flex:none;overflow:hidden}
.person .av img{width:100%;height:100%;object-fit:cover}
.person b{display:block;font-family:var(--font-head);color:var(--navy);font-size:.98rem}
.person small{display:block;color:var(--muted);font-size:.8rem;line-height:1.3}
.person small.wu{color:var(--wu-deep);font-weight:600}
.partner .x{font-family:var(--font-head);color:#9AA6B4;font-size:1.3rem}
.btn-wu{background:var(--wu);color:#fff;font-size:.8rem;padding:.85rem 1.2rem;min-height:48px}
.btn-wu:hover{background:var(--wu-deep)}
@media (min-width:900px){ .partner .wrap{grid-template-columns:auto 1fr auto;text-align:left;justify-items:start} .partner .pair{justify-self:center;flex-wrap:nowrap} }

/* ---------- final cta ---------- */
.final{background:linear-gradient(120deg,#0B1526 0%,#16263D 70%,#233B5C 100%);color:#fff;position:relative;overflow:hidden}
.final::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 70% at 0% 100%, rgba(201,162,74,.22), transparent 65%)}
.final .wrap{position:relative;display:grid;gap:2rem;padding-top:3rem;padding-bottom:3rem;align-items:center}
.final h2{font-size:clamp(1.7rem,4.6vw,2.5rem);font-weight:800}
.final h2 span{display:block}
.final p{color:#D7DEE8;max-width:28rem;font-size:1.02rem;margin-top:1rem}
@media (min-width:900px){ .final .wrap{grid-template-columns:1fr 1fr;gap:3rem} }

/* ---------- footer ---------- */
footer{background:#0A1220;color:#8F9BAB;font-size:.78rem;padding:1.8rem 0 2rem}
footer .wrap{display:grid;gap:.8rem}
footer p{margin:0;line-height:1.55}
footer a{color:#B7C2D0}
footer .links{display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- thank you ---------- */
.ty{background:var(--wash);min-height:60vh}
.ty .wrap{padding-top:2.6rem;padding-bottom:3rem;display:grid;gap:1.6rem;max-width:860px}
.ty .eyebrow{font-family:var(--font-head);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ty h1{font-size:clamp(1.9rem,5.5vw,2.8rem);color:var(--navy);font-weight:800}
.ty h1 span{display:block;color:var(--gold);font-size:.62em;font-weight:700;margin-top:.35rem}
.steps{display:grid;gap:.9rem}
.step-card{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:1.2rem 1.25rem;display:grid;gap:.5rem}
.step-card .k{display:flex;align-items:center;gap:.7rem}
.step-card .n{width:30px;height:30px;border-radius:50%;background:var(--navy);color:var(--gold-2);font-family:var(--font-head);font-weight:700;font-size:.8rem;display:grid;place-items:center;flex:none}
.step-card h2{font-size:1.1rem;color:var(--navy);font-weight:700}
.step-card p{color:var(--muted);font-size:.94rem;margin:0}
.step-card .btn{width:auto;justify-self:start}
.calc{display:grid;gap:.8rem;background:var(--wash-2);border-radius:10px;padding:1rem}
.calc label{font-size:.84rem;color:var(--muted);display:grid;gap:.3rem}
.calc input[type=number]{padding:.7rem .8rem;border:1px solid #D5DBE3;border-radius:8px;font:inherit;font-size:1rem;min-height:46px}
.calc input[type=range]{accent-color:var(--navy);width:100%}
.calc .out{font-family:var(--font-head);font-size:clamp(1.5rem,5vw,2.1rem);color:var(--navy);font-weight:800}
.calc .out small{display:block;font-family:var(--font-body);font-size:.78rem;color:var(--muted);font-weight:400;margin-top:.2rem}
.calframe{width:100%;min-height:720px;border:0;border-radius:12px;background:#fff}
.ty .actions{display:flex;flex-wrap:wrap;gap:.8rem}

@media (prefers-reduced-motion:reduce){ *{transition:none!important;scroll-behavior:auto!important} }