/* ============================================================ DOBLER INSIGHTS (doblerinsights.com): shared stylesheet. Light, vibrant, illustration-led, at the craft level of the analytics vendors' sites (Peter, 2026-10-02; PRODUCT.md, Brand commitments). Navy and teal from the Insights decks, with a teal-to-violet gradient stage for the product visuals, white cards with real elevation, one typeface (Manrope). Chart series (validated on white, dataviz validator 2026-10-02): teal #0F8A72, violet #6D5BD0, orange #EB6834. Text never wears a series colour. ============================================================ */ :root{ --navy:#1B3A5C; --navy-deep:#122A45; --ink:#1F2D3D; --body:#3D4C5E; --muted:#66758A; --ground:#FFFFFF; --field:#F3F7FB; --field-2:#E9F1F8; --line:#DCE5EE; --line-soft:#EDF2F7; --teal:#16A085; --teal-deep:#0F8A72; --teal-tint:#DDF4EE; --cyan:#1FB6D9; --cyan-deep:#0E7FA0; --blue:#2A78D6; --violet:#6D5BD0; --coral:#F2645A; --amber:#F5A524; --s1:#0F8A72; --s2:#6D5BD0; --s3:#EB6834; --grid:#E6ECF2; --axis:#C9D4DF; --grad-stage:linear-gradient(135deg,#16A085 0%,#1FB6D9 48%,#6D5BD0 100%); --grad-btn:linear-gradient(135deg,#0F8A72,#0E7FA0); --grad-soft:linear-gradient(135deg,#DDF4EE,#E3EEFB 55%,#ECE7FA); --shadow-lg:0 30px 70px rgba(27,58,92,.20); --shadow:0 12px 32px rgba(27,58,92,.10); --shadow-sm:0 4px 14px rgba(27,58,92,.08); --font:"Manrope","Segoe UI",system-ui,-apple-system,sans-serif; --wrap:1180px; --r:12px; --r-lg:20px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-color:var(--navy) var(--field)} body{font-family:var(--font);font-size:17px;line-height:1.6;color:var(--body);background:var(--ground);-webkit-font-smoothing:antialiased} h1,h2,h3,h4{color:var(--navy);font-weight:800;line-height:1.1;letter-spacing:-.02em;text-wrap:balance} h1{font-size:clamp(2.4rem,4.6vw,3.7rem)} h2{font-size:clamp(1.8rem,3vw,2.6rem)} h3{font-size:1.35rem;line-height:1.3;letter-spacing:-.01em} p,li{max-width:66ch} b,strong{color:var(--ink);font-weight:700} a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--teal);text-decoration-thickness:2px;text-underline-offset:3px} a:hover{color:#0B6B58} img,svg{display:block;max-width:100%} ::selection{background:var(--teal-tint);color:var(--navy)} :focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:4px} input,button{font:inherit;caret-color:var(--teal-deep)} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px} .center{text-align:center} .center p{margin-left:auto;margin-right:auto} /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;font-size:1rem;line-height:1;padding:16px 24px;border-radius:999px;border:2px solid transparent;background:var(--grad-btn);color:#fff;text-decoration:none;cursor:pointer;white-space:nowrap;box-shadow:0 8px 20px rgba(15,138,114,.28);transition:transform .15s,box-shadow .15s,background-color .15s,color .15s,border-color .15s} .btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(15,138,114,.34);color:#fff} .btn-secondary{background:#fff;color:var(--navy);border-color:var(--line);box-shadow:var(--shadow-sm)} .btn-secondary:hover{border-color:var(--teal);color:var(--navy);box-shadow:var(--shadow-sm)} .on-dark .btn-secondary{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.5);box-shadow:none} .on-dark .btn-secondary:hover{background:rgba(255,255,255,.2);border-color:#fff;color:#fff} .btn:disabled{opacity:.6;cursor:progress;transform:none} .btn-block{width:100%} .btn-lg{font-size:1.05rem;padding:18px 30px} /* header */ .site-head{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)} .nav{display:flex;align-items:center;justify-content:space-between;height:76px;gap:24px} .brand{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.25rem;color:var(--navy);text-decoration:none;letter-spacing:-.02em} .brand svg{width:32px;height:32px;flex:none} .nav-links{display:flex;gap:28px} .nav-links a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--body);padding:8px 0 6px;border-bottom:2px solid transparent} .nav-links a:hover{color:var(--navy)} .nav-links a.active{color:var(--navy);border-bottom-color:var(--teal)} .nav-links .nav-req{display:none} .nav-cta{display:flex;align-items:center;gap:12px} .nav-cta .btn{padding:13px 20px;font-size:.95rem} .burger{display:none;background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 8px;cursor:pointer} .burger span{display:block;width:22px;height:2px;background:var(--navy);margin:4px 0} /* sections */ section.block{padding:88px 0} .block .intro{font-size:1.15rem;margin-top:16px;max-width:62ch} .band{background:var(--field)} .sec-head{max-width:760px;margin-bottom:44px} .sec-head.center{margin-left:auto;margin-right:auto} /* hero */ .hero{position:relative;overflow:hidden;padding:72px 0 64px} .hero::before{content:"";position:absolute;width:720px;height:720px;right:-220px;top:-260px;border-radius:50%;background:radial-gradient(closest-side,rgba(31,182,217,.22),rgba(31,182,217,0));pointer-events:none} .hero::after{content:"";position:absolute;width:560px;height:560px;left:-240px;bottom:-300px;border-radius:50%;background:radial-gradient(closest-side,rgba(109,91,208,.16),rgba(109,91,208,0));pointer-events:none} .hero .wrap{position:relative} .hero-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:48px 56px;align-items:center} .hero-title .sub{font-size:1.2rem;margin:22px 0 28px;max-width:52ch} .hero-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center} .hero-note{margin-top:16px;font-size:.95rem;color:var(--muted)} /* the stage: gradient panel, tilted dashboard mockup, viewer chips */ .stage-wrap{position:relative} .stage{position:relative;border-radius:28px;background:var(--grad-stage);padding:44px 48px 56px 36px;box-shadow:var(--shadow-lg)} .mock{background:#fff;border-radius:16px;box-shadow:0 26px 60px rgba(10,30,60,.35);padding:14px;transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);transform-origin:60% 50%} .mock svg{width:100%;height:auto} .viewer{position:absolute;display:flex;align-items:center;gap:10px;background:#fff;border-radius:14px;padding:10px 16px 10px 10px;box-shadow:var(--shadow);border:2px solid transparent;transition:transform .25s,border-color .25s,box-shadow .25s;width:max-content;max-width:none} .viewer > span:last-child{display:block;min-width:0} .viewer .vl{display:block;white-space:nowrap} .viewer .vl2{display:block;white-space:nowrap} .viewer .av{width:34px;height:34px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--teal),var(--cyan))} .viewer.v2 .av{background:linear-gradient(135deg,var(--violet),var(--cyan))} .viewer.v3 .av{background:linear-gradient(135deg,var(--coral),var(--amber))} .viewer .vl{font-size:.82rem;font-weight:700;color:var(--navy);line-height:1.3} .viewer .rows{display:grid;gap:3px;margin-top:5px} .viewer .rows i{display:block;height:4px;width:96px;border-radius:2px;background:var(--line)} .viewer .rows i.on{background:var(--teal)} .viewer.v1{right:-18px;top:-22px} .viewer.v2{left:-26px;bottom:178px} .viewer.v3{right:-10px;bottom:-24px} .viewer.active{border-color:var(--teal);transform:translateY(-4px) scale(1.04);box-shadow:0 18px 40px rgba(27,58,92,.22)} .stage-cap{margin-top:14px;font-size:.85rem;color:var(--muted);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap} .selector{display:flex;gap:6px;margin-top:18px;background:var(--field);padding:6px;border-radius:999px;border:1px solid var(--line)} .selector legend{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} .selector input{position:absolute;opacity:0;width:1px;height:1px} .selector label{flex:1;text-align:center;font-size:.86rem;font-weight:600;color:var(--body);padding:11px 10px;border-radius:999px;cursor:pointer;line-height:1.3;transition:background-color .15s,color .15s,box-shadow .15s} .selector label:hover{color:var(--navy)} .selector input:checked + label{background:#fff;color:var(--navy);box-shadow:var(--shadow-sm)} .selector input:focus-visible + label{outline:3px solid var(--teal);outline-offset:-3px} /* mock chart marks */ .mk-tile{fill:var(--field)} .mk-line{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .mk-l1{stroke:var(--s1)} .mk-l2{stroke:var(--s2)} .mk-area{fill:var(--s1);opacity:.1} .mk-bar{fill:var(--s3)} .mk-grid{stroke:var(--grid);stroke-width:1} .mk-t{font-family:var(--font);font-weight:800;fill:var(--navy)} .mk-lbl{font-family:var(--font);font-size:12px;fill:var(--muted);font-weight:600} .mk-val{font-family:var(--font);font-size:22px;font-weight:800;fill:var(--navy)} .mk-good{font-family:var(--font);font-size:12px;font-weight:700;fill:var(--teal-deep)} .mk-row{fill:transparent} .mk-row.on{fill:var(--teal-tint)} .mk-cell{fill:var(--line)} .mk-cell.on{fill:var(--teal)} .mk-dot{fill:var(--s1);stroke:#fff;stroke-width:2} .mk-sw1{fill:var(--s1)} .mk-sw2{fill:var(--s2)} /* cards */ .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px} .card{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s} .card:hover,.four li:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(27,58,92,.16)} .card .art{background:var(--grad-soft);padding:22px 24px 16px;height:200px;display:flex;align-items:flex-end;justify-content:center} .card .art svg{width:100%;height:auto;max-height:168px} .card .txt{padding:26px 28px 30px} .card h3{margin-bottom:10px} .card p{font-size:.98rem} /* features: illustration and text in alternating rows */ .feature{display:grid;grid-template-columns:1.1fr 1fr;gap:48px 72px;align-items:center;padding:36px 0} .feature + .feature{border-top:1px solid var(--line)} .feature.flip .art{order:2} .feature .art{border-radius:var(--r-lg);background:var(--grad-soft);padding:32px;box-shadow:var(--shadow-sm)} .feature .art svg{width:100%;height:auto} .feature h3{font-size:1.7rem;margin-bottom:14px} .feature p{font-size:1.05rem} .ill-t{font-family:var(--font);font-weight:700;font-size:13px;fill:var(--navy)} .ill-s{font-family:var(--font);font-weight:600;font-size:13px;fill:var(--body)} .ill-w{font-family:var(--font);font-weight:700;font-size:12px;fill:#fff} .ill-card{fill:#fff;stroke:var(--line);stroke-width:1.5} .ill-soft{fill:var(--field-2)} .ill-conn{fill:none;stroke:var(--teal);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .ill-conn2{fill:none;stroke:var(--violet);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .ill-conn3{fill:none;stroke:var(--s3);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .ill-dash{fill:none;stroke:var(--axis);stroke-width:2;stroke-dasharray:5 6;stroke-linecap:round} .ill-row{fill:var(--line)} .ill-row.on{fill:var(--teal)} .ill-rowbg.on{fill:var(--teal-tint)} .ill-lamp{fill:var(--teal)} .ill-lamp2{fill:var(--violet)} .ill-lamp3{fill:var(--s3)} .ill-bar{fill:var(--s1)} .ill-bar2{fill:var(--line)} .ill-grid{stroke:var(--grid);stroke-width:1} .ill-axis{stroke:var(--axis);stroke-width:1} .ill-line{fill:none;stroke:var(--s1);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .ill-area{fill:var(--s1);opacity:.12} .ill-dot{fill:var(--s1);stroke:#fff;stroke-width:2} .ill-dot-hl{fill:var(--violet);stroke:#fff;stroke-width:2.5} .ill-chip{fill:#fff;stroke:var(--line);stroke-width:1.5} .ill-g1{fill:url(#gTeal)} .ill-g2{fill:url(#gViolet)} .ill-g3{fill:url(#gCoral)} /* stepper */ .stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;margin-top:44px;counter-reset:s;position:relative} .stepper::before{content:"";position:absolute;left:28px;right:28px;top:28px;height:3px;background:linear-gradient(90deg,var(--teal),var(--cyan),var(--violet));border-radius:2px} .stepper li{list-style:none;position:relative;max-width:none;padding-top:80px} .stepper li::before{counter-increment:s;content:counter(s);position:absolute;left:0;top:0;width:56px;height:56px;border-radius:50%;background:var(--grad-btn);color:#fff;font-weight:800;font-size:1.2rem;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(15,138,114,.3)} .stepper b{display:block;font-size:1.1rem;margin-bottom:6px} .stepper li:nth-child(2)::before{background:linear-gradient(135deg,#0E7FA0,#1FB6D9)} .stepper li:nth-child(3)::before{background:linear-gradient(135deg,#2A78D6,#6D5BD0)} .stepper li:nth-child(4)::before{background:linear-gradient(135deg,#6D5BD0,#F2645A)} /* chips: the strip of platform names */ .chips{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px} .chips span{display:inline-flex;align-items:center;gap:10px;padding:11px 16px;border-radius:999px;background:#fff;border:1px solid var(--line);box-shadow:var(--shadow-sm);font-weight:700;font-size:.92rem;color:var(--navy)} .chips span::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--grad-btn);flex:none} /* photo band */ .photo-band{position:relative;color:#fff;padding:120px 0;background:var(--navy) center/cover no-repeat;overflow:hidden} .photo-band::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(18,42,69,.94) 0%,rgba(18,42,69,.82) 45%,rgba(22,160,133,.55) 100%)} .photo-band.deep::before{background:linear-gradient(100deg,rgba(18,42,69,.96) 0%,rgba(18,42,69,.9) 55%,rgba(22,160,133,.78) 100%)} .photo-band .wrap{position:relative} .photo-band h2,.photo-band b{color:#fff} .photo-band p{color:#E3EBF4;max-width:60ch} .photo-band .q{color:#fff;font-weight:700;font-size:1.25rem;margin:24px 0 30px} .photo-band .intro{font-size:1.15rem;margin-top:16px} .cta-actions{display:flex;flex-wrap:wrap;gap:12px} .on-dark .btn{box-shadow:0 10px 24px rgba(0,0,0,.25)} /* two columns */ .cols{display:grid;grid-template-columns:1fr 1fr;gap:48px 64px;align-items:start} .cols > *{min-width:0} .cols > div > h2{margin-bottom:16px} /* checks */ .checks{list-style:none;margin:16px 0 0} .checks li{display:flex;gap:12px;margin-bottom:12px;max-width:none} .checks li svg{flex:none;width:22px;height:22px;margin-top:3px;color:var(--teal-deep)} .xlist li svg{color:var(--muted)} /* faq */ .faq{margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:24px} .faq > div{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:26px 28px;border:1px solid var(--line-soft)} .faq h3{font-size:1.1rem;margin-bottom:10px} .faq p{font-size:.98rem} /* interior page hero */ .page-hero{background:var(--grad-soft);padding:72px 0 64px;position:relative;overflow:hidden} .page-hero .wrap{display:grid;grid-template-columns:1.1fr .9fr;gap:40px 56px;align-items:center} .page-hero.solo .wrap{grid-template-columns:1fr} .page-hero h1{max-width:20ch} .page-hero p{font-size:1.15rem;margin-top:18px;max-width:58ch} .page-hero .media{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);background:#fff} .page-hero .media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3} .page-hero .media svg{width:100%;height:auto} .page-hero .media.pad{padding:24px} /* prose on interior pages */ .prose h2{margin-bottom:14px} .prose p{margin-bottom:16px} .prose .checks{margin:4px 0 22px} .prose .btn{margin-top:4px} /* figures: schematics and illustrative charts on interior pages */ .fig{margin:0;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);padding:24px 26px 18px;border:1px solid var(--line-soft)} .fig svg{width:100%;height:auto;display:block} .fig-scroll{overflow-x:auto} .fig-scroll svg{min-width:600px} .fig figcaption{display:flex;justify-content:space-between;gap:8px 20px;flex-wrap:wrap;margin-top:14px;font-size:.9rem;color:var(--muted)} .fig figcaption b{color:var(--navy)} .fig figcaption.fig-title{margin:0 0 18px;font-size:1rem} .fig .tall{display:none} .fig .note{color:var(--muted)} .fig text{font-family:var(--font)} .fig .t{fill:var(--navy);font-weight:800;font-size:16px} .fig .tm{fill:var(--muted);font-size:13px;font-weight:600} .fig .ts{fill:var(--body);font-size:14px;font-weight:600} .fig .tc{fill:var(--navy);font-size:12px;font-weight:700} .fig .grid{stroke:var(--grid);stroke-width:1} .fig .axis{stroke:var(--axis);stroke-width:1} .fig .blk{fill:#fff;stroke:var(--line);stroke-width:1.5} .fig .blk-soft{fill:var(--field)} .fig .chip{fill:var(--field);stroke:var(--line);stroke-width:1} .fig .conn{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .fig .c1{stroke:var(--s1)} .fig .c2{stroke:var(--s2)} .fig .c3{stroke:var(--s3)} .fig .lamp{fill:var(--teal)} .fig .line{fill:none;stroke:var(--s1);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round} .fig .area{fill:var(--s1);opacity:.12} .fig .dot{fill:var(--s1);stroke:#fff;stroke-width:2} .fig .dot-hl{fill:var(--violet);stroke:#fff;stroke-width:2.5} .fig .barm{fill:var(--s3)} .fig .rowb{fill:var(--line)} .fig .rowb.on{fill:var(--teal)} .fig .rowbg{fill:transparent} .fig .rowbg.on{fill:var(--teal-tint)} .fig .hdr{fill:var(--field-2)} /* qualitative bars (no values: the words are the values) */ .bars{display:grid;gap:14px} .bar{display:grid;grid-template-columns:minmax(150px,1fr) 2.2fr;gap:14px;align-items:center} .bar .lbl{font-size:.95rem;color:var(--body);max-width:none;font-weight:600} .bar .track{display:flex;align-items:center;gap:10px;min-height:16px;position:relative} .bar .fill{flex:none;height:16px;border-radius:0 6px 6px 0;background:var(--line)} .bar.em .fill{background:linear-gradient(90deg,var(--teal),var(--cyan))} .bar .val{font-size:.9rem;color:var(--muted);white-space:nowrap;font-weight:600} .bar .brace{position:relative;height:30px;width:100%} .bar .brace i{position:absolute;top:0;height:10px;border:1.5px solid var(--muted);border-bottom:0} .bar .brace span{position:absolute;top:13px;font-size:.85rem;color:var(--muted);transform:translateX(-50%);white-space:nowrap;font-weight:600} /* panel grid of four (interior pages) */ .four{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:40px;list-style:none} .four li{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow-sm);border:1px solid var(--line-soft);padding:30px 32px;max-width:none;transition:transform .2s,box-shadow .2s} .four .dot{display:inline-block;width:12px;height:12px;border-radius:50%;background:var(--teal);margin-bottom:16px} .four .dot-violet{background:var(--violet)} .four .dot-orange{background:var(--s3)} .four .dot-navy{background:var(--navy)} .four h3{margin-bottom:10px} /* comparison table */ .tbl{overflow-x:auto;border-radius:var(--r-lg);box-shadow:var(--shadow);margin-top:40px;background:#fff;padding:8px;border:1px solid var(--line-soft)} table.cmp{width:100%;border-collapse:collapse;min-width:760px;font-size:.96rem} table.cmp th,table.cmp td{padding:16px 18px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)} table.cmp thead th{background:var(--navy);color:#fff;font-weight:700} table.cmp thead th:first-child{border-radius:12px 0 0 0} table.cmp thead th.hl{background:var(--grad-btn);border-radius:0 12px 0 0} table.cmp td.feat{font-weight:700;color:var(--navy)} table.cmp td.hl{background:var(--teal-tint);color:var(--navy);font-weight:700} table.cmp tbody tr:last-child td{border-bottom:0} /* request form */ .panel{background:#fff;border-radius:var(--r-lg);box-shadow:var(--shadow);padding:36px} .panel h3{font-size:1.5rem;margin-bottom:22px} .field{margin-bottom:16px} .field label{display:block;font-weight:700;font-size:.9rem;color:var(--navy);margin-bottom:6px} .field input{width:100%;font-size:1rem;padding:13px 14px;border:1.5px solid var(--line);border-radius:var(--r);color:var(--ink);background:#fff} .field input:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 4px var(--teal-tint)} .form-note{font-size:.9rem;color:var(--muted);margin-top:14px;text-align:center} .form-error{display:none;color:#B3261E;font-weight:700;margin-top:14px;text-align:center} .form-error a{color:#B3261E} .form-sent{display:none;text-align:center;padding:16px 0} .form-sent svg{width:56px;height:56px;margin:0 auto 14px;color:var(--teal-deep)} .form-sent h3{margin-bottom:8px} /* numbered steps (vertical, on /start) */ .steps{list-style:none;counter-reset:c;margin-top:28px} .steps li{position:relative;padding-left:64px;padding-bottom:26px;max-width:none} .steps li::before{counter-increment:c;content:counter(c);position:absolute;left:0;top:-6px;width:44px;height:44px;border-radius:50%;background:var(--grad-btn);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(15,138,114,.28)} .steps li::after{content:"";position:absolute;left:21px;top:40px;bottom:0;width:2px;background:var(--line)} .steps li:last-child::after{display:none} .steps b{display:block} /* the generated 404 page */ .not-found{padding:96px 0 112px} .not-found h1{margin-bottom:16px} .not-found p{margin-bottom:14px} .not-found ul{margin:8px 0 24px 22px} .not-found li{margin-bottom:8px} /* related guides (the middleware inserts this before