/* RIPPLES store landing v5.
   Research pattern (Baby Audio, Cableguys, FabFilter, Polyverse, Kilohearts): one product owns the first screen; the real UI is the picture;
   price + Try + Buy on every card; real reviews; the bundle as an offer; free products as the way in.
   Ours: front-on real UIs (never tilted or redrawn), black / beige / brick, the plugin's own motion behind it, "Hear it" right in the hero. */
:root{color-scheme:dark;--bg:#0e0d0c;--tile:#171513;--tile2:#1d1a17;--beige:#EEE2CC;--dim:rgba(238,226,204,.64);--faint:rgba(238,226,204,.38);--line:rgba(238,226,204,.12);--brick:#c4532f;--brick2:#c4532f;--brick3:#d4673f;--gold:#d9a54a}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--beige);font:16px/1.55 "Inter Tight",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button{font-family:inherit}
.wrap{max-width:1320px;margin:0 auto;padding:0 40px}
.kick{font-size:13px;font-weight:500;color:var(--brick2)}
.serif{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400}
.b1{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--beige);color:var(--bg);padding:14px 22px;font-size:15px;font-weight:600;border:0;cursor:pointer;white-space:nowrap}
.b2{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:transparent;color:var(--beige);padding:13px 21px;font-size:15px;font-weight:600;border:1px solid rgba(238,226,204,.35);cursor:pointer;white-space:nowrap}
.b2:hover{border-color:var(--beige)}.b1:hover{background:#fff}
.bb{background:var(--brick);color:var(--bg)}.bb:hover{background:var(--brick3)}
/* bar + nav */
.bar{background:var(--bg);color:var(--dim);text-align:center;font-size:13px;font-weight:500;padding:9px 16px;border-bottom:1px solid var(--line)}.bar span{color:var(--brick2)}
nav.top{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;height:68px}
nav.top .lft{justify-self:start}nav.top .r{justify-self:end}
/* free pill + menu sit together in the exact middle */
nav.top .mid{display:flex;align-items:center;gap:40px}
nav.top .lft>a img{height:19px;display:block}
nav.top .mid>ul{display:flex;gap:30px;list-style:none;margin:0;padding:0;font-size:14px;font-weight:500}
nav.top .mid>ul li{color:var(--dim)}nav.top .mid>ul li.fr{color:var(--brick2)}
nav.top .r{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--dim)}
nav.top .mid>ul li a:hover{color:var(--beige)}
/* right side (from v7): brick Tap pill + hover card, search that widens in place, account */
.icb{width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.22);display:grid;place-items:center;color:#fff;background:none;padding:0;cursor:pointer}
.icb:hover{border-color:#fff}
.icb svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8;flex:none}
.sfield{display:flex;align-items:center;width:38px;height:38px;border:1px solid rgba(255,255,255,.22);border-radius:999px;overflow:hidden;transition:width .3s ease,border-color .2s}
.sfield:hover{border-color:#fff}
.sfield .icb{border:0;flex:none;width:36px;height:36px}
.sfield input{flex:1;min-width:0;width:0;opacity:0;background:none;border:0;outline:0;font:14.5px "Inter Tight",sans-serif;color:#fff;padding:0 14px 0 0;transition:opacity .2s}
.sfield input::placeholder{color:rgba(255,255,255,.5)}
.sfield.open{width:206px;border-color:#fff}.sfield.open input{opacity:1}
.tapw{position:relative}
.tapb{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 15px 0 13px;border-radius:999px;background:#9D391E;color:#fff;font-weight:600;font-size:14.5px;letter-spacing:-.01em;transition:transform .15s}
.tapb:hover{transform:translateY(-1px);background:#b2452a}
.tapb img{height:12px;width:auto;display:block}
.tapb::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);transform:skewX(-20deg);animation:sweep 4.5s ease-in-out infinite;pointer-events:none}
@keyframes sweep{0%,62%{left:-60%}100%{left:130%}}
.tapcard{position:absolute;right:-6px;top:calc(100% + 14px);width:320px;padding:18px;display:grid;gap:16px;text-align:left;color:#fff;background:#0e0e0e;border:1px solid rgba(255,255,255,.24);border-radius:16px;box-shadow:0 24px 48px -16px rgba(0,0,0,.85);opacity:0;transform:translateY(-6px);visibility:hidden;transition:opacity .18s,transform .18s,visibility 0s .18s;z-index:30}
.tapcard::before{content:"";position:absolute;left:0;right:0;top:-16px;height:16px}
.tapw:hover .tapcard,.tapw:focus-within .tapcard{opacity:1;transform:none;visibility:visible;transition:opacity .18s,transform .18s}
.tapcard .hd{display:flex;gap:12px;align-items:center}
.tapcard .ap{width:40px;height:40px;border-radius:10px;background:#9D391E;display:grid;place-items:center;flex:none}
.tapcard .ap img{width:24px;height:auto}
.tapcard b{display:block;font-weight:600;font-size:15.5px;line-height:1.2}
.tapcard small{display:block;color:#999;font-size:13px;margin-top:2px}
.tapcard .lib{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.tapcard .lib img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;display:block}
.tapcard ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;font-size:14px;line-height:1.35;color:rgba(255,255,255,.82)}
.tapcard li{display:flex;gap:10px;align-items:center}
.tapcard li svg{width:14px;height:14px;flex:none;stroke:#b2452a;fill:none;stroke-width:2.2}
.tapcard .dl{display:grid;gap:8px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}
.tapcard .dl>span{font-size:13px;color:#999}
.tapcard .btns{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tapcard .btns a{display:flex;align-items:center;justify-content:center;gap:8px;height:40px;border-radius:999px;border:1px solid rgba(255,255,255,.24);font-size:14px;font-weight:600;color:#fff;transition:border-color .15s,background .15s}
.tapcard .btns a:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.tapcard .os{width:15px;height:15px;fill:currentColor;flex:none}
@media (hover:none),(max-width:860px){.tapcard{display:none}}
.tapw.quiet .tapcard{opacity:0!important;visibility:hidden!important;transition:none!important}
@media (prefers-reduced-motion:reduce){.tapb::after{animation:none}}
/* trial bar above the menu, in our brick */
.promo{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap;background:#7E2D17;color:#fff;font-size:13px;font-weight:500;padding:6px 16px;text-align:center}
.promo span{font-weight:600;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:1px}
.promo:hover span{border-color:#fff}
@media (max-width:760px){.promo{font-size:13px;gap:4px 10px}}
@media (max-width:760px){nav.top{display:flex;flex-wrap:wrap;height:auto;padding:10px 0;row-gap:10px}nav.top .lft,nav.top .mid{display:contents}nav.top .r{margin-left:auto}nav.top .free{order:3;width:100%;grid-template-columns:1fr}}
/* free downloads: one pill in the menu bar, changing every 3 s, still while hovered */
.lft{display:flex;align-items:center;gap:22px}
.free{position:relative;display:grid;width:290px;height:40px;border-radius:999px;overflow:hidden}
.free a{grid-area:1/1;display:flex;align-items:center;gap:9px;padding:0 14px 0 5px;font-size:13.5px;color:var(--dim);white-space:nowrap;opacity:0;filter:blur(8px);transform:translateY(3px);transition:opacity .6s ease,filter .6s ease,transform .6s ease;pointer-events:none}
.free a.on{opacity:1;filter:blur(0);transform:none;pointer-events:auto}
.free img{width:30px;height:30px;border-radius:999px;object-fit:cover;flex:none;filter:grayscale(1) contrast(1.1)}
.free .lb{font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--brick2)}
.free b{font-weight:600;color:var(--beige)}
.free .go{margin-left:auto;color:var(--faint);font-size:13px}.free a:hover .go{color:var(--beige)}
@media (max-width:760px){.free{width:220px}}
@media (prefers-reduced-motion:reduce){.free a{filter:none;transition:none}}
/* hero */
.hero{position:relative;overflow:hidden;min-height:clamp(560px,72vh,820px);display:flex;align-items:center;border-top:1px solid var(--line)}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.95}
.hero:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(14,13,12,.78),rgba(14,13,12,.25) 42%,rgba(14,13,12,0) 65%),linear-gradient(0deg,rgba(14,13,12,.6),rgba(14,13,12,0) 25%)}
.hero .wrap{position:relative;z-index:2;display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center;width:100%;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:clamp(56px,6vw,96px);font-weight:600;letter-spacing:-.025em;line-height:.95;margin:10px 0 14px}
.hero .ln{font-size:clamp(20px,1.7vw,26px);font-weight:500;margin:0 0 14px}
.hero p{color:var(--dim);margin:0 0 30px;max-width:440px;font-size:17px}
.hero .ht{text-align:center}.hero p.ht{max-width:none}
.hero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:30px;justify-content:center}
.hero .ui{position:relative}
.hero .ui img{width:100%;display:block;filter:drop-shadow(0 50px 90px rgba(0,0,0,.75)) drop-shadow(0 0 40px rgba(255,236,210,.14))}
/* hero: play Whirlpool yourself (scratch the whirlpool, hold a maneuver) */
.wp-pl{display:grid;grid-template-columns:auto auto;justify-content:center;gap:6px 16px;align-items:center;padding-top:22px;border-top:1px solid var(--line)}
.wp-play{grid-row:span 2;width:56px;height:56px;border-radius:999px;border:0;background:#9D391E;color:#fff;display:grid;place-items:center;cursor:pointer;position:relative;transition:background .15s,transform .15s}
.wp-play:hover{background:#b2452a;transform:scale(1.04)}
.wp-play:focus-visible{outline:2px solid var(--beige);outline-offset:4px}
.wp-play svg{width:19px;height:19px;fill:currentColor}.wp-play .ps{display:none}.wp-play.on .ps{display:block}.wp-play.on .pp{display:none}
.wp-play.on:after{content:"";position:absolute;inset:-6px;border-radius:999px;border:2px solid #b2452a;animation:wpring 1.6s ease-out infinite}
@keyframes wpring{from{opacity:.8;transform:scale(.9)}to{opacity:0;transform:scale(1.25)}}
.wp-pl .t{font-size:16px;font-weight:600;line-height:1.3}
.wp-pl .s{font-size:13.5px;color:var(--faint);line-height:1.4}
.wp-pl .row{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:16px;margin-top:12px;font-size:13px;color:var(--faint)}
.wp-real{background:none;border:0;padding:0;color:var(--faint);font-size:13px;border-bottom:1px solid currentColor;cursor:pointer;font-family:inherit}
.wp-real:hover,.wp-real.on{color:var(--beige)}
.wp-rpm{font:600 12px/1 ui-monospace,Menlo,monospace;letter-spacing:.05em;min-width:9ch}
/* the live parts sit exactly over the interface; positions in pixels of the 1440x980 image, scaled by --s */
.wp-ui{position:relative;--s:.48;user-select:none;-webkit-user-select:none}
.wp-ui>img{-webkit-user-drag:none}
.wp-crop{position:absolute;background-image:url(media/ui/Whirlpool.webp);background-repeat:no-repeat;pointer-events:none}
.wp-disc{border-radius:50%;will-change:transform}
.wp-grab{position:absolute;border-radius:50%;cursor:grab;touch-action:none;transition:box-shadow .2s}
.wp-grab:hover{box-shadow:0 0 0 calc(var(--s)*5px) rgba(157,57,30,.35)}
.wp-grab.held{cursor:grabbing;box-shadow:0 0 0 calc(var(--s)*6px) rgba(157,57,30,.7)}
.wp-mv{position:absolute;border:0;background:transparent;padding:0;cursor:pointer;touch-action:none;border-radius:calc(var(--s)*4px);transition:background .1s}
.wp-mv:hover{background:rgba(35,30,23,.06)}
.wp-mv:focus-visible{outline:2px solid #9D391E;outline-offset:2px}
.wp-mv.on{background:rgba(35,30,23,.1);box-shadow:inset 0 0 0 calc(var(--s)*3px) #231e17,inset 0 0 0 calc(var(--s)*5px) #e3d6b6,inset 0 0 0 calc(var(--s)*6.5px) #231e17}
.wp-offpatch{display:none}.wp-ui.wp-notoff .wp-offpatch{display:block}
.wp-tip{position:absolute;z-index:3;transform:translate(-50%,-100%);background:#9D391E;color:#fff;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .35s;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.wp-tip:after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;background:inherit;transform:translateX(-50%) rotate(45deg)}
.wp-tip.gone{opacity:0}
.wp-mvzone{position:absolute;pointer-events:none;border-radius:calc(var(--s)*6px)}
.wp-ui.wp-cue .wp-grab,.wp-ui.wp-cue .wp-mvzone{animation:wpcue 1.2s ease-in-out 2}
@keyframes wpcue{0%,100%{box-shadow:0 0 0 0 rgba(157,57,30,0)}50%{box-shadow:0 0 0 calc(var(--s)*8px) rgba(157,57,30,.55)}}
@media (prefers-reduced-motion:reduce){.wp-play.on:after,.wp-ui.wp-cue .wp-grab,.wp-ui.wp-cue .wp-mvzone{animation:none}}
.hero .ui .pr{position:absolute;right:0;bottom:-38px;font-size:14px;color:var(--dim)}
/* section heads */
section.s{padding:104px 0}
.sh{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:36px}
.sh h2{font-size:clamp(28px,2.4vw,36px);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0}
.sh a{font-size:14px;font-weight:600;border-bottom:1px solid var(--faint);padding-bottom:2px}
/* product cards */
/* one endless row: drag with the mouse, touch scrolls natively */
.cards{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 60px)/4.35);gap:20px;overflow-x:auto;scrollbar-width:none;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent);mask-image:linear-gradient(90deg,#000 0,#000 90%,transparent)}
.cards::-webkit-scrollbar{display:none}
.cards.drag{cursor:grabbing;user-select:none}
.cards img{-webkit-user-drag:none}
.shr{display:flex;align-items:center;gap:10px}.shr>a{margin-right:10px}
.arw{width:38px;height:38px;border-radius:999px;border:1px solid rgba(238,226,204,.3);background:none;color:var(--beige);display:grid;place-items:center;cursor:pointer;padding:0;transition:border-color .15s,background .15s}
.arw:hover{border-color:var(--beige);background:rgba(238,226,204,.06)}
.arw svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.card{background:var(--tile);display:flex;flex-direction:column}
.card .pic{position:relative;aspect-ratio:960/700;overflow:hidden;background:#000}
.card .pic>img,.card .pic>video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.card:hover .pic>img{transform:scale(1.03)}
.card .pic .blur{filter:blur(22px) brightness(.45) saturate(.6);transform:scale(1.3)}
.card .pic .sharp{object-fit:contain!important;padding:6% 10%;filter:drop-shadow(0 18px 30px rgba(0,0,0,.6))}
.card .body{padding:20px 20px 22px;display:flex;flex-direction:column;flex:1}
.card .k{font-size:13px;color:var(--faint);font-weight:500}
.card h3{font-size:22px;font-weight:600;letter-spacing:-.01em;margin:4px 0 4px}
.card .ty{font-size:14px;font-weight:500;color:var(--brick2);margin:-2px 0 8px}
.card .d{font-size:14px;color:var(--dim);margin:0 0 18px;flex:1}
.card .pr{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;font-size:14px;color:var(--dim)}
.card .pr b{font-size:20px;color:var(--beige);font-weight:700}
.card .bt{display:grid;grid-template-columns:1fr 1fr;gap:8px}.card .bt>*{padding:11px 10px;font-size:14px}
.card .bt.one{grid-template-columns:1fr}
/* reviews */
.revband{background:var(--brick2);color:var(--bg);margin:0 0 104px}
.revband .in{max-width:1320px;margin:0 auto;padding:72px 40px 64px}
.revband h2{font-size:15px;font-weight:600;margin:0 0 36px}
/* three equal reviews, split by thin lines, each signed with the plugin's window */
.rrow{display:grid;grid-template-columns:repeat(3,1fr)}
.rrow .r{padding:0 32px;border-left:1px solid rgba(14,13,12,.3);display:flex;flex-direction:column}
.rrow .r:first-child{padding-left:0;border-left:0}.rrow .r:last-child{padding-right:0}
.rrow .mk{font-size:72px;line-height:.6;font-weight:600;height:34px}
.rrow q{display:block;font-size:20px;line-height:1.4;flex:1;quotes:none}
.rrow .foot{display:flex;align-items:center;gap:12px;margin-top:26px;padding-top:16px;border-top:1px solid rgba(14,13,12,.3)}
.rrow .foot img{height:34px;width:auto;display:block;border-radius:2px}
.rrow .who{font-size:14px;line-height:1.35;font-weight:500}.rrow .who span{opacity:.7;font-weight:400}
.rrow .stars{letter-spacing:3px;font-size:14px}
/* bundle */
.bund{display:grid;grid-template-columns:5fr 6fr;gap:0;background:var(--tile)}
.bund .tx{padding:56px}
.bund h2{font-size:clamp(36px,3.4vw,52px);font-weight:600;letter-spacing:-.02em;line-height:1.02;margin:0 0 16px}
.bund p{color:var(--dim);margin:0 0 26px;max-width:420px}
.bund .price{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}.bund .price b{font-size:56px;font-weight:700;letter-spacing:-.04em}
.bund .price span{color:var(--dim);font-size:14px}
.wall{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:36px;background:#0b0a09;align-content:center}
.wall div{aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;background:var(--tile2)}
.wall img{max-width:84%;max-height:78%;display:block;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
/* bundle: the interfaces themselves, spread at three depths behind the offer. No box. */
.bund2{position:relative;overflow:hidden;height:min(640px,78vw);margin:0 0 104px;background:var(--bg)}
.bund2 .pile{position:absolute;inset:0;z-index:0}
.bund2 .pile img{position:absolute;display:block;transform:translate(-50%,-50%);box-shadow:0 30px 60px rgba(0,0,0,.6)}
.bund2:after{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 42% 46% at 50% 50%,rgba(14,13,12,.92),rgba(14,13,12,.55) 60%,rgba(14,13,12,.2) 100%),linear-gradient(180deg,var(--bg),rgba(14,13,12,0) 14%,rgba(14,13,12,0) 86%,var(--bg))}
.bund2 .offer{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 16px}
.bund2 h2{font-size:clamp(40px,4.4vw,64px);font-weight:600;letter-spacing:-.025em;line-height:1;margin:0 0 14px}
.bund2 p{color:var(--dim);margin:0 0 26px;max-width:440px}
.bund2 .price{display:flex;align-items:baseline;gap:18px;margin-bottom:22px}.bund2 .price b{font-size:52px;font-weight:600;letter-spacing:-.03em}.bund2 .price span{color:var(--dim);font-size:14px}
/* meet: the studio's mic grille as the ground */
.meetband{position:relative;isolation:isolate;overflow:hidden;padding:110px 0;margin:0 0 104px}
.meetband:before{content:"";position:absolute;inset:-60px;z-index:-2;background:url(media/grille-even.jpg) center/cover no-repeat;filter:contrast(1) brightness(.6) blur(10px);opacity:.55;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 9%,#000 32%,#000 68%,transparent 91%,transparent);mask-image:linear-gradient(180deg,transparent 0,transparent 9%,#000 32%,#000 68%,transparent 91%,transparent)}
.meetband:after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(14,13,12,.12)}
.meetband .meetin{max-width:1320px;margin:0 auto;padding:0 40px}
@media (max-width:760px){.meetband .meetin{padding:0 16px}.meetband{padding:72px 0}}
/* cards without a finished picture: blur the photo like the finished ones */
.card .pic .bgph{filter:grayscale(1) blur(2.5px) brightness(.7) contrast(1.05);transform:scale(1.04)}
.card:hover .pic>img.bgph{transform:scale(1.07)}
/* tap: one band, a glimpse of the app */
.tap{display:grid;grid-template-columns:260px minmax(0,1fr) auto;gap:40px;align-items:center;padding:36px 0;margin:0 0 96px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tap .shot{width:100%;display:block;border-radius:8px;box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 0 1px rgba(238,226,204,.08)}
.tap h2{font-size:30px;font-weight:600;letter-spacing:-.015em;margin:0 0 8px}
.tap p{color:var(--dim);margin:0;max-width:460px}
.tap .dl{display:grid;gap:10px;justify-items:end}.tap .row{display:flex;gap:10px}.tap small{font-size:12.5px;color:var(--faint)}
@media (max-width:900px){.tap{grid-template-columns:1fr;gap:24px}.tap .shot{max-width:320px}.tap .dl{justify-items:start}}
/* free */
.free{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.fi{background:var(--tile);display:flex;flex-direction:column}
.fi .pic{aspect-ratio:1;position:relative;overflow:hidden;background:#000}.fi .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fi .pic img.c{object-fit:contain;padding:10%}
.fi .body{padding:14px 14px 16px;display:flex;flex-direction:column;flex:1}
.fi .k{font-size:12.5px;color:var(--faint);font-weight:500}
.fi h4{font-size:17px;font-weight:700;margin:4px 0 12px;letter-spacing:-.01em;flex:1}
.fi a{font-size:13px;font-weight:600;color:var(--brick2)}
/* meet */
.meet{display:grid;grid-template-columns:7fr 5fr;gap:56px;align-items:center}
.vid video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}.vid{display:block;position:relative;aspect-ratio:16/9;max-width:100%;background:#000;overflow:hidden}.vid img,.vid iframe{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0}
.vid .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:86px;height:86px;border-radius:50%;border:0;background:var(--beige);color:var(--bg);font-size:22px;cursor:pointer;box-shadow:0 10px 40px rgba(0,0,0,.5)}
.meet h2{font-size:36px;font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0 0 14px}.meet p{color:var(--dim);margin:0 0 24px}
/* packs + books */
.packs{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}
.packs .pic{aspect-ratio:1;overflow:hidden}.packs img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .5s,transform .6s}.packs a:hover img{filter:none;transform:scale(1.03)}
.packs .n{display:flex;justify-content:space-between;margin-top:10px;font-size:14px;font-weight:600}.packs .n span:last-child{color:var(--dim);font-weight:500}
.books{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.book{display:grid;grid-template-columns:110px 1fr;gap:18px;align-items:center;background:var(--tile);padding:16px}
.book img{width:110px;aspect-ratio:3/4;object-fit:cover;display:block}
.book .k{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);font-weight:600}.book h4{font-size:18px;font-weight:700;margin:4px 0 6px}.book p{font-size:13px;color:var(--dim);margin:0 0 8px}.book b{font-size:14px}
/* trust strip */
.trust{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust div{padding:26px 24px;border-right:1px solid var(--line)}.trust div:last-child{border-right:0}
.trust b{display:block;font-size:16px;margin-bottom:4px}.trust span{font-size:14px;color:var(--dim)}
/* footer */
footer{background:var(--beige);color:rgba(14,13,12,.66)}footer .fin{max-width:1320px;margin:0 auto;padding:64px 40px 96px;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;font-size:14px}
footer b{display:block;color:var(--bg);margin-bottom:12px}footer a{display:block;margin-bottom:6px}
.news{display:flex;margin-top:16px;max-width:380px}.news input{flex:1;background:transparent;border:1px solid rgba(14,13,12,.35);color:var(--bg);padding:12px 14px;font:14px "Inter Tight"}.news input::placeholder{color:rgba(14,13,12,.5)}.news .b1{background:var(--bg);color:var(--beige)}.news button{border:0}
@media (max-width:1100px){.cards{grid-auto-columns:calc((100% - 40px)/2.4)}.free{grid-template-columns:repeat(4,1fr)}.packs{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.revband .in{padding:52px 16px 40px}.rrow{grid-template-columns:1fr;gap:36px}.rrow .r{padding:0;border-left:0}.wrap{padding:0 16px}nav.top .mid>ul{display:none}.hero .wrap{grid-template-columns:1fr;gap:40px}.hero .ui{order:-1}
 .cards{grid-auto-columns:80%;gap:14px}.revs,.books,.meet,.bund{grid-template-columns:1fr}.bund .tx{padding:28px 20px}.wall{padding:16px;grid-template-columns:repeat(3,1fr)}
 .free{grid-template-columns:repeat(2,1fr)}.trust{grid-template-columns:1fr 1fr}.trust div:nth-child(2){border-right:0}footer .fin{grid-template-columns:1fr 1fr;padding:48px 16px 72px}section.s{padding:72px 0}}

/* menu: the page you are on */
nav.top .mid>ul li a.cur{color:var(--beige);box-shadow:inset 0 -2px 0 var(--brick2);padding-bottom:6px}
/* "this page is not designed yet" note in the preview */
.soon-toast{position:fixed;left:50%;bottom:28px;z-index:100;transform:translate(-50%,16px);background:var(--beige);color:var(--bg);font-size:14px;font-weight:600;padding:12px 18px;border-radius:999px;box-shadow:0 14px 40px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.soon-toast.on{opacity:1;transform:translate(-50%,0)}
/* Tap band: Mac and Windows equal */
.tap .row a{display:inline-flex;align-items:center;gap:8px}.tap .os{width:15px;height:15px;fill:currentColor}

/* ===== sample packs: shared card ===== */
.pk{position:relative}
.pk .pic{display:block;aspect-ratio:1;overflow:hidden;position:relative;background:var(--tile)}
.pk .pic img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1);transition:filter .5s,transform .6s}
.pk:hover .pic img,.pk:has(.pplay.on) .pic img{filter:none;transform:scale(1.03)}
.pk .tag{position:absolute;left:14px;top:14px;font-size:13px;font-weight:600;background:rgba(14,13,12,.82);padding:6px 12px;border-radius:999px}
.pk .cv{position:relative}
.pplay{position:absolute;right:14px;bottom:14px;width:52px;height:52px;border-radius:999px;border:0;background:#9D391E;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s,transform .15s;box-shadow:0 8px 24px rgba(0,0,0,.45)}
.pplay:hover{background:#b2452a;transform:scale(1.05)}
.pplay svg{width:18px;height:18px;fill:currentColor}.pplay .ps{display:none}.pplay.on .ps{display:block}.pplay.on .pp{display:none}
.pk .n{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-top:14px;font-size:18px;font-weight:600}
.pk .n a:hover{text-decoration:underline;text-underline-offset:4px}
.pk .n span{font-size:15px;color:var(--dim);font-weight:500;white-space:nowrap}
.pk .c{font-size:14px;color:var(--faint);margin-top:4px}

/* apps pages (apps.html, tap.html, noodle.html): shared parts */
.ahd{border-top:1px solid var(--line);padding:28px 0 0}
.ahd .crumb{font-size:13px;color:var(--faint);margin-bottom:40px}.ahd .crumb a:hover{color:var(--beige)}
.ah1{font-size:clamp(56px,6vw,96px);font-weight:600;letter-spacing:-.025em;line-height:.95;margin:0 0 14px}
.aln{font-size:clamp(20px,1.7vw,26px);font-weight:500;margin:0 0 14px}
.ald{color:var(--dim);font-size:17px;max-width:470px;margin:0 0 28px}
.adl{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:470px}
.adl a{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 18px}
.adl a b{display:inline-flex;align-items:center;gap:9px;font-size:15px}.adl a small{font-size:12.5px;font-weight:500;opacity:.62}
.adl .os{width:16px;height:16px;fill:currentColor}
.afine{font-size:14px;color:var(--faint);margin:14px 0 0}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.steps3>div{padding:32px 32px 36px 0}.steps3>div+div{padding-left:32px;border-left:1px solid var(--line)}
.steps3 .n{font:600 13px/1 ui-monospace,Menlo,monospace;color:var(--brick2);display:block;margin-bottom:16px}
.steps3 h3{font-size:21px;font-weight:600;letter-spacing:-.01em;margin:0 0 8px}.steps3 p{color:var(--dim);margin:0;font-size:15px}
.frow{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:center;padding:72px 0;border-top:1px solid var(--line)}
.frow.flip{grid-template-columns:7fr 5fr}.frow.flip .ft{order:2}
.frow h3{font-size:clamp(28px,2.4vw,36px);font-weight:600;letter-spacing:-.015em;line-height:1.1;margin:0 0 14px}
.frow p{color:var(--dim);font-size:17px;margin:0;max-width:440px}
.shot2{display:block;width:100%;border-radius:10px;box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 0 1px rgba(238,226,204,.1)}
.phone{width:100%;max-width:280px;aspect-ratio:620/1344;border-radius:38px;padding:9px;background:#050505;box-shadow:0 0 0 1px rgba(238,226,204,.16),0 40px 70px -24px rgba(0,0,0,.9)}
.phone img{width:100%;height:100%;object-fit:cover;border-radius:30px;display:block}
.faq details{border-top:1px solid var(--line)}.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:20px 40px 20px 0;font-size:17px;font-weight:600;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary:after{content:"+";position:absolute;right:4px;top:16px;font-size:24px;font-weight:400;color:var(--dim);transition:transform .2s}
.faq details[open] summary:after{transform:rotate(45deg)}
.faq details p{color:var(--dim);margin:-6px 0 22px;max-width:620px}
.endcta{text-align:center;padding:104px 0;border-top:1px solid var(--line)}
.endcta h2{font-size:clamp(36px,3.4vw,52px);font-weight:600;letter-spacing:-.02em;margin:0 0 12px}.endcta p{color:var(--dim);margin:0 0 28px}
.endcta .adl{margin:0 auto}
@media (max-width:900px){.steps3{grid-template-columns:1fr}.steps3>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
 .frow,.frow.flip{grid-template-columns:1fr;gap:32px}.frow.flip .ft{order:0}.adl{grid-template-columns:1fr}}

/* ===== PHONE (≤760px), 10-26. Research: 13 plugin sites at 390px (phone-research/).
   Header = logo left + search + menu right (8 of 13); Tap, account and free downloads live in the menu. ===== */
.mnb,.mpanel,.rdots,.packs .c,.packs .pt{display:none}
@media (max-width:760px){
  nav.top{display:flex;flex-wrap:nowrap;height:60px;padding:0;gap:8px}
  nav.top .free,nav.top .tapw,nav.top .acc{display:none}
  nav.top .r{gap:6px}
  nav.top .lft img{height:17px}
  .mnb{display:grid}
  .mpanel:not([hidden]){display:block;position:fixed;inset:auto 0 0 0;top:var(--mtop,92px);z-index:80;background:var(--bg);overflow-y:auto;padding:12px 16px 40px;border-top:1px solid var(--line)}
  html.mopen,html.mopen body{overflow:hidden}
  .mbig{list-style:none;margin:0 0 20px;padding:0}
  .mbig li a{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;padding:14px 0;border-bottom:1px solid var(--line)}
  .mbig li a.cur{color:#de6e45}
  .mtap{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid var(--line);margin-bottom:10px}
  .mtap .ap{width:44px;height:44px;border-radius:10px;background:#9D391E;display:grid;place-items:center}.mtap .ap img{width:24px}
  .mtap b{display:block;font-size:16px}.mtap small{color:var(--dim);font-size:13px}
  .macc{display:block;padding:14px;border:1px solid var(--line);font-weight:600;margin-bottom:24px}
  .mfree{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px}
  .mfree b{color:#de6e45;width:100%;margin-bottom:2px}
  .mfree a{padding:7px 12px;border:1px solid var(--line);border-radius:999px;color:var(--dim)}
  /* home: plugins row swipes, no arrows */
  .shr .arw{display:none}.shr>a{margin-right:0}
  /* 2-3 plugins on screen: picture, name, type, price; the card opens the plugin page */
  .cards{grid-auto-columns:42%;gap:12px}
  .cards .card .d,.mgrid .card .d,.cards .card .bt,.mgrid .card .bt,.cards .card .pr span,.mgrid .card .pr span{display:none}
  .cards .card .body,.mgrid .card .body{padding:12px 12px 14px}
  .cards .card h3,.mgrid .card h3{font-size:16px}.cards .card .ty,.mgrid .card .ty{font-size:12.5px}
  .cards .card .pr,.mgrid .card .pr{margin-top:8px}.cards .card .pr b,.mgrid .card .pr b{font-size:15px}
  .sh{align-items:baseline}
  /* reviews: one at a time, swipe */
  .rrow{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:100%;gap:32px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
  .rdots{display:flex;justify-content:center;gap:8px;margin-top:24px}
  .rdots i{width:7px;height:7px;border-radius:50%;background:rgba(14,13,12,.3);transition:background .2s,transform .2s}.rdots i.on{background:var(--bg);transform:scale(1.15)}
  .rrow::-webkit-scrollbar{display:none}
  .rrow .r{scroll-snap-align:start}
  .rrow q{font-size:18px}
  /* bundle */
  .bund2{height:auto;min-height:480px;margin-bottom:72px}.bund2 .offer{padding:72px 16px}
  .bund2 h2{font-size:38px}.bund2 .price b{font-size:44px}
  /* packs: 2 columns, price under the name */
  .packs{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;gap:12px;overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity;overscroll-behavior-x:contain}
  .packs::-webkit-scrollbar{display:none}.packs>a{scroll-snap-align:start}
  .packs .n{flex-direction:column;align-items:flex-start;gap:2px}
  /* Tap band: equal buttons, full width */
  .tap{margin-bottom:64px}.tap .shot{max-width:none}
  .tap .dl{justify-items:stretch;width:100%}.tap .row{flex-direction:column}.tap .row>a{justify-content:center;width:100%}
  /* footer: fits the screen */
  footer .fin{grid-template-columns:1fr 1fr;gap:32px 20px;padding:44px 16px 64px}
  footer .fin>div:first-child{grid-column:1/-1}
  .news{max-width:none}.news input{min-width:0}
}

/* ===== phone: homepage rows (Aviv 10-26: design A + a "Try free" button like the header buttons, no prices) ===== */
@media (max-width:760px){
  .cards .card,.mgrid .card{background:none}
  .cards .card .body,.mgrid .card .body{padding:10px 0 0}
  .cards .card h3,.mgrid .card h3{font-size:15px;margin:0 0 2px}
  .cards .card .ty,.mgrid .card .ty{color:var(--dim);font-size:13px;margin:0}
  .cards .card .pr,.mgrid .card .pr{display:none}
  .cards .card .bt,.mgrid .card .bt{display:flex!important;margin-top:10px}
  .cards .card .bt .b2,.mgrid .card .bt .b2{display:none}
  .cards .card .bt .b1,.mgrid .card .bt .b1{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:0;border-radius:0;background:var(--beige);color:var(--bg);font-size:13.5px;font-weight:600;width:auto}
  .packs .pt{display:block;color:var(--dim);font-size:13px;margin-top:2px}
  .packs>a{display:flex;flex-direction:column}.packs .n{display:contents}
  .packs .pic{order:0}.packs .n span:first-child{order:1;margin-top:10px;font-size:15px;font-weight:600}.packs .pt{order:2}.packs .n span:last-child{order:3;margin-top:2px}
  .packs .n{margin-top:10px;font-size:15px}
  .packs a[data-st=paid] .n span:last-child{display:none}
  .packs .n span:last-child{color:var(--dim);font-size:13px;font-weight:500}
}

/* ===== cards: name, type and text centred (Aviv 10-26) ===== */
.card .body{text-align:center}
.card .bt{justify-content:center}
/* card type line: grey under the name (Aviv 10-26, option F text order, photos kept) */
.card .ty{color:var(--dim)}
/* pack cards centred like the plugin cards (Aviv 10-26): name, price, what's inside */
.pk{text-align:center}
.pk .n{flex-direction:column;align-items:center;gap:2px}
.packs>a{text-align:center}
.packs .n{flex-direction:column;align-items:center;gap:2px}
@media (max-width:760px){.packs>a{align-items:center}.mgrid .pk .n{align-items:center}}
/* newsletter tick under the product buttons (same rule as the live site: needed for free downloads) */
.optin{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px auto 0;font-size:14px;color:var(--dim);cursor:pointer;user-select:none;max-width:440px}
.optin input{width:18px;height:18px;margin:0;flex:none;accent-color:var(--beige)}
.optin em{font-style:normal;color:var(--faint)}
.optin.nudge{color:#de6e45;animation:optin .45s}.optin.nudge em{color:#de6e45}
@keyframes optin{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
@media (prefers-reduced-motion:reduce){.optin.nudge{animation:none}}

/* ===== text pages (legal, guides, blog posts, small pages), 10-28 =====
   .dhd = page head (title + one line), .doc = the reading column. Same head size as Plugins / Apps. */
.dhd{border-top:1px solid var(--line);padding:72px 0 40px}
.dhd .crumb{font-size:13px;color:var(--faint);margin-bottom:18px}.dhd .crumb a:hover{color:var(--beige)}
.dhd h1{font-size:clamp(44px,4.4vw,68px);font-weight:600;letter-spacing:-.025em;line-height:1;margin:0;max-width:900px}
.dhd .lede{font-size:18px;color:var(--dim);max-width:640px;margin:16px 0 0}
.doc{max-width:700px;padding:8px 0 104px;font-size:17px;line-height:1.65;color:var(--dim)}
.doc h2{font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.25;color:var(--beige);margin:48px 0 12px}
.doc h3{font-size:19px;font-weight:600;color:var(--beige);margin:32px 0 8px}
.doc>:first-child{margin-top:0}
.doc p,.doc ul,.doc ol{margin:0 0 16px}.doc ul,.doc ol{padding-left:22px}.doc li{margin:0 0 6px}
.doc strong,.doc b{color:var(--beige);font-weight:600}
.doc a{color:var(--beige);border-bottom:1px solid var(--faint)}.doc a:hover{border-color:var(--beige)}
.doc img{max-width:100%;height:auto;display:block;margin:24px 0}
.doc figure{margin:28px 0}.doc figcaption{font-size:14px;color:var(--faint);margin-top:8px}
.doc blockquote{margin:24px 0;padding:0 0 0 18px;border-left:2px solid var(--line);color:var(--beige)}
.doc table{width:100%;border-collapse:collapse;font-size:15px;margin:20px 0}.doc td,.doc th{text-align:left;padding:10px 12px 10px 0;border-top:1px solid var(--line);vertical-align:top}
.doc code{font:14px ui-monospace,Menlo,monospace;background:var(--tile);padding:2px 6px}
.doc hr{border:0;border-top:1px solid var(--line);margin:40px 0}
@media (max-width:760px){.dhd{padding:32px 0 24px}.dhd .crumb{display:none}.dhd h1{font-size:40px}.dhd .lede{font-size:16px}.doc{font-size:16px;padding-bottom:72px}.doc h2{font-size:21px;margin-top:40px}}
/* footer: bottom line with the legal pages (10-28) */
footer .fin{padding-bottom:56px}
footer .fbot{max-width:1320px;margin:0 auto;padding:20px 40px 40px;border-top:1px solid rgba(14,13,12,.14);display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;font-size:13px}
footer .fbot nav{display:flex;gap:6px 20px;flex-wrap:wrap}footer .fbot a{display:inline;margin:0}footer .fbot a:hover,footer .fin a:hover{color:var(--bg)}
footer .newsok{color:var(--bg);font-size:14px;margin:16px 0 0;max-width:380px}
@media (max-width:760px){footer .fbot{padding:20px 16px 40px;flex-direction:column;align-items:flex-start}}
/* ===== forms (Tech support, Contact, Account), 10-28 ===== */
.frm{max-width:760px;display:grid;gap:36px;padding:8px 0 104px}
.frm fieldset{border:0;padding:0;margin:0;display:grid;gap:16px}
.frm legend{font-size:20px;font-weight:600;color:var(--beige);padding:0;margin:0 0 4px}
.frm .two{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.frm label.f{display:grid;gap:7px;font-size:14px;color:var(--dim)}
.frm .req{color:#de6e45}.frm .hint{font-size:13px;color:var(--faint)}
.inp{width:100%;background:transparent;border:1px solid rgba(238,226,204,.22);color:var(--beige);font:16px "Inter Tight",sans-serif;padding:12px 14px;border-radius:0;appearance:none;-webkit-appearance:none;transition:border-color .15s}
.inp:focus{outline:0;border-color:var(--beige)}.inp::placeholder{color:var(--faint)}
select.inp{background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);background-position:calc(100% - 20px) 52%,calc(100% - 15px) 52%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
select.inp option{background:var(--bg);color:var(--beige)}
textarea.inp{min-height:160px;resize:vertical;line-height:1.5}
.frm .chk{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--dim);cursor:pointer}.frm .chk input{width:18px;height:18px;margin:0;accent-color:var(--beige)}
.drop{display:grid;place-items:center;gap:6px;text-align:center;padding:28px;border:1px dashed rgba(238,226,204,.3);color:var(--dim);cursor:pointer;transition:border-color .15s,background .15s}
.drop.drag,.drop:hover{border-color:var(--beige);background:rgba(238,226,204,.04)}.drop u{color:var(--beige)}
.files{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:14px}.files li{display:flex;justify-content:space-between;gap:12px;background:var(--tile);padding:8px 12px}
.files .bad{color:#de6e45}.files button{background:none;border:0;color:var(--dim);font-size:18px;cursor:pointer}
.frm .err{color:#de6e45;font-size:15px;margin:0;min-height:1.2em}
.frm .send{justify-self:start}
.done{background:var(--tile);padding:28px;max-width:760px;margin:8px 0 104px}.done h2{font-size:24px;margin:0 0 8px}.done p{color:var(--dim);margin:0}
.dhd .buy-note{font-size:15px;color:var(--dim);max-width:640px;margin:14px 0 0}.dhd .buy-note a{color:var(--beige);border-bottom:1px solid var(--faint)}
.qnote{background:var(--tile);padding:18px 22px;max-width:760px;margin:0 0 36px;color:var(--dim);font-size:15px}.qnote strong{color:var(--beige)}.qnote a{color:var(--beige);border-bottom:1px solid var(--faint)}
@media (max-width:760px){.frm .two{grid-template-columns:1fr}.frm{padding-bottom:72px}}
/* form labels: the text and its * stay on one line, the field sits under them */
.frm label.f{display:block}.frm label.f>.inp{display:block;margin-top:7px}.frm label.f>.hint:last-child{display:block;margin-top:6px}
.frm [hidden]{display:none!important}

/* cookie notice (same choice key as the old site: ripples_cookie_consent; /js/ga.js + /js/meta-pixel.js wait for it) */
.ckb{position:fixed;left:16px;right:16px;bottom:16px;z-index:200;max-width:720px;margin:0 auto;background:var(--bg);border:1px solid var(--line);box-shadow:0 12px 40px rgba(0,0,0,.45);padding:16px 18px;display:flex;gap:18px;align-items:center;transform:translateY(calc(100% + 24px));transition:transform .35s ease}
.ckb.show{transform:none}
.ckb p{margin:0;font-size:14px;line-height:1.45;color:var(--dim)}.ckb p a{color:var(--beige);text-decoration:underline}
.ckb .bt{display:flex;gap:8px;flex:none}.ckb .b1,.ckb .b2{padding:10px 16px;font-size:14px}
@media (max-width:600px){.ckb{left:10px;right:10px;bottom:10px;padding:10px 12px;gap:10px}.ckb p{font-size:12.5px;line-height:1.35}.ckb .bt{flex-direction:column;gap:6px}.ckb .b1,.ckb .b2{padding:7px 12px;font-size:13px}}