@import url('/frontend/landing/compat.css');
/* THE LANDING PAGES' GRAMMAR — one set, shared by index.html and app.html
   (founder/534, 536): the section, its wrap, the headline sizes, the two-column
   row, the ONEWAY + word lockup with no rule between them, and one button
   shape, a small rounded pill. A page's own identity lives in the page. */
/* ── the page grammar, one set ───────────────────────────────────────── */
.lp{position:relative;padding:72px 0 0;padding:max(72px,min(11vw,128px)) 0 0;padding:clamp(72px,11vw,128px) 0 0}
/* NOTHING SITS ON THE FOOTER (founder/829, 2026-10-17: "needs to be cleaned and spaced out on mobile devices"). A section
   has room above it only, so a page that ends on one (the landing's questions, Contact's company line) set its last
   line on the footer's hairline: 0px at 390, against 90px on every page that ends on its close. The last section
   before the one footer keeps the close's own room under it. */
main > .lp:last-child,body > .lp:has(~ footer.owfoot):not(:has(~ .lp)){padding-bottom:90px;padding-bottom:max(90px,min(11vw,120px));padding-bottom:clamp(90px,11vw,120px)}
.lp-wrap{max-width:1080px;margin:0 auto;padding:0 20px;padding:0 max(20px,min(5vw,48px));padding:0 clamp(20px,5vw,48px)}
.lp-h2{font-family:var(--font-display,var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif));font-weight:900;letter-spacing:-.035em;line-height:1.04;font-size:34px;font-size:max(34px,min(5vw,60px));font-size:clamp(34px,5vw,60px);margin:0;color:#fff}
.lp-h3{font-family:var(--font-display,var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif));font-weight:850;letter-spacing:-.03em;line-height:1.08;font-size:26px;font-size:max(26px,min(3.4vw,40px));font-size:clamp(26px,3.4vw,40px);margin:0;color:#fff}
/* WHITE, AND PART OF THE STATEMENT (the founder, 2026-10-09: "i want it to be all white rather then divided into
   smaller chunks of grey sidetext i wanna move away from that"). Was 16-18px at 74% white. */
.lp-p{font-size:18px;font-size:max(18px,min(1.9vw,22px));font-size:clamp(18px,1.9vw,22px);line-height:1.5;font-weight:500;color:#fff;margin:20px 0 0;max-width:42ch}
.lp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:36px;gap:max(36px,min(6vw,80px));gap:clamp(36px,6vw,80px)}
.lp-two + .lp-two{margin-top:72px;margin-top:max(72px,min(10vw,120px));margin-top:clamp(72px,10vw,120px)}
.lp-flip > :first-child{order:2}
/* the lockup: the wordmark and the product's word, no rule between them (534) */
.lk{display:inline-flex;align-items:baseline;gap:.34em;margin:0 0 18px}html.ow-nogap .lk>*+*{margin-left:.34em}
.lk img{height:20px;height:max(20px,min(2.2vw,26px));height:clamp(20px,2.2vw,26px);width:auto;display:block;align-self:center}
.lk span{font-family:var(--font-display,var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif));font-style:italic;font-weight:900;letter-spacing:-.03em;font-size:22px;font-size:max(22px,min(2.5vw,30px));font-size:clamp(22px,2.5vw,30px);line-height:1;color:rgba(255,255,255,.92)}
/* ONE BUTTON SHAPE for the whole page: a rounded pill, small, sleek (534) */
/* THE VISUAL ANCHOR, ONE VOCABULARY FOR EVERY PAGE (the founder, 2026-10-19: "i dont like how the page goes from
   beautfiul header text to subtext everywhere and it gives the eye no where to lead"; agreed on lane A with the system
   pages and the site writer, whose sites wear the same five as .owl-anchor--*). Between a section's headline and its
   words stands one thing to look at: a real screenshot (shot), a big number (number), a picture (picture), a product
   moment (moment) or a drawing (drawing). No two neighbouring sections use the same kind, and none is a headline and
   then words alone. The anchor follows its section's alignment (its contents are inline). */
.lp-anchor{display:block;margin:24px 0 22px;margin:max(24px,min(3.4vw,40px)) 0 max(22px,min(3vw,34px));margin:clamp(24px,3.4vw,40px) 0 clamp(22px,3vw,34px)}
.lp-anchor img,.lp-anchor svg{display:inline-block;vertical-align:top;max-width:100%;height:auto}
.lp-anchor--shot img{border-radius:10px;border-radius:max(10px,min(1.4vw,16px));border-radius:clamp(10px,1.4vw,16px);box-shadow:0 30px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.lp-anchor--picture img{border-radius:14px;border-radius:max(14px,min(2vw,22px));border-radius:clamp(14px,2vw,22px)}
.lp-anchor--number{font-family:var(--font-display,var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif));font-weight:900;font-size:54px;font-size:max(54px,min(8vw,104px));font-size:clamp(54px,8vw,104px);line-height:.9;letter-spacing:-.045em;color:#fff}
.lp-anchor--drawing{color:rgb(var(--land-hue-0,93,226,255))}
.lp-anchor--drawing svg{width:104px;width:max(104px,min(14vw,160px));width:clamp(104px,14vw,160px)}
/* the anchor's own parts, for the pages beyond the landing (the system pages' session) (the system pages' session, 2026-10-19):
   a MOMENT is one product part, cut close from the real screen and framed as a piece of it; a phone SHOT stands at a
   phone's width; a NUMBER says what it counts under it; a SHOT names its records as samples; a wide DRAWING is a
   diagram of how the parts move (its words in the page's face); a STRIP is the industries side by side */
.lp-anchor--moment img{border-radius:12px;border-radius:max(12px,min(1.6vw,18px));border-radius:clamp(12px,1.6vw,18px);background:rgba(255,255,255,.02);box-shadow:0 24px 64px rgba(0,0,0,.45),0 0 0 1px rgba(var(--land-hue-0,93,226,255),.28)}
.lp-anchor--phone img{width:220px;width:max(220px,min(26vw,300px));width:clamp(220px,26vw,300px);border-radius:26px;border-radius:max(26px,min(3vw,36px));border-radius:clamp(26px,3vw,36px)}
.lp-anchor--number .lp-anchor-label{display:block;margin-top:12px;font-size:var(--lp-fs-caption,15px);font-weight:600;
  line-height:var(--lp-lh-caption,1.4);letter-spacing:0;color:rgba(255,255,255,.78)}
.lp-anchor-cap{margin-top:12px;color:rgba(255,255,255,.6)}
.lp-anchor--wide svg{width:100%;width:min(100%,520px)}
.lp-anchor--wide svg.lp-rings{width:72vw;width:min(72vw,280px)}
.lp-anchor--strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;gap:max(8px,min(1.2vw,16px));gap:clamp(8px,1.2vw,16px)}
.lp-anchor--strip img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:left top}
.lp-anchor--strip .lp-anchor-cap{grid-column:1/-1}
@media(max-width:600px){.lp-anchor--strip{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* A TWO-COLUMN SECTION WITH ITS ANCHOR BESIDE IT (the App page): the headline, then the anchor, then the words, in that
   order in the page; side by side, the anchor stands beside the headline and the words (on the side .lp-flip names);
   stacked on a phone, it stands between them */
.lp-anchored{grid-template-areas:"head anchor" "words anchor";grid-template-rows:auto 1fr;row-gap:0}
.lp-anchored.lp-flip{grid-template-areas:"anchor head" "anchor words"}
.lp-anchored.lp-flip > :first-child{order:0}
.lp-anchored > .lp-head{grid-area:head;align-self:end}
.lp-anchored > .lp-words{grid-area:words;align-self:start}
.lp-anchored > .lp-anchor{grid-area:anchor;margin:0;align-self:center}
.lp-anchor--device img{box-shadow:none}
@media(max-width:820px){
  .lp-anchored,.lp-anchored.lp-flip{grid-template-areas:"head" "anchor" "words";grid-template-rows:auto}
  .lp-anchored > .lp-anchor{margin:26px 0;margin:max(26px,min(7vw,40px)) 0;margin:clamp(26px,7vw,40px) 0}
}
.lp-acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}html.ow-nogap .lp-acts>*{margin-right:10px}html.ow-nogap .lp-acts>*{margin-bottom:10px}
.lp-acts--c{justify-content:center}
/* ONE OUTLINED BUTTON ON EVERY LANDING PAGE (S20's Outlined kind, amended 2026-10-16; founder/790: "they must have the
   border around the button i dont want any buttons that are just loose text use the canonical button surfaces").
   Every bordered button on the landing and its pages is the bar's Sign in (oneway-bar.css .owbar-signin), exactly: one
   height, a pill, 14px at 600, no tracking, a 1px ring in the words' own colour, S20's soft wash on hover, no lift and
   no glow. From the shared tokens (oneway-popit.css "ONE BUTTON LANGUAGE", --ow-b-*) where the page loads them, their
   values where it does not. Written once, here, on the pill: `.pill pill--solid` (the landing's sections and plans, its
   hero doors and its product buttons; Our Mission; the OS pages) and `.pill ow-popit-btn` (the map pages' second
   command, which the shared language would draw as words on nothing, so it is held to `a.pill.ow-popit-btn`'s weight
   over oneway-popit.css). It was 40px at 650 and -.005em with a ring at 70%, beside a 36px Sign in on the same page
   (round 2, 2026-10-16); index.html's own copy of this rule and site-page.css's 40px `a.pill.ow-popit-btn` are gone. */
/* THE SAME SURFACE WITHOUT :is() (Chrome 88): a Chromebook past its updates runs Chrome 76-87, which drops the whole
   :is() rule, and the hero's two doors lost their ring and stood as two more bare wordmarks under the hero's (the
   founder, 2026-10-19: "on chromebooks the wordmark at the top is duplicated"). The :is() rule after it keeps its weight
   where it is understood; held by tools/probe/wordmark-one.cjs. */
html body .pill,html body a.pill.ow-popit-btn{align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  min-height:var(--ow-b-h,36px);padding:0 var(--ow-b-px,16px);border:1px solid currentColor!important;border-radius:var(--ow-b-r,999px)!important;
  background:transparent;background-image:none;box-shadow:none;transform:none;text-decoration:none;text-shadow:none;
  color:#fff;font-family:var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif);font-size:14px;font-weight:600;font-style:normal;line-height:1.2;letter-spacing:0;
  cursor:pointer;transition:background .2s}
html.ow-old body :matches(.pill,a.pill.ow-popit-btn){align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ow-b-h,36px);padding:0 var(--ow-b-px,16px);border:1px solid currentColor!important;border-radius:var(--ow-b-r,999px)!important;background:transparent;background-image:none;box-shadow:none;transform:none;text-decoration:none;text-shadow:none;color:#fff;font-family:var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif);font-size:14px;font-weight:600;font-style:normal;line-height:1.2;letter-spacing:0;cursor:pointer;transition:background .2s}
html.ow-old body :-webkit-any(.pill,a.pill.ow-popit-btn){align-items:center;justify-content:center;gap:8px;box-sizing:border-box;min-height:var(--ow-b-h,36px);padding:0 var(--ow-b-px,16px);border:1px solid currentColor!important;border-radius:var(--ow-b-r,999px)!important;background:transparent;background-image:none;box-shadow:none;transform:none;text-decoration:none;text-shadow:none;color:#fff;font-family:var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif);font-size:14px;font-weight:600;font-style:normal;line-height:1.2;letter-spacing:0;cursor:pointer;transition:background .2s}
html body :is(.pill,a.pill.ow-popit-btn){align-items:center;justify-content:center;gap:8px;box-sizing:border-box;
  min-height:var(--ow-b-h,36px);padding:0 var(--ow-b-px,16px);border:1px solid currentColor!important;border-radius:var(--ow-b-r,999px)!important;
  background:transparent;background-image:none;box-shadow:none;transform:none;text-decoration:none;text-shadow:none;
  color:#fff;font-family:var(--font,'ONEWAY Sans',system-ui,-apple-system,'Segoe UI',sans-serif);font-size:14px;font-weight:600;font-style:normal;line-height:1.2;letter-spacing:0;
  cursor:pointer;transition:background .2s}
/* where it shows and whether its words wrap stay at the pill's own weight, so a page can still put one away on a phone
   (oneway-bar.css, app.html) or let a long one wrap (site-page.css); a.pill is over a.ow-popit-btn's inline-block */
.pill,a.pill{display:inline-flex;white-space:nowrap}
html.ow-old body :matches(.pill,a.pill.ow-popit-btn):hover:not(:disabled){background:rgba(255,255,255,.08);border-color:currentColor!important;box-shadow:none;transform:none;filter:none;opacity:1}
html.ow-old body :-webkit-any(.pill,a.pill.ow-popit-btn):hover:not(:disabled){background:rgba(255,255,255,.08);border-color:currentColor!important;box-shadow:none;transform:none;filter:none;opacity:1}
html body :is(.pill,a.pill.ow-popit-btn):hover:not(:disabled){background:rgba(255,255,255,.08);border-color:currentColor!important;
  box-shadow:none;transform:none;filter:none;opacity:1}
html.ow-old body :matches(.pill,a.pill.ow-popit-btn):focus{outline:2px solid currentColor;outline-offset:2px}
html.ow-old body :-webkit-any(.pill,a.pill.ow-popit-btn):focus{outline:2px solid currentColor;outline-offset:2px}
html body :is(.pill,a.pill.ow-popit-btn):focus-visible{outline:2px solid currentColor;outline-offset:2px}
/* a button that carries the wordmark (the hero's doors, the product buttons): the logo image and its part, never a
   coloured dot (the founder, 2026-10-10: "this should be replaced with the oneway wordmark wherever used and then their
   respective parts"); the part's words are the button's own */
.pill > img{height:12px;width:auto;display:block}
.pill > span{font:inherit;letter-spacing:inherit;white-space:nowrap}
@media(max-width:820px){
  .lp-two{grid-template-columns:minmax(0,1fr)}
  .lp-flip > :first-child{order:0}
}

/* A REAL PHONE — the vendor iPhone 17 Pro frame (fastlane/frameit, MIT) over a
   capture of the running App; measured cutout left 5.333% · top 2.5% ·
   89.333% × 95%, screen corner 15.8% of its width (founder/412). */
.lp-phone{position:relative;width:72vw;width:min(290px,72vw);aspect-ratio:1350/2760;margin:0 auto;filter:drop-shadow(0 50px 60px rgba(0,0,0,.7)) drop-shadow(0 0 60px rgba(139,92,255,.22))}
.lp-phone .scr{position:absolute;left:5.333%;top:2.5%;width:89.333%;height:95%;overflow:hidden;border-radius:15.8% / 7.28%;background:#000}
.lp-phone .scr img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.lp-phone > .fr{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;display:block;pointer-events:none}

/* founder/532: ONEWAY Sans is one cut at every size (founder/469), so its word
   space is the text cut's — 0.262em, where SF Pro Display sets 0.218 at title
   sizes. A headline's words sat apart. The word space is closed at display
   sizes only; the letters keep the spacing he approved. */
.lp-h2,.lp-h3{word-spacing:-.04em}