:root{--ink:#14201F;--body:#414C4C;--teal:#0890A0;--teald:#075C66;--pale:#E4F3F5;
 --amber:#D98A2B;--sky:#A0B7EC;--paper:#F7F9F9;--line:#C9D1D1;--tint:#E4F3F5;
 /* One layout shell for the whole site. Every section shares it, so the container
    edge never moves as a reader scrolls. A figure that needs more room scrolls
    inside its own box rather than widening the page around it. */
 --shell:1280px;--gutter:clamp(20px,3.6vw,44px);
 /* Display face for the brand: Outfit's circular bowls and even stroke are the
    wordmark's own letterforms, so a heading and the logo read as one voice.
    Inter stays on body text, where it sets tighter at small sizes. */
 --display:'Outfit','Inter',system-ui,sans-serif}
body{background:var(--paper);color:var(--body);font-family:'Inter',sans-serif}
h1,h2,h3{font-family:var(--display);color:var(--ink)}
h1,h2{font-weight:700;letter-spacing:-.018em}
h3{color:var(--teald)}
.hd{background:var(--paper)}.hd nav a{color:var(--body)}.hd nav a:hover{color:var(--teal)}
.cta{background:var(--teal);color:#fff;border-radius:5px}
.crumb{background:#fff}.crumb a{color:var(--teald)}
.eyebrow{color:var(--teal);font-family:ui-monospace,monospace}
.btn{background:var(--teal);color:#fff;border-radius:5px}
.band.alt{background:#fff}
.mono{color:var(--teald);background:var(--pale);display:inline-block;padding:8px 14px;border-radius:4px}
.lg a{color:var(--teald);background:#fff;border-radius:4px}
.answer{border-top:3px solid var(--amber)}
.ft{background:var(--teald);color:#C3DEE2}
.ft h4{color:#8FC9D2}.ft a{color:#C3DEE2}

*{box-sizing:border-box}
html{scroll-behavior:smooth;overflow-x:hidden}
body{margin:0;line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto}
p,li,h1,h2,h3{overflow-wrap:break-word}
.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.hd{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.hd .wrap{display:flex;align-items:center;gap:22px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.hd nav{display:flex;gap:18px;flex-wrap:wrap;margin-right:auto}
.hd nav a{font-size:14px;text-decoration:none}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:157px;height:36px;display:block;flex:none}
.cta{text-decoration:none;font-size:13.5px;font-weight:700;padding:10px 18px}
.crumb{border-bottom:1px solid var(--line);font-size:12.5px}
.crumb .wrap{padding-top:10px;padding-bottom:10px}
.crumb a{text-decoration:none}.crumb i{opacity:.4;font-style:normal;padding:0 4px}
.hero{padding:64px 0 52px;border-bottom:1px solid var(--line)}
.eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.17em;text-transform:uppercase;margin:0 0 14px}
h1{font-size:clamp(31px,4.5vw,52px);line-height:1.1;margin:0 0 20px;max-width:20ch}
.lede{font-size:19.5px;line-height:1.6;max-width:70ch;margin:0 0 24px}
.btn{display:inline-block;text-decoration:none;font-weight:700;font-size:14px;padding:13px 26px}
section.band,section.answer,section.faq,section.mesh{padding:44px 0;border-bottom:1px solid var(--line)}
h2{font-size:clamp(23px,2.8vw,33px);margin:0 0 18px;line-height:1.2}
h3{font-size:16px;margin:0 0 14px;letter-spacing:.1em;text-transform:uppercase;font-weight:700}
/* The reading measure, for a paragraph running on its own across the shell. */
section p{max-width:78ch;margin:0 0 16px;font-size:17px}
/* Section prose. A single measure across a 1280 shell strands a third of every
   row, so from 1000px up a band's paragraphs are set in two columns: the measure
   stays where a reader wants it and the page gets used. Paragraphs are kept
   whole, so the split falls between them and never mid-sentence. */
.prose p{max-width:86ch}
@media(min-width:1000px){
 .prose-2{columns:2;column-gap:clamp(40px,4.4vw,72px)}
 .prose-2 p{max-width:none;break-inside:avoid;margin:0 0 17px}
 .prose-2 p:last-child{margin-bottom:0}
}
.answer{background:var(--tint)}
.answer p{font-size:17.5px}
.faq details{border-bottom:1px solid var(--line);padding:15px 0;max-width:78ch}
.faq summary{cursor:pointer;font-weight:600;font-size:17px}
.faq details p{margin:12px 0 0;font-size:16.5px}
.lg{display:flex;flex-wrap:wrap;gap:9px}
.lg a{font-size:13.5px;text-decoration:none;padding:8px 14px;border:1px solid var(--line)}
.counts{font-size:14px;margin:0 0 24px}
.counts b{font-size:22px;font-weight:700;margin-right:6px}
.counts span{margin-right:18px;opacity:.7}
.mono{font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.11em;margin:0 0 24px;max-width:none}
.verified{font-size:13px;font-style:italic;opacity:.7;padding:0 var(--gutter);margin:26px auto;max-width:var(--shell)}
.ft{padding:44px 0 56px}
.fcols{display:grid;grid-template-columns:1.35fr repeat(3,1fr);gap:34px}
.ft h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 12px}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{margin-bottom:7px}
.ft a{font-size:14px;text-decoration:none}
.fine{margin-top:30px;font-size:13px;opacity:.75;max-width:82ch}
@media(max-width:980px){.fcols{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.fcols{grid-template-columns:1fr}
 .hero{padding:40px 0 34px}section.band,section.answer,section.faq,section.mesh{padding:32px 0}
 .hd .wrap{gap:14px}.hd nav{gap:12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.scroll{overflow-x:auto;margin:0 0 6px}
table.cmp{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
table.cmp caption{text-align:left;font-size:12.5px;color:var(--body);opacity:.75;padding:0 0 12px}
table.cmp th,table.cmp td{text-align:left;padding:11px 14px 11px 0;border-bottom:1px solid var(--line);vertical-align:top}
table.cmp thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--teald);font-weight:700}
table.cmp tbody th{font-weight:600;color:var(--ink)}
table.cmp td:last-child{color:var(--ink);font-weight:500}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none}

/* ---- photography -------------------------------------------------------- */
/* Files come from bin/images.sh; sources and credits are in media/CREDITS.md. */
.pic{display:block;line-height:0}
.pic img{display:block;width:100%;height:100%;object-fit:cover}

/* Hero with a photo or a slideshow beside the copy. */
.hero-split .wrap{display:grid;grid-template-columns:1fr;gap:30px}
.hero-copy .lede{margin-bottom:20px}
.hero-copy .mono{margin-bottom:0}
.hero-aside{min-width:0}
@media(min-width:900px){
 .hero-split .wrap{grid-template-columns:1.02fr .98fr;gap:48px;align-items:center}
 .hero-split h1{max-width:14ch}
 .hero-split .lede{font-size:17px}
}
.hero-photo,.show-frame{position:relative;aspect-ratio:3/2;border-radius:12px;overflow:hidden;
 background:var(--tint);box-shadow:0 22px 54px -28px rgba(0,32,50,.55)}
.hero-photo .pic{position:absolute;inset:0}

/* Slideshow. Slide one is in the markup as the visible one, so the panel reads
   with no JavaScript and assets/mock.js only takes over the rotation. */
.slide{position:absolute;inset:0;opacity:0;text-decoration:none;pointer-events:none;
 transition:opacity .85s ease}
.slide[data-on]{opacity:1;pointer-events:auto}
.slide .pic{position:absolute;inset:0}
.slide:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
.js .slide[data-on] .pic img{animation:kenburns 9s ease-out both}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.07)}}
.slide-cap{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:6px;
 background:rgba(9,32,36,.74);color:#fff;font-size:12.5px;font-weight:600;letter-spacing:-.01em;
 padding:9px 13px;border-radius:20px}
.slide-cap .ico{opacity:.85}
.show-dots{display:flex;gap:7px;justify-content:center;margin:14px 0 0}
.show-dots button{border:0;background:none;padding:6px 3px;cursor:pointer;line-height:0}
.show-dots i{display:block;width:22px;height:3px;border-radius:2px;background:var(--line);
 transition:background .25s ease}
.show-dots button[aria-selected=true] i{background:var(--teal)}
.show-dots button:hover i{background:var(--teald)}
.show-dots button:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-radius:3px}

/* A row of linked photo tiles, which doubles as a way into the industry pages. */
.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;margin:24px 0 0;
 border-radius:8px;overflow:hidden}
.tile{position:relative;display:block;aspect-ratio:3/2;text-decoration:none;overflow:hidden;
 background:var(--tint)}
.tile .pic{position:absolute;inset:0}
.tile img{transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.tile:hover img{transform:scale(1.06)}
.tile-cap{position:absolute;left:0;right:0;bottom:0;color:#fff;font-size:12px;font-weight:600;
 line-height:1.3;padding:26px 11px 10px;
 background:linear-gradient(rgba(9,32,36,0),rgba(9,32,36,.82))}
.tile:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}

/* A photo used to break up a run of text. */
/* Product screenshots. Framed rather than bled, because a UI shot needs an edge
   to stop it reading as part of the page it sits on. */
/* psh, not shot: the guest-thread mockup already owns .shot for its delivery photo. */
.psh{margin:26px 0 0}
.psh-fr{position:relative;display:block;border:1px solid var(--line);border-radius:10px;overflow:hidden;
 background:#fff;box-shadow:0 1px 2px rgba(16,24,32,.05),0 12px 28px -18px rgba(16,24,32,.35)}
/* A key drawn over the capture. The marks in the product are a few pixels across
   at this size, so the key redraws them rather than pointing at them. It sits on
   the picture where there is room and drops underneath it where there is not. */
.psh-key{position:absolute;left:14px;top:14px;width:min(320px,40%);
 background:rgba(255,255,255,.95);border:1px solid var(--line);border-radius:9px;
 padding:11px 13px;box-shadow:0 10px 26px -16px rgba(16,24,32,.55)}
.psh-kh{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
 color:var(--teald);margin:0 0 8px}
.psh-key ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.psh-key li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:9px;align-items:start;
 font-size:11.5px;line-height:1.4;color:var(--body)}
.psh-key li b{color:var(--ink);font-weight:700}
.mark{fill:var(--tint);stroke:var(--teald);stroke-width:1.8;stroke-linejoin:round;margin-top:1px}
@media(max-width:860px){
 .psh-key{position:static;width:auto;border:0;border-top:1px solid var(--line);
  border-radius:0;box-shadow:none;background:#fff;padding:12px 14px}
}
.psh .pic{display:block}
.psh img{display:block;width:100%;height:auto}
.psh figcaption{font-size:12.5px;line-height:1.5;color:var(--body);opacity:.8;padding:11px 2px 0;
 margin:0}
.photo{margin:26px 0 0}
.photo .pic{border-radius:10px;overflow:hidden}
.photo img{aspect-ratio:32/11;width:100%}
.photo figcaption{font-size:13px;line-height:1.55;color:var(--body);opacity:.8;padding:11px 2px 0;
 max-width:84ch}

/* Prose beside a portrait or a card. Single column until there is room for both,
   so the aside drops under the text rather than squeezing the measure. */
.split{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
.split-c > p:last-child{margin-bottom:0}
.split-a{min-width:0}
@media(min-width:860px){
 /* The prose track is capped at the reading measure rather than left to fill, so
    the aside sits close to the text instead of across an empty middle. */
 .split{grid-template-columns:minmax(0,74ch) minmax(0,320px);gap:56px;
  justify-content:space-between}
}

/* Founder portrait, framed like a card so it sits in the same family as .cards
   rather than floating as a cut-out. Square crop, from bin/images.sh. */
.founder{margin:0;max-width:320px;background:#fff;border:1px solid var(--line);
 border-radius:10px;overflow:hidden}
.founder .pic{aspect-ratio:1/1;background:var(--tint)}
.founder figcaption{padding:15px 17px 17px}
.founder b{display:block;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.02em}
.founder .fd-role{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;
 text-transform:uppercase;color:var(--teal);margin-top:7px}
.founder figcaption > span:last-child{display:block;font-size:12.5px;line-height:1.5;
 opacity:.78;margin-top:8px}

@media(max-width:760px){
 .strip{grid-template-columns:1fr 1fr}
 .photo img{aspect-ratio:3/2}
 .slide-cap{font-size:11.5px;padding:8px 11px}
}
@media(prefers-reduced-motion:reduce){
 .slide,.tile img,.show-dots i{transition:none}
 .js .slide[data-on] .pic img{animation:none}
}

/* A named customer reference. Sits in the same white-card family as .cards and
   .founder so a page carrying one does not look like it grew a testimonial. */
.ref{margin:22px 0 0;max-width:78ch;background:#fff;border:1px solid var(--line);
 border-left:3px solid var(--teal);border-radius:8px;padding:20px 22px 18px}
/* The prose rule comes first so the labelled lines below can override it: every
   line in this card is a <p>, so .ref p would otherwise win on specificity. */
.ref p{font-size:15.5px;margin:0 0 12px}
.ref .ref-k{display:flex;align-items:center;gap:7px;font-size:10.5px;font-weight:700;
 letter-spacing:.15em;text-transform:uppercase;color:var(--teal);margin:0 0 10px}
.ref .ref-n{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.02em;margin:0 0 4px}
.ref .ref-w{display:flex;align-items:center;gap:6px;font-size:12.5px;opacity:.78;margin:0 0 14px}
.ref .ref-w .ico{color:var(--teal);flex:none}
.ref .ref-l{margin:0}
.ref .ref-l a{font-size:13.5px;color:var(--teald);font-weight:600;word-break:break-all}

/* ---- blog --------------------------------------------------------------- */
/* An index row is a link with three parts: when it was written, what it is
   called, and the one line that says whether it is your problem. The meta
   column moves out to the side once there is room for it, so a phone reads the
   rows as a list and a desktop reads them as a table without either needing a
   second stylesheet. */
.plist{list-style:none;margin:18px 0 34px;padding:0;border-top:1px solid var(--line)}
.plist li{border-bottom:1px solid var(--line)}
.plist a{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;padding:17px 4px;text-decoration:none}
.plist .pl-m{display:flex;gap:12px;font-family:ui-monospace,monospace;font-size:11.5px;
 letter-spacing:.04em;color:var(--body);opacity:.72}
.plist .pl-m i{font-style:normal}
.plist b{font-family:var(--display);font-size:19px;font-weight:700;line-height:1.28;
 letter-spacing:-.02em;color:var(--ink)}
.plist .pl-c{font-size:15px;line-height:1.6;max-width:76ch;color:var(--body)}
.plist a:hover b{color:var(--teald)}
.plist a:hover{background:var(--tint)}
.plist a:focus-visible{outline:3px solid var(--teal);outline-offset:-3px}
@media(min-width:820px){
 .plist a{grid-template-columns:148px minmax(0,1fr);gap:5px 28px;align-items:baseline;padding:18px 10px}
 .plist .pl-m{grid-row:span 2;flex-direction:column;gap:5px;padding-top:4px}
}
/* Date and reading time under a post hero. Mono, because it is metadata rather
   than prose, and it sits on the white band so it reads as part of the header. */
.pmeta{background:#fff;border-bottom:1px solid var(--line)}
.pmeta .wrap{display:flex;align-items:center;gap:13px;flex-wrap:wrap;
 padding-top:12px;padding-bottom:12px;font-family:ui-monospace,monospace;font-size:12px;
 letter-spacing:.03em;color:var(--body)}
.pmeta .ico{color:var(--teal);flex:none}
.pmeta i{font-style:normal;opacity:.72}
.pmeta a{margin-left:auto;color:var(--teald);font-weight:600;text-decoration:none}
.pmeta a:hover{text-decoration:underline}

/* ---- the demo form ------------------------------------------------------ */
/* Fields sit on the white card ground the rest of the page uses for anything a
   reader acts on. Two columns from 700px, because six short fields in one column
   is a long scroll on a laptop for no reading benefit. */
.frm{margin:22px 0 0;max-width:860px}
.frm-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.frm-g{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:700px){.frm-g{grid-template-columns:1fr 1fr;gap:18px 22px}
 .frm-wide{grid-column:1/-1}}
.frm-f{margin:0;display:flex;flex-direction:column;gap:6px;max-width:none}
.frm-f label{font-size:12.5px;font-weight:650;color:var(--ink);letter-spacing:.01em}
.frm-f abbr{color:var(--teal);text-decoration:none;margin-left:3px}
.frm-f input{font:400 16px/1.4 'Inter',sans-serif;color:var(--ink);background:#fff;
 border:1px solid var(--line);border-radius:6px;padding:12px 13px;width:100%}
.frm-f input:hover{border-color:var(--teald)}
.frm-f input:focus-visible{outline:2px solid var(--teal);outline-offset:1px;border-color:var(--teal)}
.frm-f input[aria-invalid=true]{border-color:#A22A24;background:#FBEBEA}
.frm-h,.frm-e{font-size:12px;line-height:1.45}
.frm-h{color:var(--body);opacity:.72}
.frm-e{color:#A22A24;font-weight:600}
.frm-a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin:22px 0 0}
.frm-a .btn{padding:14px 30px}
.frm-fine{font-size:13px;line-height:1.55;color:var(--body);opacity:.8;margin:0;max-width:46ch}
.frm-fine a{color:var(--teald);font-weight:600}
/* The two things a submission can say back. Both are announced, so a reader who
   is not looking at the form still hears them. */
.frm-bad{display:flex;align-items:flex-start;gap:9px;margin:0 0 20px;padding:12px 14px;
 background:#FBEBEA;border:1px solid #F1C3C0;border-radius:8px;font-size:14px;color:#A22A24;max-width:60ch}
.frm-bad .ico{flex:none;margin-top:1px}
.frm-bad a{color:#A22A24;font-weight:700}
.frm-ok{display:flex;align-items:flex-start;gap:13px;margin:22px 0 0;padding:20px 22px;
 background:#fff;border:1px solid var(--line);border-left:3px solid var(--teal);
 border-radius:10px;max-width:70ch}
.frm-ok .ico{flex:none;color:var(--teal);margin-top:2px}
.frm-ok b{display:block;font-size:17px;color:var(--ink);letter-spacing:-.02em;margin-bottom:8px}
.frm-ok p{font-size:15px;margin:0 0 10px}
.frm-ok p:last-child{margin:0}

/* ---- customer quotes ---------------------------------------------------- */
/* The operator's own words, in the same white-card family as .ref and .cards.
   The quote sets one size above body prose and the attribution one below, so a
   card reads as a voice rather than as another section of the page. The mark is
   a block rather than an absolute, which keeps it out of the first line at any
   width instead of sitting on top of it. */
.quotes{display:grid;grid-template-columns:1fr;gap:18px;margin:22px 0 0}
@media(min-width:900px){.quotes{grid-template-columns:repeat(auto-fit,minmax(330px,1fr))}}
.quote{margin:0;background:#fff;border:1px solid var(--line);border-radius:12px;
 padding:22px 26px 22px;display:flex;flex-direction:column}
.quote:before{content:"\201C";display:block;font-family:var(--display);font-weight:700;
 font-size:54px;line-height:.62;height:30px;color:var(--pale)}
.quote blockquote{margin:0;flex:1}
.quote blockquote p{margin:0;font-size:17px;line-height:1.62;color:var(--ink);max-width:62ch}
.quote figcaption{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.quote figcaption b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.quote figcaption span{display:flex;align-items:center;gap:6px;font-size:12.5px;opacity:.78;margin-top:5px}
.quote figcaption .ico{color:var(--teal);flex:none}
/* Beside a reference card the quote is the second voice on the same operator,
   so it sits under it at a single column rather than racing it for width. */
.ref + .quotes{max-width:78ch}

/* ---- trustmarks --------------------------------------------------------- */
/* Proof band under the hero. Marks are declared in inc/data.php so a claim is
   written once and every page that shows it stays in step. */
.trust{background:var(--ink);border-bottom:1px solid var(--line)}
.trust .wrap{padding-top:26px;padding-bottom:26px}
.trust-l{list-style:none;margin:0;padding:0;display:grid;
 grid-template-columns:repeat(auto-fit,minmax(238px,1fr));gap:22px 34px}
.trust-l li{display:flex;gap:13px;align-items:flex-start;min-width:0}
.trust-c{min-width:0}
.trust-l .ico{color:var(--teal);flex:none;margin-top:2px}
.trust-t{display:block;font-size:14px;font-weight:650;color:#fff;line-height:1.34;
 letter-spacing:-.01em}
.trust-s{display:block;font-size:12.5px;line-height:1.5;color:#93A8A9;margin-top:5px}

/* Single-line variant, used in the footer so the long tail carries a mark too. */
.ft-mark{display:flex;gap:11px;align-items:flex-start;margin:0 0 18px}
.ft-mark .ico{color:#8FC9D2;flex:none;margin-top:2px}
.ft-mark b{display:block;font-size:13.5px;font-weight:650;color:#fff;line-height:1.35}
.ft-mark-c{min-width:0}
.ft-mark-c > span{display:block;font-size:12.5px;line-height:1.5;opacity:.75;margin-top:4px}
.ft-word{font-size:19px;font-weight:800;color:#fff;letter-spacing:-.03em;margin:0 0 16px}

@media(max-width:760px){
 .trust .wrap{padding-top:20px;padding-bottom:20px}
 .trust-l{gap:16px}
}