/* OneLoop v3 - shared styles.
 * Each page keeps its own design CSS in a <style> block in its <head> (exactly as designed);
 * this file adds only what every page shares: the self-hosted font, the nav (incl. mobile menu),
 * the desktop page scale, the release of fixed design sizes below desktop width, and the Beta sign-up form.
 * Bump ?v=N in the pages when you change this file (see .htaccess caching).
 */

/* ── Font: Urbanist (variable, self-hosted) ─────────────────────────────────── */
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/urbanist-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Urbanist';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/urbanist-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ── Nav ────────────────────────────────────────────────────────────────────── *
 * The header is sticky (position set inline on each page). Its transparent strip
 * lets clicks through to the page; only the nav pill catches them. Once the page
 * scrolls, site.js adds .is-scrolled and the pill turns to a lighter frosted glass
 * so the page shows through it. The pill keeps its size, so nothing below jumps.   */
html{scroll-padding-top:100px}                   /* anchor targets land below the sticky nav */
.site-header{pointer-events:none}
.site-header .site-nav{pointer-events:auto;transition:background-color .35s ease,box-shadow .35s ease,border-color .35s ease}
.site-header.is-scrolled .site-nav{background:rgba(255,255,255,0.58);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);border-color:rgba(255,255,255,0.7);box-shadow:inset 0 1px 0 rgba(255,255,255,0.8),0 0 0 1px rgba(16,40,80,0.07),0 16px 40px -22px rgba(16,42,90,0.38)}
.navl{color:#1f2433;text-decoration:none;font-size:14px;font-weight:600;transition:color .15s ease}
.navl:hover{color:#2952da}
.navl.is-active{color:#2952da}
.nav-toggle{display:none;align-items:center;justify-content:center;width:42px;height:42px;padding:0;border-radius:12px;background:rgba(255,255,255,0.8);border:1px solid rgba(31,36,51,0.15);color:#1f2433;cursor:pointer}
.nav-toggle .i-close,.site-nav.open .nav-toggle .i-open{display:none}
.site-nav.open .nav-toggle .i-close{display:block}
.site-nav .nav-login-m{display:none}
@media (max-width:900px){
  .site-nav{justify-content:space-between}
  .nav-toggle{display:inline-flex}
  .site-nav .nav-links{display:none !important;order:3;flex:1 1 100% !important;flex-direction:column;gap:0 !important;padding:6px 0 2px;border-top:1px solid rgba(16,40,80,0.08)}
  .site-nav.open .nav-links{display:flex !important}
  .site-nav .nav-links .navl{padding:12px 4px;font-size:16px}
  .site-nav .nav-login-m{display:block}
  .site-nav .nav-actions .navl{display:none}
  .site-header.is-scrolled .site-nav.open{background:rgba(255,255,255,0.94)}   /* open menu: links stay legible over the page */
}
@media (max-width:420px){
  .site-header{padding:16px !important}
  .site-nav{gap:10px 10px !important;padding:10px 10px 10px 14px !important}
}
@media (max-width:374px){   /* smallest phones: logo, main button and menu button stay on one row */
  .site-nav{gap:8px !important}
  .site-nav>a[href="/"]{gap:7px !important}
  .site-nav>a[href="/"] svg{width:30px;height:17px}
  .site-nav>a[href="/"] span{font-size:17px !important}
  .site-nav .nav-actions{gap:6px !important}
  .site-nav .nav-actions .btn{padding:9px 11px !important;font-size:13px}
  .nav-toggle{width:38px;height:38px}
}

/* ── Page scale ─────────────────────────────────────────────────────────────── *
 * On desktop the page content renders at 90%; the top nav stays at 100%.
 * Heroes that tuck under the nav (margin-top: -84px) keep the full 84px overlap
 * by dividing the pull-up by the same factor.                                   */
@media (min-width:901px){
  body>.ol>:not(.site-header){zoom:0.9}
  body>.ol>.site-header+[style*="margin-top: -84px"]{margin-top:calc(-84px / 0.9) !important}
}

/* ── Section spacing (every page except home) ──────────────────────────────── *
 * Sections carry their designed padding as --pt / --pb. Outside the home page
 * (.ol-home) the gaps between sections are tightened: 65% of the design on desktop,
 * a little tighter than before on tablets and phones. The first section keeps its top
 * padding (that is the space under the nav, not a gap between sections), and fading
 * dark bands keep theirs, because the fade itself is part of the gap.            */
@media (min-width:901px){
  body>.ol:not(.ol-home)>section[style*="--pt"]{padding-top:calc(var(--pt,0px) * 0.65) !important;padding-bottom:calc(var(--pb,0px) * 0.65) !important}
  body>.ol:not(.ol-home)>.site-header+section[style*="--pt"]{padding-top:var(--pt) !important}
  body>.ol:not(.ol-home)>section.band-fade{padding-top:var(--pt,0px) !important;padding-bottom:var(--pb,0px) !important}
}
@media (max-width:900px){
  body>.ol:not(.ol-home)>section[style*="--pt"]{padding-top:calc(var(--pt,0px) * 0.5) !important;padding-bottom:calc(var(--pb,0px) * 0.5) !important}
  body>.ol:not(.ol-home)>section.band-fade{padding-top:calc(var(--pt,0px) * 0.62) !important;padding-bottom:calc(var(--pb,0px) * 0.62) !important}
  body>.ol:not(.ol-home)>.site-header+section[style*="--pt"]:not([style*="margin-top: -84px"]){padding-top:calc(var(--pt) * 0.62) !important}   /* space under the nav, not between sections */
}
@media (max-width:600px){
  body>.ol:not(.ol-home)>section[style*="--pt"]{padding-top:calc(var(--pt,0px) * 0.38) !important;padding-bottom:calc(var(--pb,0px) * 0.38) !important}
  body>.ol:not(.ol-home)>section.band-fade{padding-top:calc(var(--pt,0px) * 0.5) !important;padding-bottom:calc(var(--pb,0px) * 0.5) !important}
  body>.ol:not(.ol-home)>.site-header+section[style*="--pt"]:not([style*="margin-top: -84px"]){padding-top:calc(var(--pt) * 0.46) !important}   /* space under the nav, not between sections */
}

/* ── Card shadows across section edges ─────────────────────────────────────── *
 * A card near the edge of a section casts a soft shadow into the next one. Light
 * sections sit above solid and dark ones (.band-fade, .sec-solid), so that shadow is
 * drawn over the next section's background instead of being cut off in a hard line.
 * Sections marked .clip-x only clip sideways (their decorations are wider than the
 * screen), so the shadows of the cards inside them can spill up and down.          */
body>.ol>section{position:relative;z-index:1}
body>.ol>section.band-fade,body>.ol>section.sec-solid{z-index:0}
@supports (overflow:clip){.ol .clip-x{overflow-x:clip !important;overflow-y:visible !important}}
@media (max-width:900px){   /* a dark band that runs into another: room below for its last card's shadow */
  body>.ol:not(.ol-home)>section.band-fade.no-fade-bottom{padding-bottom:84px !important}
}

/* ── Dark bands that fade in and out of the light page (as on the home page) ── *
 * Add .band-fade to a full-width dark section; .no-fade-top / .no-fade-bottom join
 * two dark sections that sit next to each other into one band.                   */
.band-fade{position:relative;isolation:isolate;--fade:120px}
.band-fade::before,.band-fade::after{content:"";position:absolute;left:0;right:0;height:var(--fade);z-index:-1;pointer-events:none}
.band-fade::before{top:0;background:linear-gradient(#eef3f8 0,rgba(238,243,248,0.55) 42%,rgba(238,243,248,0) 100%)}
.band-fade::after{bottom:0;background:linear-gradient(rgba(238,243,248,0) 0,rgba(238,243,248,0.55) 58%,#eef3f8 100%)}
.band-fade.no-fade-top::before,.band-fade.no-fade-bottom::after{display:none}
@media (max-width:900px){.band-fade{--fade:80px}}
@media (max-width:600px){.band-fade{--fade:64px}}

/* ── Fixed design sizes ─────────────────────────────────────────────────────── *
 * The design was drawn on a 1440px canvas and some boxes carry fixed px sizes.
 * Content columns are capped at 1200px, so from 1248px up the layout is identical
 * to the design; below that the fixed sizes are released so content can reflow.  */
@media (max-width:1247px){
  .fx{height:auto !important}
  .fxw{width:auto !important;max-width:100% !important}
}
@media (max-width:900px){
  .fxf{font-size:min(var(--fxf),12vw) !important}
}

/* ── Small-screen fixes to the design (none of these apply at desktop width) ─── */
body>.ol{overflow-x:clip !important}            /* decorative glows must not cause sideways scroll; clip (not the
                                                   pages' inline hidden) so the sticky nav still sticks */
@media (max-width:900px){
  .ol .hide-sm{display:none !important}          /* floating chips: inline display:flex beat the design's own rule */
  .ol [style*="transform: translateY(-18px)"]{transform:none !important}   /* for businesses: raised step 02 card would overlap when stacked */
  .ol [style*="max-width: 58%"]{max-width:100% !important}                 /* about: two-sides card text (side art is hidden here) */
  .ol a.glass[style*="min-height: 380px"]{min-height:0 !important;padding:32px !important}
}
@media (max-width:600px){
  .ol [style*="grid-template-columns: 150px 1fr"]{grid-template-columns:1fr !important;gap:6px !important}  /* for businesses: post / email / Loop rows */
  h1[style*="clamp(56px, 9vw, 132px)"]{font-size:44px !important}          /* about: headline */
  h1[style*="clamp(56px, 9vw, 132px)"] br{display:none}
}

/* ── Phone & tablet layout ──────────────────────────────────────────────────── *
 * Desktop is untouched: everything here sits below 900px.
 * Section spacing: every section carries its desktop padding as --pt / --pb, and
 * below 900px it is scaled down so the page keeps its rhythm without desktop-sized
 * gaps. Heroes that tuck under the nav keep the 84px overlap and scale the rest.  */
@media (max-width:900px){
  body>.ol>section{padding-top:calc(var(--pt,0px) * 0.62) !important;padding-bottom:calc(var(--pb,0px) * 0.62) !important}
  body>.ol>.site-header+section[style*="margin-top: -84px"]{padding-top:calc(84px + (var(--pt,84px) - 84px) * 0.62) !important}
  body>.ol>section[style*="min-height"]{min-height:0 !important}
  .ol h1{font-size:clamp(44px,8vw,64px) !important}                         /* tablet: desktop headlines (84-101px) would fill the screen */
  .ol svg[viewBox="0 0 1200 460"],.ol svg[viewBox="0 0 1200 520"]{display:none}   /* home hero line and for-businesses step loop line only read across the desktop row */
}
@media (max-width:600px){
  body>.ol>section{padding-top:calc(var(--pt,0px) * 0.46) !important;padding-bottom:calc(var(--pb,0px) * 0.46) !important}
  body>.ol>.site-header+section[style*="margin-top: -84px"]{padding-top:calc(84px + (var(--pt,84px) - 84px) * 0.5) !important}

  /* type: headlines sized for a phone, not a scaled-down desktop */
  .ol h1{font-size:clamp(34px,10.4vw,42px) !important}
  .ol h2[style*="clamp(34px"],.ol h2[style*="clamp(36px"],.ol h2[style*="clamp(38px"],.ol h2[style*="clamp(40px"],
  .ol h2[style*="clamp(42px"],.ol h2[style*="clamp(44px"],.ol h2[style*="clamp(48px"]{font-size:clamp(28px,8.4vw,34px) !important}
  .ol [style*="font-size: 76px"]{font-size:54px !important}               /* for businesses: 01 / 02 / 03 */
  .ol span[style*="font-size: 56px"],.ol span[style*="font-size: 52px"]{font-size:42px !important}

  /* cards: desktop padding squeezes the text into a narrow column on a phone */
  .ol [style*="border-radius: 44px; padding: 9"],.ol [style*="border-radius: 44px; padding: 10"]{padding:48px 18px 44px !important;border-radius:32px !important}
  .ol [style*="border-radius: 36px; padding: 44px"],.ol [style*="border-radius: 32px; padding: 44px"],.ol [style*="border-radius: 32px; padding: 40px"],
  .ol [style*="border-radius: 32px; padding: 36px"],.ol [style*="border-radius: 24px; padding: 36px 40px"]{padding:28px 22px !important}
  .ol [style*="border-radius: 28px; padding: 32px"],.ol [style*="border-radius: 28px; padding: 30px"],
  .ol [style*="border-radius: 30px; padding: 34px"],.ol [style*="border-radius: 30px; padding: 30px"]{padding:24px 20px !important}

  /* decorative loop lines behind the closing CTAs cut through the stacked text */
  .ol svg[viewBox="0 0 1440 520"]{display:none}

  /* swipe rows: runs of rich cards sit side by side and scroll sideways */
  .ol .m-swipe{flex-wrap:nowrap !important;justify-content:flex-start !important;align-items:var(--swipe-align,stretch) !important;gap:14px !important;
    overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    margin-left:calc(var(--swipe-bleed,24px) * -1) !important;margin-right:calc(var(--swipe-bleed,24px) * -1) !important;
    padding:6px var(--swipe-bleed,24px) 100px !important;margin-bottom:-78px !important;scroll-padding:0 var(--swipe-bleed,24px)}   /* room for the card shadows, which a scrolling box would otherwise cut off */
  .ol .m-swipe::-webkit-scrollbar{display:none}
  .ol .m-swipe>*{flex:0 0 var(--swipe-item,82%) !important;max-width:none !important;scroll-snap-align:center}
  .ol .m-swipe [style*="width: 290px"]{width:250px !important}               /* shoppers: centre phone matches its neighbours */
  .ol .m-swipe [style*="width: 260px; border-radius: 30px"]{width:206px !important}   /* home hero: inbox phone sized to its neighbours */
  .ol .m-swipe.m-live>*{transition:transform .35s ease,opacity .35s ease}
  .ol .m-swipe.m-live>:not(.is-active){transform:scale(0.96);opacity:0.72}
  .m-dots{display:flex;justify-content:center;gap:6px;margin:-6px 0 0}
  .m-dots span{width:6px;height:6px;border-radius:999px;background:rgba(110,140,210,0.35);transition:width .3s ease,background .3s ease}
  .m-dots span.on{width:22px;background:linear-gradient(90deg,#2952da,#6bdaff)}

  /* side-by-side grids: compact cards pair up two to a row; an odd last card spans the row */
  .ol .m-grid2{display:grid !important;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px !important;max-width:none !important;width:100%}
  .ol .m-grid2>*{min-width:0 !important;max-width:none !important;margin:0 !important}
  .ol .m-grid2>[style*="display: flex"]:not([style*="flex-direction: column"]){flex-direction:column;gap:12px !important}
  .ol .m-grid2>:last-child:nth-child(odd){grid-column:1/-1}
  .ol .m-grid2>[style*="border-radius"]{padding:16px !important;border-radius:20px !important}
  .ol .m-grid2>a.glass[style*="min-height: 380px"]{padding:18px !important;border-radius:22px !important}
  .ol .m-grid2 h3,.ol .m-grid2 [style*="font-size: 19px"],.ol .m-grid2 [style*="font-size: 20px"]{font-size:16px !important;line-height:1.25 !important}
  .ol .m-grid2 p,.ol .m-grid2 [style*="font-size: 15px"],.ol .m-grid2 [style*="font-size: 16px"],.ol .m-grid2 [style*="font-size: 17px"]{font-size:13.5px !important;line-height:1.5 !important}
  .ol .m-grid2>:last-child:nth-child(odd) [style*="font-size: 16px"]{font-size:15px !important}
  .ol .m-grid2 [style*="font-size: 17px; font-weight: 600"]{font-size:15.5px !important;line-height:1.3 !important}   /* card titles keep their weight over body text */
  .ol .m-grid2 [style*="width: 44px; height: 44px"]{width:36px !important;height:36px !important}
  .ol .m-grid2 [style*="font-size: clamp(32px"]{font-size:20px !important}                  /* about: explore cards */

  /* about: high street vs OneLoop, face to face */
  .ol .m-vs .vs-dot{width:34px !important;height:34px !important;font-size:12px !important;box-shadow:0 0 0 5px #0b1222,0 10px 22px -8px rgba(41,82,218,0.8) !important}
  .ol .m-vs [style*="width: 30px; height: 30px"]{width:22px !important;height:22px !important}
  .ol .m-vs [style*="gap: 14px"]{gap:9px !important}

  /* shoppers hero: the three promises as tiles */
  .ol .m-tiles3{display:grid !important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px !important;padding:16px 10px !important}
  .ol .m-tiles3>*{flex-direction:column;justify-content:flex-start;text-align:center;gap:8px !important;font-size:13px !important;line-height:1.3}

  /* section glows: phone sections are shorter than these desktop glows, which were cut off in a hard
     line at the section edge; the hero glows now fill their section's height and fade out before its edges */
  .ol [aria-hidden="true"][style*="width: 960px; height: 960px"],
  .ol [aria-hidden="true"][style*="width: 900px; height: 900px"]{top:0 !important;height:100% !important;width:150vw !important;margin:0 0 0 -75vw !important}
  .ol [aria-hidden="true"][style*="width: 620px; height: 620px"]{width:340px !important;height:340px !important;margin:-170px 0 0 -170px !important}   /* about: glow behind the Venn */

  /* scroll reveal (classes added by site.js on phones only) */
  .m-rv{opacity:0;transform:translateY(26px) scale(0.98);transition:opacity .75s cubic-bezier(.2,.7,.2,1),transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--rv-d,0s)}
  .m-rv.is-in{opacity:1;transform:none}

  /* one-offs */
  .ol [style*="width: 300px; border-radius: 30px; overflow: hidden"]{width:230px !important}   /* for businesses: inbox phone in the deliverability panel */
  .ol .float-b[style*="right: -24px"]{right:10px !important;bottom:-26px !important}      /* shoppers: "Request sent" stays on screen */
  .ol [style*="width: 120px; height: 46px"]{width:84px !important}                         /* about: Data card bars make room for the chip */
  .ol span[style*="padding: 9px 14px; border-radius: 12px; background: #ffffff"]{white-space:nowrap}
}
@media (max-width:360px){   /* smallest phones: a little more room inside the two-up cards */
  .ol .m-grid2{gap:10px !important}
  .ol .m-grid2>[style*="border-radius"]{padding:13px !important}
  .ol .m-grid2 p,.ol .m-grid2 [style*="font-size: 15px"],.ol .m-grid2 [style*="font-size: 16px"],.ol .m-grid2 [style*="font-size: 17px"]{font-size:13px !important}
}
@media (min-width:601px){.m-dots{display:none}}
@media (max-width:600px) and (prefers-reduced-motion:reduce){.m-rv{opacity:1;transform:none;transition:none}.ol .m-swipe.m-live>*{transition:none}}

/* ── Beta sign-up form ──────────────────────────────────────────────────────── */
.beta-perks{display:flex;flex-direction:column;gap:12px;margin:28px 0 0;padding:0;list-style:none;font-size:16px;font-weight:500;line-height:1.5;color:#1f2433}
.beta-perks li{display:flex;gap:10px;align-items:flex-start}
.beta-perks li svg{flex:0 0 auto;margin-top:2px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}
.form-grid .span-2{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field>label,.field>.label{font-size:13px;font-weight:600;color:#46546a}
.field .opt{font-weight:500;color:#717685;margin-left:6px}
.field .help{font-size:13px;font-weight:500;line-height:1.45;color:#717685;margin:2px 0 0}
.ol-input{width:100%;height:50px;padding:0 14px;border-radius:12px;background:#ffffff;border:1px solid rgba(31,36,51,0.12);color:#1f2433;font-family:"Urbanist",Arial,Helvetica,sans-serif;font-size:15px;font-weight:500;transition:border-color .15s ease,box-shadow .15s ease}
.ol-input::placeholder{color:#8a93a6}
.ol-input:focus{outline:none;border-color:#2952da;box-shadow:0 0 0 3px rgba(41,82,218,0.14)}
select.ol-input{appearance:none;-webkit-appearance:none;padding-right:40px;cursor:pointer}
select.ol-input:invalid{color:#8a93a6}
.select-wrap{position:relative}
.select-wrap::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;border-right:1.6px solid #46546a;border-bottom:1.6px solid #46546a;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.choices{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.choice{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;background:#ffffff;border:1px solid rgba(31,36,51,0.12);font-size:15px;font-weight:500;color:#1f2433;cursor:pointer;transition:border-color .15s ease,background-color .15s ease}
.choice:hover{border-color:rgba(41,82,218,0.4)}
.choice:has(input:checked){border-color:#2952da;background:rgba(41,82,218,0.06)}
.choice input{accent-color:#2952da;width:18px;height:18px;margin:0;flex:none}
.subform{padding:24px;border-radius:18px;background:rgba(41,82,218,0.05);border:1px solid rgba(41,82,218,0.16)}
.subform h3{margin:0 0 4px;font-size:20px;font-weight:600;letter-spacing:-0.015em}
.subform>p{margin:0 0 20px;font-size:15px;font-weight:500;line-height:1.55;color:#46546a}
.form-note{margin:16px 0 0;font-size:13px;font-weight:500;line-height:1.55;color:#717685}
.form-status{display:none;margin:16px 0 0;padding:12px 16px;border-radius:12px;font-size:14px;font-weight:600;line-height:1.45}
.form-status.error{display:block;background:rgba(229,72,77,0.08);border:1px solid rgba(229,72,77,0.3);color:#c4383d}
.form-status.success{display:block;background:rgba(85,165,101,0.1);border:1px solid rgba(85,165,101,0.35);color:#3d8a4f}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
[hidden]{display:none !important}
@media (max-width:700px){
  .form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:auto}
  .ol .glass[style*="padding: 44px"]{padding:28px 20px !important;border-radius:24px !important}
}