/* Gooido website styles.
 * Extracted verbatim from new/Gooido_Website_Render_Package_V1/index.html.
 * Block order below IS the original document order and must not be changed:
 * blocks 7-9 sat after </html> in the source, so they come last and win the
 * cascade over the earlier blocks for non-!important rules.
 */

/* ===== block 1 — index.html line 14 ===== */
:root{
  --navy:#102a43;--blue:#1f6feb;--turq:#22c7b8;--green:#45c486;
  --ink:#172b3a;--muted:#637381;--line:#dfe8ee;--soft:#f5f9fb;
  --white:#fff;--dark:#071b2b;--shadow:0 18px 55px rgba(16,42,67,.12);
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--ink);background:#fff;line-height:1.6}
a{text-decoration:none;color:inherit}.container{width:min(1000px,calc(100% - 40px));margin:auto}
h1,h2,h3{font-family:Arial,sans-serif;color:var(--navy);line-height:1.08;margin:0}
h1{font-size:clamp(46px,6vw,78px);letter-spacing:-.045em}
h2{font-size:clamp(34px,4.2vw,56px);letter-spacing:-.035em}
h3{font-size:21px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.13em;text-transform:uppercase;color:#168d83}
.lead{font-size:20px;color:#506575;max-width:760px}.section{padding:92px 0}.section.soft{background:var(--soft)}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 18px;border-radius:9px;font-weight:750;font-size:14px;letter-spacing:-.01em;border:1px solid transparent;box-shadow:0 3px 10px rgba(16,42,67,.07);transition:.2s ease}.btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px rgba(16,42,67,.11)}
.btn.primary{background:var(--navy);color:#fff}.btn.secondary{border-color:#b8c9d5;color:var(--navy);background:#fff}
.btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{height:76px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-size:28px;font-weight:900;color:var(--navy);letter-spacing:-.04em}.logo span{color:var(--turq)}
.navlinks{display:flex;gap:25px;font-size:14px;font-weight:700}.navlinks a:hover{color:var(--blue)}
.hero{padding:82px 0 46px;background:linear-gradient(180deg,#fff 0%,#f7fbfc 100%)}
.hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:60px;align-items:center}
.hero-copy p{font-size:21px;color:#506575;max-width:700px}
.hero-tags{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0}.tag{background:#e9f8f5;color:#16796f;border:1px solid #c6eee7;padding:8px 12px;border-radius:999px;font-weight:800;font-size:13px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:27px 0 14px}
.micro{font-size:14px;color:#687b88}
.browser{background:#fff;border:1px solid #dce7ed;border-radius:22px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(1deg)}
.browser-top{height:42px;background:#f0f5f7;display:flex;align-items:center;gap:6px;padding:0 15px}.dot{width:9px;height:9px;border-radius:50%;background:#b7c5cc}
.browser-cover{height:205px;background-position:center;background-size:cover;background-repeat:no-repeat}
.browser-body{padding:24px}.partner-brand{font-size:12px;font-weight:900;color:#168d83;text-transform:uppercase;letter-spacing:.12em}.browser-body h3{font-size:27px;margin:5px 0 8px}.product-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}.mini-card{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#fff}.mini-img{height:74px;background-size:cover;background-position:center}.mini-card p{font-size:11px!important;font-weight:800;margin:8px!important;color:var(--navy)!important}
.trustbar{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}.trustgrid{display:grid;grid-template-columns:repeat(4,1fr);text-align:center}.trustitem{padding:23px 14px;border-right:1px solid var(--line)}.trustitem:last-child{border:0}.trustitem strong{display:block;color:var(--navy);font-size:15px}.trustitem span{font-size:12px;color:var(--muted)}
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:38px}.card{background:#fff;border:1px solid var(--line);border-radius:18px;padding:25px;box-shadow:0 8px 24px rgba(16,42,67,.05)}.card .icon{width:42px;height:42px;border-radius:12px;background:#e9f8f5;display:grid;place-items:center;color:#168d83;font-weight:900;margin-bottom:18px}.card p{color:var(--muted);font-size:15px}.card a{color:var(--blue);font-weight:800;font-size:14px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:55px;align-items:center}
.quote-box{background:var(--navy);color:#fff;border-radius:22px;padding:38px;box-shadow:var(--shadow)}.quote-box h2,.quote-box h3{color:#fff}.quote-box p{color:#cbd8e1}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.compare .side{padding:22px;border-radius:16px;border:1px solid var(--line)}.compare .old{background:#fbfcfd}.compare .new{background:#ecfaf7;border-color:#bce9df}.compare strong{display:block;margin-bottom:10px}.compare ul{padding-left:18px;color:var(--muted);font-size:14px}
.store{background:linear-gradient(135deg,#071b2b,#123c55);color:#fff}.store h2,.store h3{color:#fff}.store .lead{color:#cbd8e1}
.shelves{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:35px}.shelf{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:16px;overflow:hidden}.shelf-img{height:135px;background-size:cover;background-position:center}.shelf div:last-child{padding:15px}.shelf small{color:#a9c3d1}
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:38px}.step{border:1px solid var(--line);border-radius:16px;padding:20px;background:#fff}.num{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--navy);color:#fff;font-weight:900;margin-bottom:13px}.step p{font-size:13px;color:var(--muted)}
.video-band{background:#f0f7fa}.video-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;margin-top:30px}.video-placeholder{min-height:360px;border-radius:22px;background-position:center;background-size:cover;background-repeat:no-repeat;display:flex;align-items:flex-end;padding:28px;color:#fff}.play{width:58px;height:58px;border-radius:50%;background:#fff;color:var(--navy);display:grid;place-items:center;font-size:20px;margin-bottom:17px}.video-placeholder h3{color:#fff;font-size:28px}.video-notes{display:grid;gap:12px}.note{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px}.note strong{color:var(--navy)}
.ops{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-top:34px}.op{padding:22px;border-radius:16px;background:#fff;border:1px solid var(--line)}.op p{font-size:14px;color:var(--muted)}
.ai-demo{display:grid;grid-template-columns:.85fr 1.15fr;gap:35px;align-items:center}.phone{width:320px;max-width:100%;margin:auto;border:9px solid #142f42;border-radius:36px;background:#f7fbfc;padding:20px;box-shadow:var(--shadow)}.chathead{font-weight:900;color:var(--navy);border-bottom:1px solid var(--line);padding-bottom:12px}.powered{font-size:10px;color:var(--muted)}.bubble{padding:11px 13px;border-radius:13px;margin:12px 0;font-size:12px}.bot{background:#e6f8f4}.user{background:#fff;border:1px solid var(--line);margin-left:35px}
.econ{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}.econ-points{display:grid;gap:12px}.econ-point{border-left:4px solid var(--turq);padding:13px 16px;background:#fff;border-radius:0 12px 12px 0}.econ-point strong{color:var(--navy)}
.cta{background:linear-gradient(135deg,#0d2d43,#166277);color:#fff;border-radius:26px;padding:50px}.cta h2{color:#fff}.cta p{color:#d7e6ec;font-size:18px}.cta-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}
.faq{max-width:900px}.faq details{border-bottom:1px solid var(--line);padding:19px 0}.faq summary{font-weight:800;color:var(--navy);cursor:pointer}.faq p{color:var(--muted)}
.footer{background:#071b2b;color:#b9cbd5;padding:60px 0 25px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:35px}.footer h4{color:#fff}.footer a{display:block;margin:9px 0;font-size:14px}.footer .logo{color:#fff}.copyright{border-top:1px solid rgba(255,255,255,.1);margin-top:35px;padding-top:20px;font-size:12px}
@media(max-width:900px){.navlinks{display:none}.hero-grid,.split,.video-grid,.ai-demo,.econ{grid-template-columns:1fr}.cards3,.shelves,.ops{grid-template-columns:1fr 1fr}.process{grid-template-columns:1fr 1fr}.trustgrid{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr 1fr}.browser{transform:none}}
@media(max-width:600px){.section{padding:68px 0}.cards3,.shelves,.ops,.process,.footer-grid{grid-template-columns:1fr}.trustgrid{grid-template-columns:1fr}.nav .btn{padding:10px 13px}.hero{padding-top:55px}}

/* ===== block 2 — index.html line 63 ===== */
strong.brand{
  font-weight:900;
  color:inherit;
  letter-spacing:-0.01em;
}

/* ===== block 3 — index.html line 70 ===== */
/* =========================================================
   GOOIDO V24 — CREATORS PAGE DESIGN SYSTEM
   Homepage intentionally matches gooido.com/creators
   ========================================================= */

:root{
  --cream:#fbf7ef;
  --cream-2:#fffaf3;
  --cream-3:#f8f0e5;
  --navy:#0b2145;
  --navy-2:#122d55;
  --ink:#14233b;
  --muted:#63748d;
  --orange:#f7a62b;
  --orange-deep:#ef791f;
  --turq:#21c9c1;
  --turq-deep:#0aa8a1;
  --red:#df504a;
  --red-soft:#fbe9e7;
  --green:#18b986;
  --green-soft:#def6ea;
  --blue:#3478ef;
  --line:#dedede;
  --shadow:0 13px 28px rgba(11,33,69,.10);
  --radius:16px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:Arial, Helvetica, sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(1000px,calc(100% - 48px));margin:auto}
h1,h2,h3,.serif{
  font-family:Georgia, "Times New Roman", serif;
  color:var(--navy);
  letter-spacing:-.025em;
  line-height:1.06;
  margin-top:0;
}
h1{font-size:clamp(46px,6.2vw,78px)}
h2{font-size:clamp(36px,4.5vw,58px)}
h3{font-size:24px}
p{font-size:17px}
.lead{font-size:20px;line-height:1.75;color:var(--muted);max-width:790px}
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--orange-deep);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-size:12px;
  font-weight:900;
}
.keyline{color:var(--navy);font-weight:900}
strong.brand{font-weight:900;color:inherit}

/* Header */
.header{
  position:sticky;top:0;z-index:50;
  background:rgba(251,247,239,.96);
  backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(11,33,69,.08);
}
.nav{height:74px;display:flex;align-items:center;gap:26px;justify-content:space-between}
.logo{
  font-size:30px;font-weight:950;color:var(--navy);
  letter-spacing:-.055em;font-family:Arial,Helvetica,sans-serif
}
.logo span{color:var(--turq)}
.navlinks{display:flex;gap:28px;align-items:center;font-size:13px;font-weight:800;color:var(--navy)}
.navlinks a{position:relative}
.navlinks a:after{
  content:"";position:absolute;height:2px;background:var(--orange);
  left:0;right:100%;bottom:-6px;transition:.2s
}
.navlinks a:hover:after{right:0}

/* Buttons match creators page */
.btn,a.btn,button.btn{
  display:inline-flex;align-items:center;justify-content:center;
  width:auto;min-height:42px;
  padding:10px 20px;
  border-radius:999px;
  font-size:14px;font-weight:900;line-height:1.1;
  white-space:nowrap;
  border:1px solid transparent;
  box-shadow:0 8px 20px rgba(11,33,69,.08);
  transition:.2s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(180deg,#ffb23a,#f49a1c);
  color:var(--navy);
  box-shadow:0 10px 22px rgba(246,166,43,.28)
}
.btn.secondary{background:transparent;color:var(--navy);border-color:#cfd4db;box-shadow:none}
.header .btn{background:var(--navy);color:#fff;border-radius:5px;padding:10px 15px;box-shadow:none}

/* Hero */
.hero{
  background:var(--cream);
  padding:78px 0 56px;
  position:relative;
  overflow:hidden;
}
.hero:before{
  content:"";position:absolute;left:-15%;right:-15%;top:-180px;height:300px;
  background:radial-gradient(ellipse at center,rgba(92,178,227,.22),transparent 68%);
}
.hero-grid{display:grid;grid-template-columns:1fr .95fr;gap:60px;align-items:center;position:relative}
.hero-copy p{font-size:19px;color:var(--muted);max-width:700px}
.hero-tags{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0}
.hero-tags .tag{
  padding:0;background:none;border:0;border-radius:0;
  color:var(--turq-deep);font-weight:900;font-size:14px
}
.hero-tags .tag:not(:last-child):after{content:" · ";padding-left:10px;color:#a1aea9}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:24px 0 16px}
.micro{font-size:14px;color:#718097}

/* Hero browser mockup */
.browser{
  background:#fff;border:1px solid #d7d7d7;border-radius:13px;
  box-shadow:0 18px 34px rgba(11,33,69,.12);
  overflow:hidden;transform:none
}
.browser-top{height:39px;background:#f3f5f6;display:flex;align-items:center;gap:6px;padding:0 14px}
.dot{width:8px;height:8px;border-radius:50%;background:#aebcc5}
.browser-cover{height:224px}
.browser-body{padding:24px 25px}
.partner-brand{color:var(--turq-deep);font-size:12px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.browser-body h3{font-family:Arial,Helvetica,sans-serif;font-size:26px;letter-spacing:-.02em;margin:4px 0 5px}
.product-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.mini-card{border:1px solid #dbe0e5;border-radius:10px;overflow:hidden;background:#fff}
.mini-img{height:78px}
.mini-card p{font-size:12px!important;font-weight:900!important;color:var(--navy)!important;margin:8px 10px 11px!important;line-height:1.25}
.carousel-dots span{background:#d2d8dc}
.carousel-dots span:first-child{background:var(--turq)}

/* Thin value band */
.trustbar{background:var(--cream-2);border-block:1px solid rgba(11,33,69,.08)}
.trustgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.trustitem{padding:21px 15px;text-align:center;border-right:1px solid rgba(11,33,69,.08)}
.trustitem:last-child{border-right:0}
.trustitem strong{display:block;color:var(--navy);font-size:14px}
.trustitem span{display:block;color:var(--muted);font-size:12px;margin-top:3px}

/* Sections */
.section{padding:88px 0;background:var(--cream)}
.section.soft{background:var(--cream-2)}
.section.store{background:var(--navy);color:#fff;position:relative}
.section.store h2,.section.store h3{color:#fff}
.section.store .lead{color:#d3deeb}
.section.store:before{
  content:"";position:absolute;top:-17px;left:0;right:0;height:35px;
  background:var(--cream);
  clip-path:polygon(0 45%,20% 32%,42% 37%,64% 24%,83% 33%,100% 26%,100% 0,0 0)
}

/* Cards */
.cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:36px}
.card{
  background:#fff;border:1px solid #d8dde4;border-top:2px solid #13a8c5;
  border-radius:12px;padding:28px;box-shadow:var(--shadow)
}
.card:nth-child(2){border-top-color:var(--turq)}
.card:nth-child(3){border-top-color:#3b7cff}
.card p{color:var(--muted);font-size:15px}
.card a{color:#0d65d8;font-weight:900;font-size:14px}
.persona-icon{
  width:52px;height:52px;border-radius:50%;
  background:#e8f5f6;border:0;display:grid;place-items:center;margin-bottom:19px
}
.persona-icon svg{width:26px;height:26px;stroke:#079eae}

/* Old way vs Gooido */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.compare-v20{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.compare-v20 .side{padding:27px 24px;border-radius:15px;border:1px solid}
.compare-v20 .old{background:#fff;border-color:#efc5c1}
.compare-v20 .new{background:var(--navy);border-color:var(--navy);box-shadow:var(--shadow)}
.compare-v20 .label{
  display:inline-flex;padding:6px 12px;border-radius:999px;
  font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase
}
.compare-v20 .old .label{background:var(--red-soft);color:#ba443f}
.compare-v20 .new .label{background:var(--orange);color:var(--navy)}
.compare-v20 ul{list-style:none;padding:0;margin:14px 0 0}
.compare-v20 li{position:relative;padding:11px 0 11px 29px;border-bottom:1px solid rgba(100,120,140,.18);font-size:14px}
.compare-v20 .old li{color:#5f7188}
.compare-v20 .new li{color:#fff;border-color:rgba(255,255,255,.14)}
.compare-v20 .old li:before{content:"×";color:var(--red);position:absolute;left:0;top:8px;font-size:22px}
.compare-v20 .new li:before{content:"✓";color:#44ddcf;position:absolute;left:0;top:10px;font-weight:950}
.compare-v20 .new strong{color:#fff}
.compare-v20 .old strong{color:#455a74}

/* Affiliate / creator comparison */
.affiliate-strip{
  border-left:3px solid var(--orange);background:transparent;border-radius:0;
  padding:18px 24px;margin-top:34px;border-top:0;border-right:0;border-bottom:0
}
.affiliate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:23px}
.affiliate-item{
  background:#fff;border:1px solid #dddfe3;border-radius:11px;padding:17px
}
.affiliate-item strong{display:block;color:var(--navy);margin-bottom:5px}
.affiliate-item span{font-size:13px;color:var(--muted)}

.creator-visual{display:grid;grid-template-columns:1fr 42px 1.2fr;gap:13px;align-items:center}
.creator-old,.creator-new{border-radius:13px;padding:22px;border:1px solid #dcdfe4}
.creator-old{background:#fff}
.creator-new{background:var(--navy);color:#fff;border-color:var(--navy)}
.creator-new h3{color:#fff}
.creator-new p{color:#d5dfeb}
.creator-arrow{color:var(--orange);font-weight:950;font-size:28px}
.link-pill{background:#f5f3ef;border-radius:7px}
.site-pill{background:rgba(255,255,255,.09);border-radius:7px}

/* Product shelves */
.shelves{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:34px}
.shelf{background:#193761;border:1px solid rgba(255,255,255,.15);border-radius:13px;overflow:hidden}
.shelf-img{height:150px}
.shelf div:last-child{padding:16px 17px 18px}
.shelf h3{font-family:Arial,Helvetica,sans-serif;font-size:23px;margin-bottom:1px}
.shelf small{color:#bdd0e4;font-size:13px}
.product-status-now{color:#4de0d2!important;font-weight:900}
.product-status-soon{color:var(--orange)!important;font-weight:900}

/* Process */
.process{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:36px}
.step{
  background:#fff;border:1px solid #dde1e6;border-radius:12px;padding:22px;
  box-shadow:0 8px 18px rgba(11,33,69,.04)
}
.num{
  width:31px;height:31px;border-radius:50%;
  background:var(--turq);color:var(--navy);display:grid;place-items:center;font-weight:950
}
.step h3{font-family:Arial,Helvetica,sans-serif;font-size:18px;margin:12px 0 5px}
.step p{font-size:13px;color:var(--muted)}

/* Video */
.video-band{background:var(--cream-2)}
.video-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;margin-top:30px}
.video-placeholder{
  min-height:390px;border-radius:14px;padding:29px;
  box-shadow:var(--shadow)
}
.play{
  width:62px;height:62px;border-radius:50%;background:transparent;
  border:3px solid #fff;color:#fff;display:grid;place-items:center
}
.video-placeholder h3{font-size:33px;color:#fff}
.note{background:#fff;border:1px solid #dcdfe4;border-radius:11px;padding:18px}

/* AI assistant */
.phone{
  border:7px solid #315b7b;border-radius:34px;background:#fff;padding:20px;
  box-shadow:none
}
.chathead{color:var(--navy)}
.bubble.bot{background:#edf8f7}
.bubble.user{background:#fff;border:1px solid #e2e4e7}

/* Operations */
.ops{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:32px}
.op{background:#fff;border:1px solid #dcdfe4;border-radius:12px;padding:22px}
.op h3{font-family:Arial,Helvetica,sans-serif;font-size:19px}
.op p{font-size:14px;color:var(--muted)}

/* Earnings section inspired directly by creator tiers */
.earn-v20{display:grid;grid-template-columns:1fr 1.35fr;gap:18px;margin-top:30px}
.earn-creator{
  background:var(--navy);color:#fff;border-radius:14px;padding:30px;
  box-shadow:var(--shadow)
}
.earn-creator h3{font-family:Arial,Helvetica,sans-serif;color:#fff}
.earn-rate{font-size:44px;color:#51e0d3;font-weight:950}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:20px 0}
.tier{
  background:rgba(255,255,255,.06);
  border-radius:10px;border-top:3px solid #55dfd5;padding:13px 9px;text-align:center
}
.tier:nth-child(2){border-top-color:var(--orange)}
.tier:nth-child(3){border-top-color:#5680ff}
.tier b{display:block;font-size:23px}
.tier span{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#d7e2eb}
.partner-earn{
  background:#fff;border:1px solid #dedfe3;border-radius:14px;padding:30px
}
.partner-earn h3{font-family:Georgia,"Times New Roman",serif}
.partner-earn .mini{background:var(--cream-2);border:1px solid #e6e0d7;border-radius:10px}

/* About */
.quote-box{
  background:var(--navy)!important;border-radius:14px!important;
  box-shadow:var(--shadow)!important;padding:38px!important
}
.quote-box h2,.quote-box h3{color:#fff}
.quote-box p{color:#d6e1ec!important}

/* Contact */
.cta{
  background:var(--navy);
  color:#fff;border-radius:0;padding:54px;
  position:relative
}
.cta:before{
  content:"";position:absolute;left:-9999px;right:-9999px;top:-28px;height:32px;
  background:var(--cream);clip-path:polygon(0 60%,20% 38%,40% 48%,62% 30%,83% 43%,100% 34%,100% 0,0 0)
}
.cta h2{color:#fff}
.cta p{color:#d5dfeb}
.contact-form{background:var(--cream);border-radius:13px;padding:28px}
.contact-form label{color:var(--navy)}
.contact-form input,.contact-form select,.contact-form textarea{
  border-radius:7px;background:#fff;border:1px solid #d0d5da
}

/* FAQ copied to same visual language as creators page */
#faq{text-align:center}
#faq .faq{max-width:1040px}
#faq .eyebrow{justify-content:center}
#faq h2{margin-bottom:5px}
#faq h2 + p{color:var(--muted)}
.faq details{
  text-align:left;
  background:#fff;
  border:1px solid #f2a239;
  border-radius:11px;
  margin:9px 0;
  padding:0 18px;
}
.faq summary{
  list-style:none;cursor:pointer;
  color:var(--navy);font-weight:900;
  padding:17px 0;font-size:14px;position:relative;padding-right:26px
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{
  content:"+";
  position:absolute;right:0;top:14px;
  color:var(--orange-deep);font-size:18px;font-weight:900
}
.faq details[open] summary:after{content:"×"}
.faq details[open]{padding-bottom:18px}
.faq p{color:#536986;font-size:14px;line-height:1.7;margin:0 0 5px}

/* Footer */
.footer{background:var(--navy);color:#c4d2e2;padding:60px 0 25px}
.footer h4{color:#fff}
.footer a{font-size:14px}
.footer .logo{color:#fff}
.copyright{border-top:1px solid rgba(255,255,255,.12)}

/* Responsive */
@media(max-width:980px){
  .navlinks{display:none}
  .hero-grid,.split,.video-grid,.ai-demo,.earn-v20,.form-shell{grid-template-columns:1fr}
  .cards3,.shelves,.ops{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .affiliate-grid{grid-template-columns:1fr 1fr}
  .creator-visual{grid-template-columns:1fr}.creator-arrow{transform:rotate(90deg);text-align:center}
  .trustgrid{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  .container{width:min(100% - 30px,1000px)}
  .section{padding:68px 0}
  .cards3,.shelves,.ops,.process,.affiliate-grid,.tier-row{grid-template-columns:1fr}
  .trustgrid{grid-template-columns:1fr}
  .header .btn{font-size:12px;padding:9px 11px}
  h1{font-size:45px} h2{font-size:37px}
  .cta{padding:44px 22px}
}

/* ===== block 4 — index.html line 454 ===== */
/* =========================================================
   V25 — closer visual match to gooido.com/creators screenshots
   ========================================================= */

/* Header CTA: compact, no collision.
   The shape — pill radius, padding, size — is set with the other CTAs at the
   end of this file. This rule used to force border-radius, padding, font-size
   and a 150px max-width with !important, which beat that and left the header
   button square and too narrow for its arrow badge. Only the anti-collision
   declarations remain. */
.header .btn{
  min-width:0!important;
  line-height:1!important;
  white-space:nowrap!important;
}

/* FAQ landing-page proportions */
#faq{
  background:#fbf7ef!important;
  padding-top:72px!important;
}
#faq .container{
  width:min(1000px,calc(100% - 72px))!important;
}
#faq .eyebrow{
  display:block!important;
  text-align:center!important;
  color:#ef791f!important;
  font-size:14px!important;
  letter-spacing:.06em!important;
  margin-bottom:16px!important;
}
#faq h2{
  max-width:none!important;
  text-align:center!important;
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:clamp(44px,5vw,66px)!important;
  line-height:1!important;
  margin:0 auto 8px!important;
  color:#0b2145!important;
}
#faq h2 + p{
  text-align:center!important;
  margin:0 0 28px!important;
  color:#60718a!important;
  font-size:16px!important;
}
#faq .faq{
  max-width:none!important;
  width:100%!important;
  margin:0!important;
}
#faq .faq details{
  width:100%!important;
  background:#fff!important;
  border:1px solid #f39a25!important;
  border-radius:11px!important;
  box-shadow:none!important;
  margin:9px 0!important;
  padding:0 18px!important;
}
#faq .faq summary{
  min-height:62px!important;
  display:flex!important;
  align-items:center!important;
  padding:15px 36px 15px 0!important;
  font-size:15px!important;
  line-height:1.3!important;
  color:#0b2145!important;
}
#faq .faq summary:after{
  top:50%!important;
  transform:translateY(-50%)!important;
  right:0!important;
  color:#ef791f!important;
}
#faq .faq details[open]{
  padding-bottom:18px!important;
}
#faq .faq details[open] summary{
  min-height:54px!important;
  padding-bottom:11px!important;
}
#faq .faq p{
  max-width:none!important;
  margin:0 0 12px!important;
  color:#536986!important;
  font-size:15px!important;
  line-height:1.75!important;
}
#faq .faq details[open] p:first-of-type{
  margin-top:3px!important;
}

/* Typical Bio → Gooido visual: same proportions and spacing as creators LP */
.creator-visual{
  display:grid!important;
  grid-template-columns:194px 34px 242px!important;
  gap:14px!important;
  align-items:center!important;
  justify-content:center!important;
  margin:28px auto 0!important;
  min-height:430px!important;
}
.creator-old,.creator-new{
  padding:20px!important;
  border-radius:15px!important;
  box-shadow:none!important;
}
.creator-old{
  background:#fff!important;
  border:1px solid #d8dde4!important;
}
.creator-new{
  background:#103650!important;
  border:0!important;
  color:#fff!important;
}
.creator-old .eyebrow{
  color:#b4524d!important;
  display:block!important;
  line-height:1.45!important;
  font-size:13px!important;
  letter-spacing:.08em!important;
}
.creator-new .eyebrow{
  color:#55e0d3!important;
  display:block!important;
  line-height:1.45!important;
  font-size:13px!important;
  letter-spacing:.08em!important;
}
.creator-old h3,.creator-new h3{
  font-family:Georgia,"Times New Roman",serif!important;
  font-size:23px!important;
  line-height:1!important;
  margin:2px 0 12px!important;
}
.creator-new h3{color:#fff!important}
.creator-new p{
  color:#fff!important;
  font-size:15px!important;
  line-height:1.55!important;
  margin:0 0 16px!important;
}
.link-stack{
  display:grid!important;
  gap:7px!important;
}
.link-pill{
  background:#f1f4f6!important;
  color:#52677f!important;
  padding:10px 11px!important;
  border-radius:8px!important;
  font-size:13px!important;
  line-height:1.35!important;
}
.creator-arrow{
  color:#20c8bf!important;
  font-size:25px!important;
  text-align:center!important;
}
.site-stack{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:8px!important;
}
.site-pill{
  background:#244c68!important;
  color:#fff!important;
  padding:10px 9px!important;
  border-radius:7px!important;
  font-size:13px!important;
  line-height:1.3!important;
}

/* Creator-page style earnings: more air, less SaaS density */
.earn-v20{
  gap:20px!important;
}
.earn-creator,.partner-earn{
  border-radius:16px!important;
}
.earn-creator{
  background:#15445f!important;
}
.earn-rate{
  color:#54dfd2!important;
}
.tier{
  background:rgba(255,255,255,.09)!important;
}

/* Global cream consistency */
body,.section,.section.soft,#faq{
  background-color:#fbf7ef;
}

@media(max-width:800px){
  #faq .container{width:min(100% - 30px,1000px)!important}
  .creator-visual{
    grid-template-columns:1fr!important;
    max-width:330px!important;
    min-height:0!important;
  }
  .creator-arrow{transform:rotate(90deg)!important}
}

/* ===== block 5 — index.html line 661 ===== */
/* =========================================================
   V27 — targeted visual fixes
   1) stronger readability in WITH GOOIDO card
   2) FAQ constrained back to creators-style readable width
   ========================================================= */

/* WITH GOOIDO: darker green surface + readable navy text */
.compare-v20 .new{
  background:#dff7ee!important;
  border-color:#a9dfcf!important;
  box-shadow:0 10px 24px rgba(15,120,92,.08)!important;
}
.compare-v20 .new .label{
  background:#c9f0df!important;
  color:#08785c!important;
}
.compare-v20 .new li{
  color:#334b5d!important;
  border-color:rgba(15,95,75,.12)!important;
}
.compare-v20 .new strong{
  color:#0b2145!important;
}
.compare-v20 .new li:before{
  color:#08a877!important;
}

/* FAQ: restore centered readable width, like creators landing page */
#faq .container{
  width:min(1000px,calc(100% - 48px))!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#faq .faq{
  max-width:1040px!important;
  width:100%!important;
  margin:0 auto!important;
}
#faq .faq details{
  width:100%!important;
}
#faq h2{
  max-width:980px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
#faq h2 + p{
  max-width:680px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  margin-bottom:30px!important;
}

@media(max-width:800px){
  #faq .container{
    width:min(100% - 30px,1000px)!important;
  }
}

/* ===== block 6 — index.html line 720 ===== */
.contact-section{background:#0b2145!important;color:#fff!important}
.contact-wrap{display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.contact-copy h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(38px,4vw,58px);line-height:1.02;margin:12px 0 20px;color:#fff}
.contact-copy p{color:#d7e2ef;max-width:560px;line-height:1.65}
.contact-copy .eyebrow{color:#f7a62c}
.contact-note{margin-top:24px}
.lead-form{background:#fbf7ef;color:#0b2145;padding:28px;border-radius:18px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lead-form label{display:grid;gap:7px;font-weight:700;font-size:14px;margin-bottom:16px}
.lead-form input,.lead-form select,.lead-form textarea{width:100%;box-sizing:border-box;border:1px solid #d5dbe2;background:#fff;border-radius:9px;padding:12px 13px;font:inherit;color:#0b2145}
.lead-form input:focus,.lead-form select:focus,.lead-form textarea:focus{outline:2px solid #49d9cd;outline-offset:1px}
.lead-submit{border:0;border-radius:999px;background:#f7a62c;color:#0b2145;font-weight:800;padding:13px 22px;cursor:pointer}
.form-status{font-size:13px;margin:12px 0 0;color:#536986}
.legal{padding-top:18px;padding-bottom:18px}
.legal details{margin:8px 0}.legal summary{cursor:pointer;font-weight:700}
.legal p{max-width:850px;line-height:1.6}
.cookie-banner{position:fixed;left:24px;right:24px;bottom:20px;z-index:9999;display:none;align-items:center;justify-content:space-between;gap:24px;background:#0b2145;color:#fff;padding:16px 18px;border-radius:14px;box-shadow:0 16px 50px rgba(0,0,0,.22);font-size:14px}
.cookie-banner span{color:#d7e2ef}
.cookie-actions{display:flex;gap:10px;flex-shrink:0}
.cookie-actions button{border:1px solid rgba(255,255,255,.35);border-radius:999px;padding:9px 14px;font-weight:800;cursor:pointer}
#cookieEssential{background:transparent;color:#fff}#cookieAccept{background:#f7a62c;color:#0b2145;border-color:#f7a62c}
@media(max-width:800px){.contact-wrap{grid-template-columns:1fr;gap:28px}.form-grid{grid-template-columns:1fr}.cookie-banner{left:12px;right:12px;bottom:12px;align-items:flex-start;flex-direction:column}.cookie-actions{width:100%}.cookie-actions button{flex:1}}

/* ===== block 7 — index.html line 1134 ===== */
.econ-point strong{display:block;margin-bottom:5px}
.money-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:32px}
.money-card{border:1px solid var(--line);border-radius:18px;padding:26px;background:#fff}
.money-card.featured{background:#0d2d43;color:#fff;border-color:#0d2d43}
.money-card.featured h3,.money-card.featured strong{color:#fff}
.money-card .rate{font-size:42px;font-weight:900;color:var(--navy);letter-spacing:-.04em}
.money-card.featured .rate{color:#63dfd2}
.money-card p{font-size:14px;color:var(--muted)}
.money-card.featured p{color:#d7e6ec}
.affiliate-strip{margin-top:34px;border:1px solid #cfe2ea;border-radius:20px;padding:28px;background:linear-gradient(135deg,#f8fbfc,#edf9f7)}
.affiliate-strip h3{font-size:28px}
.affiliate-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px}
.affiliate-item{background:#fff;border:1px solid var(--line);border-radius:13px;padding:16px}
.affiliate-item strong{display:block;color:var(--navy);margin-bottom:5px}
.affiliate-item span{font-size:13px;color:var(--muted)}
.visual-flow{display:grid;grid-template-columns:1fr 46px 1fr 46px 1fr;align-items:center;gap:10px;margin-top:34px}
.flowbox{border:1px solid var(--line);border-radius:17px;padding:22px;text-align:center;background:#fff}
.flowarrow{text-align:center;font-size:25px;color:var(--turq);font-weight:900}
.flowbox strong{display:block;color:var(--navy);font-size:17px}.flowbox span{font-size:13px;color:var(--muted)}
.carousel-dots{display:flex;gap:6px;justify-content:center;margin-top:12px}.carousel-dots span{width:7px;height:7px;border-radius:50%;background:#c4d3da}.carousel-dots span:first-child{background:#168d83;width:20px;border-radius:8px}
@media(max-width:800px){.money-grid,.affiliate-grid{grid-template-columns:1fr 1fr}.visual-flow{grid-template-columns:1fr}.flowarrow{transform:rotate(90deg)}}
@media(max-width:520px){.money-grid,.affiliate-grid{grid-template-columns:1fr}}

/* ===== block 8 — index.html line 1158 ===== */
/* V19 refinement: fewer boxes, calmer CTAs, stronger scan hierarchy */
.hero-tags{gap:0;margin:22px 0;color:#168d83;font-size:14px;font-weight:800}
.hero-tags .tag{background:none;border:0;padding:0;border-radius:0}
.hero-tags .tag:not(:last-child)::after{content:" · ";padding:0 10px;color:#8fb9b3}
.hero-actions .btn.secondary{border:0;box-shadow:none;background:transparent;padding-left:6px;padding-right:6px}
.hero-actions .btn.secondary:hover{box-shadow:none}
.card{box-shadow:none}
.trustitem{padding:20px 14px}
strong.brand{font-weight:900;color:inherit}
.keyline{font-weight:850;color:var(--navy)}
.creator-visual{display:grid;grid-template-columns:1fr 42px 1.25fr;gap:14px;align-items:center;margin-top:28px}
.creator-old,.creator-new{border-radius:18px;padding:23px;border:1px solid var(--line);background:#fff}
.creator-new{background:#0d2d43;color:#fff;border-color:#0d2d43}
.creator-new h3{color:#fff}.creator-new p{color:#d7e6ec}.creator-arrow{text-align:center;font-size:28px;color:var(--turq);font-weight:900}
.link-stack{display:grid;gap:8px;margin-top:14px}.link-pill{padding:10px 12px;border-radius:9px;background:#f4f7f9;font-size:13px;color:#506575}
.site-stack{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.site-pill{padding:10px;border-radius:9px;background:rgba(255,255,255,.09);font-size:13px}
.form-shell{display:grid;grid-template-columns:.85fr 1.15fr;gap:35px;align-items:start}
.contact-form{background:#fff;border-radius:20px;padding:28px;color:var(--ink)}
.contact-form label{display:block;font-size:12px;font-weight:800;color:var(--navy);margin:13px 0 5px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;border:1px solid #cbd9e1;border-radius:9px;padding:11px 12px;font:inherit;background:#fff}
.contact-form textarea{min-height:90px;resize:vertical}
.contact-form .btn{margin-top:16px;width:100%}
.contact-form small{display:block;margin-top:10px;color:#71838f}
@media(max-width:800px){.creator-visual,.form-shell{grid-template-columns:1fr}.creator-arrow{transform:rotate(90deg)}}

/* ===== block 9 — index.html line 1184 ===== */
/* V20: warmer visual storytelling, stronger positive/negative contrast */
.persona-icon{width:52px;height:52px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,#e9faf7,#f7fffd);border:1px solid #cceee8;margin-bottom:18px}
.persona-icon svg{width:27px;height:27px;stroke:#0b8e83;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round}
.compare-v20{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.compare-v20 .side{border-radius:20px;padding:28px;border:1px solid}
.compare-v20 .old{background:#fff8f7;border-color:#f1c6c2}
.compare-v20 .new{background:#f0fbf6;border-color:#b7e6d1}
.compare-v20 .label{display:inline-flex;padding:7px 12px;border-radius:999px;font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:16px}
.compare-v20 .old .label{background:#f9e6e4;color:#bf413b}
.compare-v20 .new .label{background:#d9f5e8;color:#087b5b}
.compare-v20 ul{list-style:none;padding:0;margin:0}
.compare-v20 li{position:relative;padding:11px 0 11px 30px;border-bottom:1px solid rgba(30,60,80,.09);color:#506575}
.compare-v20 li:last-child{border-bottom:0}
.compare-v20 .old li:before{content:"×";position:absolute;left:2px;top:8px;font-size:22px;color:#e14f49}
.compare-v20 .new li:before{content:"✓";position:absolute;left:2px;top:10px;font-weight:900;color:#14a77a}
.compare-v20 strong{color:var(--navy)}
.journey-v20{display:grid;grid-template-columns:1fr 54px 1fr 54px 1fr;gap:8px;align-items:stretch;margin-top:28px}
.journey-step{position:relative;border-radius:20px;padding:26px 22px;background:#fff;border:1px solid var(--line);text-align:left;overflow:hidden}
.journey-step:before{content:attr(data-step);position:absolute;right:14px;top:8px;font-size:52px;font-weight:900;color:#eef4f6;line-height:1}
.journey-icon{width:42px;height:42px;border-radius:13px;background:#eaf9f6;display:grid;place-items:center;margin-bottom:17px;font-size:20px}
.journey-step h3{font-size:18px;margin:0 0 7px}.journey-step p{font-size:14px;margin:0;color:var(--muted)}
.journey-arrow{display:grid;place-items:center;color:#12bcae;font-size:30px;font-weight:900}
.earn-v20{display:grid;grid-template-columns:1fr 1.35fr;gap:22px;align-items:stretch;margin-top:30px}
.earn-creator{border-radius:22px;padding:30px;background:#123c58;color:#fff;position:relative;overflow:hidden}
.earn-creator:after{content:"";position:absolute;width:180px;height:180px;border-radius:50%;background:rgba(64,225,210,.09);right:-55px;top:-55px}
.earn-creator h3{color:#fff}.earn-creator p{color:#d9e7ed}.earn-rate{font-size:45px;font-weight:950;color:#55e1d4;letter-spacing:-.04em}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0}
.tier{border-radius:13px;padding:14px 10px;text-align:center;background:rgba(255,255,255,.08);border-top:3px solid #55e1d4}
.tier:nth-child(2){border-top-color:#f5a623}.tier:nth-child(3){border-top-color:#6d7cf7}
.tier b{display:block;font-size:23px}.tier span{font-size:11px;color:#d8e4ea;text-transform:uppercase;letter-spacing:.08em}
.partner-earn{border-radius:22px;padding:30px;background:linear-gradient(145deg,#fffaf3,#f7fbff);border:1px solid #e3e8ed}
.partner-earn .mini-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.partner-earn .mini{background:#fff;border:1px solid var(--line);border-radius:13px;padding:15px}
.partner-earn .mini strong{display:block;color:var(--navy);margin-bottom:4px}.partner-earn .mini span{font-size:12px;color:var(--muted)}
@media(max-width:800px){.compare-v20,.earn-v20{grid-template-columns:1fr}.journey-v20{grid-template-columns:1fr}.journey-arrow{transform:rotate(90deg)}}

/* ============================================================
   Gooido multi-page additions — not part of the render package.
   Everything above this line is the designer's CSS, verbatim.
   ============================================================ */

/* Mobile navigation.
   The render package hides .navlinks below 980px and ships no replacement,
   so on a phone the site currently has no way to reach any other page. */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px;padding:0 9px;border:1px solid var(--line);border-radius:8px;background:#fff;cursor:pointer;flex-shrink:0}
.nav-toggle span{display:block;width:100%;height:2px;background:var(--navy);border-radius:2px;transition:transform .22s ease,opacity .18s ease}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-nav{display:none}

@media(max-width:980px){
  .nav-toggle{display:flex}
  .mobile-nav:not([hidden]){display:block;position:fixed;left:0;right:0;top:74px;bottom:0;z-index:49;background:var(--cream);border-top:1px solid var(--line);padding:20px 24px 48px;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .mobile-nav a{display:block;padding:17px 2px;font-size:19px;font-weight:800;color:var(--navy);border-bottom:1px solid var(--line)}
  .mobile-nav a:last-of-type{border-bottom:none}
  .mobile-nav .btn{margin-top:24px;width:100%;text-align:center;border-bottom:none;font-size:16px;padding:15px}
  body.nav-open{overflow:hidden}
}

/* Accessibility: the design has no skip link and its images are all CSS
   backgrounds, which screen readers ignore without an explicit role. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-weight:800}
.skip-link:focus{left:0}

/* Short intro band for sub-pages. The design only had a full hero, which is
   too heavy when the page is a focused deep-dive rather than the home page. */
.page-intro{background:var(--cream);padding:56px 0 12px}
.page-intro .eyebrow{margin-bottom:12px}
.page-intro h1{font-size:clamp(34px,4.4vw,54px)}
.page-intro .lead{margin-top:16px}
.legal-page{background:var(--cream);padding:56px 0 76px}
.legal-page .legal-body{max-width:760px;margin-top:22px}
.legal-page .legal-body h2{font-size:26px;margin:30px 0 10px}
.legal-page .legal-body h3{font-size:19px;margin:22px 0 8px}
.legal-page .legal-body p{margin-bottom:14px;color:var(--muted);line-height:1.75}
.legal-page .legal-body ul{margin:0 0 16px 20px;color:var(--muted);line-height:1.75}
.legal-page .legal-body li{margin-bottom:7px}

/* Real Gooido logo. The render package shipped a text placeholder ("gooido."
   with a turquoise full stop) instead of the actual mark. */
.logo-mark{display:inline-flex;align-items:center;line-height:0}
.logo-mark img{height:38px;width:auto;display:block}
.footer .logo-mark img{height:34px}
/* The mark is navy on transparent, which would vanish on the navy footer.
   brightness(0) flattens it to black, invert(1) then lifts it to solid white. */
.logo-mark--light img{filter:brightness(0) invert(1)}
@media(max-width:620px){.logo-mark img{height:32px}}

/* Portrait (9:16) video band. The render package only had a single landscape
   poster; the real clips are shot vertically for phones. */
.video-portraits{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
.video-portrait{display:flex;flex-direction:column}
.video-portrait strong{display:block;margin-top:14px;color:var(--navy);font-size:15px}
.video-portrait span{display:block;margin-top:5px;color:var(--muted);font-size:14px;line-height:1.6}
.video-frame{position:relative;aspect-ratio:9/16;border-radius:16px;overflow:hidden;background:#0b2145 center/cover no-repeat;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.video-frame:after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(7,27,43,.15),rgba(7,27,43,.6));pointer-events:none}
/* Once a real player is injected the overlay and play glyph must not sit on top of it. */
.video-frame:has(video):after,.video-frame:has(iframe):after{display:none}
.video-frame video,.video-frame iframe{position:relative;z-index:1}
.video-frame .play{position:relative;z-index:2;width:60px;height:60px;border-radius:50%;border:3px solid #fff;color:#fff;display:grid;place-items:center;font-size:20px}
@media(max-width:900px){.video-portraits{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.video-portraits{grid-template-columns:1fr;max-width:340px;margin-left:auto;margin-right:auto}}

/* ============================================================
   HOME v2 — preview design (/home-preview)
   Layout language only: glass depth, 2.5rem radii, bento, grain.
   Colours and fonts are the existing Gooido tokens, unchanged.
   Every rule is namespaced .hv2 so the other pages are untouched.
   ============================================================ */

.hv2{--hv2-r:2.5rem;--hv2-glass:rgba(255,255,255,.05);--hv2-edge:rgba(255,255,255,.1)}

/* Grain: an inline SVG noise field. Stops large dark gradients banding and
   gives the flat colour some analogue texture. */
.hv2 .hv2-grain{position:absolute;inset:0;pointer-events:none;opacity:.15;z-index:1;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E")}

/* Entry animation. Content is visible by default; the observer only adds
   motion, so the page is complete with JS off. */
.hv2 [data-anim]{opacity:1}
.js-anim .hv2 [data-anim]{opacity:0;transform:translateY(20px);transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.js-anim .hv2 [data-anim].in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js-anim .hv2 [data-anim]{opacity:1;transform:none;transition:none}
}

/* ---------- hero ---------- */
.hv2-hero{padding:18px 18px 0;background:var(--cream)}
.hv2-hero-inner{position:relative;overflow:hidden;border-radius:var(--hv2-r);min-height:88vh;display:flex;align-items:center;
  background-color:var(--navy);background-size:cover;background-position:center}
/* Bottom-heavy gradient, never a flat dark fill. */
.hv2-hero-inner:before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(160deg,rgba(11,33,69,.72) 0%,rgba(7,27,43,.88) 55%,rgba(7,27,43,.96) 100%)}
.hv2-ghost{position:absolute;left:50%;top:52%;transform:translate(-50%,-50%);z-index:1;
  font-family:Georgia,"Times New Roman",serif;font-size:22vw;line-height:1;color:#fff;opacity:.03;
  filter:blur(3px);letter-spacing:-.04em;white-space:nowrap;pointer-events:none}
.hv2-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.35fr .65fr;gap:48px;align-items:center;padding:96px 0}
.hv2-hero h1{color:#fff;max-width:16ch}
.hv2-hero .eyebrow{color:var(--turq)}
.hv2-lead{font-size:19px;line-height:1.75;color:rgba(255,255,255,.72);max-width:56ch;margin:18px 0 0}
.hv2-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:32px}
.hv2-textlink{color:rgba(255,255,255,.8);font-weight:700;font-size:14px;border-bottom:1px solid rgba(255,255,255,.25);padding-bottom:2px}
.hv2-textlink:hover{color:#fff;border-bottom-color:#fff}

/* Pill button with a nested circular icon. */
.hv2-pill{display:inline-flex;align-items:center;gap:14px;background:#fff;color:var(--navy);
  border-radius:999px;padding:8px 8px 8px 24px;font-weight:800;font-size:15px;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.hv2-pill i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;
  background:var(--navy);color:#fff;font-style:normal;font-size:16px;transition:background .3s ease}
.hv2-pill:hover{transform:scale(1.05);box-shadow:0 14px 34px rgba(0,0,0,.28)}
.hv2-pill:hover i{background:var(--tq,#006D77);background:var(--turq-deep)}

/* Glass stat cards. */
.hv2-stats{display:flex;flex-direction:column;gap:14px}
.hv2-stat{background:var(--hv2-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hv2-edge);border-radius:1.25rem;padding:20px 22px}
.hv2-stat strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:34px;color:#fff;line-height:1}
.hv2-stat span{display:block;margin-top:7px;font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.6)}

/* ---------- light bands ---------- */
.hv2-band{background:var(--cream);padding:96px 0}
.hv2-band--soft{background:var(--cream-2)}
.hv2-head{max-width:760px;margin-bottom:44px}
.hv2-head h2{margin-top:14px}
.hv2-head .lead{margin-top:14px}

/* ---------- audiences ---------- */
.hv2-aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.hv2-aud{display:block;background:#fff;border:1px solid var(--line);border-radius:1.5rem;overflow:hidden;
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.hv2-aud:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.hv2-aud-img{display:block;height:190px;background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.hv2-aud:hover .hv2-aud-img{transform:scale(1.05)}
.hv2-aud-body{display:block;padding:22px 24px 26px}
.hv2-aud-body strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:21px;color:var(--navy)}
.hv2-aud-body>span{display:block;margin-top:8px;color:var(--muted);font-size:15px;line-height:1.65}
.hv2-aud-body em{display:inline-block;margin-top:14px;font-style:normal;font-weight:800;font-size:13px;color:var(--turq-deep)}

/* ---------- catalogue bento ---------- */
/* Four equal cards in one row. The first used to span two columns, which
   left an empty cell and made the set look unbalanced. */
.hv2-bento{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;align-items:stretch}
.hv2-cat{position:relative;display:flex;flex-direction:column;border-radius:2rem;overflow:hidden;background:#fff;border:1px solid var(--line)}
.hv2-cat-img{display:block;height:180px;background-size:cover;background-position:center;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.hv2-cat:hover .hv2-cat-img{transform:scale(1.05)}
.hv2-cat-body{display:block;flex:1;padding:20px 20px 24px}
.hv2-cat-body small{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
  color:var(--turq-deep);background:var(--turq-lt,#e6f7f8);border-radius:999px;padding:5px 11px}
.hv2-cat-body strong{display:block;margin-top:12px;font-family:Georgia,"Times New Roman",serif;font-size:23px;color:var(--navy)}
.hv2-cat-body>span{display:block;margin-top:7px;color:var(--muted);font-size:15px;line-height:1.65}

/* ---------- dark how-it-works ---------- */
.hv2-dark{padding:0 18px;background:var(--cream)}
.hv2-dark-inner{position:relative;overflow:hidden;border-radius:var(--hv2-r);padding:88px 0;
  background:linear-gradient(165deg,var(--navy) 0%,var(--dark) 78%)}
.hv2-how-grid{position:relative;z-index:2;display:grid;grid-template-columns:1fr .85fr;gap:56px;align-items:center}
.hv2-dark h2{color:#fff;margin-top:14px;max-width:14ch}
.hv2-dark .eyebrow{color:var(--turq)}
.hv2-steps{display:flex;flex-direction:column;gap:14px;margin-top:36px}
.hv2-step{display:flex;gap:18px;background:var(--hv2-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid var(--hv2-edge);border-radius:1rem;padding:20px 22px}
.hv2-step b{font-family:Georgia,"Times New Roman",serif;font-size:26px;color:var(--turq);line-height:1;flex-shrink:0}
.hv2-step strong{display:block;color:#fff;font-size:16px}
.hv2-step span{display:block;margin-top:5px;color:rgba(255,255,255,.6);font-size:14.5px;line-height:1.6}

/* Mock window, tilted for depth. */
.hv2-mock{position:relative}
.hv2-mock-win{transform:rotate(3deg);border-radius:1.5rem;overflow:hidden;border:1px solid var(--hv2-edge);
  background:var(--hv2-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 30px 70px rgba(0,0,0,.35)}
.hv2-mock-bar{display:flex;gap:6px;padding:13px 16px;border-bottom:1px solid var(--hv2-edge)}
.hv2-mock-bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25)}
.hv2-mock-cover{height:132px;background-size:cover;background-position:center}
.hv2-mock-rows{padding:16px}
.hv2-mock-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:rgba(255,255,255,.06);border:1px solid var(--hv2-edge);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.hv2-mock-row:last-child{margin-bottom:0}
.hv2-mock-row span{color:rgba(255,255,255,.82);font-size:13.5px}
.hv2-mock-row b{color:var(--turq);font-size:13px}
.hv2-mock-tag{position:absolute;right:-6px;bottom:-16px;background:var(--turq);color:var(--navy);
  font-weight:800;font-size:12.5px;border-radius:999px;padding:9px 16px;box-shadow:0 12px 26px rgba(0,0,0,.3);
  animation:hv2bob 2.6s ease-in-out infinite}
@keyframes hv2bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@media(prefers-reduced-motion:reduce){.hv2-mock-tag{animation:none}}

/* ---------- proof ---------- */
.hv2-proof-line{max-width:820px}
.hv2-proof-line .lead{margin-top:16px}
.hv2-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:48px}
.hv2-metric{border-top:2px solid var(--turq);padding-top:18px}
.hv2-metric strong{display:block;font-family:Georgia,"Times New Roman",serif;font-size:27px;color:var(--navy);line-height:1.15}
.hv2-metric span{display:block;margin-top:8px;color:var(--muted);font-size:14.5px;line-height:1.6}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .hv2-hero-grid{grid-template-columns:1fr;gap:36px;padding:72px 0}
  .hv2-hero-inner{min-height:auto}
  .hv2-stats{flex-direction:row;flex-wrap:wrap}
  .hv2-stat{flex:1 1 180px}
  .hv2-how-grid{grid-template-columns:1fr;gap:40px}
  .hv2-aud-grid,.hv2-bento{grid-template-columns:repeat(2,1fr)}
  .hv2-metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:700px){
  /* The tilted mock is illegible at phone width; hide rather than shrink it. */
  .hv2-mock{display:none}
}
@media(max-width:620px){
  .hv2-hero{padding:10px 10px 0}
  .hv2-dark{padding:0 10px}
  .hv2-band{padding:64px 0}
  .hv2-aud-grid,.hv2-bento,.hv2-metrics{grid-template-columns:1fr}
  .hv2-ghost{font-size:34vw}
  .hv2-stats{flex-direction:column}
}

/* ============================================================
   Primary CTAs, and footer separation.
   Appended last so these win over the earlier version blocks.
   ============================================================ */

/* One CTA shape across the whole site: a yellow pill with the label, then a
   navy circle holding the arrow. The header button was navy with square
   corners, the hero pill was white, and the form submit was a plain yellow
   pill — three different buttons for the same job. */
.btn.primary,
.header .btn,
.header .btn.primary,
.mobile-nav .btn.primary,
.lead-submit{
  display:inline-flex;
  align-items:center;
  gap:12px;
  border:0;
  border-radius:999px;
  padding:7px 7px 7px 22px;
  background:linear-gradient(180deg,#ffb23a,#f49a1c);
  color:var(--navy);
  font-weight:800;
  box-shadow:0 8px 20px rgba(246,166,43,.28);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s ease;
}
/* The circle is drawn rather than marked up, so every existing button gets it
   without touching the HTML. */
.btn.primary:after,
.header .btn:after,
.mobile-nav .btn.primary:after,
.lead-submit:after{
  content:"→";
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--navy);
  color:#fff;
  font-size:15px;
  line-height:1;
  transition:background .3s ease;
}
.btn.primary:hover,
.header .btn:hover,
.lead-submit:hover{
  transform:scale(1.03);
  box-shadow:0 14px 30px rgba(246,166,43,.4);
}
.btn.primary:hover:after,
.header .btn:hover:after,
.lead-submit:hover:after{background:#071b2b}

/* The header sits in a 74px bar, so its version is a little tighter. */
.header .btn{padding:6px 6px 6px 18px;font-size:13.5px;box-shadow:0 5px 14px rgba(246,166,43,.26)}
.header .btn:after{width:30px;height:30px;font-size:14px}

/* The hero pill already has a real <i> for the circle; only the fill changes. */
.hv2-pill{
  background:linear-gradient(180deg,#ffb23a,#f49a1c);
  color:var(--navy);
  box-shadow:0 10px 26px rgba(246,166,43,.32);
}
.hv2-pill i{background:var(--navy);color:#fff}
.hv2-pill:hover{box-shadow:0 16px 36px rgba(246,166,43,.42)}
.hv2-pill:hover i{background:#071b2b}

@media(max-width:620px){
  /* Full width on a phone, with the circle pushed to the trailing edge. */
  .lead-submit{width:100%;justify-content:space-between}
}

/* The contact section and the footer were both #0b2145, so they ran together
   as one dark slab with no visible boundary. The footer drops to the deeper
   brand navy, which reads as a distinct band under any section above it. */
.footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.08)}

/* On a narrow phone the header holds logo + pill + hamburger, so the pill
   tightens rather than pushing the hamburger off the edge. */
@media(max-width:620px){
  .header .btn{padding:5px 5px 5px 14px;font-size:12.5px;gap:9px}
  .header .btn:after{width:27px;height:27px;font-size:13px}
}

/* Hero background overlay strength, set per-page from the admin (0-100).
   The design shipped a fixed dark scrim, which meant an uploaded photo could
   never be shown at full strength. */
.hv2-hero-inner:before{opacity:calc(var(--hv2-overlay, 100) / 100)}
/* A narrow scrim behind the copy only, so the headline stays readable even
   when the overlay is turned all the way down. */
.hv2-hero-inner:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(7,27,43,.72) 0%,rgba(7,27,43,.45) 38%,rgba(7,27,43,0) 68%)}

/* Hero video, shown in place of the stat cards when a video is set.
   9:16 throughout: these are phone-shot reels, and the portrait frame is the
   point of them. It stays portrait on mobile too, where it used to flip to
   16:9 and letterbox a vertical clip. */
.hv2-hero-media{display:flex;justify-content:flex-end}
.hv2-hero-video{position:relative;width:min(100%,330px);aspect-ratio:9/16;border-radius:1.25rem;overflow:hidden;
  border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 26px 60px rgba(0,0,0,.35);display:grid;place-items:center}
.hv2-hero-video video,.hv2-hero-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.hv2-hero-video .play{width:62px;height:62px;border-radius:50%;border:3px solid #fff;color:#fff;display:grid;place-items:center;font-size:20px}
/* A tall frame plus a tall hero can overflow a laptop screen, so the frame
   narrows on short viewports rather than being cropped. */
@media(max-height:860px){.hv2-hero-video{width:min(100%,290px)}}
@media(max-height:740px){.hv2-hero-video{width:min(100%,250px)}}

@media(max-width:980px){
  /* Single column here, so centre it instead of hanging off one edge. */
  .hv2-hero-media{justify-content:center}
  .hv2-hero-video{width:min(72vw,300px)}
}
@media(max-width:620px){
  .hv2-hero-video{width:min(78vw,290px)}
}

/* Page hero: a compact banner between the header and a page's content.
   Text is optional — with every field blank it renders as an image band. */
.hv2-pagehero{padding:18px 18px 0;background:var(--cream)}
.hv2-pagehero-inner{position:relative;overflow:hidden;border-radius:var(--hv2-r,2.5rem);
  /* Scales with the viewport instead of sitting at a fixed 300px, which
     cropped a tall photo down to a letterbox strip and lost the subject. */
  min-height:clamp(320px,34vw,520px);
  display:flex;align-items:center;
  background-color:var(--navy);background-size:cover;background-position:center}
.hv2-pagehero-inner:before{content:"";position:absolute;inset:0;z-index:1;
  opacity:calc(var(--hv2-overlay, 100) / 100);
  background:linear-gradient(160deg,rgba(11,33,69,.55) 0%,rgba(7,27,43,.78) 100%)}
.hv2-pagehero-copy{position:relative;z-index:2;padding:56px 0}
.hv2-pagehero-copy:empty{padding:0}
.hv2-pagehero-copy .eyebrow{color:var(--turq)}
.hv2-pagehero-copy h1{color:#fff;font-size:clamp(34px,4.4vw,58px);margin-top:12px}
.hv2-pagehero-copy .hv2-lead{margin-top:14px}
@media(max-width:620px){
  .hv2-pagehero{padding:10px 10px 0}
  .hv2-pagehero-inner{min-height:clamp(240px,56vw,340px)}
  .hv2-pagehero-copy{padding:38px 0}
}

/* ============================================================
   Header menu: centred, lighter weight, current page marked.
   ============================================================ */

/* The logo and the CTA hold the outer edges while the links take the space
   between them, so the menu sits in the middle of the bar rather than
   crowding the logo. */
.header .nav{gap:18px}
.header .navlinks{
  flex:1;
  justify-content:center;
  gap:30px;
  font-size:14px;
  font-weight:600;      /* was 800 — lighter reads calmer at this size */
  letter-spacing:0;
}
.header .navlinks a{
  color:var(--ink);
  opacity:.78;
  transition:opacity .2s ease,color .2s ease;
}
.header .navlinks a:hover{opacity:1;color:var(--navy)}

/* Current page: full strength, heavier, and its underline already extended. */
.header .navlinks a[aria-current="page"]{color:var(--navy);font-weight:800;opacity:1}
.header .navlinks a[aria-current="page"]:after{right:0}

/* Same treatment in the mobile drawer, where there is no underline to extend. */
.mobile-nav a[aria-current="page"]{color:var(--navy);position:relative}
.mobile-nav a[aria-current="page"]:before{
  content:"";position:absolute;left:-14px;top:50%;transform:translateY(-50%);
  width:4px;height:20px;border-radius:2px;background:var(--orange);
}

/* The creators page renders the same menu from the same content. */
.topbar-nav a[aria-current="page"]{opacity:1;font-weight:800;color:var(--navy)}

@media(max-width:1100px){
  /* Tighten before the breakpoint that swaps in the hamburger, so seven items
     never wrap into the logo. */
  .header .navlinks{gap:20px;font-size:13.5px}
}

/* Optional illustration at the top of a How-it-works step. The slot is absent
   until an image is set, so the cards keep their current look by default. */
.step .step-img{
  display:block;
  height:132px;
  margin:-4px -4px 16px;
  border-radius:12px;
  background:var(--cream-3,#f8f0e5) center/cover no-repeat;
}
@media(max-width:900px){.step .step-img{height:150px}}

/* Bullet list beside the sign-up form on /join. */
.join-points{margin:20px 0 0;padding:0;list-style:none}
.join-points li{position:relative;padding-left:26px;margin-bottom:10px;color:#d7e2ef;font-size:15px;line-height:1.6}
.join-points li:before{content:"✓";position:absolute;left:0;top:0;color:var(--turq);font-weight:800}