@font-face{font-family:"Outfit";src:url(/assets/fonts/outfit.woff2) format("woff2");font-weight:100 900;font-display:swap}
:root{
  --ink:#0E1726;--signal:#FF5B2E;--paper:#F6F3EE;
  --muted:#4B5565;        /* 6.8:1 on paper */
  --muted-dark:#B9C0CC;   /* 9.8:1 on ink */
  --rule:rgba(14,23,38,.22);
  --rule-dark:rgba(246,243,238,.2);
  --f:"Outfit",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --m:clamp(1.25rem,4.2vw,3.5rem);   /* page margin */
  --gap:clamp(1rem,2vw,1.75rem);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;hanging-punctuation:first allow-end}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.55 var(--f);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-kerning:normal;
  font-feature-settings:"kern","liga";overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
figure{margin:0}
a{color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-.025em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.6rem 1rem;z-index:10}
.skip:focus{left:1rem}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

/* 12-column grid with real margins */
.g{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);padding-inline:var(--m);max-width:96rem;margin-inline:auto}

/* meta / caption layer */
.meta{font-size:.8125rem;line-height:1.4;letter-spacing:.02em;color:var(--muted);font-variant-numeric:tabular-nums}
.ix{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";color:var(--ink);font-weight:500;margin-right:.6em}

/* header */
.top{border-bottom:1px solid var(--rule)}
.bar{align-items:center;min-height:4.5rem}
.brand{grid-column:1 / span 3;display:inline-flex;width:max-content}
.brand img{height:30px;width:auto}
.bar-meta{grid-column:4 / span 4}
.top nav{grid-column:8 / -1;display:flex;justify-content:flex-end;gap:clamp(1rem,2.4vw,2.25rem);font-size:.9375rem}
.top nav a{text-decoration:none;padding-block:.4rem;border-bottom:1px solid transparent}
.top nav a:hover{border-bottom-color:var(--ink)}
.top nav .ix{color:var(--muted);margin-right:.35em;font-weight:400}

/* hero */
.hero{position:relative;overflow:hidden;padding-block:clamp(3rem,8vw,7rem) clamp(3rem,7vw,6rem)}
.hero .g{position:relative;z-index:1;row-gap:clamp(2rem,4vw,3.5rem)}
.hero-meta{grid-column:1 / -1;display:flex;gap:2.5rem;border-top:1px solid var(--ink);padding-top:.75rem}
.hero h1{grid-column:1 / span 10;font-size:clamp(2.9rem,8.4vw,8.25rem);line-height:.94;letter-spacing:-.045em;font-weight:600;text-wrap:initial}
.hero h1 .hi{background:linear-gradient(transparent 60%,var(--signal) 60% 86%,transparent 86%);padding-inline:.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero-side{grid-column:8 / span 4;display:grid;gap:1.5rem;font-size:1.125rem;line-height:1.5}
.arrow{display:inline-flex;gap:.5rem;align-items:baseline;width:max-content;font-weight:500;text-decoration:none;border-bottom:1.5px solid var(--ink);padding-bottom:.15rem}
.arrow:hover{border-bottom-color:var(--signal)}
.bleed-mark{position:absolute;right:-9vw;top:-4vw;width:min(46vw,640px);height:auto;fill:none;stroke:var(--signal);stroke-width:16;opacity:.95;z-index:0;pointer-events:none}
.bleed-mark .m-mid{transform-box:fill-box;transform-origin:50% 100%;animation:wob 5s ease-in-out 1s infinite}
@keyframes wob{0%,84%,100%{transform:scaleY(1)}90%{transform:scaleY(.72)}95%{transform:scaleY(1.06)}}

/* product showcase: real pages, framed */
.show{background:var(--ink);position:relative;overflow:hidden;padding-block:clamp(3rem,7vw,6.5rem) clamp(3.5rem,8vw,7.5rem)}
.show::before{content:"";position:absolute;right:-6vw;bottom:-10vw;width:min(52vw,720px);aspect-ratio:1;border-radius:50%;background:var(--signal)}
.show .g{position:relative;align-items:start}
.browser{grid-column:1 / span 10;grid-row:1;border-radius:14px;overflow:hidden;background:#1C2638;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.chrome{display:flex;align-items:center;gap:.4rem;height:2.25rem;padding:0 .9rem;background:#1C2638}
.chrome i{width:.6rem;height:.6rem;border-radius:50%;background:rgba(246,243,238,.28)}
.chrome i:first-child{background:var(--signal)}
.chrome span{margin-left:.9rem;flex:0 1 22rem;background:rgba(246,243,238,.1);color:var(--muted-dark);border-radius:999px;font-size:.75rem;line-height:1.45rem;padding:0 .8rem;letter-spacing:.02em}
.browser img{width:100%}
.phone{border-radius:2rem;padding:.55rem;background:#05080F;box-shadow:0 0 0 1.5px rgba(246,243,238,.18),0 30px 60px -18px rgba(0,0,0,.65)}
.phone img{border-radius:1.5rem;width:100%}
.show .phone{grid-column:10 / span 3;grid-row:1;margin:clamp(3rem,7vw,7rem) 0 -3rem;transform:rotate(3deg);position:relative;z-index:1}

/* sections */
.sec{padding-block:clamp(4.5rem,10vw,9rem)}
.sec-head{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;row-gap:1.25rem;align-items:start;border-top:1px solid var(--ink);padding-top:.75rem;margin-bottom:clamp(2.5rem,6vw,5rem)}
.sec-head .meta{grid-column:1 / span 3}
.sec-head h2{grid-column:4 / span 6;font-size:clamp(2.25rem,5vw,4.5rem);line-height:.98;letter-spacing:-.04em}
.sec-head .intro{grid-column:10 / span 3;color:var(--muted);align-self:end}

/* featured business */
.feature{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:end;row-gap:2rem}
.feature-img{grid-column:1 / span 6;margin-left:calc(-1 * var(--m));background:var(--signal);border-radius:0 18px 18px 0;padding:clamp(2rem,5vw,4.5rem) 0 0;display:flex;justify-content:center;overflow:hidden;align-self:stretch;align-items:flex-end}
.phone-lg{width:min(62%,330px);margin-bottom:-3.5rem;transform:rotate(-2.5deg)}
.feature-body{grid-column:8 / span 5;display:grid;gap:1.25rem;padding-bottom:.5rem}
.feature-body .meta{display:flex;align-items:center;gap:.5rem;color:var(--ink);font-weight:500;text-transform:uppercase;letter-spacing:.12em;font-size:.75rem}
.dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--signal)}
.feature h3{font-size:clamp(3rem,7vw,6.5rem);line-height:.9;letter-spacing:-.05em}
.feature-lede{font-size:1.1875rem;line-height:1.5;max-width:34ch}
.products{list-style:none;margin:.25rem 0 0;padding:0;border-top:1px solid var(--rule)}
.products li{padding:.9rem 0 1rem;border-bottom:1px solid var(--rule)}
.products h4{margin:0 0 .25rem;font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;display:flex;justify-content:space-between;gap:1rem}
.price{font-weight:500;font-size:.9375rem;color:var(--ink);background:rgba(255,91,46,.16);border-radius:999px;padding:.05rem .65rem;white-space:nowrap;align-self:center}
.products p{color:var(--muted);font-size:.9844rem;max-width:46ch}
.for{font-size:.9375rem}.for span{color:var(--muted);margin-right:.75rem}
.links{display:flex;flex-wrap:wrap;gap:1rem 2rem;margin-top:.25rem}
.facts{margin:.5rem 0 .75rem;border-top:1px solid var(--rule)}
.facts div{display:grid;grid-template-columns:5.5rem 1fr;gap:1rem;padding:.65rem 0;border-bottom:1px solid var(--rule);font-size:.9375rem}
.facts dt{color:var(--muted)}
.facts dd{margin:0}

/* approach */
.sec-approach{padding-top:0}
.rules{grid-column:1 / -1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:var(--gap);border-top:1px solid var(--rule);align-self:start}
.rules li{border-bottom:0!important}
.rules li{display:grid;grid-template-columns:4rem 1fr;column-gap:1rem;row-gap:.4rem;padding:1.6rem 0 1.75rem;border-bottom:1px solid var(--rule)}
.rules .ix{grid-row:1 / span 2;color:var(--muted);font-weight:400;font-size:.875rem;padding-top:.45rem}
.rules h3{font-size:clamp(1.5rem,2.4vw,2rem);line-height:1.1;letter-spacing:-.03em}
.rules p{color:var(--muted);max-width:44ch}

/* contact */
.contact{background:var(--ink);color:var(--paper);padding-block:clamp(4rem,9vw,8rem)}
.contact .meta,.contact .ix{color:var(--muted-dark)}
.contact-body{grid-column:1 / span 8;display:grid;gap:1.25rem;align-self:end;border-top:1px solid var(--rule-dark);padding-top:.75rem}
.contact h2{font-size:clamp(3rem,8vw,7.5rem);line-height:.92;letter-spacing:-.05em;margin:2.5rem 0 .5rem}
.contact-body > p:not(.meta){max-width:40ch;font-size:1.125rem}
.email{font-size:clamp(1.5rem,3vw,2.25rem);font-weight:500;letter-spacing:-.02em}
.email a{text-decoration:none;border-bottom:2px solid var(--signal);padding-bottom:.1rem}
.email a:hover{color:#fff;border-bottom-color:var(--paper)}
.contact .small{font-size:.9375rem;color:var(--muted-dark)}

/* footer */
.foot{background:var(--ink);color:var(--paper);border-top:1px solid var(--rule-dark)}
.foot-bar{align-items:center;min-height:5rem;font-size:.875rem}
.foot-bar img{grid-column:1 / span 3;height:22px;width:auto}
.foot-bar .meta{grid-column:4 / span 4;color:var(--muted-dark)}
.foot-bar .legal{grid-column:8 / -1;text-align:right;color:var(--muted-dark)}

/* 404 */
.lost{padding-block:clamp(4rem,12vw,10rem);position:relative;overflow:hidden;min-height:60vh}
.lost h1{grid-column:1 / span 9;font-size:clamp(3rem,9vw,8.5rem);line-height:.92;letter-spacing:-.05em;margin:2rem 0}
.lost p:not(.meta){grid-column:1 / span 5;font-size:1.125rem;margin-bottom:1.5rem}
.lost .arrow{grid-column:1 / span 5}
.lost .hero-meta{grid-column:1 / -1}

/* tablet / mobile */
@media (max-width: 900px){
  .bar-meta{display:none}
  .brand{grid-column:1 / span 4}
  .top nav{grid-column:5 / -1}
  .hero h1{grid-column:1 / -1}
  .hero-side{grid-column:3 / -1}
  .sec-head h2{grid-column:1 / -1}
  .sec-head .meta{grid-column:1 / -1}
  .sec-head .intro{grid-column:1 / span 10}
  .feature-img{grid-column:1 / -1;margin-left:calc(-1 * var(--m));width:auto}
  .feature-body{grid-column:1 / -1}
  .rules{grid-template-columns:1fr}
  .rules li{border-bottom:1px solid var(--rule)!important}
  .contact-body{grid-column:1 / -1}
  .browser{grid-column:1 / span 11}
  .show .phone{grid-column:8 / -1;grid-row:2;margin:-30% 0 -1.5rem}
  .show::before{width:70vw;right:-20vw;bottom:-24vw}
  .feature-img{margin-right:calc(-1 * var(--m));border-radius:0;margin-bottom:1rem}
  .phone-lg{width:min(64%,300px)}
  .bleed-mark{width:44vw;right:-12vw;top:-7vw}
}
@media (max-width: 560px){
  .top nav .ix{display:none}
  .top nav{gap:1rem;font-size:.875rem}
  .brand img{height:26px}
  .hero-meta{flex-direction:column;gap:.15rem}
  .hero-side{grid-column:1 / -1}
  .browser{grid-column:1 / -1;border-radius:10px}
  .chrome{height:1.75rem}.chrome span{font-size:.6875rem;line-height:1.2rem}
  .show .phone{grid-column:6 / -1;margin-top:-18%;border-radius:1.4rem;padding:.4rem}
  .show .phone img{border-radius:1.05rem}
  .foot-bar{padding-block:1.25rem;row-gap:.75rem}
  .foot-bar img,.foot-bar .meta,.foot-bar .legal{grid-column:1 / -1;text-align:left}
  .lost h1,.lost p:not(.meta),.lost .arrow{grid-column:1 / -1}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}
.down{display:inline-block;transform:rotate(90deg)}