/* reserved4u.app landing page, 0.47.0. Dark blue/cyan/purple treatment from the approved mockup. */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:400 600;font-display:swap;src:url(/r4u/fonts/playfair.woff2) format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:400 600;font-display:swap;src:url(/r4u/fonts/playfair-italic.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;src:url(/r4u/fonts/chakra-500.woff2) format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;src:url(/r4u/fonts/chakra-600.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:300 900;font-display:swap;src:url(/fonts/figtree-1.woff2) format('woff2')}
:root{
  --bg:#040a18;--bg2:#071229;--panel:rgba(9,20,46,.72);--line:rgba(56,189,248,.34);--line2:rgba(148,163,209,.16);
  --ink:#f1f5ff;--soft:#b4c2df;--mute:#8696b8;--cyan:#22d3ee;--cyan2:#38bdf8;--blue:#3b82f6;--purple:#a855f7;--violet:#7c3aed;
  --grad:linear-gradient(100deg,#22d3ee 0%,#3b82f6 48%,#a855f7 100%);
  --serif:'Playfair Display',Georgia,'Times New Roman',serif;--tech:'Chakra Petch','Figtree',system-ui,sans-serif;--sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  --cut:14px;--wrap:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--sans);overflow-x:hidden;
  background-image:linear-gradient(rgba(56,189,248,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.045) 1px,transparent 1px);background-size:48px 48px}
img{display:block;max-width:100%;height:auto}
a{color:var(--cyan)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px;background:#fff;color:#000;padding:8px 12px;z-index:99}.skip:focus{left:8px}
.stg{background:#3b1690;color:#fff;text-align:center;font:600 13px/1.2 var(--sans);padding:6px}
.ic{width:20px;height:20px;flex:none}.ar{width:17px;height:17px}

/* nav */
.nav{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px max(20px,calc((100vw - var(--wrap))/2));
  background:rgba(4,10,24,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.logo{display:block;line-height:0;flex:none}.logo img{display:block;height:46px;width:auto}
.nav ul{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.nav ul a:not(.btn){color:var(--soft);text-decoration:none;font:500 15px/1 var(--sans)}.nav ul a:not(.btn):hover{color:#fff}
.nav-sep{padding-left:22px;border-left:1px solid var(--line2)}
.burger{display:none;background:none;border:0;color:#fff;padding:8px;margin:-8px;cursor:pointer}.burger .ic{width:28px;height:28px}.burger .x{display:none}

/* buttons */
.btn{--c:var(--cut);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;text-decoration:none;cursor:pointer;border:0;
  font:600 15px/1 var(--tech);letter-spacing:.16em;text-transform:uppercase;color:#fff;
  clip-path:polygon(var(--c) 0,100% 0,100% calc(100% - var(--c)),calc(100% - var(--c)) 100%,0 100%,0 var(--c));transition:filter .2s,transform .2s}
.btn-p{background:var(--grad);color:#041022;box-shadow:0 0 28px rgba(59,130,246,.45)}
.btn-p:hover{filter:brightness(1.12)}
.btn-o{background:linear-gradient(100deg,#38bdf8,#7c8cff 55%,#a855f7);isolation:isolate;position:relative}
.btn-o::before{content:"";position:absolute;inset:1.5px;z-index:-1;background:var(--bg2);clip-path:polygon(calc(var(--c) - .6px) 0,100% 0,100% calc(100% - var(--c) + .6px),calc(100% - var(--c) + .6px) 100%,0 100%,0 calc(var(--c) - .6px))}
.btn-o:hover::before{background:#0b1b3c}
/* chamfered panels with a real 1px border on every edge, including the cut corners */
.fcard,.path,.pcard,.ready{--k:16px;--bd:var(--line);--fill:var(--panel);position:relative;isolation:isolate;border:0!important;background:var(--bd)!important;
  clip-path:polygon(var(--k) 0,100% 0,100% calc(100% - var(--k)),calc(100% - var(--k)) 100%,0 100%,0 var(--k))!important}
.fcard::before,.path::before,.pcard::before,.ready::before{content:"";position:absolute;inset:1px;z-index:-1;background:#07122a;background-image:var(--fillimg,none);
  clip-path:polygon(calc(var(--k) - .4px) 0,100% 0,100% calc(100% - var(--k) + .4px),calc(100% - var(--k) + .4px) 100%,0 100%,0 calc(var(--k) - .4px))}
.pcard.hot{--bd:rgba(168,85,247,.75);--fillimg:linear-gradient(160deg,rgba(76,29,149,.45),#07122a 60%)}
.path:hover::before{background:#0c1d42}
.btn.sm{min-height:40px;padding:0 16px;font-size:13px;letter-spacing:.12em;--c:9px}
.btn.block{width:100%}
.tlink{font:600 15px/1 var(--tech);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;display:inline-flex;align-items:center;gap:8px}

/* type */
.eyebrow{font:500 13px/1.3 var(--tech);letter-spacing:.32em;text-transform:uppercase;color:var(--cyan);margin:0 0 14px}
.eyebrow::before{content:"[ "}.eyebrow::after{content:" ]"}
h1,.h2{font-family:var(--serif);font-weight:400;text-transform:uppercase;letter-spacing:-.005em;margin:0}
h1 em,.h2 em{font-style:italic}
.h2{font-size:clamp(36px,4.4vw,58px);line-height:1.02}
.sec-lede{color:var(--soft);max-width:560px;margin:16px 0 0;font-size:18px}
.fine{color:var(--mute);font-size:14px;margin:14px 0 0}
.c{color:var(--cyan);text-shadow:0 0 30px rgba(34,211,238,.35)}

/* sections */
.band{max-width:var(--wrap);margin:0 auto;padding:96px 20px 0}
.hero{position:relative;min-height:min(820px,calc(100vh - 70px));display:flex;align-items:center;overflow:hidden;border-bottom:1px solid var(--line2)}
.hero-img{position:absolute;inset:0 0 0 auto;width:64%}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:62% 30%}
.hero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(4,10,24,.86) 18%,rgba(4,10,24,.2) 52%,rgba(4,10,24,0) 70%),linear-gradient(0deg,var(--bg) 0%,transparent 26%)}
.hero-copy{position:relative;z-index:1;max-width:var(--wrap);width:100%;margin:0 auto;padding:72px 20px 80px}
.hero h1{font-size:clamp(54px,7.2vw,104px);line-height:.95;max-width:7.6em}
.hero h1 span{display:inline}
.lede{font-size:19px;color:#dbe4f7;max-width:520px;margin:26px 0 0}
.ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:34px}
.ctas .btn{min-width:236px}

.platforms{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center}
.phones{position:relative;height:600px}
.phone{position:absolute;margin:0;width:262px;padding:9px;border-radius:44px;background:linear-gradient(145deg,#4a5878,#121a2e 40%,#0b1222 70%,#56647f);box-shadow:0 30px 60px -20px rgba(0,0,0,.8),0 0 40px rgba(59,130,246,.28)}
.phone .scr{border-radius:36px;overflow:hidden;background:#000;aspect-ratio:390/844}
.phone .scr img{width:100%;height:100%;object-fit:cover}
.p1{left:4%;top:0;z-index:2;transform:rotate(-4deg)}
.p2{left:44%;top:70px;transform:rotate(5deg);width:236px}
.demo-tag{position:absolute;left:0;bottom:-6px;margin:0;font:500 12px/1 var(--tech);letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.plat-copy p{color:var(--soft);font-size:18px;max-width:520px}
.plat-copy .h2 em{text-transform:none}
.plat-copy .sub{color:#e8eefc}
.plat-copy b{color:#fff}

.how{display:grid;grid-template-columns:1fr 1.15fr;column-gap:56px;align-items:start}
.how .eyebrow,.how .h2{grid-column:1}
.paths{grid-column:2;grid-row:1/4;display:grid;gap:18px}
.path{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:26px 24px;text-decoration:none;color:var(--ink);background:var(--panel);
  border:1px solid var(--line);clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px);transition:background .2s}
.path:hover{background:rgba(14,32,72,.85)}
.path b{display:block;font:500 22px/1.2 var(--sans);margin-bottom:6px}
.path span span{color:var(--soft);font-size:16px}
.hex{width:76px;height:84px;display:grid;place-items:center;color:var(--cyan);background:rgba(34,211,238,.06);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);box-shadow:inset 0 0 0 2px var(--cyan)}
.hex::before{content:none}.hex .ic{width:32px;height:32px}
.path .chev{color:var(--soft)}
.steps{grid-column:1;display:grid;grid-template-columns:1fr 1fr;gap:10px;list-style:none;padding:0;margin:28px 0 0}
.steps li{display:flex;gap:10px;align-items:center;color:var(--soft);font-size:15px;padding:10px 12px;border:1px solid var(--line2)}
.steps b{font:600 14px/1 var(--tech);color:var(--cyan);width:24px;height:24px;display:grid;place-items:center;border:1px solid var(--cyan);flex:none}

.fgrid{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fcard{padding:24px 22px 26px;background:var(--panel);border:1px solid var(--line);clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.fic{width:34px;height:34px;color:var(--cyan);filter:drop-shadow(0 0 8px rgba(34,211,238,.45))}
.fcard h3{font:600 17px/1.25 var(--sans);text-transform:uppercase;letter-spacing:.02em;margin:18px 0 8px}
.fcard p{margin:0;color:var(--soft);font-size:15px;line-height:1.5}

.tiles{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:40px}
.tile{position:relative;display:block;aspect-ratio:1/1.08;overflow:hidden;border:1px solid var(--line);text-decoration:none;color:#fff;
  clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px)}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile:hover img{transform:scale(1.05)}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,8,20,.95) 0%,rgba(3,8,20,.35) 45%,transparent 70%)}
.tile>span{position:absolute;z-index:1;left:16px;right:14px;bottom:14px;display:flex;justify-content:space-between;align-items:flex-end;gap:8px;font:600 16px/1.2 var(--sans);text-transform:uppercase;letter-spacing:.02em}
.tile[aria-current="true"]{box-shadow:inset 0 0 0 2px var(--cyan);border-color:var(--cyan)}
.ipanels{margin-top:18px}
.ipanel{padding:24px 26px;background:var(--panel);border:1px solid var(--line);display:grid;grid-template-columns:220px 1fr;gap:6px 28px;align-items:start}
.ipanel+.ipanel{margin-top:12px}
.js .ipanel{display:none}.js .ipanel.on{display:grid}
.ipanel h3{font:400 30px/1.05 var(--serif);text-transform:uppercase;margin:0;grid-row:1/3}
.ipan-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:14px}
.ipan-cta .tlink{font-size:13px}
.ipanel .fine{grid-column:2;margin-top:8px}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:9px}
.ticks li{display:flex;gap:10px;align-items:flex-start;color:#dfe7f8;font-size:15.5px}.ticks .ic{color:var(--cyan);width:18px;height:18px;margin-top:3px}

.pcards{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:40px;max-width:980px}
.pcard{padding:30px 28px;background:var(--panel);border:1px solid var(--line);display:flex;flex-direction:column;clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px)}
.pcard.hot{border-color:rgba(168,85,247,.7);background:linear-gradient(160deg,rgba(76,29,149,.32),rgba(9,20,46,.8) 55%)}
.pic{width:38px;height:38px;color:var(--cyan)}.hot .pic{color:#c4a1ff}
.pcard h3{font:500 22px/1.2 var(--sans);margin:16px 0 10px}
.price{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.price b{font:500 52px/1 var(--sans);letter-spacing:-.02em}.price span{color:var(--soft)}
.pnote{color:var(--mute);font-size:14.5px;margin:10px 0 20px}
.pcard .ticks{margin-bottom:26px;flex:1}
.offer{margin:22px 0 0;max-width:980px;color:#e6dcff;padding:14px 18px;border:1px solid rgba(168,85,247,.5);background:rgba(76,29,149,.18)}
.plans{margin-top:18px;max-width:980px;border:1px solid var(--line2)}
.plans summary{cursor:pointer;padding:14px 18px;font:600 14px/1.2 var(--tech);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan)}
.tbl{overflow-x:auto;padding:0 18px 18px}
.tbl table{border-collapse:collapse;width:100%;min-width:640px;font-size:14.5px}
.tbl caption{text-align:left;color:var(--mute);padding-bottom:10px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:10px 12px 10px 0;border-top:1px solid var(--line2)}
.tbl th{font-weight:600;width:28%}.tbl td span{display:block;color:var(--mute);font-size:13px}
.compare{margin-top:34px;max-width:980px}
.compare h3{font:600 15px/1 var(--tech);letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin:0 0 12px}
.compare dl{margin:0;display:grid;border:1px solid var(--line2)}
.compare dl>div{display:grid;grid-template-columns:200px 1fr 1fr;gap:16px;padding:12px 16px;border-top:1px solid var(--line2)}.compare dl>div:first-child{border-top:0}
.compare dt{color:var(--mute);font-size:14.5px}.compare dd{margin:0;font-size:15px}

.managed .mform{margin-top:30px;max-width:820px;display:grid;gap:16px;padding:28px;background:var(--panel);border:1px solid var(--line)}
.mform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mform label>span{display:block}.mform label{display:grid;gap:6px;font-size:14.5px;color:var(--soft)}
.mform small{color:var(--mute)}
.mform input:not([type=checkbox]),.mform select,.mform textarea{font:400 16px/1.3 var(--sans);color:var(--ink);background:#061127;border:1px solid rgba(148,163,209,.32);padding:12px 13px;border-radius:0;width:100%}
.mform fieldset{border:1px solid var(--line2);padding:12px 14px;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mform legend{color:var(--soft);font-size:14.5px;padding:0 6px}
.chk{display:flex!important;grid-template-columns:none;gap:10px!important;align-items:flex-start;color:#dfe7f8!important}
.chk input{width:18px;height:18px;accent-color:var(--cyan);margin-top:2px;flex:none}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.mform .btn{justify-self:start;min-width:220px}
.fstat{margin:0;min-height:1.4em;font-size:15px}.fstat.ok{color:#7ef2c8}.fstat.err{color:#ff9aa8}
.note{color:var(--soft)}

.final{position:relative;isolation:isolate;margin-top:110px;padding:150px 20px 70px;text-align:center;overflow:hidden;border-top:1px solid var(--line2)}
.final-img{position:absolute;inset:0;z-index:-1}.final-img img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.85}
.final-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,var(--bg) 0%,rgba(4,10,24,.35) 30%,rgba(4,10,24,.62) 62%,var(--bg) 100%)}
.final .h2{font-size:clamp(42px,5.6vw,76px)}
.ready{display:inline-flex;gap:18px;align-items:center;text-align:left;margin:0 auto 54px;padding:18px 24px;background:rgba(6,15,36,.78);border:1px solid var(--line);clip-path:polygon(16px 0,100% 0,100% calc(100% - 16px),calc(100% - 16px) 100%,0 100%,0 16px)}
.ready b{display:block;font:600 15px/1.2 var(--tech);letter-spacing:.14em;text-transform:uppercase}.ready span{color:var(--soft);font-size:15px}
.rbars .ic{width:34px;height:34px;color:#fff}
.fctas{display:grid;gap:16px;justify-content:center;grid-template-columns:minmax(0,360px);margin:36px auto 0}
.fctas .tlink{justify-self:center;margin-top:6px}
.wordmark{margin:56px 0 0;line-height:0}.wordmark img{display:inline-block;height:84px;width:auto;max-width:100%}

.foot{max-width:var(--wrap);margin:0 auto;padding:34px 20px 120px;border-top:1px solid var(--line2);color:var(--mute);font-size:14.5px}
.foot p{margin:8px 0}.foot a{color:var(--soft)}
.stats .chk{color:var(--mute)!important;font-size:14px}

.mcta{display:none}

/* tablet */
@media (max-width:1100px){
  .nav ul{gap:18px}.nav-sep{padding-left:14px}
  .fgrid{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(3,1fr)}.tile.wide{grid-column:span 2;aspect-ratio:auto}
  .platforms{grid-template-columns:1fr}.phones{height:560px;max-width:560px;margin:0 auto;width:100%}
  .how{grid-template-columns:1fr}.paths{grid-column:1;grid-row:auto;margin-top:28px}.steps{grid-column:1}
}
@media (max-width:900px){
  .burger{display:block}
  .nav nav{position:absolute;top:100%;left:0;right:0;background:#050b1a;box-shadow:0 18px 40px rgba(0,0,0,.6);border-bottom:1px solid var(--line2);display:none}
  .nav.open nav{display:block}.nav.open .burger .ic:not(.x){display:none}.nav.open .burger .x{display:block}
  .nav.open{background:#050b1a;backdrop-filter:none;-webkit-backdrop-filter:none}
  .nav ul{flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px}
  .nav ul li a:not(.btn){display:block;padding:15px 0;font-size:17px;border-bottom:1px solid var(--line2)}
  .nav-sep{padding-left:0;border-left:0}
  .nav ul .btn{margin-top:16px;width:100%}
}
/* phone */
@media (max-width:760px){
  body{font-size:16px}
  .band{padding-top:72px}
  .hero{min-height:auto;display:block}
  .hero-img{position:relative;width:100%;height:460px;margin-bottom:-250px}
  .hero-img img{object-position:70% 20%}
  .hero-img::after{background:linear-gradient(90deg,rgba(4,10,24,.82) 0%,rgba(4,10,24,.25) 60%,transparent),linear-gradient(0deg,var(--bg) 2%,rgba(4,10,24,.6) 42%,transparent 70%)}
  .hero-copy{padding:0 20px 46px}
  .hero h1{font-size:clamp(50px,14.5vw,64px)}
  .hero h1 span:nth-child(2)::after{content:"\A";white-space:pre}
  .lede{font-size:17px;margin-top:18px}
  .ctas{flex-direction:column}.ctas .btn{width:100%}
  .phones{height:470px}.phone{width:210px;border-radius:36px;padding:7px}.phone .scr{border-radius:30px}.p1{left:0}.p2{left:44%;top:56px;width:186px}
  .fgrid{gap:12px}.fcard{padding:18px 16px 20px}.fcard h3{font-size:15px}.fcard p{font-size:14px}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}.tile.wide{grid-column:1/-1;aspect-ratio:2.1/1}.tile>span{font-size:15px;left:12px;bottom:12px}
  .ipanel{grid-template-columns:1fr;padding:20px}.ipanel h3{grid-row:auto;font-size:26px}.ipanel .fine{grid-column:1}
  .pcards{grid-template-columns:1fr}.price b{font-size:46px}
  .compare dl>div{grid-template-columns:1fr 1fr}.compare dt{grid-column:1/-1}
  .path{grid-template-columns:auto 1fr;padding:20px 16px;gap:16px}.path .chev{display:none}.hex{width:62px;height:70px}.path b{font-size:19px}
  .steps{grid-template-columns:1fr}
  .mform{padding:18px}.mform .row,.mform fieldset{grid-template-columns:1fr}.mform .btn{width:100%}
  .final{padding-top:110px}
  .mcta{display:grid;grid-template-columns:1fr 1fr;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:rgba(4,10,24,.94);border-top:1px solid var(--line2);transform:translateY(110%);transition:transform .25s}
  .mcta .btn{min-height:46px;padding:0 10px;font-size:13px;letter-spacing:.1em}
  .mcta.show{transform:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (max-width:760px){.eyebrow{font-size:12px;letter-spacing:.2em}}

@media (max-width:760px){.logo img{height:38px}.wordmark img{height:64px}}