@font-face{font-family:"Nunito Sans";src:url("/home/fonts/nunitosans-latin.woff2") format("woff2");font-weight:200 1000;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url("/home/fonts/robotoslab-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

/* Layout: white with one cobalt accent, bold slab headlines and lime highlights. Short on purpose: promise, steps and example, why, guarantees, brands, FAQs. */
:root{
  --bg:#FFFFFF;--ink:#14152B;--muted:#3E4157;--line:#E7E9F2;--card:#FFFFFF;
  --accent:#2F54EB;--on-accent:#FFFFFF;--tint:#F0F3FF;--mark:#D8E0FF;--ok:#1F9D63;
  --peach:#FFF1EA;--butter:#FFF8D6;--s1:linear-gradient(140deg,#E2E9FF 0%,#D2DCFF 50%,#ECDDFF 100%);--mint:#EAF7F1;--pop-bg:#2340D8;--pop-fg:#FFFFFF;--zing:#DCFF57;--on-zing:#14152B;
  --shadow:0 2px 6px rgba(20,21,43,.06),0 24px 48px -24px rgba(20,21,43,.3);
  /* Closest free matches to Rakuten's licensed Stag (headlines) and Rakuten Sans UI (text) */
  --display:"Roboto Slab",Georgia,"Times New Roman",serif;
  --sans:"Nunito Sans",system-ui,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0C0E1A;--ink:#EEF0FA;--muted:#C4C8DC;--line:#242840;--card:#141729;
  --accent:#7D95FF;--on-accent:#0C0E1A;--tint:#151A33;--mark:#2A3466;--ok:#4FD08E;
  --peach:#24171A;--butter:#272410;--s1:linear-gradient(140deg,#182046 0%,#1C2560 50%,#2A1F4E 100%);--mint:#122219;--pop-bg:#1B276E;--pop-fg:#EEF0FA;--zing:#D4F94E;--on-zing:#14152B;
  --shadow:0 2px 6px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.85);color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C0E1A;--ink:#EEF0FA;--muted:#C4C8DC;--line:#242840;--card:#141729;
  --accent:#7D95FF;--on-accent:#0C0E1A;--tint:#151A33;--mark:#2A3466;--ok:#4FD08E;
  --peach:#24171A;--butter:#272410;--s1:linear-gradient(140deg,#182046 0%,#1C2560 50%,#2A1F4E 100%);--mint:#122219;--pop-bg:#1B276E;--pop-fg:#EEF0FA;--zing:#D4F94E;--on-zing:#14152B;
  --shadow:0 2px 6px rgba(0,0,0,.35),0 24px 48px -24px rgba(0,0,0,.85);color-scheme:dark}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3,p,figure,ol,ul{margin:0}
h1,h2,h3{font-family:var(--display);font-weight:600;letter-spacing:-.02em;line-height:1.08;text-wrap:balance}
img{display:block;max-width:100%}
.wrap{max-width:1180px;margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:8px}
mark{color:inherit;background:linear-gradient(var(--mark),var(--mark)) no-repeat 0 90%/100% 70%;padding:0 .08em}
.chip{display:inline-block;background:var(--zing);color:var(--on-zing);border-radius:.18em;padding:0 .14em;transform:rotate(-2deg)}

.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px}
.logo{font-weight:900;font-size:31px;letter-spacing:-.03em;text-decoration:none;white-space:nowrap}
.logo .g{display:inline-block;width:58px;height:auto;vertical-align:middle;margin:-14px 10px -8px 0;filter:drop-shadow(0 4px 6px rgba(20,21,43,.2))}
.logo span{color:var(--accent)}
.links{display:flex;align-items:center;gap:28px;font-weight:700;font-size:16px}
.links a{text-decoration:none;color:var(--muted);white-space:nowrap}.links a:hover{color:var(--ink)}
.links .nav-cta{background:var(--accent);color:var(--on-accent);font-weight:800;padding:11px 20px;border-radius:999px;transition:transform .2s,box-shadow .2s}
.links .nav-cta:hover{color:var(--on-accent);transform:translateY(-1px);box-shadow:0 10px 20px -10px var(--accent)}
.btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);font-weight:700;font-size:18px;text-decoration:none;border-radius:999px;padding:17px 36px;min-width:220px;border:0;cursor:pointer;font-family:var(--sans);transition:transform .2s,box-shadow .2s}
.btn:hover{transform:translateY(-1px);box-shadow:0 12px 24px -12px var(--accent)}

/* Hero */
.hero{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;padding-block:32px 48px}
.hero-copy{display:flex;flex-direction:column;gap:20px;min-width:0}
h1{font-size:clamp(44px,4.8vw,68px)}
h1 .line{display:block}
#hero-title mark{display:inline-block;margin:.1em 0 0 -.14em;padding:.02em .14em .07em;border-radius:.16em;background:linear-gradient(var(--zing),var(--zing)) no-repeat 0 0/100% 100%;color:var(--on-zing);rotate:-1.5deg;animation:hl-in .7s .35s cubic-bezier(.3,.7,.2,1) both}
#hero-title mark+br+mark{animation-delay:.75s}
@keyframes hl-in{from{background-size:0% 100%}}
.kicker{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin:0;color:var(--ink);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.kicker img{width:66px;height:auto;rotate:6deg;margin:-8px -6px -8px 0}
.sub{font-size:clamp(20px,1.8vw,24px);font-weight:700;color:var(--muted);max-width:42ch;text-wrap:balance}
.works{display:flex;flex-wrap:wrap;align-items:center;gap:7px;margin-top:4px;padding:0;list-style:none;font-size:14px;font-weight:700}
.works li{background:var(--tint);border-radius:999px;padding:5px 12px}
.works .lab{background:none;padding:0 4px 0 0;color:var(--muted)}
.works .lab:first-child{flex-basis:100%}
.visual{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.orbit{position:relative;aspect-ratio:1/1;width:100%;max-width:480px}
.ring{position:absolute;inset:8%;border-radius:50%;border:1.5px dashed var(--mark)}
.sticker{position:absolute;left:50%;top:50%;width:40%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;box-shadow:var(--shadow);z-index:2;container-type:inline-size}
.sticker b{font-weight:900;font-size:clamp(44px,6vw,76px);letter-spacing:-.04em;line-height:1}
.ring-text{position:absolute;inset:6%;animation:spin 24s linear infinite}
.ring-text i{position:absolute;left:50%;top:0;height:50%;translate:-50% 0;transform-origin:50% 100%;font-style:normal;font-family:var(--sans);font-weight:700;font-size:4.6cqw;line-height:1;text-transform:uppercase;color:var(--on-accent)}
@keyframes spin{to{transform:rotate(360deg)}}
.tile{position:absolute;width:31%;aspect-ratio:1;animation:drift 9s ease-in-out infinite}
.tile .sq{display:grid;place-items:center;width:100%;height:100%;padding:13%;border-radius:22px;border:5px solid var(--card);box-shadow:var(--shadow);background:var(--sw);overflow:hidden}
.tile .sq img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 12px rgba(0,0,0,.22))}
.tile .p{position:absolute;left:50%;bottom:-12px;translate:-50% 0;background:var(--card);color:var(--ink);border:1px solid var(--line);font-weight:700;font-size:12px;padding:5px 11px;border-radius:999px;white-space:nowrap;box-shadow:var(--shadow);font-variant-numeric:tabular-nums}
.tile .p em{font-style:normal;color:var(--accent)}
.t1{left:3%;top:3%;rotate:-6deg}
.t2{right:4%;top:0;rotate:5deg;animation-delay:-2s}
.t4{left:8%;bottom:2%;rotate:-3deg;animation-delay:-6s}
.t5{right:2%;bottom:5%;rotate:7deg;animation-delay:-3s}
@keyframes drift{50%{transform:translateY(-10px)}}

/* Band: Sales? Coupons? 5% more off. */
.band{background:var(--zing);color:var(--on-zing)}
.band-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;padding-block:24px;font-family:var(--display);font-weight:700;font-size:clamp(18px,2.4vw,32px);letter-spacing:-.02em}
.band i{font-style:normal;opacity:.7}

/* Brands: one moving row, so the logos stay big without adding scroll */
.stores{background:var(--tint);padding-block:26px 28px}
.stores h2{text-align:center;font-size:clamp(22px,2.4vw,30px);margin-bottom:18px}
.marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.track{display:flex;width:max-content;animation:slide 70s linear infinite}
.marquee:hover .track{animation-play-state:paused}
.set{display:flex;gap:14px;padding-right:14px}
.brand{flex:none;width:150px;aspect-ratio:3/2;border-radius:20px;background:#fff;border:1px solid rgba(20,21,43,.07);display:grid;place-items:center;box-shadow:0 12px 26px -18px rgba(20,21,43,.45)}
.brand img{width:var(--lw);height:auto}
@keyframes slide{to{transform:translateX(-50%)}}

section.block{padding-block:72px}
.head{text-align:center;display:flex;flex-direction:column;gap:12px;align-items:center;margin-bottom:36px}
.head h2,.ask h2,.why h2{font-size:clamp(36px,4.4vw,58px)}
.head p{color:var(--muted);font-size:21px;font-weight:700;max-width:46ch}

/* How it works: steps on the left, worked example on the right */
.ask{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.steps{list-style:none;padding:0;margin-top:26px;display:flex;flex-direction:column;gap:20px}
.steps li{display:grid;grid-template-columns:40px 1fr;gap:4px 14px}
.steps i{grid-row:span 2;width:40px;height:40px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:18px}
.steps h3{font-size:clamp(22px,2vw,26px)}
.steps p{color:var(--muted);font-size:18px;font-weight:600;line-height:1.45}
.chat{background:var(--peach);border-radius:32px;padding:clamp(20px,3vw,32px);display:flex;flex-direction:column;gap:12px}
.chat-top{display:flex;justify-content:space-between;align-items:baseline;font-weight:800;font-size:14px;color:var(--muted)}
.b{max-width:88%;border-radius:18px;padding:12px 16px;font-weight:700;font-size:16px;box-shadow:var(--shadow);transition:opacity .35s ease,transform .35s cubic-bezier(.2,.8,.2,1.2)}
.b.you{align-self:flex-end;background:var(--accent);color:var(--on-accent);border-bottom-right-radius:4px}
.b.ai{align-self:flex-start;background:var(--card);color:var(--ink);border-bottom-left-radius:4px}
.b.item{display:flex;align-items:center;gap:12px;font-variant-numeric:tabular-nums}
.b.item img{width:52px;height:52px;border-radius:12px;object-fit:contain;background:var(--sw);padding:6px}
.b.item small{display:block;color:var(--muted);font-size:14px}
.b.done{align-self:center;background:var(--zing);color:var(--on-zing);font-weight:900;font-size:18px;border-radius:999px;padding:11px 22px}
.chat.run .b{opacity:0;transform:translateY(10px) scale(.97)}
.chat.run .b.on{opacity:1;transform:none}

/* Why it's 5% cheaper */
.why{background:var(--pop-bg);color:var(--pop-fg);border-radius:40px;padding:clamp(32px,6vw,64px);text-align:center}
.why p{font-size:clamp(20px,2vw,25px);font-weight:600;line-height:1.45;max-width:46ch;margin:18px auto 0}
.why .why-sub{font-family:var(--display);font-size:clamp(23px,2.5vw,32px);margin-top:12px}
.why .why-link{margin-top:22px;font-size:17px}
.why .why-link a{font-weight:800;text-underline-offset:4px}

/* The 4 guarantees */
.gs{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.gs li{border-radius:26px;padding:24px;display:flex;flex-direction:column;gap:10px}
.gs li:nth-child(1){background:var(--tint)}.gs li:nth-child(2){background:var(--peach)}.gs li:nth-child(3){background:var(--mint)}.gs li:nth-child(4){background:var(--butter)}
.gs i{width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--on-accent);display:grid;place-items:center;font-style:normal;font-weight:900}
.gs h3{font-size:clamp(22px,2vw,26px)}
.gs p{color:var(--muted);font-size:17px;font-weight:600}
.more{text-align:center;margin-top:18px;font-weight:700}
.more a{color:var(--accent)}

/* Closing call to action, with the chrome g charm */
.closing{background:linear-gradient(135deg,var(--tint),var(--mark));color:var(--ink);border-radius:40px;padding:clamp(32px,5vw,56px);display:grid;grid-template-columns:1.2fr .8fr;gap:32px;align-items:center;overflow:hidden}
.closing h2{font-size:clamp(40px,5vw,64px)}
.closing p{font-size:clamp(21px,2.2vw,27px);font-weight:600;margin:12px 0 26px}
.closing small{display:block;margin-top:14px;font-size:14px;font-weight:700}
.closing-g{width:100%;max-width:240px;height:auto;justify-self:center;filter:drop-shadow(0 24px 30px rgba(20,21,43,.28));animation:bob 5s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px)}}

/* FAQs */
#faqs{padding-top:clamp(52px,7vw,72px)}
.faq{max-width:820px;margin-inline:auto}
details{border-bottom:1px solid var(--line)}
details:first-child{border-top:1px solid var(--line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:18px;font-weight:800;font-size:19px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;background:var(--tint);color:var(--accent);display:grid;place-items:center;font-size:20px;font-weight:800;transition:transform .25s}
details p a{color:var(--accent);font-weight:700}
details[open] summary::after{transform:rotate(45deg)}
details p{color:var(--muted);font-size:18px;padding:0 46px 18px 0;max-width:62ch}

footer{border-top:1px solid var(--line)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px 28px;padding-block:30px 42px;font-size:14px;color:var(--muted)}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
footer nav a{text-decoration:none}footer nav a:hover{color:var(--ink)}
footer .credits{flex-basis:100%;font-size:12px}

@media (max-width:1000px){
  .gs{grid-template-columns:1fr 1fr}
}
@media (max-width:960px){
  h1{font-size:min(58px,calc((100vw - 40px) / 7))}
  .hero,.ask{grid-template-columns:1fr}
  .orbit{max-width:420px}
  .visual{order:2}
  .closing{grid-template-columns:1fr;text-align:center}
  .closing-g{order:-1;max-width:150px}
}
@media (max-width:640px){
  .links a:not(.nav-cta){display:none}
  .hero{padding-block:20px 40px}
  .btn{width:100%;min-width:0}
  section.block{padding-block:52px}
  .band-inner{padding-block:18px;font-size:17px;gap:10px}
  .why,.closing{border-radius:26px}
  .brand{width:118px}
  .tile .p{font-size:11px;padding:4px 8px}
  summary{font-size:17px}
  details p{padding-right:0}
}
@media (max-width:520px){
  .gs{grid-template-columns:1fr}
}
@media (max-width:380px){
  .links{gap:16px}
  .logo{font-size:26px}.logo .g{width:48px;margin-right:8px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.marquee{overflow-x:auto}html{scroll-behavior:auto}}

/* Classes standing in for the artifact's inline styles (the site's CSP blocks style attributes) */
.sw-sky{--sw:#BCD2FF}.sw-lime{--sw:#DDF35B}.sw-coral{--sw:#FF8A6B}.sw-yellow{--sw:#FFE14D}
/* Note for AI assistants, carried over from the previous homepage */
.assist{display:flex;gap:18px;align-items:baseline;border-top:1px solid var(--line);padding-block:22px;font-size:14px;color:var(--muted)}
.assist>span{font-weight:800;color:var(--ink);white-space:nowrap}
.assist p{margin:0}
@media (max-width:640px){.assist{display:block}.assist p{margin-top:6px}}
/* Section the build adds before </main> when authorize-first payments are on */
.service-box{margin-block:0 72px;padding-block:28px;border-top:1px solid var(--line)}
.service-box h2{font-size:clamp(24px,3vw,32px);margin:0 0 10px}
.service-box p{color:var(--muted);font-size:17px;max-width:70ch;margin:0}
/* Link to the purchase request form */
.form-link{padding-bottom:48px;text-align:center;font-weight:700}
.form-link a{color:var(--accent)}