@font-face{font-family:"Figtree";font-style:normal;font-weight:400 800;font-display:swap;src:url(/fonts/figtree-latin.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/plex-mono-500.woff2) format("woff2")}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600.woff2) format("woff2")}
/* Relay company site. One calm column of bands, one blue accent, rounded
   shapes to match the app. The printed kitchen ticket in the hero is the only
   flourish. Colors are tokens so dark mode only redefines them. */
:root{
  --bg:#ffffff; --bg-soft:#f4f6fa; --bg-band:#eef3fd;
  --ink:#121722; --ink-2:#4a5262; --ink-3:#6b7384;
  --line:#e3e7ee; --card:#ffffff;
  --blue:#0a6cff; --blue-ink:#ffffff; --blue-soft:#e7f0ff; --blue-text:#0a5ad6;
  --paper:#fffdf7; --paper-ink:#1d1d1d; --bezel:#11141a;
  --good:#1f8f4e;
  --deep:#121722; --deep-ink:#f3f5f9; --deep-2:#aab2c0;
  --shadow:0 1px 2px rgba(18,23,34,.06),0 12px 32px rgba(18,23,34,.10);
  --font:"Figtree",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r-lg:28px; --r-md:20px; --r-sm:14px;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root{
  --bg:#0d1016; --bg-soft:#141923; --bg-band:#121a2a;
  --ink:#eef1f6; --ink-2:#b3bac7; --ink-3:#8f98a8;
  --line:#252c39; --card:#171c26;
  --blue:#3d8bff; --blue-ink:#ffffff; --blue-soft:#17284a; --blue-text:#7fb0ff;
  --paper:#f6f3ea; --paper-ink:#1d1d1d; --bezel:#000000;
  --good:#4cc47e;
  --deep:#18243a; --deep-ink:#f3f5f9; --deep-2:#aab2c0;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.45);
  color-scheme:dark}}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.55 var(--font);-webkit-font-smoothing:antialiased}
img{max-width:100%}
[hidden]{display:none!important}
h1,h2,h3{text-wrap:balance;margin:0;letter-spacing:-.02em}
p{margin:0}
a{color:var(--blue-text)}
.wrap{max-width:1120px;margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.band{padding-block:72px}
.band.soft{background:var(--bg-soft)}
.eyebrow{font:600 13px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--blue-text)}
.h2{font-size:clamp(30px,4.4vw,44px);line-height:1.08;font-weight:800}
.lead{font-size:clamp(17px,2vw,20px);color:var(--ink-2);max-width:60ch}
.stack{display:flex;flex-direction:column;gap:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 24px;border-radius:999px;font:700 17px/1 var(--font);text-decoration:none;border:0;cursor:pointer}
.btn.primary{background:var(--blue);color:var(--blue-ink)}
.btn.ghost{background:var(--blue-soft);color:var(--blue-text)}
.btn:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.skip{position:absolute;left:-999px;top:8px}
.skip:focus{left:16px;z-index:20;background:var(--card);padding:8px 12px;border-radius:8px}

/* top bar */
.top{position:sticky;top:0;z-index:5;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:22px;height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 24px/1 var(--font);letter-spacing:-.03em}
.brand svg{width:34px;height:34px}
.nav{display:flex;gap:22px;margin-left:auto}
.nav a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:16px}
.nav a:hover{color:var(--ink)}
.top .actions{display:flex;gap:10px;align-items:center}
.top .btn{min-height:42px;padding:0 18px;font-size:15px}
.signin-link{color:var(--ink);font-weight:700;font-size:15px;text-decoration:none;padding:10px 6px}
@media (max-width:860px){.nav{display:none}.top .actions{margin-left:auto}}
@media (max-width:380px){.top .btn{padding:0 14px}}

/* hero */
.hero{padding-block:56px 40px;overflow:hidden}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:48px;align-items:center}
.hero h1{font-size:clamp(38px,6vw,64px);line-height:1.02;font-weight:800;letter-spacing:-.035em;margin-top:14px}
.hero h1 em{font-style:normal;color:var(--blue)}
.hero .lead{margin-top:18px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.promise{display:flex;flex-wrap:wrap;gap:8px 18px;margin:22px 0 0;padding:0;list-style:none;color:var(--ink-2);font-weight:600;font-size:15px}
.promise li{display:flex;align-items:center;gap:7px}
.promise svg,.checks svg{width:18px;height:18px;color:var(--good);flex:none}
.stage{position:relative;padding:8px 0 36px}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:36px}.hero{padding-top:36px}}

/* device frames */
.ipad{background:var(--bezel);border-radius:30px;padding:12px;box-shadow:var(--shadow);max-width:100%}
.ipad img{display:block;width:100%;height:auto;border-radius:19px}
.iphone{background:var(--bezel);border-radius:40px;padding:9px;box-shadow:var(--shadow);width:min(36%,210px)}
.iphone img{display:block;width:100%;height:auto;border-radius:32px}
.stage .iphone{position:absolute;right:-8px;bottom:0}
.ticket{position:absolute;left:-14px;bottom:-6px;width:min(46%,236px);background:var(--paper);color:var(--paper-ink);font:500 12.5px/1.45 var(--mono);padding:14px 16px 20px;box-shadow:0 10px 26px rgba(0,0,0,.18);transform:rotate(-4deg);
  -webkit-mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x;
          mask:linear-gradient(#000 0 0) top/100% calc(100% - 8px) no-repeat,conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) bottom/12px 8px repeat-x}
.ticket b{font-weight:600}
.ticket .rule{border-top:1px dashed #9a9a9a;margin:7px 0}
.ticket .row{display:flex;gap:10px}
.ticket .row span:first-child{width:1.2em;text-align:right;flex:none}
.ticket .mod{padding-left:2.1em;color:#555}
@media (max-width:520px){.ticket{font-size:11px;padding:10px 12px 16px;left:-4px}.stage .iphone{right:-4px}}

/* facts strip */
.proof{border-block:1px solid var(--line);padding-block:20px}
.proof .wrap{display:flex;flex-wrap:wrap;gap:10px}
.chip{background:var(--bg-soft);border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-weight:600;font-size:14px;color:var(--ink-2)}

/* steps: a real sequence, so they are numbered */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin-top:40px}
.step{display:flex;flex-direction:column;gap:14px}
.step .n{width:36px;height:36px;border-radius:50%;background:var(--blue);color:var(--blue-ink);display:grid;place-items:center;font-weight:800}
.step h3{font-size:22px;font-weight:800}
.step p{color:var(--ink-2)}
.shot{border-radius:var(--r-md);overflow:hidden;border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow)}
.shot img{display:block;width:100%;height:auto}
.paper-card{background:var(--paper);color:var(--paper-ink);border-radius:var(--r-md);border:1px solid var(--line);box-shadow:var(--shadow);font:500 14px/1.5 var(--mono);padding:20px 22px;display:flex;flex-direction:column;gap:2px}
.paper-card .row{display:flex;justify-content:space-between;gap:12px}
.paper-card .rule{border-top:1px dashed #9a9a9a;margin:8px 0}
.paper-card .total{font-weight:600;font-size:16px}
@media (max-width:860px){.steps{grid-template-columns:1fr;gap:40px}}

/* features */
.features{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:40px}
.feat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:10px}
.feat h3{font-size:21px;font-weight:800}
.feat p,.feat ul{color:var(--ink-2)}
.feat ul{margin:4px 0 0;padding-left:20px}
.feat.phone{flex-direction:row;gap:22px;align-items:center}
.feat.phone .txt{display:flex;flex-direction:column;gap:10px;min-width:0;flex:1}
.feat.phone .iphone{width:44%;max-width:200px;flex:none}
@media (max-width:860px){.features{grid-template-columns:1fr}}
@media (max-width:460px){.feat.phone{flex-direction:column;align-items:flex-start}.feat.phone .iphone{width:62%}}

/* why */
.reasons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 40px;margin-top:40px}
.reason{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px}
.reason .ic{width:42px;height:42px;border-radius:12px;background:var(--blue-soft);color:var(--blue-text);display:grid;place-items:center}
.reason .ic svg{width:22px;height:22px}
.reason h3{font-size:19px;font-weight:800}
.reason p{color:var(--ink-2);font-size:16px;margin-top:2px}
@media (max-width:760px){.reasons{grid-template-columns:1fr}}

/* built with you */
.with{background:var(--bg-band)}
.with-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
.flow{display:flex;flex-direction:column;gap:12px;margin:0;padding:0;list-style:none}
.flow li{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 18px;display:flex;gap:14px;align-items:center;font-weight:600}
.flow li span{font:600 13px/1 var(--mono);color:var(--blue-text);background:var(--blue-soft);border-radius:8px;padding:6px 8px;flex:none}
@media (max-width:860px){.with-grid{grid-template-columns:1fr}}

/* faq */
.faq{margin-top:32px;display:flex;flex-direction:column;gap:12px;max-width:820px}
details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 20px}
summary{cursor:pointer;font-weight:700;font-size:18px;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--blue-text);font-weight:700;font-size:22px;line-height:1}
details[open] summary::after{content:"–"}
details p{color:var(--ink-2);padding-bottom:16px;max-width:65ch}

/* contact */
.demo{background:var(--deep);color:var(--deep-ink)}
.demo .eyebrow{color:var(--blue)}
.demo .lead{color:var(--deep-2)}
.demo-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center}
.contact-card{background:var(--card);color:var(--ink);border-radius:var(--r-lg);padding:28px;display:flex;flex-direction:column;gap:14px}
.contact-card h3{font-size:22px;font-weight:800}
.contact-card p{color:var(--ink-2)}
.email-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.email{font:600 18px/1.3 var(--font);user-select:all;word-break:break-all}
.copy{background:var(--blue-soft);color:var(--blue-text);border:0;border-radius:999px;font:700 14px/1 var(--font);padding:10px 14px;cursor:pointer}
@media (max-width:860px){.demo-grid{grid-template-columns:1fr}}

footer{padding-block:32px;border-top:1px solid var(--line);color:var(--ink-3);font-size:14px}
footer .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center}
footer nav{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto}
footer a{color:var(--ink-2);text-decoration:none;font-weight:600}

/* text pages: privacy, terms, sign-in */
.doc{max-width:760px;padding-block:48px 72px}
.doc h1{font-size:clamp(32px,5vw,44px);font-weight:800;line-height:1.1}
.doc .updated{color:var(--ink-3);margin-top:10px}
.doc h2{font-size:22px;font-weight:800;margin-top:36px}
.doc p,.doc li{color:var(--ink-2)}
.doc p{margin-top:12px;max-width:68ch}
.doc ul{margin:12px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:8px}
.doc strong{color:var(--ink)}
.signin{max-width:520px;padding-block:64px 96px}
.signin h1{font-size:clamp(30px,5vw,40px);font-weight:800;line-height:1.1}
.signin form{margin-top:28px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:var(--shadow)}
.signin label{font-weight:700}
.addr{display:flex;align-items:center;background:var(--bg-soft);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.addr:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.addr input{flex:1;min-width:0;border:0;background:transparent;font:500 18px/1.3 var(--font);color:var(--ink);padding:14px 4px 14px 14px;outline:none}
.addr span{color:var(--ink-3);font-weight:600;padding-right:14px;white-space:nowrap}
.hint{color:var(--ink-3);font-size:15px}
.error{color:#c0362c;font-weight:600;font-size:15px}
@media (prefers-color-scheme: dark){.error{color:#ff8a80}}
@media (prefers-reduced-motion:no-preference){.btn{transition:transform .12s ease}.btn:active{transform:scale(.97)}}
.mt-12{margin-top:12px}.mt-20{margin-top:20px}