@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --navy:#0E1A2B;   /* night apron */
  --navy2:#15243A;
  --paper:#EEF1F4;  /* cloud grey */
  --white:#FFFFFF;
  --ink:#0E1A2B;
  --muted:#4A586B;
  --line:#D3DAE2;
  --sign:#F2C230;   /* taxiway sign yellow — CTAs, step numbers, sign chips only */
  --link:#1F4E8C;
  --max:1320px;
  --text:880px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 20px/1.6 "Barlow",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
a:focus-visible,button:focus-visible{outline:3px solid var(--sign);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 40px}
h1,h2,h3{font-family:"Barlow Condensed","Barlow",sans-serif;font-weight:700;line-height:1.02;margin:0;letter-spacing:-.005em}
h2{font-size:clamp(40px,5vw,68px);max-width:20ch}
h3{font-size:clamp(28px,2.6vw,36px);line-height:1.08}
p{margin:0 0 1em;max-width:62ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font:600 18px/1 "Barlow";text-decoration:none;padding:16px 24px;border:2px solid transparent;cursor:pointer}
.btn-sign{background:var(--sign);color:#000}
.btn-sign:hover{background:#FFD24D}
.btn-line{border-color:currentColor;color:inherit;background:transparent}
.btn-ink{background:var(--navy);color:#fff}
.btn-ink:hover{background:#000}
.btn-play{color:#fff;background:transparent;border-color:rgba(255,255,255,.55)}
.btn-play:hover{border-color:#fff}
.btn-play small{font-weight:400;color:#A9B7C8}
.pi{width:0;height:0;border-left:12px solid currentColor;border-top:7px solid transparent;border-bottom:7px solid transparent}

/* header */
.top{position:sticky;top:0;z-index:30;background:#000;color:#fff;border-bottom:1px solid #1d2633}
.top .wrap{display:flex;align-items:center;gap:32px;height:78px}
.brand{display:flex;align-items:baseline;gap:8px;color:#fff;text-decoration:none}
.brand{align-items:center!important;gap:12px!important}.lg-mark{width:50px;height:50px;flex:none}.lg-txt{display:flex;flex-direction:column;align-items:flex-start;color:#fff}.lg-word{height:58px;width:auto;display:block;overflow:visible;margin:-6px 0 -14px -6px;color:#fff}.lg-txt small{font:600 9px/1 "Barlow";letter-spacing:.16em;text-transform:uppercase;color:#C9A44C;margin-top:16px;white-space:nowrap}@media (max-width:600px){.lg-txt small{display:none}.lg-word{height:28px}}
.brand span{font:500 14px/1 "Barlow";color:#9FB0C4}
.top nav{display:flex;gap:28px;margin-left:auto}
.top nav a{color:#D7E0EA;text-decoration:none;font-weight:500;font-size:17px}
.top nav a:hover{color:#fff}
.top .btn{padding:11px 18px;font-size:16px}
@media (max-width:900px){.top nav{display:none}.top .btn{margin-left:auto}.wrap{padding:0 20px}}

/* hero — dark apron band, ambient video, product composite crossing the hard edge */
.hero{position:relative;background:var(--navy);color:#fff;padding:56px 0 0;isolation:isolate;overflow:hidden}
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:230px;background:var(--paper);border-top:1px solid #2A3A52;z-index:-1}
.hero-bg{position:absolute;inset:0 0 230px 0;width:100%;height:calc(100% - 230px);object-fit:cover;opacity:.32;z-index:-2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 65%),linear-gradient(transparent 60%,#000 100%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 30%,#000 65%)}
.hero-txt{position:relative}
.signs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:26px}
.sg{font:700 20px/1 "Barlow Condensed";letter-spacing:.06em;padding:8px 12px}
.sg.dir{background:var(--sign);color:#000}
.sg.loc{background:#000;color:var(--sign);border:3px solid var(--sign);padding:5px 10px}
.hero h1{font-size:clamp(42px,4.9vw,76px);max-width:19ch}
.lead{font-size:clamp(19px,1.5vw,22px);color:#D2DBE6;max-width:52ch;margin:22px 0 30px}
.cta{display:flex;gap:16px;flex-wrap:wrap}
.note{font-size:16px;color:#93A3B7;margin:18px 0 0}

.stage-hero{position:relative;max-width:1480px;margin:56px auto 0;padding:0 40px 64px}
.dev{margin:0;background:#fff;box-shadow:0 30px 80px rgba(5,12,24,.35),0 0 0 1px rgba(14,26,43,.12)}
.dev.desk{border-radius:10px;overflow:hidden}
.dev .bar{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#E6EAEF;border-bottom:1px solid var(--line)}
.dev .bar i{width:11px;height:11px;border-radius:50%;background:#C3CBD5}
.dev .bar span{margin-left:14px;font:500 13px/1 "Barlow";color:#6B7889;background:#fff;padding:5px 12px;border-radius:5px}
.dev.ipad{position:relative;border:16px solid #0c0d0f;border-radius:34px;overflow:hidden;background:#0c0d0f;
  box-shadow:0 0 0 2px #2b2e33,0 0 0 4px #b8bcc2,0 0 0 5px #7d828a,0 40px 90px rgba(5,12,24,.45)}
.dev.ipad::before{content:"";position:absolute;top:-10px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#1d2128;box-shadow:inset 0 0 0 1.5px #2f3640;z-index:3}
.dev.ipad::after{content:"";position:absolute;inset:0;border-radius:18px;background:linear-gradient(115deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 38%);pointer-events:none;z-index:2}
.dev.ipad img{border-radius:18px}
.dev.ipad.show{display:grid}
.dev.ipad.show img{grid-area:1/1;width:100%;animation:ipadshow 9s infinite}
.dev.ipad.show img:nth-child(2){animation-delay:-4.5s}
@keyframes ipadshow{0%,44%{opacity:1}50%,94%{opacity:0}100%{opacity:1}}
@media (prefers-reduced-motion:reduce){.dev.ipad.show img:nth-child(2){display:none}}
.stage-hero .desk{width:84%}
.stage-hero .ipad{position:absolute;right:40px;bottom:24px;width:36%}
@media (max-width:900px){.stage-hero{padding:0 20px 40px;margin-top:48px}.stage-hero .desk{width:100%}.stage-hero .ipad{position:relative;right:auto;width:58%;margin:-22% 0 0 auto;transform:none;border-width:9px;border-radius:20px}}

/* problem */
.problem{padding:120px 0 140px}
.vs{margin-top:56px;border-top:2px solid var(--ink)}
.vs-h,.vs-r{display:grid;grid-template-columns:180px 1fr 1fr;gap:40px;padding:22px 0;border-bottom:1px solid var(--line)}
.vs-h{font:600 15px/1 "Barlow";letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:18px 0}
.vs-r b{font:700 26px/1.1 "Barlow Condensed"}
.vs-r span:nth-child(2){color:var(--muted)}
.vs-r span:nth-child(3){font-weight:500}
@media (max-width:820px){.vs-h{display:none}.vs-r{grid-template-columns:1fr;gap:6px}.vs-r span:nth-child(2)::before{content:"Today — ";font-weight:600}.vs-r span:nth-child(3)::before{content:"With Ramp — ";font-weight:600}}

/* one trip — sticky product stage */
.trip{background:var(--white);padding:140px 0 120px;border-top:1px solid var(--line)}
.sub{color:var(--muted);margin:18px 0 0}
.trip-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:72px;margin-top:72px;max-width:1480px}
.steps{list-style:none;margin:0;padding:0}
.step{position:relative;margin:0 0 56px}
.step .sn{width:42px;height:42px;margin-bottom:18px;display:grid;place-items:center;background:#000;color:var(--sign);border:3px solid var(--sign);font:700 22px/1 "Barlow Condensed"}
.step h3{margin-bottom:14px}
.step p{color:var(--muted);font-size:19px}
.step .m{margin-top:20px}
.stage{display:none}
.trip-cta{margin-top:24px}
.js .trip .step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;margin:0;opacity:.35;transition:opacity .35s}
.js .trip .step.on{opacity:1}
.js .trip .step .m{display:none}
.js .trip .stage{display:block;position:sticky;top:120px;align-self:start;height:calc(100vh - 170px);display:flex;align-items:center}
.js .stage .dev{width:100%;transition:opacity .3s}
.js .stage .dev.ipad{width:100%;max-width:100%;margin:0 auto}
.js .stage .dev img{max-height:calc(100vh - 220px);width:100%;object-fit:contain;object-position:top left;background:#fff}
.js .stage .dev.fade{opacity:0}
.js .trip .steps{padding:10vh 0}
@media (max-width:980px){
  .trip-grid{grid-template-columns:1fr;gap:0}
  .js .trip .stage{display:none}
  .js .trip .step{min-height:0;opacity:1;margin:0 0 64px}
  .js .trip .step .m{display:block}
  .js .trip .steps{padding:0}
  .step .dev.ipad.m{max-width:72%}
}

/* roles — tabbed full-width bands */
.roles{padding:140px 0 120px}
.tabs{display:flex;gap:4px;margin-top:48px;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.tabs button{font:700 22px/1 "Barlow Condensed";letter-spacing:.04em;padding:14px 22px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-bottom:4px solid transparent;margin-bottom:-2px}
.tabs button[aria-selected=true]{color:#000;border-bottom-color:var(--sign)}
.tabs-on .tabs{display:flex}
html:not(.tabs-on) .tabs{display:none}
.panels{margin-top:56px;max-width:1480px}
.panel{display:grid;grid-template-columns:1fr minmax(280px,380px);gap:56px;align-items:start;margin-bottom:96px}
.tabs-on .panel{margin-bottom:0}
.ptxt h3{margin-bottom:16px}
.ptxt p{color:var(--muted);font-size:19px}
.ptxt ul{margin:20px 0 0;padding:0;list-style:none}
.ptxt li{padding:12px 0 12px 26px;border-top:1px solid var(--line);position:relative;font-size:18px}
.ptxt li::before{content:"";position:absolute;left:0;top:21px;width:10px;height:10px;background:var(--sign);border:2px solid #000}
@media (max-width:980px){.panel{grid-template-columns:1fr;gap:28px}.tabs button{font-size:19px;padding:12px 14px}}

/* outside the office — dark band with three devices */
.outside{background:var(--navy);color:#fff;padding:140px 0;border-top:1px solid #2A3A52}
.outside .sub{color:#B5C2D2}
.trio{display:grid;grid-template-columns:1fr 1.9fr 1fr;gap:48px;align-items:end;margin-top:72px}
.trio figure{margin:0}
.trio figcaption{margin-top:22px;color:#B5C2D2;font-size:17px;line-height:1.5}
.trio figcaption b{display:block;color:#fff;font:700 24px/1.1 "Barlow Condensed";margin-bottom:6px}
.dev.phone{border:10px solid #05080d;border-radius:34px;overflow:hidden;background:#05080d;box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px #2c3a50}
.trio .phone{max-width:260px}
.trio .ipad{box-shadow:0 30px 80px rgba(0,0,0,.45),0 0 0 1px #2c3a50}
.stories{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:96px;padding-top:40px;border-top:1px solid #2A3A52}
.story{position:relative;display:block;color:#fff;text-decoration:none;overflow:hidden}
.story img{aspect-ratio:16/9;object-fit:cover;width:100%;filter:saturate(.85) brightness(.8);transition:filter .3s}
.story:hover img{filter:none}
.story span{position:absolute;left:0;right:0;bottom:0;padding:44px 18px 16px;background:linear-gradient(transparent,rgba(5,10,18,.9));font-size:15px;color:#C9D3DE;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.story span b{flex-basis:100%;color:#fff;font:700 22px/1.1 "Barlow Condensed"}
.story .pi{border-left-width:9px;border-top-width:5px;border-bottom-width:5px;color:var(--sign)}
@media (max-width:980px){.trio{grid-template-columns:1fr 1fr;gap:28px}.trio .mid{grid-column:1/-1;order:-1}.stories{grid-template-columns:1fr}}

/* hour bank */
.hb{padding:140px 0}
.hb-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:72px;align-items:center;max-width:1480px}
.hb-txt p{color:var(--muted);margin-top:20px}
.flow{list-style:none;counter-reset:f;margin:32px 0 0;padding:0}
.flow li{counter-increment:f;position:relative;padding:14px 0 14px 54px;border-top:1px solid var(--line);color:var(--muted);font-size:18px}
.flow li::before{content:counter(f);position:absolute;left:0;top:14px;width:34px;height:34px;display:grid;place-items:center;background:#000;color:var(--sign);border:2px solid var(--sign);font:700 18px/1 "Barlow Condensed"}
.flow b{display:block;color:var(--ink);font-weight:600}
.hb-vis{position:relative;padding-bottom:40px}
.hb-vis .desk{width:86%}
.hb-vis .phone{position:absolute;right:0;bottom:0;width:24%}
@media (max-width:980px){.hb-grid{grid-template-columns:1fr;gap:40px}}

/* assistant */
.assist{background:var(--white);padding:140px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.as-grid{display:grid;grid-template-columns:minmax(300px,420px) 1fr;gap:72px;align-items:center;max-width:1480px}
.as-grid p{color:var(--muted);margin-top:20px}
@media (max-width:980px){.as-grid{grid-template-columns:1fr;gap:36px}}

/* set-up */
.setup{padding:140px 0 100px}
.steps3{list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin:56px 0 0;padding:0}
.steps3 li{counter-increment:s;border-top:4px solid #000;padding-top:22px;color:var(--muted);font-size:18px}
.steps3 li::before{content:"0" counter(s);display:block;font:700 18px/1 "Barlow Condensed";color:#000;background:var(--sign);width:max-content;padding:5px 8px;margin-bottom:16px}
.steps3 b{display:block;color:var(--ink);font:700 28px/1.1 "Barlow Condensed";margin-bottom:10px}
.fine{color:var(--muted);font-size:16px;margin-top:32px}
@media (max-width:820px){.steps3{grid-template-columns:1fr}}

/* pricing — black departures board */
.pricing{background:#000;color:#fff;padding:140px 0}
.board{margin-top:56px;border-top:2px solid var(--sign)}
.board .row{display:grid;grid-template-columns:260px 280px 1fr;gap:32px;padding:26px 0;border-bottom:1px solid #222b36;align-items:baseline}
.board .what{font:700 26px/1.1 "Barlow Condensed";color:var(--sign);letter-spacing:.02em}
.board .price{font:700 40px/1 "Barlow Condensed"}
.board .price small{font:400 16px "Barlow";color:#9FB0C4}
.board .more{color:#B5C2D2;font-size:18px}
.setupline{margin-top:28px;color:#D7E0EA}
.incl{columns:2;gap:48px;margin:36px 0 0;padding:0;list-style:none;color:#D7E0EA;font-size:18px}
.incl li{break-inside:avoid;padding:8px 0 8px 22px;position:relative}
.incl li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:8px;background:var(--sign)}
.vat{color:#8E9BAA;font-size:15px;margin-top:20px}
@media (max-width:820px){.board .row{grid-template-columns:1fr;gap:8px}.incl{columns:1}}

/* security */
.security{padding:140px 0}
.sec-grid{display:grid;grid-template-columns:minmax(320px,480px) 1fr;gap:72px;align-items:start;max-width:1480px}
.secl{margin:40px 0 0}
.secl dt{font:700 24px/1.1 "Barlow Condensed";padding-top:18px;border-top:1px solid var(--line)}
.secl dd{margin:8px 0 22px;color:var(--muted);font-size:18px}
@media (max-width:980px){.sec-grid{grid-template-columns:1fr;gap:36px}}

/* faq */
.faq{background:var(--white);padding:140px 0;border-top:1px solid var(--line)}
.qa{margin-top:48px;max-width:var(--text);border-top:2px solid var(--ink)}
.qa details{border-bottom:1px solid var(--line)}
.qa summary{cursor:pointer;list-style:none;padding:22px 40px 22px 0;font:600 21px/1.3 "Barlow";position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:4px;top:16px;font:400 30px/1 "Barlow";color:var(--muted)}
.qa details[open] summary::after{content:"–"}
.qa details p{color:var(--muted);margin:0 0 24px;font-size:19px}

/* placeholder + close + footer */
.next{padding:80px 0}
.todo{color:var(--muted);font-style:italic;border:1px dashed var(--line);padding:24px;max-width:none}
.close{background:var(--navy);color:#fff;padding:140px 0;border-top:1px solid #2A3A52}
.close h2{max-width:16ch;margin-bottom:40px}
.btns{display:flex;gap:16px;flex-wrap:wrap}
.foot{background:#000;color:#8E9BAA;font-size:15px;padding:28px 0}
.foot .wrap{display:flex;gap:28px;flex-wrap:wrap}
.foot a{color:#C9D3DE}

/* lightbox */
.lb{border:0;padding:0;background:transparent;max-width:min(1200px,94vw);width:100%;position:fixed;overflow:visible}
.lb::backdrop{background:rgba(3,6,10,.88);backdrop-filter:blur(3px)}
.lb video{display:block;width:100%;height:auto;max-height:86vh;background:#000;border-radius:6px}
.lb-x{position:absolute;right:10px;top:10px;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff;font:600 28px/1 "Barlow";cursor:pointer}

/* v10: demo request form */
.dm{border:0;padding:0;background:#14171b;color:#fff;width:min(640px,94vw);max-height:92vh;overflow:auto;border-top:6px solid var(--sign);position:fixed}
.dm:target{display:block;inset:0;margin:auto;height:fit-content;z-index:50}
.dm::backdrop{background:rgba(3,6,10,.88);backdrop-filter:blur(3px)}
.dm .lb-x{display:grid;place-items:center;text-decoration:none}
.dm-f,.dm-ok{padding:34px 34px 30px}
.dm h2{font-size:clamp(34px,5vw,46px);margin:6px 0 6px}
.dm .where{color:#9FB0C4}
.dm-sub{color:#C9D3DE;margin:0 0 22px}
.dm-g{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.dm label{display:block;font:600 15px/1.3 "Barlow";color:#DDE4EB;margin:0 0 16px}
.dm label small{font-weight:400;color:#8E9BAA}
.dm input,.dm textarea{display:block;width:100%;box-sizing:border-box;margin-top:6px;font:400 17px/1.4 "Barlow";color:#fff;background:#0c0e11;border:2px solid #39434f;padding:11px 12px;border-radius:0}
.dm input:focus,.dm textarea:focus{outline:none;border-color:var(--sign)}
.dm textarea{resize:vertical}
.dm-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.dm-a{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:6px}
.dm-a .btn{border:0}
.dm-st{margin:0;color:#FFB4A8;font-size:16px}
.dm-ok .btn{margin-top:8px}
@media (max-width:560px){.dm-g{grid-template-columns:1fr}.dm-f,.dm-ok{padding:28px 20px 24px}}

.js .stage .dev.ipad img{max-height:none;object-fit:cover;background:transparent}