/* =========================================================================== Silex Softwares — production stylesheet Design system ported from design/home-v0.3.pen =========================================================================== */ :root{ --ink:#1a1d21; --ink2:#2b2f36; --accent:#e8703a; --accent-dk:#b34e1f; --accent-bg:#fdf1ea; /* WCAG 1.4.3 companions: --accent alone is 3.08:1 with white text and 2.78:1 as text on --accent-bg, so anything carrying TEXT uses these. */ --accent-btn:#bb5a2f; /* white text on this = 4.55:1 */ --accent-ink:#b1552c; /* this as text on --accent-bg = 4.51:1 */ --teal:#0d9488; --teal-bg:#e9f7f5; --teal-ink:#0b6e63; --navy:#141a24; --navy2:#1c2431; --navy-line:#2c3648; --panel:#f6f8fb; --bg:#ffffff; --line:#e6e9ec; --line2:#d3d8dd; --muted:#5b636d; --muted2:#6c737c; /* was #828b95; 4.79:1 on white, 4.51:1 on the #f6f8fb panel */ --err:#c0392b; --on-dark:#aeb6bf; --on-dark2:#c3ccd6; --on-dark-mut:#8b95a3; --maxw:1120px; --radius:14px; --radius-sm:10px; --font-head:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --font-body:"Inter",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; --shadow:0 1px 2px rgba(20,26,36,.04),0 8px 24px rgba(20,26,36,.06); } *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ margin:0;background:var(--bg);color:var(--ink); font-family:var(--font-body);font-size:16px;line-height:1.6; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; } img{max-width:100%;height:auto;display:block} a{color:var(--accent-dk);text-decoration:none} a:hover{text-decoration:underline} /* WCAG 1.4.1: a link inside running text needs a non-colour cue. Scoped to unclassed anchors in prose so nav, buttons and cards are unaffected. */ main p a:not([class]),main li a:not([class]),main dd a:not([class]), main blockquote a:not([class]){text-decoration:underline;text-underline-offset:.15em} h1,h2,h3,h4{font-family:var(--font-head);color:var(--ink);line-height:1.12;margin:0 0 .4em;letter-spacing:-.02em} h1{font-size:clamp(1.35rem,0.83rem + 2.69vw,3.25rem);font-weight:800} h2{font-size:clamp(1.15rem,0.83rem + 1.57vw,2.25rem);font-weight:800} h3{font-size:1.15rem;font-weight:700} h1,h2,h3{text-wrap:balance} p{margin:0 0 1rem} :focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px} .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .skip-link{position:absolute;left:-999px;top:0;background:var(--ink);color:#fff;padding:10px 16px;z-index:200;border-radius:0 0 8px 0} .skip-link:focus{left:0} /* ---- layout ---- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px} .section{padding-block:70px;border-bottom:1px solid var(--line)} .section--panel{background:var(--panel)} .section--navy{background:var(--navy);color:var(--on-dark);border-bottom:none} .section--navy h2,.section--navy h3{color:#fff} .eyebrow{font-family:var(--font-head);font-weight:800;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 .6rem} .eyebrow--teal{color:var(--teal-ink)} .section--navy .eyebrow{color:var(--on-dark-mut)} .lede{font-size:1.05rem;color:var(--muted);max-width:60ch} .lede--center{margin-inline:auto} .sprite{position:absolute;width:0;height:0;overflow:hidden} .section--navy .lede{color:var(--on-dark)} /* ---- buttons ---- */ .btn{ display:inline-flex;align-items:center;gap:.4rem; font-family:var(--font-head);font-weight:700;font-size:.95rem;line-height:1; padding:.85rem 1.4rem;border-radius:var(--radius-sm);border:1.5px solid transparent; cursor:pointer;transition:transform .12s ease,box-shadow .12s ease,background .12s ease;text-decoration:none; } .btn:hover{text-decoration:none;transform:translateY(-1px)} .btn--primary{background:var(--accent-btn);color:#fff} .btn--primary:hover{background:var(--accent-dk);color:#fff} .btn--ghost{background:transparent;border-color:var(--ink);color:var(--ink)} .btn--ghost:hover{background:var(--ink);color:#fff} .btn--white{background:#fff;color:var(--ink)} .btn--on-dark{background:transparent;border-color:rgba(255,255,255,.5);color:#fff} .btn--on-dark:hover{background:#fff;color:var(--ink)} .btn--sm{padding:.6rem 1rem;font-size:.85rem} .btn-row{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center} .btn-row--center{justify-content:center} .section--rule{border-top:1px solid var(--navy-line)} /* two long labels in a narrow column: trims enough to keep them on one row */ .btn-row--tight{gap:.6rem} .btn-row--tight .btn{font-size:.88rem;padding-inline:1.15rem} @media (min-width:901px) and (max-width:1200px){.ways-text .btn-row--tight .btn{font-size:.8rem;padding-inline:.85rem}} /* ---- header / nav ---- */ .site-header{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.92);backdrop-filter:saturate(1.4) blur(8px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding-block:.9rem} .brand{display:inline-flex;align-items:center;flex:none} .brand:hover{text-decoration:none} .brand-logo{width:auto;height:46px} .brand-logo--footer{height:48px} /* breathing room after the logo, given up first when the bar runs out of width */ .nav-links{display:flex;align-items:center;gap:1.6rem;list-style:none;margin:0 0 0 clamp(0rem,(100vw - 1000px)/10,1.5rem);padding:0} .nav-links a{font-family:var(--font-body);font-weight:500;font-size:.95rem;color:var(--muted);transition:color .15s ease} @media (min-width:1080px){.nav-links a{white-space:nowrap}} .nav-links a:hover{color:var(--accent-dk);text-decoration:none} .nav-cta{display:flex;align-items:center;gap:.75rem;min-width:0;flex-shrink:1} /* WCAG 1.4.12: let the CTA absorb wider text instead of overflowing. */ .nav-cta .btn--sm{min-width:0;overflow-wrap:anywhere} .nav-cta .btn{white-space:nowrap} .nav-toggle{display:none;background:none;border:0;padding:.4rem;cursor:pointer} .nav-toggle span{display:block;width:22px;height:2px;background:var(--ink);margin:4px 0;border-radius:2px} /* ---- hero (home) ---- */ .hero{background:var(--panel);border-bottom:1px solid var(--line);padding-block:70px 60px} .hero h1{max-width:16ch} .hero .lede{margin:1rem 0 1.5rem;max-width:62ch;font-size:1.12rem} .hero .tag,.tag:has(+h1){margin-bottom:1.1rem} /* inner pages: breadcrumb sits just under the header, content keeps the home rhythm */ .hero:has(>.wrap>.breadcrumb){padding-top:22px} .hero .breadcrumb{margin-bottom:2.6rem} /* ---- proof bar / stat grid ---- */ .statbar{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin-top:1.5rem} .statbar--4{grid-template-columns:repeat(4,minmax(0,1fr))} /* jump bar: a compact, centred chip row that sticks under the site header */ .cat-nav{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:76px;z-index:40} .cat-nav .wrap{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;padding-block:.7rem} .cat-nav a{font-family:var(--font-head);font-weight:700;font-size:.82rem;line-height:1.2;color:var(--muted);text-decoration:none;padding:.5rem 1.05rem;border-radius:999px;border:1px solid transparent;transition:color .2s,background-color .2s,border-color .2s} .cat-nav a:hover,.cat-nav a:focus-visible{color:var(--accent-dk);background:var(--accent-bg);border-color:#f2cbb5} main section[id]{scroll-margin-top:148px} .stat{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem} .stat .n,.stat .l{overflow-wrap:break-word;hyphens:auto} .section--navy .stat,.stat--dark{background:var(--navy2);border-color:var(--navy-line)} .stat .n{font-family:var(--font-head);font-weight:800;font-size:1.4rem;letter-spacing:-.02em;color:var(--ink)} .section--navy .stat .n,.stat--dark .n{color:#f0a878} .stat .l{font-size:.82rem;color:var(--muted);margin-top:.25rem} /* two stat columns on a phone leave ~130px per card: size the figures to fit whole words */ @media (max-width:560px){.stat .n{font-size:1.1rem}.stat .l{font-size:.76rem}} /* Icon sits on the number's line, label runs full width underneath. align-content:start stops the two rows stretching to fill a card that was made taller by its neighbour, which is what knocked the numbers out of line. */ .stat:has(.ico){display:grid;grid-template-columns:auto 1fr;column-gap:.5rem;align-items:center;align-content:start} .stat .ico{display:inline-flex;color:var(--accent)} .stat .ico svg{width:22px;height:22px} .stat:has(.ico) .l{grid-column:1/-1;margin-top:.35rem} .section--navy .stat .ico,.stat--dark .ico{color:#f0a878} .section--navy .stat .l,.stat--dark .l{color:var(--on-dark2)} /* AI cards on the dark band: a pill, a title and a line of copy */ .ai-cards .stat h3{margin:.6rem 0 0} .ai-cards .stat p{margin:.4rem 0 0;font-size:.95rem;color:var(--on-dark2)} /* ---- logo wall ---- */ .logowall{text-align:center} .logowall h2{max-width:none;margin-bottom:1.6rem} .logos{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 1rem;margin-top:1.2rem} .lg{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:.6rem 1.1rem;font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--muted)} /* Client logos share one 500x217 canvas, sized by optical area, so one rule keeps them even */ .client-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.6rem 1.5rem;align-items:center;justify-items:center} .client-grid img{width:100%;max-width:250px;height:auto;transition:transform .25s ease} .client-grid img:hover{transform:scale(1.04)} /* Integration logos: white 400x200 tiles, each mark pre-scaled to the same optical area */ .integration-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1rem} /* seven channel logos sit on one line */ .integration-grid--7{grid-template-columns:repeat(7,minmax(0,1fr))} .integration-grid img{width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);transition:transform .25s ease,box-shadow .25s ease} .integration-grid img:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(15,23,42,.08)} /* ---- generic grids ---- */ .grid{display:grid;gap:1rem} .grid-2{grid-template-columns:repeat(2,1fr)} .grid-3{grid-template-columns:repeat(3,1fr)} .grid-4{grid-template-columns:repeat(4,minmax(0,1fr))} .grid-5{grid-template-columns:repeat(5,minmax(0,1fr))} /* ---- cards ---- */ .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;display:flex;flex-direction:column;gap:.5rem} .card h3{margin:0} .card p{margin:0;color:var(--muted);font-size:.95rem} .card>.tag,.card>.pill{align-self:flex-start} .card .go{margin-top:auto;font-family:var(--font-head);font-weight:700;color:var(--accent-dk);font-size:.9rem} a.go,a.apply{font-family:var(--font-head);font-weight:700;color:var(--accent-dk);text-decoration:none;transition:color .12s} a.go:hover,a.apply:hover{color:var(--accent);text-decoration:none} a.card{transition:transform .12s,box-shadow .12s,border-color .12s} a.card:hover{border-color:var(--accent);transform:translateY(-2px);text-decoration:none;box-shadow:var(--shadow)} /* filled CTA inside a linked card; the whole card stays the link */ .card .card-cta{align-self:stretch;margin-top:auto;line-height:1.25;text-align:left;justify-content:space-between;gap:.75rem;padding:.7rem .9rem .7rem 1rem} .card .card-cta::after{content:"→";flex:none;font-size:1.05em;transition:transform .15s ease} .card p:has(+.card-cta){padding-bottom:.6rem} a.card:hover .card-cta{background:var(--accent-dk)} /* ---- deck: capability cards fanned like a hand, opening on hover ---------- --i is the card's index, so one rule drives the whole fan. Six cards at 165px plus five 16px gaps come to 1070px, just inside the 1072px content width, so the open row never overflows the wrap. Where there is no pointer to hover with, or motion is turned down, the fan is dropped for a plain grid - the copy must never depend on a hover to be readable. */ .deck{display:flex;justify-content:center;align-items:stretch;gap:16px;perspective:1400px} .deck .deck-card{ flex:0 0 165px;min-height:300px;display:flex;flex-direction:column; padding:1.45rem 1.15rem;border-radius:var(--radius);position:relative; border:1px solid var(--line);color:var(--ink); transform-origin:50% 88%; transform:translateX(calc((2.5 - var(--i)) * 156px)) rotate(calc((var(--i) - 2.5) * 4deg)) scale(.97); transition:transform .55s cubic-bezier(.2,.75,.25,1),box-shadow .35s ease; transition-delay:calc(var(--i) * 35ms); will-change:transform; } .deck .deck-card:nth-child(1),.deck .deck-card:nth-child(6){z-index:1} .deck .deck-card:nth-child(2),.deck .deck-card:nth-child(5){z-index:2} .deck .deck-card:nth-child(3),.deck .deck-card:nth-child(4){z-index:3} /* Colour: never fill a card with solid accent - that lands in a muddy mid-orange. The rotation is white, the cool panel tint and the accent tint, each with the same hairline, so the fan reads as one deck rather than a swatch chart. Ink stays dark on all three. */ .deck .deck-card:nth-child(3n+1){--c:#fff;--tile:var(--accent-bg)} .deck .deck-card:nth-child(3n+2){--c:var(--panel);--tile:#fff} .deck .deck-card:nth-child(3n+3){--c:var(--accent-bg);--tile:#fff} .deck .deck-card{background:var(--c);border:1px solid var(--line)} .deck .deck-card .ic{flex:none;width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:var(--tile);color:var(--accent-dk)} .deck .deck-card .ic svg{width:20px;height:20px} .deck .deck-card h3{font-size:1rem;line-height:1.3;margin:.95rem 0 0} .deck .deck-card p{color:var(--muted);font-size:.84rem;line-height:1.6;margin:.5rem 0 0} /* pointer on the deck: the hand opens. pointer on one card: it comes forward */ .deck:hover .deck-card{transform:none} .deck:hover .deck-card:hover{transform:translateY(-2px);z-index:9} @media (hover:none),(prefers-reduced-motion:reduce){ .deck .deck-card{transform:none;transition:none} } @media (max-width:1100px){ .deck{flex-wrap:wrap} .deck .deck-card{flex:0 0 30%;min-height:0;transform:none;transition:none} .deck:hover .deck-card:hover{transform:none} } @media (max-width:560px){.deck .deck-card{flex:0 0 100%}} a.card:hover .card-cta::after{transform:translateX(3px)} .card--accent{background:var(--accent-bg);border-color:var(--accent)} .card .kicker{font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-dk)} .kicker.kicker--muted{color:var(--muted2)} .icon-box{width:44px;height:44px;border-radius:11px;background:var(--accent-bg);color:var(--accent-dk);display:grid;place-items:center;flex:0 0 auto} .icon-box svg{width:22px;height:22px} /* channel cards: a coloured mark beside the channel name, then a tick list */ .ch-head{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem} .ch-head h3{margin:0} .ch-ic{display:inline-flex;color:var(--accent);flex:none} .ch-ic svg{width:24px;height:24px} .channel .ticks{margin:0} .channel .ticks li{font-size:.9rem} /* ---- fragmented vs unified ---- Each side argues with a diagram, not just a claim: on the left the same four systems sit apart, tilted, joined by runs that break before they arrive; on the right they hang off one core on unbroken links. Nothing animates - the tilt and the broken runs carry it. */ .vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;align-items:stretch} .vs-card{position:relative;overflow:hidden;display:flex;flex-direction:column;border-radius:var(--radius);padding:1.5rem 1.6rem 1.75rem} .vs-card .tag{align-self:flex-start;margin-bottom:.2rem;position:relative;z-index:2} .vs-card h3{position:relative;z-index:2;margin:0 0 .5rem} .vs-card p{position:relative;z-index:2;margin:0;font-size:.92rem;line-height:1.65} .vs-dia{position:relative;height:212px;margin:.4rem 0 1.25rem;z-index:1} .vs-dia svg.links{position:absolute;inset:0;width:100%;height:100%} .vs-chip{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;border-radius:11px;white-space:nowrap;font-family:var(--font-head);font-weight:700;font-size:.72rem;z-index:2} .vs-chip svg{width:16px;height:16px;flex:none} .vs-card--split{background:#fff;border:1px solid var(--line)} .vs-card--split h3{color:var(--ink2)} .vs-card--split p{color:var(--muted)} .vs-card--split .links line{stroke:var(--line2);stroke-width:2;stroke-dasharray:7 9;stroke-linecap:round} .vs-card--split .vs-chip{background:#fff;border:1px solid var(--line);color:var(--muted);box-shadow:0 4px 12px rgba(20,26,36,.06)} .vs-card--split .c1{left:24%;top:20%;transform:translate(-50%,-50%) rotate(-6deg)} .vs-card--split .c2{left:76%;top:15%;transform:translate(-50%,-50%) rotate(5deg)} .vs-card--split .c3{left:21%;top:76%;transform:translate(-50%,-50%) rotate(4deg)} .vs-card--split .c4{left:75%;top:71%;transform:translate(-50%,-50%) rotate(-5deg)} .vs-brk{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:28px;height:28px;border-radius:50%;background:#fff;border:1.5px solid rgba(232,112,58,.35);box-shadow:0 0 0 5px rgba(232,112,58,.1);display:grid;place-items:center;color:var(--accent-dk);z-index:3} .vs-brk svg{width:13px;height:13px} .vs-card--one{border:1.5px solid var(--accent);background:var(--accent-bg);box-shadow:0 18px 40px -28px rgba(232,112,58,.5)} .vs-card--one::after{content:"";position:absolute;right:-80px;top:-100px;width:250px;height:250px;border-radius:50%;background:rgba(255,255,255,.45);pointer-events:none} .vs-card--one .tag{background:var(--accent-btn);color:#fff} .vs-card--one h3{color:var(--ink)} .vs-card--one p{color:var(--ink2)} .vs-card--one .links line{stroke:rgba(232,112,58,.45);stroke-width:2;stroke-linecap:round} .vs-card--one .vs-chip{background:#fff;color:var(--ink);box-shadow:0 6px 16px -8px rgba(20,26,36,.25)} .vs-card--one .c1{left:22%;top:20%} .vs-card--one .c2{left:78%;top:20%} .vs-card--one .c3{left:22%;top:80%} .vs-card--one .c4{left:78%;top:80%} .vs-core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:82px;height:82px;border-radius:22px;background:var(--accent);color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;box-shadow:0 12px 28px -12px rgba(232,112,58,.75)} .vs-core svg{width:22px;height:22px} .vs-core b{font-family:var(--font-head);font-weight:800;font-size:.75rem} @media (max-width:860px){ .vs-grid{grid-template-columns:1fr} .vs-dia{height:190px} } @media (max-width:520px){ .vs-chip{font-size:.75rem;padding:.4rem .6rem;gap:.35rem} .vs-core{width:70px;height:70px} } /* pill / tags */.pill{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent-bg);color:var(--accent-dk);border-radius:20px;padding:.25rem .7rem;font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.05em;text-transform:uppercase} .pill .dot{width:7px;height:7px;border-radius:50%;background:var(--accent)} .pill--accent{background:var(--accent-bg);color:var(--accent-dk)} .pill--accent .dot{background:var(--accent)} .section--navy .pill--accent,.stat--dark .pill--accent, .hero--dark .pill,.section--navy .pill{background:rgba(232,112,58,.18);color:#f6b48c} .hero--dark .pill .dot,.section--navy .pill .dot{background:#f0a878} .tag{display:inline-block;font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-bg);border-radius:6px;padding:.3rem .6rem} /* ---- band (vertical sections) ---- */ .band .head{max-width:70ch;margin-bottom:1.6rem} .band .title{font-size:clamp(1.15rem,0.92rem + 1.2vw,2rem)} /* section head with a supporting image beside it; any card grid stays full width below */ .head-media{display:grid;grid-template-columns:1.2fr .8fr;gap:2.5rem;align-items:stretch;margin-bottom:2rem} .head-media .head{max-width:none;margin-bottom:0} /* the picture is absolutely placed so it adds no height of its own - the row is sized by the heading and standfirst, and the image simply fills it */ .head-visual{position:relative;min-height:190px;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .head-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .band-split{display:grid;grid-template-columns:1.15fr .85fr;gap:2.75rem;align-items:center} .band-split .head{max-width:none} .band-media img{width:100%;border-radius:var(--radius);aspect-ratio:4/3;object-fit:cover;box-shadow:0 22px 50px -26px rgba(0,0,0,.75)} .doors{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem} .door{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;text-decoration:none;transition:transform .12s,box-shadow .12s,border-color .12s} a.door:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow);border-color:var(--accent)} .door--flagship{background:var(--accent-bg);border:1.5px solid var(--accent)} .proofline{display:flex;gap:.65rem;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:.95rem 1.25rem;margin-top:1.5rem;font-size:.95rem;color:var(--ink2)} .proofline .dia{color:var(--accent);font-weight:800} /* the sentence is one flex item, so an inline link stays inside the text */ .proofline .pl-text{flex:1;min-width:0} .proofline .pl-text a{font-weight:700;color:var(--accent-dk)} /* ---- footprints / map ---- */ .map{width:100%;border-radius:var(--radius);border:1px solid var(--navy-line);overflow:hidden;aspect-ratio:16/6;object-fit:cover} .regions{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-top:1.5rem} .region{background:var(--navy2);border:1px solid var(--navy-line);border-radius:var(--radius);padding:1.25rem} .region .rt{display:flex;align-items:center;gap:.5rem;color:#fff;font-family:var(--font-head);font-weight:700} .region .rt svg{width:16px;height:16px;color:var(--accent)} .region p{color:var(--on-dark2);font-size:.9rem;margin:.5rem 0 0} /* ---- blended close (dual CTA) ---- */ .close-band{background:linear-gradient(105deg,#20140e,#3a1f12);color:#fff;padding-block:72px} .close-grid{display:grid;grid-template-columns:1fr 1px 1fr;gap:2.5rem;align-items:stretch} .close-grid .divider{background:rgba(255,255,255,.14)} .close-col{display:flex;flex-direction:column;gap:1rem;align-items:flex-start} .close-col .eyebrow{color:#f0a878} .close-col h2{color:#fff} .close-col p{color:var(--on-dark2)} /* ---- footer ---- */ .site-footer{background:var(--navy);color:var(--on-dark);padding-block:48px} .footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:2rem} .footer-brand .brand{color:#fff} .footer-brand p{color:var(--on-dark-mut);font-size:.9rem;margin:.8rem 0 .4rem} .footer-brand .partners{color:var(--on-dark-mut);font-size:.8rem} /* was #6b7480 = 3.68:1 on the navy footer */ .footer-col h3{color:#fff;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;margin:0 0 .8rem} .footer-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem} .footer-col a{color:#aeb6bf;font-size:.9rem} .footer-col a:hover{color:#fff;text-decoration:none} .footer-bottom{border-top:1px solid var(--navy-line);margin-top:2rem;padding-top:1.2rem;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--on-dark-mut);font-size:.82rem} /* ---- inner-page: pagehead + hero-split ---- */ .breadcrumb{font-size:.8rem;color:var(--muted);margin-bottom:.6rem} .breadcrumb a{color:var(--muted)} .breadcrumb a:hover{color:var(--accent-dk)} .breadcrumb [aria-current]{color:var(--ink);font-weight:600} .breadcrumb--on-dark,.breadcrumb--on-dark a{color:var(--on-dark-mut)} .hero-split{display:grid;grid-template-columns:1.1fr .9fr;gap:2.5rem;align-items:center} .hero-split .visual img{width:100%;border-radius:var(--radius);object-fit:cover;aspect-ratio:4/3} .hero-split .visual--cutout img{border-radius:0;object-fit:contain;aspect-ratio:auto;height:auto} /* Media-led hero: the image column takes the larger share and, on wide screens, bleeds into the right gutter */ .hero-split--media{grid-template-columns:1fr 1fr;gap:2.5rem} .hero-split--media h1{font-size:clamp(1.35rem,0.95rem + 2.17vw,2.9rem)} /* On wide screens the media column bleeds into the right gutter. The slider clips its own children, so the bleed goes on the slider itself. */ @media (min-width:1200px){ .hero-split--media .visual img, .hero-split--media .visual .slider{width:calc(100% + min(40px, (100vw - var(--maxw)) / 2 + 8px));max-width:none} .hero-split--media .visual .slider img{width:100%} } .hero--dark .hero-split{margin-top:.4rem} /* long headline: let the picture fill the column height instead of leaving a gap under it. Same column width as the other heroes - only the height changes. */ @media (min-width:901px){ .hero-split--fill{align-items:stretch} .hero-split--fill .visual{position:relative;min-height:417px} .hero-split--fill .visual img{position:absolute;inset:0;height:100%;aspect-ratio:auto;object-fit:cover} } .hero--dark{background:var(--navy);color:var(--on-dark)} .hero--dark h1{color:#fff} .hero--dark .lede{color:var(--on-dark)} /* feature list w/ split */ .built{list-style:none;margin:0;padding:0;display:grid;gap:.9rem} .built li{display:grid;grid-template-columns:auto 1fr;gap:.9rem;align-items:start} .built b{font-family:var(--font-head)} .built span{display:block;color:var(--muted);font-size:.95rem} /* ---- prose (articles / case studies) ---- */ .prose{max-width:70ch} .prose h2{margin-top:2rem} .prose h3{margin-top:1.5rem} .prose p,.prose li{color:var(--ink2)} .prose ul,.prose ol{padding-left:1.2rem} .prose li{margin-bottom:.4rem} .quote{background:var(--panel);border-left:4px solid var(--accent);border-radius:0 12px 12px 0;padding:1.25rem 1.5rem;margin:1.5rem 0} .quote p{font-size:1.1rem;color:var(--ink);font-style:italic;margin:0 0 .6rem} .quote .who{font-family:var(--font-head);font-weight:700;font-size:.85rem;color:var(--muted)} /* section head with the standfirst beside the heading instead of under it */ /* column tracks match .loop-body below it, so the heading sits over the case card and the standfirst over the wheel */ .sec-split{display:grid;grid-template-columns:1.04fr .96fr;gap:2.75rem;align-items:start} .sec-split>*{min-width:0} .sec-split .lede{margin:0;max-width:none;font-size:.98rem} .lede-note{margin:1rem 0 0;padding-left:.9rem;border-left:2px solid var(--accent);max-width:56ch;font-family:var(--font-head);font-weight:700;font-size:.95rem;line-height:1.55;color:var(--ink2)} /* ---- agent loop (AI agents page) ---- */ .loop-body{display:grid;grid-template-columns:1.04fr .96fr;gap:2.75rem;align-items:stretch} .lcase{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.7rem;box-shadow:var(--shadow)} .lcase-tag{font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dk);margin:0 0 1rem} .lq{position:relative;margin:0 0 1.15rem;padding:0 0 0 2.1rem;font-family:var(--font-head);font-weight:700;font-size:1.02rem;line-height:1.45;color:var(--ink)} .lq::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px;border-radius:3px;background:linear-gradient(180deg,#f2a077,var(--accent))} .lq .qm{position:absolute;left:.75rem;top:-.35rem;font-family:var(--font-head);font-weight:800;font-size:1.9rem;line-height:1;color:var(--accent-bg)} .lq .qwho{display:block;margin-top:.3rem;font-family:var(--font-body);font-weight:400;font-size:.78rem;color:var(--muted)} .lsteps{list-style:none;margin:0;padding:0;display:grid;gap:.35rem} .lstep{display:grid;grid-template-columns:2.5rem 1fr;column-gap:.8rem;align-items:start;padding:.55rem .6rem;border-radius:12px;transition:background .3s ease} .lstep .sic{width:2.5rem;height:2.5rem;border-radius:12px;display:grid;place-items:center;background:var(--accent-bg);color:var(--accent-dk);transition:background .3s,color .3s,transform .3s ease} .lstep .sic svg{width:19px;height:19px} .lstep .sbody b{display:block;font-family:var(--font-head);font-size:.88rem;margin-bottom:.1rem;transition:color .3s} .lstep .sbody span{display:block;color:var(--muted);font-size:.84rem;line-height:1.55} .lstep:hover,.lstep.is-on{background:var(--panel)} .lstep:hover .sic,.lstep.is-on .sic{background:var(--accent);color:#fff;transform:scale(1.06)} .lstep:hover .sbody b,.lstep.is-on .sbody b{color:var(--accent-dk)} /* the wheel, in a spotlight so it does not float on a flat band */ .loopwrap{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.4rem} .loopwrap::before{content:"";position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:min(440px,calc(100vw - 32px));height:min(440px,calc(100vw - 32px));border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(255,255,255,0) 30%,rgba(232,112,58,.07) 58%,rgba(232,112,58,0) 72%)} .loop-tag{position:relative;z-index:2;font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:0} .loop{position:relative;width:min(400px,86vw);aspect-ratio:1;margin:0 auto;overflow:visible} /* The ring turns slowly and carries a dot with it. Decoration only. */ .loop .ring{position:absolute;inset:24%;border-radius:50%;border:2px dashed rgba(232,112,58,.4);animation:ring-spin 44s linear infinite} .loop .ring::before{content:"";position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(232,112,58,.14)} @keyframes ring-spin{to{transform:rotate(360deg)}} .lcore{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;width:118px;height:118px;border-radius:50%;background:linear-gradient(150deg,var(--accent),var(--accent-dk));color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.15rem;box-shadow:0 20px 46px rgba(232,112,58,.4)} .lcore svg{width:26px;height:26px} .lcore b{font-family:var(--font-head);font-weight:700;font-size:.87rem} .lcore span{font-size:.63rem;opacity:.85;line-height:1.2} .lnode{position:absolute;transform:translate(-50%,-50%);z-index:3;width:124px;text-align:center} .lnode .ic{width:52px;height:52px;border-radius:16px;margin:0 auto .45rem;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px -12px rgba(20,26,36,.45);display:flex;align-items:center;justify-content:center;color:var(--accent);transition:background .3s,color .3s,border-color .3s,box-shadow .3s,transform .3s ease} .lnode .ic svg{width:23px;height:23px} .lnode b{display:block;font-family:var(--font-head);font-weight:700;font-size:.87rem;transition:color .3s} .lnode:hover .ic,.lnode.is-on .ic{background:var(--accent);color:#fff;border-color:transparent;transform:translateY(-3px) scale(1.07);box-shadow:0 14px 26px -10px var(--accent)} .lnode:hover b,.lnode.is-on b{color:var(--accent-dk)} .ln-top{left:50%;top:11%} .ln-right{left:88%;top:50%} .ln-bot{left:50%;top:89%} .ln-left{left:12%;top:50%} @media (prefers-reduced-motion:reduce){ .loop .ring{animation:none} .lstep,.lstep .sic,.lnode .ic{transition:none} } /* ---- ownership band (AI agents page) ---- */ .ownsec{position:relative;overflow:hidden} .ownsec::after{content:"";position:absolute;right:-140px;top:-160px;width:420px;height:420px;border-radius:50%;background:radial-gradient(circle,rgba(232,112,58,.22),rgba(232,112,58,0) 68%);pointer-events:none} .own-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.06fr .94fr;gap:3rem;align-items:center} .own-grid .lede{margin:0;max-width:none} .own-points{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin:0;padding:0} .own-points li{display:grid;grid-template-columns:38px 1fr;grid-template-rows:auto auto;column-gap:.75rem;align-items:center;background:rgba(255,255,255,.07);border:1px solid var(--navy-line);border-radius:14px;padding:.9rem 1rem;transition:background .3s ease,border-color .3s ease} .own-points li:hover{background:rgba(255,255,255,.11);border-color:rgba(232,112,58,.45)} .own-points .oi{grid-row:1/3;width:38px;height:38px;border-radius:11px;background:#fff;color:var(--accent-dk);display:flex;align-items:center;justify-content:center} .own-points .oi svg{width:19px;height:19px} .own-points b{font-family:var(--font-head);font-weight:700;font-size:.9rem;color:#fff} .own-points li>span:last-child{font-size:.78rem;color:var(--on-dark)} /* partner variant: one centred label per card, no icon column */ .partner-points li{grid-template-columns:1fr;grid-template-rows:auto auto;text-align:center;padding:1.05rem 1rem} /* same band on a light section */ .ownsec--light::after{background:radial-gradient(circle,rgba(232,112,58,.13),rgba(232,112,58,0) 68%)} .ownsec--light .own-points li{background:#fff;border-color:var(--line);box-shadow:var(--shadow)} .ownsec--light .own-points li:hover{background:#fff;border-color:var(--accent)} .ownsec--light .own-points b{color:var(--ink)} .ownsec--light .own-points li>span:last-child{color:var(--muted)} /* ---- busywork swap ---- */ .swap-list{list-style:none;margin:0;padding:0;display:grid;gap:.7rem} .swap-list li{display:grid;grid-template-columns:1.2rem 1fr;column-gap:.6rem;align-items:start;font-size:.92rem;line-height:1.55} .swap-list svg{width:1.05rem;height:1.05rem;margin-top:.15rem} .cmp-rent .swap-list li{color:var(--muted)} .cmp-rent .swap-list svg{color:var(--muted2)} .cmp-rent .swap-list s{text-decoration:line-through;text-decoration-color:var(--line2)} .cmp-own .swap-list li{color:var(--ink2)} .cmp-own .swap-list svg{color:var(--accent)} /* ---- tables ---- */ table.data th,table.data td{text-align:left;padding:.7rem .9rem;border-bottom:1px solid var(--line)} table.data th{font-family:var(--font-head);background:var(--panel)} /* comparison table */ .compare{overflow-x:auto;border-radius:var(--radius)} .compare table{width:100%;border-collapse:separate;border-spacing:0;min-width:680px;background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)} .compare th,.compare td{padding:.95rem 1.1rem;text-align:left;font-size:.93rem;border-bottom:1px solid var(--line)} .compare thead th{font-family:var(--font-head);font-weight:800;font-size:.86rem;background:var(--panel);color:var(--ink)} .compare thead th.win{background:var(--accent-btn);color:#fff} .compare tbody th{font-family:inherit;font-weight:700;color:var(--ink)} .compare tbody td{color:var(--muted)} .compare tbody td.win{background:var(--accent-bg);font-weight:700;color:var(--accent-dk)} .compare tbody td.yes{color:var(--ink2);font-weight:600} .compare tbody td.no{color:var(--muted2)} .compare tr:last-child th,.compare tr:last-child td{border-bottom:none} /* ---- forms ---- */ .form{display:grid;gap:1rem;max-width:560px} .field{display:flex;flex-direction:column;gap:.35rem} .field label{font-family:var(--font-head);font-weight:600;font-size:.9rem} .field input,.field select,.field textarea{ font:inherit;padding:.7rem .85rem;border:1.5px solid var(--line2);border-radius:var(--radius-sm);background:#fff;color:var(--ink); } .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:2px solid rgba(232,112,58,.28);outline-offset:1px} /* ---- form validation ---------------------------------------------------- :user-invalid, not :invalid - a field must never turn red before the visitor has typed in it or tried to submit. The error colour is deliberately not the rust accent: an error has to read as an error, not as brand furniture. */ .field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{border-color:var(--err);background:#fdf7f6} .field input:user-invalid:focus,.field select:user-invalid:focus,.field textarea:user-invalid:focus{outline-color:rgba(192,57,43,.3)} .field .err{display:none;font-size:.8rem;line-height:1.4;color:var(--err)} .field input:user-invalid~.err,.field select:user-invalid~.err,.field textarea:user-invalid~.err{display:block} /* ---- FAQ / accordion ---- */ .faq details{border-bottom:1px solid var(--line);padding:1rem 0} .faq summary{font-family:var(--font-head);font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--accent);font-weight:800} .faq details[open] summary::after{content:"−"} .faq p{margin:.8rem 0 0;color:var(--muted)} /* base styling so bare
FAQs match the .faq look everywhere */ details{border-bottom:1px solid var(--line);padding:1rem 0} summary{font-family:var(--font-head);font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem;align-items:center} summary::-webkit-details-marker{display:none} summary::after{content:"+";color:var(--accent);font-weight:800;font-size:1.15em} details[open] summary::after{content:"−"} details>:not(summary){margin-top:.8rem;color:var(--muted)} /* ---- steps / timeline ---- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;counter-reset:step} .steps--4{grid-template-columns:repeat(4,1fr)} /* Number beside the heading, on every screen. It used to sit above the heading on desktop and beside it only on phones; one layout is easier to scan and keeps the three cards reading the same everywhere. The number spans both rows so the heading and its paragraph share a column. */ .step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;position:relative; display:grid;grid-template-columns:2.2rem 1fr;column-gap:.7rem;align-items:start; /* cards in a row stretch to the tallest one. Without this the leftover height is shared out between the two rows, so a card with less text gets a wider gap under its heading and the paragraphs stop lining up across the row. Keep the rows content-sized; spare space goes below. */ align-content:start} .step .num{grid-row:1/3;line-height:1.15} .step h3{margin:0 0 .3rem} .step p{margin:0} .step .num{font-family:var(--font-head);font-weight:800;color:var(--accent);font-size:1.5rem} /* four steps across: the longest title needs a touch less size to stay on one line */ .grid-4 .step h3{font-size:1.02rem} /* ---- image thumb (case cards) ---- */ .thumb{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:0;display:block} /* stat-led card visual — replaces duplicate stock photos on case studies */ .thumb--stat{aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;text-align:center;padding:1rem;background:linear-gradient(135deg,var(--navy),var(--navy2));border-bottom:3px solid var(--accent)} .thumb--stat .n{font-family:var(--font-head);font-weight:800;font-size:2.3rem;letter-spacing:-.02em;line-height:1;color:#fff} .thumb--stat .l{font-size:.75rem;color:var(--on-dark-mut);text-transform:uppercase;letter-spacing:.1em} /* photo behind the stat: the number stays the headline, the picture gives the card a sense of the client's world. Overlay keeps the figure legible on any image. */ .thumb--photo{position:relative;overflow:hidden} .thumb--photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .thumb--photo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(20,26,36,.66),rgba(28,36,49,.44))} .thumb--photo .n,.thumb--photo .l{text-shadow:0 1px 4px rgba(12,17,25,.7)} .thumb--photo .l{color:rgba(255,255,255,.94)} .thumb--photo .n,.thumb--photo .l{position:relative;z-index:2} .card--media{padding:0;overflow:hidden} .card--media .body{padding:1.3rem;display:flex;flex-direction:column;gap:.5rem} /* two-up media cards are wide, so a 16:9 photo makes a very tall card; a letterbox crop keeps the card in proportion */ .grid-2 .card--media .thumb{aspect-ratio:2.2/1} .grid-2 .card--media .body{padding:1.1rem 1.2rem 1.2rem;gap:.4rem} /* pills and tags hug their text rather than spanning the card */ .card--media .body>.tag,.card--media .body>.pill{align-self:flex-start} /* ---- ways to work with us (audience switch, CSS-only) ---- */ .ways{max-width:1040px;margin:2rem auto 0} .ways-radio{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none} .ways-switch{display:flex;justify-content:center;margin-bottom:2.5rem} .ways-switch label{display:inline-flex;align-items:center;gap:.55rem;cursor:pointer;font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--muted);padding:.85rem 1.5rem;background:#fff;border:1.5px solid var(--line);transition:background .15s ease,color .15s ease,border-color .15s ease} .ways-switch label:first-of-type{border-radius:var(--radius-sm) 0 0 var(--radius-sm)} .ways-switch label:last-of-type{border-radius:0 var(--radius-sm) var(--radius-sm) 0;border-left:0} .ways-switch label svg{width:18px;height:18px;flex:none} .ways-switch label:hover{color:var(--ink)} #way-owner:checked~.ways-switch label[for="way-owner"], #way-it:checked~.ways-switch label[for="way-it"]{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff} #way-owner:focus-visible~.ways-switch label[for="way-owner"], #way-it:focus-visible~.ways-switch label[for="way-it"]{outline:3px solid var(--teal);outline-offset:2px} .ways-panel{display:none;grid-template-columns:1fr 1fr;gap:3.5rem;align-items:stretch} #way-owner:checked~.panel-owner,#way-it:checked~.panel-it, #aud-op:checked~.panel-sell,#aud-it:checked~.panel-build,#aud-rs:checked~.panel-reseller, #vr-op:checked~.panel-operator,#vr-rs:checked~.panel-vr-reseller, #rt-op:checked~.panel-stores,#rt-chain:checked~.panel-chain,#rt-rs:checked~.panel-rt-reseller, #mc-op:checked~.panel-mc-op,#mc-oem:checked~.panel-mc-oem,#mc-si:checked~.panel-mc-si{display:grid} #aud-op:checked~.ways-switch label[for="aud-op"], #aud-it:checked~.ways-switch label[for="aud-it"], #aud-rs:checked~.ways-switch label[for="aud-rs"], #vr-op:checked~.ways-switch label[for="vr-op"], #vr-rs:checked~.ways-switch label[for="vr-rs"], #rt-op:checked~.ways-switch label[for="rt-op"], #rt-chain:checked~.ways-switch label[for="rt-chain"], #rt-rs:checked~.ways-switch label[for="rt-rs"], #mc-op:checked~.ways-switch label[for="mc-op"], #mc-oem:checked~.ways-switch label[for="mc-oem"], #mc-si:checked~.ways-switch label[for="mc-si"]{background:var(--accent-btn);border-color:var(--accent-btn);color:#fff} #aud-op:focus-visible~.ways-switch label[for="aud-op"], #aud-it:focus-visible~.ways-switch label[for="aud-it"], #aud-rs:focus-visible~.ways-switch label[for="aud-rs"], #vr-op:focus-visible~.ways-switch label[for="vr-op"], #vr-rs:focus-visible~.ways-switch label[for="vr-rs"], #rt-op:focus-visible~.ways-switch label[for="rt-op"], #rt-chain:focus-visible~.ways-switch label[for="rt-chain"], #rt-rs:focus-visible~.ways-switch label[for="rt-rs"], #mc-op:focus-visible~.ways-switch label[for="mc-op"], #mc-oem:focus-visible~.ways-switch label[for="mc-oem"], #mc-si:focus-visible~.ways-switch label[for="mc-si"]{outline:3px solid var(--accent);outline-offset:2px} /* three-way switch: middle tab keeps square ends */ .ways-switch label:not(:first-of-type):not(:last-of-type){border-radius:0;border-left:0} .ticks b{font-family:var(--font-head);color:var(--ink)} .aud-visual{display:flex;align-items:center} .aud-visual>*{width:100%} /* console mock-ups beside the audience panels */ .mock{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff;box-shadow:var(--shadow)} .mock-bar{display:flex;gap:6px;padding:.7rem .9rem;background:var(--panel);border-bottom:1px solid var(--line)} /* window dots pick up the brand palette instead of reading as grey smudges */ .mock-bar i{width:10px;height:10px;border-radius:50%;background:var(--line2)} .mock-bar i:nth-child(1){background:var(--accent)} .mock-bar i:nth-child(2){background:var(--teal)} .mock-bar i:nth-child(3){background:var(--line2)} .mock-body{padding:1.1rem 1.25rem 1.25rem} .mock-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem} .mock-top b{font-family:var(--font-head);font-size:.95rem} .mock-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line);font-size:.88rem;color:var(--muted)} .mock-row b{display:flex;align-items:center;gap:.55rem;font-family:var(--font-head);font-weight:600;color:var(--ink)} .mock-row .dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex:none} .mock--dark{background:var(--navy);border-color:var(--navy-line)} .mock--dark .mock-bar{background:var(--navy2);border-bottom-color:var(--navy-line)} .mock--dark .mock-bar i:nth-child(3){background:var(--navy-line)} .mock--dark .mock-top b{color:#fff} .mock--dark .mock-row{border-top-color:var(--navy-line);color:var(--on-dark)} .mock--dark .mock-row b{color:#fff} .mock--dark .mock-row .dot{background:#f0a878} .panel-it .ways-visual{order:-1} .ways-text .tag{margin-bottom:1rem} .tag--teal{color:var(--teal-ink);background:var(--teal-bg)} .ways-text h3{font-size:clamp(1.45rem,2.4vw,1.8rem);font-weight:800;line-height:1.2;margin-bottom:.8rem} .ways-text>p{color:var(--muted);margin-bottom:1.3rem} .ticks{list-style:none;margin:0 0 1.6rem;padding:0;display:grid;gap:.7rem} .ticks li{position:relative;padding-left:2rem;font-size:.95rem;color:var(--ink2)} .ticks li::before{content:"✓";position:absolute;left:0;top:.15rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--accent-bg);color:var(--accent-dk);font-size:.66rem;font-weight:800;display:grid;place-items:center} /* image fills the height of the copy beside it; three brand-coloured tabs peek above */ .ways-visual{position:relative;min-height:330px} .ways-visual .layer{position:absolute;left:50%;transform:translateX(-50%);height:24px;border-radius:14px 14px 0 0} .ways-visual .l1{top:0;width:72%;background:var(--accent)} .ways-visual .l2{top:9px;width:80%;background:var(--teal)} .ways-visual .l3{top:18px;width:88%;background:var(--navy)} .ways-visual img{position:absolute;top:30px;left:0;right:0;width:100%;height:calc(100% - 30px);object-fit:cover;border-radius:var(--radius);box-shadow:var(--shadow)} /* ---- hero slider: photos cross-fade on one loop, no JavaScript ---- Each slide is on screen for a third of the cycle; the negative delays keep the first frame visible at load. */ /* media-led hero variant: the photo column takes the larger share */ .hero-split--wide{grid-template-columns:.93fr 1.07fr;gap:2.75rem} .slider{position:relative;aspect-ratio:5/4;border-radius:var(--radius);overflow:hidden;contain:paint} /* Only opacity animates, and each layer is GPU-promoted, so a fade costs a composite instead of a repaint. A 24s loop with 2s eased cross-fades reads as a slow dissolve rather than a flick. */ .slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:0;opacity:0; transform:translateZ(0);backface-visibility:hidden;will-change:opacity; animation:slider-fade 24s ease-in-out infinite} .slider img:nth-child(1){animation-delay:0s} .slider img:nth-child(2){animation-delay:-16s} .slider img:nth-child(3){animation-delay:-8s} @keyframes slider-fade{0%,29%{opacity:1}37%,92%{opacity:0}100%{opacity:1}} @media (prefers-reduced-motion:reduce){ .slider img{animation:none;opacity:0} .slider img:first-child{opacity:1} } /* ---- glass cards floating over the hero slider ---- A sketch of the product, not live data, so they are hidden from screen readers. The standing translateZ(0) plus will-change puts each card on its own compositor layer: the text is rasterised once and the layer is moved, which is what keeps the small type from shimmering as it drifts. Long, staggered loops and a 5px travel keep the movement calm. */ .ov{position:absolute;z-index:3;background:rgba(255,255,255,.92);border:1px solid rgba(255,255,255,.7);border-radius:12px;box-shadow:0 12px 30px rgba(20,26,36,.2);color:var(--ink);font-size:.68rem; transform:translateZ(0);will-change:transform;backface-visibility:hidden; animation:ov-float 16s cubic-bezier(.45,0,.55,1) infinite} @keyframes ov-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-5px,0)}} @media (prefers-reduced-motion:reduce){.ov{animation:none}} /* one card per corner, so the photo stays visible through the middle */ .ov--res{top:14px;left:14px;width:176px;padding:.55rem .6rem} .ov-h{display:flex;align-items:center;gap:.45rem;font-family:var(--font-head);font-weight:700;font-size:.7rem;margin-bottom:.3rem} .ov-ic{width:18px;height:18px;border-radius:5px;background:var(--ink);color:#fff;display:grid;place-items:center;font-size:.62rem;flex:none} .ov-row{display:flex;align-items:center;gap:.45rem;padding:.25rem 0} .ov-av{width:24px;height:24px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent-dk));color:#fff;display:grid;place-items:center;font-family:var(--font-head);font-weight:700;font-size:.6rem;flex:none} .ov-row b{display:block;font-family:var(--font-head);font-size:.7rem;line-height:1.2} .ov-row em{font-style:normal;font-size:.6rem;color:var(--muted)} .ov--price{right:14px;bottom:14px;width:146px;padding:.55rem .65rem;animation-delay:-4s;animation-duration:17s} .ov-label{font-size:.62rem;color:var(--muted)} .ov-price{display:block;font-family:var(--font-head);font-weight:800;font-size:1.25rem;margin:.05rem 0 .35rem} .ov-line{display:flex;justify-content:space-between;align-items:center;gap:.5rem;font-size:.65rem;color:var(--ink2);padding:.18rem 0} .ov-line em{font-style:normal;font-size:.6rem;font-weight:700;padding:.12rem .4rem;border-radius:5px} .ov-line .is-up{color:var(--teal-ink);background:var(--teal-bg)} .ov-line .is-down{color:var(--accent-dk);background:var(--accent-bg)} .ov-btn{display:block;margin-top:.45rem;text-align:center;background:var(--teal-bg);color:var(--teal-ink);font-family:var(--font-head);font-weight:700;font-size:.65rem;padding:.35rem;border-radius:7px} .ov--occ{left:14px;bottom:14px;width:134px;padding:.55rem .65rem;animation-delay:-8s;animation-duration:18s} .ov--occ b{display:block;font-family:var(--font-head);font-weight:800;font-size:1.25rem;line-height:1} .ov--occ span{font-size:.62rem;color:var(--muted)} .ov-bar{height:6px;border-radius:99px;background:rgba(20,26,36,.12);margin-top:.4rem;overflow:hidden} .ov-bar i{display:block;height:100%;width:92%;background:linear-gradient(90deg,var(--teal),var(--teal-ink))} .ov--chan{top:14px;right:14px;display:flex;align-items:center;gap:.4rem;border-radius:99px;padding:.4rem .7rem;font-family:var(--font-head);font-weight:700;font-size:.65rem;animation-delay:-12s;animation-duration:15s} .ov-dot{width:8px;height:8px;border-radius:50%;background:var(--teal);flex:none} /* phones: the stage is a third of the width, so the cards shrink and the price panel — the tallest of them — steps out */ @media (max-width:560px){ .ov{font-size:.62rem;border-radius:12px} .ov--res{top:10px;left:10px;width:auto;max-width:66%;padding:.5rem .6rem} .ov--res .ov-h{font-size:.66rem;margin-bottom:.3rem} .ov--res .ov-row{padding:.22rem 0} .ov--res .ov-av{width:22px;height:22px;font-size:.58rem} .ov--res .ov-row b{font-size:.66rem} .ov--res .ov-row em{font-size:.58rem} .ov--price{display:none} .ov--occ{left:10px;bottom:10px;width:126px;padding:.5rem .6rem} .ov--occ b{font-size:1.1rem} .ov--occ span{font-size:.58rem} .ov--chan{top:auto;bottom:10px;right:10px;padding:.35rem .6rem;font-size:.6rem} } /* ---- overview: copy left, booking-calendar mock right ---- A sketch of the dashboard, not live data. Booking bars are positioned by whole days: each column is 1/7th of the week, so the offsets come in sevenths rather than arbitrary percentages. */ .ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center} .cal-wrap{position:relative} .cal-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.7rem} .cal-top b{font-family:var(--font-head);font-size:1.05rem} .cal-new{font-family:var(--font-head);font-weight:700;font-size:.66rem;color:#fff;background:var(--accent-btn);border-radius:7px;padding:.3rem .6rem} .cal-props{display:flex;flex-wrap:wrap;gap:.35rem;margin-bottom:.7rem} .cal-tab{font-size:.7rem;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:.25rem .6rem} .cal-tab.is-on{color:var(--ink);border-color:var(--line2);font-weight:600} .cal-head{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;font-family:var(--font-head);font-weight:700;font-size:.58rem;letter-spacing:.06em;color:var(--muted2);text-align:center;margin-bottom:.3rem} .cal-week{position:relative;display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:3px} /* the bottom padding is the lane the booking bar sits in, so a bar never covers the date or its nightly price */ .cal-day{background:var(--panel);border-radius:7px;padding:.45rem .3rem 1.5rem;text-align:center} .cal-day b{display:block;font-family:var(--font-head);font-size:.78rem;line-height:1.15} .cal-day em{font-style:normal;font-size:.62rem;color:var(--muted)} .cal-bk{position:absolute;bottom:.3rem;height:19px;display:flex;align-items:center;gap:.3rem;border-radius:6px;padding:0 .4rem;font-family:var(--font-head);font-weight:700;font-size:.58rem;color:#fff;white-space:nowrap;overflow:hidden} .cal-bk em{font-style:normal;font-weight:600} /* opacity:.85 dropped it to 2.64:1 */ .cal-bk--air{background:var(--accent-btn)} .cal-bk--book{background:var(--navy)} .cal-bk--direct{background:var(--teal-ink)} .cal-bk--vrbo{background:var(--muted)} .cal-bk--a{left:28.6%;width:42.8%} .cal-bk--b{left:14.3%;width:57.1%} .cal-bk--c{left:42.8%;width:42.8%} .cal-bk--d{left:0;width:28.6%} .cal-float{position:absolute;z-index:2;display:flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 12px 30px rgba(20,26,36,.16);padding:.5rem .7rem;font-family:var(--font-head);font-weight:700;font-size:.66rem;white-space:nowrap} .cal-float--1{left:-18px;bottom:-16px} .cal-float--2{right:-14px;top:-16px} .cal-ic{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:#fff;font-style:normal;font-size:.62rem;flex:none} .cal-ic--teal{background:var(--teal)} .cal-ic--accent{background:var(--accent)} /* ---- own vs rent: two cards either side of a "vs" ---- Final runs this on a colour band; here it stays on the page ground, with the owned side carrying the accent tint so the preferred option reads first. */ /* one band, not a stack: the argument on the left, the two cards beside it */ .cmp-layout{display:grid;grid-template-columns:.95fr 1.05fr;gap:3rem;align-items:center} .cmp-math{max-width:470px;margin:1.4rem 0 0} .cm-row{display:grid;grid-template-columns:140px 1fr;gap:1rem;padding:.75rem 0;border-top:1px solid var(--line)} .cm-row:last-child{border-bottom:1px solid var(--line)} .cmp-math dt{font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)} .cmp-math dd{margin:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem;color:var(--ink2)} .cmp-grid{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:.6rem} .cmp-vs{display:grid;place-items:center} .cmp-vs span{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:#fff;border:1px solid var(--line);font-family:var(--font-head);font-weight:800;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)} .cmp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.25rem 1.2rem 1.4rem} .cmp-rent{background:var(--panel)} .cmp-own{background:var(--accent-bg);border-color:var(--accent)} .cmp-mark{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:#fff;margin-bottom:1rem} .cmp-mark svg{width:18px;height:18px} .cmp-no{border:1px solid var(--line);color:var(--muted)} .cmp-yes{color:var(--accent-dk)} .cmp-tag{font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.11em;text-transform:uppercase;margin:0 0 .7rem} .cmp-rent .cmp-tag{color:var(--muted)} .cmp-own .cmp-tag{color:var(--accent-dk)} .cmp-sub{display:block;font-weight:600;font-size:.75rem;letter-spacing:0;text-transform:none;color:var(--muted2);margin-top:.15rem} .cmp-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem} .cmp-list li{position:relative;padding-left:.9rem;font-size:.85rem;line-height:1.55;color:var(--ink2)} .cmp-list li::before{content:"";position:absolute;left:0;top:.6rem;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:.45} /* ---- ERP integration: argument left, sync diagram right ---- Two white nodes joined by a two-way arrow, with the platforms we connect listed underneath. The arrow labels drop away on a phone, where they would otherwise squeeze the nodes. */ .erp-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:3rem;align-items:center} .erp-grid .head{margin-bottom:0} .erp-viz{display:flex;flex-direction:column;align-items:center} .syncviz{display:flex;align-items:center;justify-content:center;gap:1.1rem;flex-wrap:wrap} .syncviz .node{background:#fff;border-radius:16px;padding:1.1rem 1.4rem;text-align:center;min-width:150px;box-shadow:0 18px 40px -22px rgba(0,0,0,.55)} .syncviz .node .ic{width:40px;height:40px;border-radius:11px;margin:0 auto .6rem;display:grid;place-items:center} .syncviz .node .ic svg{width:21px;height:21px} .syncviz .node:first-child .ic{background:var(--accent-bg);color:var(--accent-dk)} .syncviz .node:last-child .ic{background:var(--teal-bg);color:var(--teal-ink)} .syncviz .node b{display:block;font-family:var(--font-head);font-weight:700;font-size:.95rem;color:var(--ink)} .syncviz .node span:last-child{font-size:.72rem;color:var(--muted)} /* the arrow carries the accent; its labels read as small caps, not body text */ .syncviz .link{display:flex;flex-direction:column;align-items:center;gap:.45rem;color:#f0a878;white-space:nowrap} .syncviz .link span:not(.ar){font-family:var(--font-head);font-weight:700;font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark2)} .syncviz .link .ar svg{width:96px;height:20px} .erp-viz .logos{margin-top:1.4rem} /* phones: the two nodes stack and the arrow turns to point down the column */ @media (max-width:640px){ .syncviz{flex-direction:column;gap:.6rem;width:100%} .syncviz .node{width:100%;min-width:0;padding:1rem 1.2rem} .syncviz .link>span:not(.ar){display:none} .syncviz .link .ar{display:grid;place-items:center;height:52px} .syncviz .link .ar svg{width:52px;transform:rotate(90deg)} } /* ---- platform row: logo on top, copy under it ---- The visible logo is the name, so each card keeps a hidden heading for screen readers and search. Logos are capped by height, not width, so five very different lockups still sit on one optical line. */ .plist{display:grid;grid-template-columns:repeat(5,1fr);gap:.9rem} .prow{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.1rem 1rem 1.25rem;transition:border-color .25s ease,box-shadow .25s ease} .prow:hover{border-color:var(--accent);box-shadow:var(--shadow)} .prow .plate{height:88px;display:flex;align-items:center;justify-content:center;border-radius:14px;margin-bottom:1rem;padding:0 .5rem} .prow .plate img{max-height:36px;max-width:100%;width:auto;height:auto;object-fit:contain} .prow p{font-size:.85rem;color:var(--muted);line-height:1.6;margin:0} /* ---- ActiveHub: copy left, one case-study card right ---- */ .ah-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:2.75rem;align-items:center} .ah-case{display:flex;flex-direction:column;align-items:flex-start;background:var(--navy);color:#fff;border-radius:var(--radius);padding:1.75rem 1.6rem;text-decoration:none;box-shadow:var(--shadow);transition:transform .2s ease,box-shadow .2s ease} .ah-case:hover{transform:translateY(-4px);text-decoration:none;box-shadow:0 14px 34px rgba(20,26,36,.28)} .ah-case-tag{font-family:var(--font-head);font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(255,255,255,.45);border-radius:6px;padding:.32rem .7rem;margin-bottom:1.1rem} .ah-case b{font-family:var(--font-head);font-size:1.2rem;font-weight:700;line-height:1.3} .ah-case-stat{font-family:var(--font-head);font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:#f0a878;margin:.6rem 0 .3rem} .ah-case-p{font-size:.9rem;line-height:1.6;color:var(--on-dark2)} .ah-case-go{margin-top:1.4rem} .ah-case:hover .ah-case-go{background:var(--accent-dk)} /* ---- agentic commerce: copy left, line-drawn robot right ---- */ .agentic-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:2.75rem;align-items:center} .ag-bot{display:flex;justify-content:center} .ag-bot svg{width:210px;height:210px;fill:none;stroke:var(--accent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round} .ag-bot svg circle{fill:var(--accent);stroke:none} .ag-bot img{width:210px;height:210px;object-fit:contain} /* ---- back to top ---- */ .to-top{position:fixed;right:20px;bottom:20px;z-index:110;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;box-shadow:0 4px 10px rgba(20,26,36,.18),0 10px 28px rgba(20,26,36,.28);opacity:0;visibility:hidden;transform:translateY(12px);transition:opacity .2s ease,transform .2s ease,visibility .2s,background .15s ease} .to-top.is-visible{opacity:1;visibility:visible;transform:none} .to-top:hover{background:var(--accent-dk);text-decoration:none} .to-top svg{width:20px;height:20px} /* ---- final CTA (light) ---- */ .cta-band{text-align:center} .cta-band .btn-row{justify-content:center} /* ---- utilities ---- */ .center{text-align:center} .mt-2{margin-top:2rem}.mt-1{margin-top:1rem} .maxw-720{max-width:720px} .maxw-820{max-width:820px} /* utilities that replaced repeated inline styles */ .mb-1{margin-bottom:1rem!important} .mt-15{margin-top:1.5rem!important} .logowall--left{text-align:left!important} .logowall--left .logos{justify-content:flex-start!important} .form--tight{gap:.6rem!important} .eyebrow--warm{color:#f0a878!important} .fine{color:var(--muted)!important;font-size:.9rem!important} /* =========================================================================== Responsive =========================================================================== */ @media (max-width:900px){ .nav-links,.nav-cta .btn--ghost{display:none} .nav-toggle{display:block} .nav[data-open="true"] .nav-links{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;background:#fff;border-bottom:1px solid var(--line);padding:1rem 24px;gap:1rem} .statbar{grid-template-columns:repeat(2,minmax(0,1fr))} .cat-nav .wrap{gap:.4rem;padding-block:.6rem} .cat-nav a{font-size:.78rem;padding:.45rem .85rem} main section[id]{scroll-margin-top:142px} .client-grid,.integration-grid{grid-template-columns:repeat(3,1fr)} .grid-5{grid-template-columns:repeat(3,minmax(0,1fr))} .grid-4,.grid-3,.doors,.regions,.steps{grid-template-columns:repeat(2,1fr)} .plist{grid-template-columns:repeat(3,1fr)} .hero-split,.close-grid,.footer-grid{grid-template-columns:1fr} .hero-split--media .visual{order:-1} .cmp-layout{grid-template-columns:1fr;gap:2rem} .cmp-grid{grid-template-columns:1fr} .cm-row{grid-template-columns:1fr;gap:.2rem} .ov-grid{grid-template-columns:1fr;gap:2rem} .cal-float{display:none} .erp-grid{grid-template-columns:1fr;gap:2rem} .ah-grid{grid-template-columns:1fr;gap:1.75rem} .agentic-grid{grid-template-columns:1fr;gap:1.75rem} .agentic-grid .ag-bot{order:-1} .ag-bot svg{width:150px;height:150px} .ag-bot img{width:150px;height:150px} .ways-panel{grid-template-columns:1fr;gap:1.6rem} .sec-split{grid-template-columns:1fr;gap:.8rem} .loop-body{grid-template-columns:1fr;gap:2rem} .own-grid{grid-template-columns:1fr;gap:1.75rem} .band-split{grid-template-columns:1fr;gap:1.75rem} .head-media{grid-template-columns:1fr;gap:1.5rem;margin-bottom:1.5rem} .head-visual{aspect-ratio:16/9;min-height:0} .band-media{order:-1} .ways-visual{min-height:0;order:-1;max-width:560px;width:100%;padding-top:30px} .ways-visual img{position:relative;top:auto;height:auto;aspect-ratio:16/10} .close-grid .divider{height:1px;width:100%} } @media (max-width:560px){ .section{padding-block:52px} .statbar,.grid-5,.grid-4,.grid-3,.grid-2,.doors,.regions,.steps,.footer-grid{grid-template-columns:1fr} .statbar--4{grid-template-columns:repeat(2,minmax(0,1fr))} .cat-nav{top:61px} .cat-nav .wrap{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem} /* one line per tag: the type scales with the screen so the longest label fits a third of it */ .cat-nav a{font-size:clamp(.62rem,3.05vw,.72rem);padding:.5rem .2rem;text-align:center;line-height:1.2;white-space:nowrap;letter-spacing:-.01em} main section[id]{scroll-margin-top:162px} .plist{grid-template-columns:1fr;gap:.6rem} .prow{padding:.9rem 1rem 1rem} .prow .plate{height:auto;justify-content:flex-start;margin-bottom:.6rem;padding:0} .prow .plate img{max-height:26px} .prow p{font-size:.85rem} .client-grid{grid-template-columns:repeat(2,1fr);gap:.5rem 1rem} .integration-grid{grid-template-columns:repeat(3,1fr);gap:.5rem} .btn{width:100%;justify-content:center} .nav-cta .btn{width:auto} .btn-row{width:100%} /* phone chrome: 16px gutter, one-line header CTA, two-column footer */ .wrap{padding-inline:16px} .nav{gap:.75rem;padding-block:.7rem} .brand-logo{height:38px} .nav-cta{gap:.35rem} .nav-cta .btn{padding:.55rem .8rem;font-size:.78rem} .nav[data-open="true"] .nav-links{padding-inline:16px} .footer-grid{grid-template-columns:1fr 1fr;gap:1.75rem 1rem} .footer-brand{grid-column:1/-1} .close-band{padding-block:52px} .to-top{right:14px;bottom:14px;width:42px;height:42px} /* audience switch stacks */ .ways{margin-top:1.4rem} .ways-switch{flex-direction:column;margin-bottom:1.6rem} .ways-switch label{justify-content:center;border-radius:0} .ways-switch label:first-of-type{border-radius:var(--radius-sm) var(--radius-sm) 0 0} .ways-switch label:last-of-type{border-radius:0 0 var(--radius-sm) var(--radius-sm);border-left:1.5px solid var(--line);border-top:0} } /* =========================================================================== Compact phone layout — opt in with Keeps long pages scannable: compact cards and steps, pills that hug their text, and optional helpers — .m-2up (two columns), .pillars (divided list), .feature-list (icon beside text) and .rail (swipeable row). =========================================================================== */ @media (max-width:560px){ .m-compact .section{padding-block:44px} .m-compact .mt-2{margin-top:1.4rem} .m-compact .hero{padding-block:28px 36px} .m-compact .hero .breadcrumb{margin-bottom:1rem} .m-compact .hero h1{max-width:none} .m-compact .hero .lede{font-size:1rem;margin:.75rem 0 1.25rem} .m-compact .hero-split{gap:1.25rem} .m-compact .hero .visual>img{max-width:420px;margin-inline:auto} .m-compact .statbar{grid-template-columns:1fr 1fr;gap:.6rem;margin-top:1.75rem} .m-compact .statbar .stat:last-child{grid-column:1/-1} .m-compact .statbar--4 .stat:last-child{grid-column:auto} .m-compact .stat{padding:.85rem 1rem;border-radius:var(--radius-sm)} .m-compact .stat .n{font-size:1.15rem} .m-compact .stat .l{font-size:.76rem;line-height:1.35} .m-compact .logowall h2{margin-bottom:1.1rem} .m-compact .card:not(.card--media),.m-compact .door{padding:1.05rem 1.1rem;gap:.35rem} .m-compact .card--media .body{padding:1rem 1.1rem;gap:.35rem} .m-compact .card p,.m-compact .door p{font-size:.9rem} .m-compact .band .head{margin-bottom:1.2rem} .m-compact .proofline{padding:.8rem 1rem;font-size:.86rem;align-items:flex-start} /* icon beside text instead of above it */ .m-compact .feature-list .card{display:grid;grid-template-columns:auto 1fr;column-gap:.9rem;align-items:start} .m-compact .feature-list .icon-box{grid-row:1/3;width:40px;height:40px} /* number beside the step instead of above it */ .m-compact .steps{gap:.6rem} .m-compact .step{grid-template-columns:2rem 1fr;column-gap:.5rem;padding:1.05rem 1.1rem} .m-compact .step .num{font-size:1.35rem} .m-compact .step h3{margin:0 0 .2rem} .m-compact .step p{font-size:.9rem;color:var(--muted)} .m-compact .regions{grid-template-columns:1fr 1fr;gap:.6rem} .m-compact .region{padding:.9rem} .m-compact .region .rt{font-size:.9rem;justify-content:center} .m-compact .region p{font-size:.8rem} .m-compact .map{aspect-ratio:16/9} /* swipeable rails */ .m-compact .rail{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;gap:.75rem; overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory; margin-inline:-16px;padding:0 16px .5rem;scroll-padding-inline:16px;scrollbar-width:none} .m-compact .rail::-webkit-scrollbar{display:none} .m-compact .rail>*{scroll-snap-align:start} .m-compact .rail a.card:hover{transform:none} .m-compact .close-grid{gap:1.75rem} /* pills and tags hug their text instead of spanning the card */ .m-compact .card>.pill,.m-compact .card>.tag{align-self:flex-start} /* short cards and stats: two per row */ .m-compact .m-2up{grid-template-columns:1fr 1fr;gap:.6rem} .m-compact .m-2up .card{padding:.9rem .85rem;gap:.4rem} .m-compact .m-2up h3{font-size:.98rem;line-height:1.2} .m-compact .m-2up p{font-size:.8rem;line-height:1.45} /* Silex difference: a divided list, not four boxes */ .m-compact .pillars{gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--radius)} .m-compact .pillars .card{border:0;border-radius:0;background:none;padding:1rem 1.1rem} .m-compact .pillars .card+.card{border-top:1px solid var(--line)} .m-compact .pillars .card h3{display:flex;align-items:center;gap:.5rem} .m-compact .pillars .card h3::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none} .m-compact .pillars .card p{padding-left:1rem} } @media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}} /* the smallest phones (320px): logo, CTA and menu button must share 288px */ @media (max-width:359px){.brand-logo{height:30px}.nav{gap:.5rem}.nav-cta{gap:.4rem}.nav-cta .btn--sm{font-size:.75rem;padding:.5rem .65rem} .lnode{width:96px}} /* a single long product name must break rather than push a heading past the screen */ h1,h2{overflow-wrap:break-word} /* =========================================================================== BUG-020 - page layouts that used to be duplicated in a per-page