/* Generated from docs/redesign/mockups/project/Main.dc.html (approved mockup); container queries -> media queries */
body{margin:0;background:#ffffff}
a{color:#1f1633}a:hover{color:#6a5fc1}

/* Phone first: base rules are the phone layout; wider layouts are added by page width below */
.hp{position:relative;overflow-x:clip;background:#ffffff;color:#1f1633;font-family:Rubik,system-ui,sans-serif}
.hp-wrap{max-width:1152px;margin:0 auto;padding-left:16px;padding-right:16px;box-sizing:border-box}
.hp-sec{padding-top:56px;padding-bottom:56px}
.hp-sec--soft{background:#faf9fc;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb}
.hp-head{display:grid;gap:12px;max-width:40em;margin-bottom:28px}
.hp-eyebrow{font-size:14px;font-weight:500;letter-spacing:.2px;text-transform:uppercase;color:#79628c}
.hp-h2{font-family:Archivo,Rubik,sans-serif;font-stretch:88%;font-weight:700;font-size:30px;line-height:1.1;margin:0;text-wrap:balance}
.hp-sub{margin:0;color:#6b6475;line-height:1.7}
.hp-stars{background-color:#1f1633;background-image:radial-gradient(rgba(255,255,255,.28) 1px,transparent 1.2px),radial-gradient(rgba(255,255,255,.14) 1px,transparent 1.2px);background-size:120px 120px,64px 64px;background-position:0 0,32px 40px}
/* Hero background: the same dots and colour, drifting slowly (each layer moves exactly
   one tile per loop, so it never jumps); still for people who ask for reduced motion */
.hp-hero.hp-stars{animation:hp-drift 48s linear infinite}
/* A few brighter stars (white, and one yellow) that fade softly in and out */
.hp-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.75) 1.2px,transparent 1.6px),radial-gradient(rgba(251,191,36,.7) 1.2px,transparent 1.6px);background-size:260px 260px,340px 340px;background-position:40px 70px,190px 30px;animation:hp-twinkle 5s ease-in-out infinite alternate}
.hp-hero > :not(.hp-mascot){position:relative;z-index:1}
.hp-hero > .hp-mascot{z-index:1}
@keyframes hp-drift{from{background-position:0 0,32px 40px}to{background-position:120px -120px,96px -24px}}
@keyframes hp-twinkle{from{opacity:.25}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.hp-hero.hp-stars,.hp-hero::before{animation:none}}
.hp-tile{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;flex:none}
.hp-mascot{display:none;position:absolute}
:focus-visible{outline:2px solid #2f63d6;outline-offset:2px}

/* Top bar */
.hp-nav{display:flex;align-items:center;gap:12px;padding-top:12px;padding-bottom:12px}
.hp-logo{height:32px;width:auto;display:block}
.hp-navlinks{display:none;align-items:center;gap:4px;margin-left:16px;font-weight:500}
.hp-navlinks a{color:#ffffff;text-decoration:none;display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px}
.hp-navlinks a:hover{background:rgba(255,255,255,.08);color:#ffffff}
.hp-actions{display:flex;align-items:center;gap:12px;margin-left:auto}
.hp-actions .hp-signin,.hp-actions .hp-signup{display:none}
.hp-signin{border-radius:8px}
/* Language picker */
.hp-lang{position:relative}
.hp-langbtn{display:inline-flex;align-items:center;gap:6px;height:44px;min-width:44px;justify-content:center;padding:0 10px;border:1px solid #362d59;border-radius:10px;background:transparent;color:#ffffff;cursor:pointer;font:500 14px/1 Rubik,system-ui,sans-serif;box-sizing:border-box}
.hp-langbtn:hover{background:rgba(255,255,255,.08)}
.hp-langbtn__code{display:none}
.hp-langmenu{position:absolute;right:0;top:calc(100% + 8px);z-index:30;list-style:none;margin:0;padding:6px;min-width:200px;display:grid;gap:2px;background:#ffffff;color:#1f1633;border:1px solid #e5e7eb;border-radius:12px;box-shadow:0 12px 32px rgba(21,15,35,.18)}
.hp-langitem{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px;border:0;border-radius:8px;background:transparent;color:#1f1633;font:400 15px/1.2 Rubik,system-ui,sans-serif;text-align:left;cursor:pointer}
.hp-langitem:hover{background:#f7f5fa}
.hp-langitem[aria-pressed="true"]{font-weight:500}
.hp-menubtn{display:inline-grid;width:44px;height:44px;place-items:center;border:1px solid #362d59;border-radius:10px;background:transparent;color:#ffffff;cursor:pointer;padding:0}

/* Phone menu: a panel that slides in from the left */
.hp-scrim{position:absolute;inset:0;z-index:40;background:rgba(21,15,35,.55);border:0;padding:0;margin:0;cursor:pointer}
.hp-drawer{position:absolute;z-index:41;top:0;left:0;bottom:0;width:86%;max-width:340px;background:#ffffff;color:#1f1633;box-shadow:0 16px 40px rgba(21,15,35,.28);animation:hp-slide .22s ease-out}
.hp-drawer__in{display:flex;flex-direction:column;gap:20px;padding:14px 16px 28px}
.hp-drawer__top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hp-drawer__close{width:44px;height:44px;display:grid;place-items:center;border:1px solid #e5e7eb;border-radius:10px;background:#ffffff;color:#1f1633;cursor:pointer;padding:0}
.hp-drawer__links{display:grid;border-top:1px solid #e5e7eb}
.hp-drawer__links a{display:flex;align-items:center;justify-content:space-between;min-height:52px;padding:0 4px;border-bottom:1px solid #e5e7eb;color:#1f1633;text-decoration:none;font-size:17px;font-weight:500}
.hp-drawer__links a svg{color:#6b6475}
.hp-drawer__btns{display:grid;gap:10px}
.hp-drawer__btns .sm-btn{width:100%;box-sizing:border-box}
@keyframes hp-slide{from{transform:translateX(-100%)}to{transform:translateX(0)}}
@media (prefers-reduced-motion:reduce){.hp-drawer{animation:none}}

/* Hero */
.hp-hero{position:relative;color:#ffffff;padding-bottom:96px}
.hp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:32px;align-items:center;padding-top:24px}
.hp-hero-copy{display:flex;flex-direction:column;gap:16px}
.hp-hero-eyebrow{font-size:14px;font-weight:500;letter-spacing:.2px;line-height:1.4;text-transform:uppercase;color:rgba(255,255,255,.72)}
.hp-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Rotating word: a one-line window over a stack of words */
.hp-rot{display:inline-block;height:1.4em;overflow:hidden;vertical-align:bottom;color:#ffffff}
.hp-rot__stack{display:block}
.hp-rot__stack span{display:block;height:1.4em;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.hp-rot__stack{transition:none!important}}
.hp-h1{font-family:Archivo,Rubik,sans-serif;font-stretch:88%;font-weight:800;font-size:40px;line-height:1.06;margin:0;color:#ffffff;text-wrap:balance}
.hp-lead{margin:0;font-size:17px;line-height:1.7;color:rgba(255,255,255,.72);max-width:34em}
.hp-shortwrap{display:grid;gap:10px;max-width:560px;margin-top:8px}
.hp-short{display:flex;gap:8px;padding:6px;background:#ffffff;border-radius:12px}
.hp-short__input{flex:1 1 auto;min-width:0;border:0;background:transparent;padding:10px 8px;font:400 16px/1.5 Rubik,system-ui,sans-serif;color:#77707f;text-overflow:ellipsis}
.hp-short__input:focus{outline:2px solid #2f63d6;outline-offset:0;border-radius:8px}
.hp-short__input.is-short{color:#1f1633;font-weight:600}
.hp-short__btn{flex:none;padding-left:16px;padding-right:16px}
.hp-error{font-size:14px;color:#fbbf24}
.hp-preview{background:#ffffff;color:#1f1633;border-radius:16px;padding:16px;border:1px solid #e5e7eb;display:grid;gap:12px}
.hp-preview__top{display:flex;align-items:center;justify-content:space-between}
.hp-preview__kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hp-preview__bars{display:flex;align-items:flex-end;gap:6px;height:64px;padding:0 4px}
/* Chart colours: the brand violet scale (past days soft violet, today deep violet) */
.hp-preview__bars span{flex:1;background:#c9c2e6;border-radius:4px 4px 0 0}
.hp-preview__bars span:last-child{background:#3e3591}
.hp-preview__note{font-size:13px;color:#6b6475}

/* Headline figures */
/* The band under the hero: transparent where the card overlaps the hero, then the same light grey as the next section (no white strip) */
.hp-statsband{position:relative;z-index:2;margin-top:-56px;background:linear-gradient(to bottom,transparent 56px,#faf9fc 56px)}
.hp-statsband + .hp-sec--soft{border-top:0}
.hp-stats__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px;text-align:center;background:#ffffff;border:1px solid #e5e7eb;border-radius:16px;box-shadow:0 8px 24px rgba(21,15,35,.08);padding:20px 16px}
.hp-stats__grid > div{display:grid;gap:4px;align-content:center}
.hp-stat-n{font-family:Archivo,Rubik,sans-serif;font-stretch:88%;font-weight:800;font-size:28px;line-height:1.1}
.hp-stat-l{color:#6b6475;font-size:14px}

/* Why publishers choose us */
.hp-why{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp-card{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;display:grid;gap:10px;align-content:start}
/* Icon, title and text sit on shared rows across the cards, so every description starts at the same height */
@supports (grid-template-rows:subgrid){.hp-card{grid-row:span 3;grid-template-rows:subgrid;align-content:normal}.hp-card strong{align-self:start}}
.hp-card strong{font-size:15px;line-height:1.3}
.hp-card p{margin:0;color:#6b6475;font-size:14px;line-height:1.55}

/* How it works: numbered steps joined by a line */
.hp-steps{list-style:none;margin:0;padding:0;display:grid;gap:24px}
.hp-step{position:relative;padding-left:56px;display:grid;gap:6px}
.hp-step__n{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:999px;background:#1f1633;color:#ffffff;display:grid;place-items:center;font:800 18px/1 Archivo,Rubik,sans-serif}
.hp-step:not(:last-child)::before{content:"";position:absolute;left:19px;top:48px;bottom:-18px;width:2px;background:#e5e7eb}
.hp-step strong{font-size:18px;line-height:1.3;padding-top:8px}
.hp-step p{margin:0;color:#6b6475;line-height:1.6}

/* Payout rates */
.hp-rates{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp-rate{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:16px 10px;display:grid;justify-items:center;gap:8px;text-align:center}
.hp-rate-n{font-family:Archivo,Rubik,sans-serif;font-stretch:88%;font-weight:800;font-size:26px;line-height:1}
.hp-flag{width:36px;height:24px;border-radius:3px;overflow:hidden;box-shadow:0 0 0 1px #e5e7eb;display:block}
.hp-btns{display:flex;flex-direction:column;gap:10px;margin-top:28px}
.hp-btns .sm-btn{width:100%;box-sizing:border-box}

/* Payment options: one strip of logos, no cards */
.hp-paystrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:#e5e7eb;border:1px solid #e5e7eb;border-radius:16px;overflow:hidden}
.hp-pay{background:#ffffff;padding:18px 8px;display:grid;justify-items:center;gap:6px;text-align:center}
.hp-pay__logo{height:40px;display:grid;place-items:center}
.hp-pay__logo img{width:32px;height:32px;display:block}
.hp-pay__word{font-family:Archivo,Rubik,sans-serif;font-weight:800;font-size:18px}
.hp-pay strong{font-size:14px;line-height:1.25}
.hp-pay__min{font-size:13px;color:#6b6475}

/* Tools */
.hp-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.hp-tool{background:#ffffff;border:1px solid #e5e7eb;border-radius:12px;padding:16px;display:grid;gap:10px;align-content:start}
.hp-tool__txt{display:grid;gap:4px}
.hp-tool strong{font-size:15px;line-height:1.3}
.hp-tool p{margin:0;color:#6b6475;font-size:14px;line-height:1.5}

/* FAQ */
.hp-faq__cols{display:grid;gap:12px}
.hp-faq__col{display:grid;gap:12px;align-content:start}
.hp-q{background:#faf9fc;border:1px solid #e5e7eb;border-radius:14px;transition:background .15s ease,box-shadow .15s ease}
.hp-q[open]{background:#ffffff;box-shadow:0 8px 24px rgba(21,15,35,.07)}
.hp-q summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:60px;padding:14px 16px 14px 20px;font-weight:500;font-size:16px;line-height:1.4;border-radius:14px}
.hp-q summary::-webkit-details-marker{display:none}
.hp-q__i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:#ffffff;border:1px solid #e5e7eb;color:#1f1633;transition:transform .2s ease,background .15s ease,color .15s ease}
.hp-q summary:hover .hp-q__i{background:#f0eefb}
.hp-q[open] .hp-q__i{transform:rotate(45deg);background:#1f1633;border-color:#1f1633;color:#ffffff}
.hp-q__a{padding:0 20px 18px}
.hp-q__a p{margin:0;color:#6b6475;line-height:1.7}
.hp-q__a a{color:#3e3591}
@media (prefers-reduced-motion:reduce){.hp-q,.hp-q__i{transition:none}}

/* Latest payouts, under the payment methods: a list on phones and tablets, five tiles on desktop.
   The live page fills it from the latest completed payouts (usernames cut to 3 letters, like Payment proof) */
.hp-recent{margin-top:24px;background:#ffffff;border:1px solid #e5e7eb;border-radius:16px;padding:16px}
.hp-recent__head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px;margin-bottom:8px}
.hp-recent__title{margin:0;display:flex;align-items:center;gap:10px;font-size:18px;font-weight:600;line-height:1.3}
.hp-live{position:relative;width:8px;height:8px;border-radius:50%;background:#1e7a46;flex:none}
.hp-live::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid #1e7a46;opacity:0;animation:hp-pulse 2s ease-out infinite}
@keyframes hp-pulse{0%{transform:scale(.5);opacity:.6}100%{transform:scale(1.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.hp-live::after{animation:none}}
.hp-recent__all{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:500;font-size:15px;color:#3e3591;text-decoration:none}
.hp-recent__all:hover{color:#3e3591;text-decoration:underline}
.hp-recent__list{list-style:none;margin:0;padding:0;display:grid}
.hp-po{display:grid;grid-template-columns:40px minmax(0,1fr) auto;grid-template-areas:"av who amt";align-items:center;gap:12px;padding:12px 0;border-top:1px solid #e5e7eb}
.hp-po__av{grid-area:av;width:40px;height:40px;border-radius:50%;background:#f0eefb;color:#3e3591;display:grid;place-items:center;font-weight:600;text-transform:uppercase}
.hp-po__who{grid-area:who;display:grid;gap:2px;min-width:0}
.hp-po__who strong{font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.3px}
.hp-po__meta{display:flex;flex-wrap:wrap;gap:0 6px;font-size:14px;color:#6b6475}
.hp-po__meta .d::before{content:"·";margin-right:6px}
.hp-po__amt{grid-area:amt;justify-self:end;background:#e6f4ec;color:#1e7a46;font-weight:600;font-variant-numeric:tabular-nums;border-radius:999px;padding:4px 12px;white-space:nowrap}

/* Closing section: sign-up panel with the trust line, on the page just above the footer */
.hp-closewrap{padding-top:8px;padding-bottom:32px}
.hp-close{position:relative;overflow:hidden;background:#1f1633;border:1px solid #362d59;border-radius:20px}
.hp-close::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.18) 1px,transparent 1.2px);background-size:40px 40px}
.hp-close > *{position:relative}
.hp-close__main{display:grid;gap:18px;justify-items:center;text-align:center;padding:32px 20px 28px}
.hp-close__coin{width:88px;height:auto}
.hp-close__txt{display:grid;gap:8px}
.hp-close .hp-h2{color:#ffffff}
.hp-close__sub{margin:0;color:rgba(255,255,255,.72)}
.hp-close__btn{width:100%;box-sizing:border-box;background:#fbbf24;color:#150f23;border-color:#fbbf24}
.hp-close__btn:hover{background:#f5b30c;color:#150f23}
.hp-trust{list-style:none;margin:0;padding:18px 20px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px;border-top:1px solid #362d59;color:rgba(255,255,255,.78);font-weight:500;font-size:14px}
.hp-trust li{display:flex;align-items:center;gap:10px;min-width:0}
.hp-trust svg{flex:none;color:#e9c6d4}

/* Footer */
.hp-foot{position:relative;background:#1f1633;color:#ffffff;margin-top:56px}
.hp-foot__wave{position:absolute;left:0;top:-55px;width:100%;height:56px;display:block}
.hp-foot__in{padding-top:40px;padding-bottom:32px}
.hp-foot a{color:rgba(255,255,255,.78);text-decoration:none}
.hp-foot a:hover{color:#ffffff;text-decoration:underline}
.hp-foot-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
.hp-foot-brand{grid-column:1 / -1;display:grid;gap:16px;align-content:start}
.hp-foot-brand p{margin:0;color:rgba(255,255,255,.72);line-height:1.8;max-width:30em}
.hp-foot-col{display:grid;align-content:start}
.hp-foot-col h4{margin:0 0 6px;font-size:13px;letter-spacing:.8px;text-transform:uppercase;color:rgba(255,255,255,.6)}
.hp-foot-col a{display:flex;align-items:center;min-height:40px}
.hp-social-row{display:flex;gap:10px}
.hp-social{width:44px;height:44px;border-radius:10px;display:grid;place-items:center;border:1px solid #362d59;color:#ffffff}
.hp-foot-base{display:flex;flex-direction:column;gap:8px;align-items:center;text-align:center;border-top:1px solid #362d59;margin-top:32px;padding-top:20px;color:rgba(255,255,255,.72);font-size:14px}

/* 576px and wider */
@media (min-width:576px){
.hp-wrap{padding-left:24px;padding-right:24px}
.hp-h1{font-size:48px}
.hp-stats__grid{grid-template-columns:repeat(4,minmax(0,1fr));padding:24px}
.hp-stat-n{font-size:30px}
.hp-btns{flex-direction:row;justify-content:flex-start;flex-wrap:wrap}
.hp-btns .sm-btn{width:auto}
}

/* 768px and wider */
@media (min-width:768px){
.hp-langbtn__code{display:inline}
.hp-nav{gap:28px;padding-top:20px;padding-bottom:20px}
.hp-logo{height:42px}
.hp-navlinks{display:flex}
.hp-actions .hp-signin,.hp-actions .hp-signup{display:inline-flex}
.hp-menubtn,.hp-drawer,.hp-scrim{display:none}
.hp-sec{padding-top:72px;padding-bottom:72px}
.hp-head{margin-bottom:36px}
.hp-h1{font-size:60px}
.hp-h2{font-size:36px}
.hp-hero{padding-bottom:136px}
.hp-hero-grid{padding-top:48px}
.hp-mascot{display:block}
.hp-statsband{margin-top:-68px;background:linear-gradient(to bottom,transparent 68px,#faf9fc 68px)}
.hp-stats__grid{padding:28px 24px}
.hp-stat-n{font-size:36px}
.hp-stat-l{font-size:16px}
.hp-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
.hp-step{padding-left:0;padding-top:60px}
.hp-step strong{padding-top:0}
.hp-step:not(:last-child)::before{left:52px;right:-20px;top:19px;bottom:auto;width:auto;height:2px}
.hp-rates{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.hp-rate{padding:18px 16px}
.hp-rate-n{font-size:30px}
.hp-paystrip{grid-template-columns:repeat(6,minmax(0,1fr))}
.hp-pay{padding:28px 12px;gap:8px}
.hp-pay__logo{height:48px}
.hp-pay__logo img{width:40px;height:40px}
.hp-pay__word{font-size:22px}
.hp-pay strong{font-size:16px}
.hp-pay__min{font-size:14px}
.hp-tools{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.hp-tool{grid-template-columns:48px minmax(0,1fr);gap:16px;padding:24px}
.hp-tool .hp-tile{width:48px;height:48px;border-radius:12px}
.hp-tool strong{font-size:18px}
.hp-tool p{font-size:16px;line-height:1.6}
.hp-close__main{grid-template-columns:auto minmax(0,1fr) auto;justify-items:start;text-align:left;align-items:center;gap:28px;padding:36px 40px}
.hp-close__coin{width:104px}
.hp-close__btn{width:auto}
.hp-trust{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;padding:18px 40px;font-size:15px}
.hp-foot__in{padding-top:48px;padding-bottom:40px}
.hp-foot-grid{grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:40px}
.hp-foot-brand{grid-column:auto;gap:18px}
.hp-foot-col a{min-height:36px}
.hp-foot-base{flex-direction:row;flex-wrap:wrap;justify-content:space-between;margin-top:40px}
}

/* 992px and wider */
@media (min-width:992px){
.hp-sec{padding-top:96px;padding-bottom:96px}
.hp-h1{font-size:64px;line-height:1.08}
.hp-h2{font-size:48px;line-height:1.08}
.hp-hero{padding-bottom:156px}
.hp-hero-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;padding-top:72px}
.hp-hero-copy{gap:24px}
.hp-hero-eyebrow{font-size:15px}
.hp-lead{font-size:18px;line-height:1.9}
.hp-preview{padding:22px;gap:14px;border-radius:18px;transform:rotate(2deg)}
.hp-preview__bars{height:96px;gap:8px}
.hp-statsband{margin-top:-70px;background:linear-gradient(to bottom,transparent 70px,#faf9fc 70px)}
.hp-stat-n{font-size:40px}
.hp-why{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.hp-card{padding:24px;gap:12px}
.hp-card .hp-tile{width:48px;height:48px;border-radius:12px}
.hp-card strong{font-size:18px}
.hp-card p{font-size:16px;line-height:1.6}
.hp-faq__cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hp-faq__col{gap:16px}
.hp-q summary{font-size:17px;padding:16px 18px 16px 24px}
.hp-q__a{padding:0 24px 20px}
.hp-recent{padding:24px;margin-top:32px}
.hp-recent__list{grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:8px}
.hp-po{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"av amt" "who who";align-items:center;gap:12px 8px;padding:16px;border-top:0;background:#faf9fc;border-radius:12px}
.hp-po__meta{display:grid;gap:2px}
.hp-po__meta .d::before{content:none}
/* Desktop only: section headings, the rates buttons and the FAQ intro are centred; phones and tablets keep them left-aligned */
.hp-head--center{justify-items:center;text-align:center;margin-left:auto;margin-right:auto}
.hp-btns{justify-content:center}
.hp-close__main{padding:44px 56px}
.hp-close__coin{width:120px}
.hp-trust{padding:20px 56px}
}
@media (min-width:1200px){.hp-trust{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:16px;padding:20px 40px;font-size:14px}}
/* Linky stands beside the figures card, never under it, only where the side margin is wide enough */
.hp-stats__in{position:relative}
.hp-stats__linky{display:none;position:absolute;right:calc(100% + 14px);bottom:-6px;width:118px;height:auto}
@media (min-width:1400px){.hp-stats__linky{display:block}}
/* Hero colour: Midnight (chosen 11 Nov). Darker night (#150f23) with a faint violet glow behind the headline */
.hp-hero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 55% at 26% 42%,rgba(106,95,193,.30),transparent 70%),radial-gradient(ellipse 40% 45% at 80% 60%,rgba(62,53,145,.22),transparent 70%)}
.hp-hero.hp-stars{background-color:#150f23}
/* Closing panel: heading on one line on desktop (40px so it fits between the coin and the button) */
@media (min-width:1200px){.hp-close .hp-h2{font-size:40px;white-space:nowrap}}
.hp-pay__logo img.is-wide{width:auto;height:18px;max-width:80px}
@media (min-width:1024px){.hp-pay__logo img.is-wide{height:22px;max-width:96px}}
/* Hero: moving example dashboard (owner, 13 Nov; replaces .hp-preview) */
.hp-dash{background:#ffffff;color:#1f1633;border-radius:18px;padding:20px;box-shadow:0 30px 60px rgba(0,0,0,.35);display:grid;gap:16px;font-family:Rubik,system-ui,sans-serif}
.hp-dash__top{display:flex;align-items:center;gap:10px}
.hp-dash__top strong{font-size:17px;font-weight:600}
.hp-dash__live{position:relative;width:8px;height:8px;border-radius:9999px;background:#1e7a46}
.hp-dash__live::after{content:"";position:absolute;inset:0;border-radius:9999px;background:#4ade80;animation:hp-live 1.8s ease-out infinite}
@keyframes hp-live{0%{transform:scale(.6);opacity:.7}100%{transform:scale(1.8);opacity:0}}
.hp-dash__tag{margin-left:auto;font-size:12px;font-weight:600;letter-spacing:.25px;text-transform:uppercase;color:#6b6475;background:#faf9fc;border:1px solid #e5e7eb;padding:2px 8px;border-radius:4px}
.hp-dash__kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hp-dash__kpi{border:1px solid #e5e7eb;border-radius:12px;padding:12px;display:grid;gap:2px;min-width:0}
.hp-dash__lab{font-size:13px;color:#6b6475}
.hp-dash__val{font-size:22px;font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.hp-dash__up{font-size:12px;color:#1e7a46}
.hp-dash__sub{font-size:12px;color:#6b6475}
.hp-dash__bars{display:flex;align-items:flex-end;gap:8px;height:110px;padding-bottom:6px;border-bottom:1px solid #e5e7eb}
.hp-dash__bars span{flex:1 1 0;height:var(--h);border-radius:4px 4px 0 0;background:#cbbfe6;transform-origin:bottom;transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.hp-dash__bars span:last-child{background:#3e3591}
.hp-dash.is-reset .hp-dash__bars span{transform:scaleY(.02);transition:none}
.hp-dash__days{display:flex;justify-content:space-between;font-size:12px;color:#6b6475}
@media (max-width:575px){.hp-dash{padding:16px}.hp-dash__kpis{gap:8px}.hp-dash__kpi{padding:10px}.hp-dash__val{font-size:18px}.hp-dash__bars{height:80px}}
@media (min-width:1024px){.hp-dash{padding:24px}.hp-dash__val{font-size:24px}.hp-dash__bars{height:130px}}
@media (prefers-reduced-motion:reduce){.hp-dash__live::after{animation:none}.hp-dash__bars span{transition:none}.hp-dash.is-reset .hp-dash__bars span{transform:none}}
/* Longer languages (owner, 13 Nov): steps start at the top; the bottom band's facts wrap as whole items */
.hp-step{align-content:start}
.hp-trust svg{color:#c9c4d4}
@media (min-width:1200px){.hp-trust{flex-wrap:wrap;justify-content:center;gap:12px 28px}.hp-trust li{white-space:nowrap}}