/* Recibora site, style of 9 Nov 2026 (Recibora-brand.md). The page CSP blocks inline styles: every style lives here. */
:root{
  --ink:#161616; --ink2:#0A0B0D; --card-dark:#1F1F21; --paper:#FFFFFF; --mist:#F5F6FB; --grey:#A3A3A3; --text-dark:#151515;
  --cobalt:#091D96; --cobalt2:#384CC3; --cobalt-l:#5C6FE8;
  --sans:"Onest",Arial,sans-serif; --script:"Mrs Saint Delafield","Brush Script MT",cursive;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 15px/1.55 var(--sans)}
h1,h2,h3,p{margin:0}
a{color:inherit}
a:focus-visible,summary:focus-visible{outline:2px solid var(--cobalt-l);outline-offset:3px;border-radius:4px}
.wrap{max-width:1160px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sec{padding-block:64px}
[id]{scroll-margin-top:84px}
.light{background:var(--paper);color:var(--text-dark)}
.stack{display:grid;gap:28px}
.tt{font-weight:500;font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.035em;text-align:center;text-wrap:balance}
.tt .g{display:block;color:var(--grey)}
.tt .b{display:block;color:var(--cobalt)}
.sub{text-align:center;font-size:15px;max-width:600px;justify-self:center}
.sub.dim{color:var(--grey)}
.btn{display:inline-block;justify-self:center;background:var(--cobalt);color:#fff;font:600 13px/1 var(--sans);letter-spacing:.03em;text-transform:uppercase;text-decoration:none;padding:17px 38px;border-radius:6px;transition:transform .15s ease,background .15s ease;position:relative;overflow:hidden;isolation:isolate}
/* Light sweep like the reference buttons: a soft white burst from the left edge, 1.2 s, every 6 s. */
.btn::after{content:"";position:absolute;top:0;left:-100%;width:200%;height:350%;background:rgba(255,255,255,.8);border-radius:100%;transform:scale(0);animation:shine 6s linear infinite;pointer-events:none}
.btn.wht::after{background:rgba(9,29,150,.3)}
@keyframes shine{0%{opacity:1;transform:scale(0)}20%{opacity:0;transform:scale(2.5)}100%{opacity:0;transform:scale(2.5)}}
@media (prefers-reduced-motion:reduce){.btn::after{animation:none;display:none}}
.btn:hover{background:#0B23B0;transform:translateY(-1px)}
.btn.blk{background:#000}.btn.blk:hover{background:#222}
.btn.wht{background:#fff;color:var(--text-dark)}.btn.wht:hover{background:var(--mist)}
.arw{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.4}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(22,22,22,.62);backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%);border-bottom:1px solid rgba(255,255,255,.08)}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:21;background:var(--ink)}
.top-in{display:flex;justify-content:space-between;align-items:center;height:72px}
.logo{font:700 21px/1 var(--sans);letter-spacing:-.035em;text-decoration:none;color:#fff}
.open{font:600 12px/1 var(--sans);text-transform:uppercase;letter-spacing:.05em;text-decoration:none;color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:999px;padding:10px 16px}
.open:hover{background:#fff;color:var(--text-dark)}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--ink) 0%,var(--ink) 58%,var(--paper) 100%);padding-block:24px 64px}
/* "paid": one horizontal word, the top half sharp and the bottom half blurred, with a soft change across the middle (two copies, masked). */
.bgword{position:absolute;left:50%;top:-34px;transform:translateX(-50%);display:grid;font:700 clamp(150px,32vw,470px)/.8 var(--sans);letter-spacing:-.065em;color:#2E2E2E;white-space:nowrap;pointer-events:none;user-select:none}
.bw{grid-area:1/1;padding-bottom:.08em}
.bw-sharp{-webkit-mask-image:linear-gradient(180deg,#000 38%,transparent 62%);mask-image:linear-gradient(180deg,#000 38%,transparent 62%)}
.bw-blur{filter:blur(7px);-webkit-mask-image:linear-gradient(180deg,transparent 38%,#000 62%);mask-image:linear-gradient(180deg,transparent 38%,#000 62%)}
.hgrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1fr) minmax(250px,300px) minmax(0,1fr);gap:32px;align-items:start}
.hleft{display:grid;gap:22px;padding-top:70px;min-width:0}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pills span{background:rgba(255,255,255,.16);border-radius:999px;padding:6px 13px;font-size:12.5px}
.word{font:700 clamp(64px,10.5vw,158px)/.85 var(--sans);letter-spacing:-.06em}
.glass{background:rgba(38,38,40,.62);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.2);border-radius:15px;padding:24px 26px;display:grid;gap:12px;font-size:14px;max-width:440px}
.glass h1{font-weight:600;font-size:20px;line-height:1.2;letter-spacing:-.01em}
.glass .flow{font-weight:700;font-size:12.5px;letter-spacing:.02em}
.glass .btn{justify-self:start;margin-top:6px}
.hmid{display:grid;justify-items:center;padding-top:40px}
.phone{width:100%;max-width:300px;aspect-ratio:9/18.5;background:#000;border-radius:38px;padding:9px;box-shadow:0 24px 70px rgba(0,0,0,.6)}
.phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border-radius:30px;background:#fff}
.hleft .word{font-size:clamp(56px,7.4vw,110px)}
.stks{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:-46px;position:relative;z-index:3}
.stk{background:#fff;color:var(--text-dark);border-radius:14px;padding:11px 16px;display:grid;gap:2px;text-align:center;box-shadow:0 10px 28px rgba(0,0,0,.35);font-variant-numeric:tabular-nums}
.stk b{font-size:11.5px;font-weight:600;color:#5a5f6a}
.stk span{font-weight:700;font-size:17px;white-space:nowrap}
.stk.s1{transform:rotate(-8deg)}.stk.s2{transform:rotate(8deg)}
.stks .arw{width:54px;height:36px;stroke:var(--cobalt-l)}
.hright{padding-top:300px;text-align:right;min-width:0}
.hright .word{font-size:clamp(56px,8.2vw,124px)}

/* Price ticket */
.tk{display:grid;grid-template-columns:1fr 1fr;position:relative;width:min(100%,760px);justify-self:center;--hole:var(--paper)}
.tk.on-dark{--hole:var(--ink)}
.tk .h{background:linear-gradient(120deg,var(--cobalt) 0%,var(--cobalt2) 48%,var(--cobalt) 100%);color:#fff;padding:34px 24px;display:grid;justify-items:center;align-content:center;gap:6px;text-align:center}
.tk .h:first-child{border-radius:16px 0 0 16px}.tk .h:last-child{border-radius:0 16px 16px 0}
.tk .lab{font-weight:500;font-size:14px;text-transform:uppercase;letter-spacing:.03em}
.tk .big{font:700 clamp(46px,7vw,86px)/1 var(--sans);letter-spacing:-.035em}
.tk .dim{color:rgba(255,255,255,.55)}
.tk .tiny{font-size:13px;color:rgba(255,255,255,.75);max-width:260px}
.tk .perf{position:absolute;left:50%;top:-9px;bottom:-9px;width:18px;transform:translateX(-50%);background:radial-gradient(circle,var(--hole) 7.5px,transparent 8px) center top/18px 20px repeat-y}
.small{font-size:13px;color:#5d6270;text-align:center;max-width:560px;justify-self:center}
.on-ink .small{color:var(--grey)}
.small a{color:inherit}

/* Features */
.fwrap{position:relative}
.fg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;list-style:none;margin:0;padding:0}
.fc{background:var(--mist);border-radius:15px;padding:22px 24px 26px;display:grid;gap:18px;align-content:start;font-size:14.5px;position:relative;z-index:1}
.fc .no{color:var(--cobalt);font-weight:500;font-size:13.5px}
.obj{position:absolute;z-index:2;pointer-events:none}
.o-rcpt{right:-40px;top:-150px;width:130px;transform:rotate(14deg);filter:drop-shadow(0 14px 16px rgba(0,0,0,.22))}
.o-stamp{left:-78px;bottom:-66px;width:110px;transform:rotate(-14deg)}

/* Data band */
.fade-d{background:linear-gradient(180deg,var(--paper) 0%,var(--ink) 30%)}
.fade-d .tt{padding-top:24px}
.band{background:linear-gradient(120deg,var(--cobalt) 0%,#0B23B0 60%,var(--cobalt2) 100%);border-radius:20px;display:grid;grid-template-columns:1.1fr 1fr;align-items:center;gap:36px;padding:44px 48px}
.band p{font-size:16px;max-width:460px}
.sheet{background:#fff;border-radius:12px;transform:rotate(-5deg);padding:14px;display:grid;gap:4px;color:var(--text-dark);font-size:13px;box-shadow:0 14px 30px rgba(0,0,0,.3);position:relative;font-variant-numeric:tabular-nums}
.sheet .sr{display:grid;grid-template-columns:1.1fr 1.4fr 1fr .9fr;gap:8px;border-bottom:1px solid #e8eaf2;padding:6px 2px}
.sheet .sr:last-of-type{border-bottom:0}
.sheet .sr.hd{font-weight:700;color:#55607a}
.st2{position:absolute;background:#fff;color:var(--cobalt);font:800 13px/1 var(--sans);letter-spacing:.03em;padding:8px 12px;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.3)}
.k1{right:8px;top:-16px;transform:rotate(-16deg)}.k2{left:-14px;top:46%;transform:rotate(-10deg)}.k3{right:18px;bottom:-14px;transform:rotate(-14deg)}

/* Examples */
.ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ec{background:#fff;color:var(--text-dark);border-radius:20px;padding:22px;display:grid;gap:14px;align-content:start}
.ec .top2{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center}
.stamp{width:72px;height:82px;background:#fff;border:6px dotted #E3E5EE;outline:1px solid #E3E5EE;padding:3px;transform:rotate(-6deg)}
.stamp span{width:100%;height:100%;background:var(--ink);color:#fff;display:grid;place-items:center;font:700 20px/1 var(--sans)}
.ec .nm{font:400 40px/1.15 var(--script);color:var(--cobalt);margin-bottom:6px}
.ec .ln{font-size:13px}.ec .ln b{font-weight:700}
.mini{border:1px solid #E3E5EE;border-radius:12px;padding:12px 14px;display:grid;gap:5px;font-size:13px;font-variant-numeric:tabular-nums;position:relative}
.mini .r{display:flex;justify-content:space-between}
.mini .k{font-weight:700}
.circ{position:absolute;right:2px;bottom:2px;width:78px;height:38px;stroke:var(--cobalt)}

/* FAQ */
.faq{display:grid;gap:8px;max-width:760px;width:100%;justify-self:center}
.faq details{background:var(--card-dark);border-radius:15px;padding:0 22px}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:19px 0;font-weight:500;font-size:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--grey);font-size:22px;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding-bottom:20px;font-size:14.5px;color:#cfd2dc;max-width:640px}

/* Footer */
.foot{background:var(--ink2);color:var(--grey);text-align:center;font-size:13px;padding-block:40px}
.foot .wrap{display:grid;gap:12px;justify-items:center}
.links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px}
.links a{text-decoration:none}.links a:hover{color:#fff}

/* Legal pages */
.docp{background:var(--paper);color:var(--text-dark)}
.doc{max-width:760px;padding-block:48px 72px;display:grid;gap:10px}
.doc h1{font-size:40px;font-weight:600;letter-spacing:-.03em;margin-bottom:4px}
.doc h2{font-size:21px;font-weight:600;margin-top:22px}
.doc p,.doc li{max-width:42em}
.doc .small{text-align:left;justify-self:start}
.doc a{color:var(--cobalt)}

@media (max-width:980px){
  .hgrid{grid-template-columns:minmax(0,1fr) minmax(230px,270px)}
  .hright{grid-column:1/-1;padding-top:0;margin-top:-8px}
  .o-rcpt{right:-10px;width:100px}.o-stamp{left:-20px;bottom:-90px;width:90px}
}
@media (max-width:760px){
  .sec{padding-block:56px}
  .hero{padding-block:12px 56px}
  .bgword{top:0;font-size:clamp(130px,42vw,300px)}
  .hright{margin-top:-4px}
  .hright .word{font-size:clamp(56px,17vw,100px)}
  .hgrid{grid-template-columns:minmax(0,1fr);gap:26px}
  .hleft{display:contents}
  .pills{padding-top:16px;justify-content:flex-end}
  .word{text-align:right;font-size:clamp(70px,22vw,120px)}
  .hmid{padding-top:0}
  .phone{max-width:270px}
  .glass{max-width:none;order:5}
  .tk{grid-template-columns:1fr}
  .tk .h:first-child{border-radius:16px 16px 0 0}.tk .h:last-child{border-radius:0 0 16px 16px}
  .tk .perf{left:-9px;right:-9px;top:50%;bottom:auto;width:auto;height:18px;transform:translateY(-50%);background:radial-gradient(circle,var(--hole) 7.5px,transparent 8px) left center/20px 18px repeat-x}
  .fg{grid-template-columns:minmax(0,1fr)}
  .o-rcpt{top:-46px;right:-6px;width:64px}.o-stamp{left:auto;right:-10px;bottom:-40px;width:84px}
  .band{grid-template-columns:minmax(0,1fr);padding:30px 24px 40px}
  .sheet{font-size:11.5px;padding:10px}
  .ex{grid-template-columns:minmax(0,1fr)}
}

/* 404 */
.nf{min-height:60vh;display:grid;align-content:center}
.nfcode{text-align:center;font:700 clamp(120px,22vw,240px)/.8 var(--sans);letter-spacing:-.06em;color:#2E2E2E}

/* Logo: receipt mark + name */
.logo{display:inline-flex;align-items:center;gap:10px}
.logo-mark{width:30px;height:30px;flex:none;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.14)}

/* Two plans */
.offers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;width:min(100%,820px);justify-self:center;align-items:stretch}
.offer{position:relative;border-radius:16px;padding:30px 28px;display:flex;flex-direction:column;gap:14px;background:var(--mist);color:var(--text-dark)}
.offer .btn{align-self:flex-start;margin-top:auto}
.offer.plus{background:linear-gradient(120deg,var(--cobalt) 0%,var(--cobalt2) 48%,var(--cobalt) 100%);color:#fff}
.oname{font-weight:600;font-size:15px;text-transform:uppercase;letter-spacing:.04em}
.oprice{font:700 clamp(46px,6vw,68px)/1 var(--sans);letter-spacing:-.035em}
.oprice span{font:500 15px/1 var(--sans);letter-spacing:0;color:#5d6270}
.plus .oprice span{color:rgba(255,255,255,.75)}
.olist{margin:0 0 6px;padding:0;list-style:none;display:grid;gap:9px;font-size:14.5px}
.olist li{padding-left:24px;position:relative}
.olist li::before{content:"";position:absolute;left:2px;top:.42em;width:11px;height:6px;border-left:2px solid var(--cobalt);border-bottom:2px solid var(--cobalt);transform:rotate(-45deg)}
.plus .olist li::before{border-color:#fff}
.olist li.muted{color:#5d6270}
.olist li.muted::before{border:0;width:9px;height:2px;background:#9aa0ad;top:.7em;transform:none}
.obadge{position:absolute;top:18px;right:18px;background:#fff;color:var(--cobalt);font:700 11.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;padding:7px 11px;border-radius:999px}
@media (max-width:760px){.offers{grid-template-columns:minmax(0,1fr)}.offer{padding:26px 22px}}

/* Hero actions and the try link */
.gacts{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:6px}
.gacts .btn{margin-top:0}
.tlink{font-weight:600;font-size:13.5px;text-decoration:underline;text-decoration-color:var(--cobalt-l);text-decoration-thickness:2px;text-underline-offset:5px}
.tlink:hover{text-decoration-color:#fff}

/* Three plans: the middle one stands out */
.offers{grid-template-columns:repeat(3,minmax(0,1fr));width:min(100%,1080px);align-items:stretch;padding-block:16px}
.offer.plus{margin-block:-16px;padding-block:44px;box-shadow:0 24px 60px rgba(9,29,150,.28)}
@media (max-width:900px){.offers{grid-template-columns:minmax(0,1fr);width:min(100%,520px);padding-block:0}.offer.plus{margin-block:0;padding-block:30px}}

/* Example cards: pictures, type line, payment bar, chips */
.ec .stamp{width:84px;height:96px;padding:4px}
.ec .stamp svg{display:block;width:100%;height:100%}
.ec .ty{font-size:12.5px;color:#5d6270;margin-top:2px}
.ec .ln{font-size:13.5px}
.pbar{height:6px;border-radius:999px;background:#E3E5EE;overflow:hidden;margin:4px 0 2px}
.pbar i{display:block;height:100%;background:var(--cobalt);border-radius:999px}
.pbar .w50{width:50%}.pbar .w100{width:100%}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips span{font-size:11.5px;font-weight:600;background:var(--mist);color:#3a3e48;border-radius:999px;padding:5px 10px}

/* Hero phone: slight tilt, invoice and receipt half and half */
.phone{transform:rotate(-6deg);transform-origin:50% 60%}
.phone img{object-position:center center}
.glass .gacts .btn{justify-self:auto}
@media (prefers-reduced-motion:no-preference){.phone{transition:transform .4s ease}.hmid:hover .phone{transform:rotate(-3deg)}}

/* Hero buttons: same size. Phone: pills move off the big "paid" word */
.gacts{display:grid;grid-template-columns:max-content;justify-content:start;gap:12px}
.gacts .btn{text-align:center;justify-self:stretch}
@media (max-width:760px){
  .pills{order:4;justify-content:flex-start;padding-top:0}
  .hleft>.word{padding-top:58px}
}

/* Waitlist form (pricing section) */
.wl{display:grid;gap:14px;width:min(100%,520px);justify-self:center;background:var(--mist);border-radius:16px;padding:26px 24px;scroll-margin-top:84px;color:var(--text-dark)}
.wl-h{font-weight:600;font-size:20px;letter-spacing:-.01em}
.wl-p{font-size:14px;color:#5d6270;margin-top:-8px}
.wl-f{display:grid;gap:6px;font-size:13px;font-weight:600}
.wl-f input,.wl-f select{font:500 15px/1.2 var(--sans);color:var(--text-dark);background:#fff;border:1px solid #CBD0DC;border-radius:8px;padding:12px 12px;width:100%}
.wl-f input:focus,.wl-f select:focus{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.wl-c{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:13px;color:#3a3e48;line-height:1.45}
.wl-c input{width:18px;height:18px;margin-top:1px;accent-color:var(--cobalt)}
.wl-c a{color:var(--cobalt);text-decoration:underline}
.wl .btn{justify-self:start;border:0;cursor:pointer}
.wl-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}