:root { --navy:#172b43; --navy-deep:#102238; --orange:#ff713e; --cream:#fff8e9; --white:#fffefa; --teal:#82e8d1; --yellow:#ffe576; --muted:#66717b; --nav-height:78px; --font:'Manrope',Arial,sans-serif; }
html { scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-height) + 20px); }
body { margin:0; padding-top:var(--nav-height); background:var(--cream); color:var(--navy); font:400 16px/1.55 var(--font); }
body,main,header,footer { min-width:0; }
:focus-visible { outline:3px solid var(--orange); outline-offset:4px; }
::selection { background:var(--teal); color:var(--navy); }
.navbar.site-nav { min-height:var(--nav-height); padding:0; border-bottom:2px solid var(--navy); background:var(--navy); }
.navbar.site-nav .navbar-brand,.footer-brand { display:inline-flex; align-items:center; gap:9px; margin:0; color:var(--cream); text-decoration:none; font:800 1.52rem/1 var(--font); letter-spacing:-.065em; }
.navbar.site-nav .navbar-brand::before,.footer-brand::before { content:''; display:block; width:40px; height:40px; flex:none; background:url('../images/couponyalla-mark.svg') center/contain no-repeat; }
.navbar.site-nav .nav-link { padding:.55rem 1rem; color:var(--cream); font-size:.88rem; font-weight:800; }
.navbar.site-nav .nav-link:hover,.navbar.site-nav .nav-link.active { color:var(--teal); }
.navbar.site-nav .nav-cta { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; margin-left:.65rem; padding:.62rem 1rem; border-radius:4px; background:var(--teal); color:var(--navy); }
.navbar.site-nav .nav-cta:hover { background:var(--yellow); color:var(--navy); }
.navbar-toggler { border:1px solid var(--cream); border-radius:3px; }.navbar-toggler-icon { background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23fff8e9' stroke-linecap='round' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); }

.home-page .hero { overflow:hidden; background:var(--cream); }
.hero-layout { display:grid; grid-template-columns:53% 47%; min-height:670px; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:5rem 3rem 3.5rem 0; }
.hero-kicker,.section-kicker { margin:0; font-size:.7rem; font-weight:800; letter-spacing:.17em; }.hero-kicker { display:flex; align-items:center; gap:.65rem; color:#c44e29; }.hero-kicker span { display:grid; place-items:center; width:28px; height:28px; border:2px solid var(--navy); border-radius:50%; background:var(--teal); color:var(--navy); font-size:1rem; line-height:1; letter-spacing:0; }
.hero-copy h1 { margin:1.4rem 0 1.3rem; font:800 clamp(4.3rem,6.8vw,7.1rem)/.95 var(--font); letter-spacing:-.095em; }.hero-copy h1 em { color:var(--orange); font-style:normal; }
.hero-lead { max-width:460px; margin:0; color:#566572; font-size:1.05rem; line-height:1.65; }.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:1.6rem; margin-top:2rem; }
.main-button { display:inline-flex; align-items:center; justify-content:space-between; gap:2.4rem; min-height:56px; padding:.8rem 1.1rem; border:2px solid var(--navy); border-radius:4px; background:var(--navy); color:var(--white); text-decoration:none; font-weight:800; box-shadow:5px 5px 0 var(--orange); transition:transform .2s,box-shadow .2s; }.main-button:hover { transform:translate(3px,3px); box-shadow:2px 2px 0 var(--orange); color:var(--white); }
.plain-link { color:var(--navy); font-size:.88rem; font-weight:800; text-decoration:underline; text-underline-offset:5px; }.plain-link:hover { color:#c44e29; }
.hero-foot { display:flex; justify-content:space-between; gap:1rem; width:min(100%,450px); margin-top:4rem; padding-top:.9rem; border-top:1px solid #a9b4ae; color:#687277; font-size:.65rem; font-weight:800; letter-spacing:.08em; }
.hero-scene { position:relative; display:grid; place-items:center; min-height:670px; overflow:hidden; isolation:isolate; border-left:2px solid var(--navy); background:var(--orange); }
.hero-scene::before { content:''; position:absolute; z-index:-2; inset:0; opacity:.25; background:repeating-linear-gradient(-35deg,transparent 0 51px,rgba(23,43,67,.5) 52px 54px); }
.speed-line { position:absolute; z-index:-1; width:700px; height:700px; border:2px solid rgba(23,43,67,.48); border-radius:50%; }.line-one { left:-520px; top:-450px; }.line-two { right:-530px; bottom:-480px; }
.scene-sign { position:relative; display:flex; flex-direction:column; justify-content:center; width:min(88%,535px); min-height:310px; padding:1.55rem 6.2rem 1.55rem 2rem; clip-path:polygon(0 0,78% 0,100% 50%,78% 100%,0 100%); background:var(--navy); color:var(--cream); transform:rotate(-8deg); filter:drop-shadow(14px 16px 0 var(--teal)); }
.scene-sign::before { content:''; position:absolute; inset:13px 23% 13px 13px; border:2px solid var(--teal); pointer-events:none; }.sign-top,.sign-bottom { z-index:1; font-size:.67rem; font-weight:800; letter-spacing:.13em; white-space:nowrap; }.sign-top { color:var(--teal); }.sign-bottom { color:var(--yellow); }.scene-sign strong { z-index:1; margin:.6rem 0; font:800 clamp(3.7rem,6.6vw,7.4rem)/1 var(--font); letter-spacing:-.09em; white-space:nowrap; }.scene-sign strong span { color:var(--orange); }
.scene-stamp { position:absolute; right:8%; bottom:11%; z-index:2; display:flex; align-items:center; justify-content:center; width:128px; height:128px; border:3px solid var(--navy); border-radius:50%; background:var(--yellow); color:var(--navy); font:800 1.3rem/.8 var(--font); letter-spacing:-.08em; text-align:center; transform:rotate(13deg); box-shadow:5px 5px 0 var(--navy); }.scene-stamp span { position:absolute; right:13px; bottom:13px; font-size:1.3rem; }
.scene-corner { position:absolute; top:6%; left:8%; font-size:.69rem; font-weight:800; letter-spacing:.15em; }
.motion-bar { overflow:hidden; border-top:2px solid var(--navy); border-bottom:2px solid var(--navy); background:var(--teal); }.motion-inner { display:flex; align-items:center; justify-content:space-between; gap:1.2rem; min-height:59px; white-space:nowrap; font-size:.7rem; font-weight:800; letter-spacing:.12em; }.motion-inner b { color:#c44e29; font-size:1.6rem; line-height:1; }

.stores-section { padding:6.1rem 0 7rem; background:var(--navy); color:var(--cream); }.section-top { display:flex; align-items:end; justify-content:space-between; gap:3rem; margin-bottom:2.6rem; }.section-kicker { color:var(--teal); }.section-top h2,.how-heading h2 { margin:.7rem 0 0; font:800 clamp(3.7rem,6vw,6.3rem)/.95 var(--font); letter-spacing:-.08em; }.section-top h2 span { color:var(--orange); }
.stores-aside { width:min(100%,345px); }.stores-aside p { margin:0 0 1.1rem; color:#bdcbd0; font-size:.91rem; }.store-search { display:flex; align-items:center; gap:.65rem; min-height:52px; padding:.35rem .8rem; border:2px solid var(--cream); border-radius:4px; background:var(--cream); color:var(--navy); }.store-search > span { font-size:1.5rem; line-height:1; }.store-search input { flex:1; width:100%; min-width:0; border:0; outline:0; background:transparent; color:var(--navy); font-size:.84rem; }.store-search:focus-within { outline:3px solid var(--teal); outline-offset:3px; }.store-search button { border:0; background:transparent; color:var(--navy); font-size:1.4rem; line-height:1; }
.store-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }.store-card { grid-column:span 1; display:flex; flex-direction:column; min-height:265px; padding:1rem; border:2px solid var(--navy-deep); border-radius:10px; background:#c9e9e1; color:var(--navy); text-decoration:none; transition:transform .2s,box-shadow .2s; }.store-card.card-wide { grid-column:span 2; }.store-card:nth-child(2),.store-card:nth-child(5) { background:#ffe7a4; }.store-card:nth-child(3),.store-card:nth-child(6) { background:#ffd5bf; }.store-card:hover { transform:translateY(-5px); box-shadow:6px 7px 0 var(--orange); color:var(--navy); }
.store-top,.store-bottom { display:flex; align-items:center; justify-content:space-between; gap:.6rem; }.store-top small { font-size:.65rem; font-weight:800; letter-spacing:.11em; }.store-top > span { font-size:1.3rem; font-weight:800; line-height:1; }
.store-logo { display:grid; place-items:center; flex:1; min-height:115px; margin:.8rem 0; padding:.55rem; border:1px solid var(--navy); border-radius:5px; background:#fff; }.store-logo.dark-logo { background:#1d273d; }.store-logo img { display:block; width:min(100%,300px); height:86px; object-fit:contain; }
.store-bottom { padding-top:.75rem; border-top:1px solid var(--navy); }.store-bottom strong { font:800 clamp(1.5rem,2.5vw,2.6rem)/1 var(--font); letter-spacing:-.07em; }.store-bottom small { flex:none; font-size:.68rem; font-weight:800; white-space:nowrap; }.store-card[hidden] { display:none !important; }.no-results { margin:1.7rem 0 0; color:var(--cream); font-weight:700; }

.how-section { padding:6.3rem 0 6.8rem; background:var(--cream); color:var(--navy); }.how-heading { display:grid; grid-template-columns:1fr 1.4fr .9fr; align-items:end; gap:2rem; padding-bottom:2.4rem; border-bottom:1px solid #aab8bb; }.how-section .section-kicker { align-self:start; color:#c44e29; }.how-heading h2 { font-size:clamp(3.2rem,4.8vw,5.4rem); }.how-heading h2 span { color:var(--orange); }.how-heading > p:last-child { max-width:290px; margin:0; color:#62727b; font-size:.89rem; }
.steps-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.3rem; margin:0; padding:2rem 0 0; list-style:none; }.steps-list li { padding:1.3rem 1.1rem 1.3rem 0; border-top:4px solid var(--navy); }.steps-list li > span { display:inline-grid; place-items:center; width:55px; height:55px; border-radius:50%; background:var(--teal); font:800 1.2rem/1 var(--font); }.steps-list li:nth-child(2)>span { background:var(--yellow); }.steps-list li:nth-child(3)>span { background:#ffd5bf; }.steps-list h3 { margin:1.35rem 0 .4rem; font:800 1.45rem/1.1 var(--font); letter-spacing:-.04em; }.steps-list p { margin:0; color:#62727b; font-size:.87rem; }.how-link { display:inline-block; margin-top:2rem; color:var(--navy); font-size:.86rem; font-weight:800; text-underline-offset:5px; }.how-link:hover { color:#c44e29; }
.site-footer { padding:3rem 0 1.3rem; background:var(--navy-deep); color:var(--cream); }.footer-main,.footer-bottom { display:flex; justify-content:space-between; align-items:start; gap:2rem; }.footer-brand { font-size:1.55rem; }.footer-main p { margin:.65rem 0 0; color:#b5c7d0; font-size:.85rem; }.footer-main > a { color:var(--teal); font-size:.83rem; font-weight:800; text-decoration:none; }.footer-main > a:hover { text-decoration:underline; }.footer-bottom { margin-top:3rem; padding-top:1rem; border-top:1px solid #677c88; color:#b5c7d0; font-size:.72rem; font-weight:700; letter-spacing:.08em; }

body:not(.home-page) { background:var(--cream); }.breadcrumb-nav { padding:1.1rem 0; }.breadcrumb { margin:0; }.breadcrumb-item,.breadcrumb-item a { color:var(--muted); font-size:.82rem; text-decoration:none; }.breadcrumb-item a:hover { color:#c44e29; }.breadcrumb-item.active { color:var(--navy); }
body:not(.home-page) .hero { position:relative; overflow:hidden; padding:4.3rem 0 4.7rem; border-top:2px solid var(--navy); border-bottom:2px solid var(--navy); background:var(--orange); color:var(--navy); }.hero .container { position:relative; }body:not(.home-page) .hero::before { content:'↗'; position:absolute; right:6%; top:-6rem; color:rgba(23,43,67,.14); font:800 26rem/1 var(--font); }
body:not(.home-page) .hero h1 { max-width:1000px; margin:0 auto .7rem; font:800 clamp(2.9rem,4.7vw,4.9rem)/1 var(--font); letter-spacing:-.07em; }.hero .lead { max-width:650px; margin:0 auto; color:#263848; font-size:1rem; }
.brand-logo { display:block; width:320px; height:140px; max-width:calc(100% - 2rem); max-height:none; margin:0 auto 1.6rem; padding:18px 22px; border:2px solid var(--navy); border-radius:6px; background:#fff; object-fit:contain; box-shadow:8px 8px 0 var(--teal); }.brand-amazon .brand-logo,.brand-shein .brand-logo,.brand-namshi .brand-logo { background:#1d273d; }
.coupons-section { padding:4rem 0 6rem; }.coupon-card { height:100%; padding:1.55rem; border:2px solid var(--navy); border-radius:10px; background:var(--white); box-shadow:6px 6px 0 #a5e4d5; transition:transform .2s; }.coupon-card:hover { transform:translateY(-4px); }.coupon-title { min-height:50px; font:800 1.18rem/1.25 var(--font); letter-spacing:-.03em; }.coupon-code { display:inline-block; margin:1.2rem 0; padding:.65rem .85rem; border:2px dashed var(--navy); background:#e5f6f0; font:700 .94rem/1.2 ui-monospace,monospace; letter-spacing:.08em; }.btn-copy { display:block; width:100%; min-height:49px; padding:.7rem 1rem; border:0; border-radius:5px; background:var(--navy); color:var(--white); font-size:.88rem; font-weight:800; cursor:pointer; }.btn-copy:hover { background:#c44e29; }.copied-msg { display:none; margin-top:.7rem; color:#286a40; font-size:.83rem; font-weight:800; }
body:not(.home-page) .site-footer { padding:2.2rem 1rem; text-align:center; }.site-footer .footer-brand { margin-bottom:.7rem; }body:not(.home-page) .site-footer p { margin:0; color:#b5c7d0; font-size:.82rem; }

@media(max-width:991.98px) { .navbar.site-nav .navbar-collapse { padding:.8rem 0 1.1rem; border-top:1px solid #677c88; }.navbar.site-nav .nav-cta { display:inline-flex; margin:.5rem 0 0; }.hero-layout { grid-template-columns:1fr; }.hero-copy { min-height:560px; padding:4.2rem 0; }.hero-scene { min-height:540px; border-left:0; border-top:2px solid var(--navy); }.section-top { align-items:start; }.store-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }.store-card.card-wide { grid-column:span 2; }.how-heading { grid-template-columns:1fr 1.5fr; }.how-heading > p:last-child { grid-column:2; } }
@media(max-width:767.98px) { :root { --nav-height:68px; }.navbar.site-nav .navbar-brand { font-size:1.27rem; }.navbar.site-nav .navbar-brand::before { width:34px; height:34px; }.hero-copy { min-height:auto; padding:4.1rem 0; }.hero-copy h1 { font-size:clamp(3.8rem,12vw,5.8rem); }.hero-foot { margin-top:3rem; }.hero-scene { min-height:430px; }.scene-sign { width:min(90%,425px); min-height:240px; padding:1.25rem 4.5rem 1.25rem 1.45rem; filter:drop-shadow(9px 11px 0 var(--teal)); }.scene-sign strong { font-size:clamp(3.7rem,10vw,5.3rem); }.scene-sign::before { inset:10px 23% 10px 10px; }.scene-stamp { width:92px; height:92px; right:4%; bottom:8%; font-size:.95rem; }.scene-stamp span { font-size:1rem; right:8px; bottom:8px; }.scene-corner { font-size:.56rem; }.motion-inner { min-width:690px; }.stores-section,.how-section { padding:4.5rem 0; }.section-top { flex-direction:column; gap:1.4rem; }.section-top h2,.how-heading h2 { font-size:clamp(3.3rem,11vw,5.3rem); }.stores-aside { width:100%; }.store-grid { grid-template-columns:1fr; }.store-card,.store-card.card-wide { grid-column:span 1; min-height:255px; }.store-logo { min-height:110px; }.how-heading { display:block; padding-bottom:1.7rem; }.how-heading h2 { margin:1rem 0 1.2rem; }.steps-list { grid-template-columns:1fr; gap:.5rem; }.steps-list li { padding:1.1rem 0; }.steps-list h3 { margin:.7rem 0 .3rem; }.footer-bottom { flex-direction:column; gap:.5rem; } }
@media(max-width:430px) { .hero-copy h1 { font-size:clamp(3.4rem,12vw,4.5rem); }.hero-actions { gap:1rem; }.hero-foot { font-size:.53rem; }.scene-sign { min-height:210px; padding-right:4rem; }.scene-sign strong { font-size:3.45rem; }.sign-top,.sign-bottom { font-size:.5rem; }.store-bottom strong { font-size:1.7rem; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; }*,*::before,*::after { transition-duration:.01ms !important; animation-duration:.01ms !important; } }
