/* Built by tools/css/build.py from css/src/ for page type "property-types.rural-cabin". Do not edit: edit the source files. */
@layer tokens,board;
/* ── base/elements.css ── */
@layer board{

/* The scrollbar's track is always reserved, so pages with and without a scrollbar centre the same and
   locking scroll (the open drawer) doesn't shift the page; the same as roamstays.com. */
html{scrollbar-gutter:stable}
body{margin:0;background:var(--roam-ref-palette-cream);color:var(--roam-ref-palette-forest);font-family:var(--roam-ref-typeface-body);font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-snug);-webkit-font-smoothing:antialiased}
a{color:var(--roam-ref-palette-teal-670);text-underline-offset:4px}
a:hover{color:var(--roam-ref-palette-forest)}
::selection{background:var(--roam-ref-palette-gold);color:var(--roam-ref-palette-forest)}
:focus-visible{outline:2px solid var(--roam-ref-palette-gold);outline-offset:3px}
label{display:block;font-size:var(--roam-sys-type-label);font-weight:var(--roam-ref-weight-semibold);margin-bottom:var(--roam-ref-spacing-6);color:var(--roam-ref-palette-forest-720)}
input,select{width:100%;box-sizing:border-box;min-height:var(--roam-sys-control-height);border:1px solid var(--roam-ref-palette-sand-190);border-radius:var(--roam-sys-shape-inset);padding:0 var(--roam-ref-spacing-16);font:inherit;font-size:var(--roam-sys-type-body);background:var(--roam-ref-palette-white);color:var(--roam-ref-palette-forest)}
input::placeholder{color:var(--roam-ref-palette-stone-560)}
details{border-bottom:1px solid var(--roam-ref-palette-sand-150)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--roam-ref-spacing-20);padding:var(--roam-ref-spacing-24) 0;font-size:var(--roam-sys-type-small);font-weight:var(--roam-ref-weight-semibold)}
summary::-webkit-details-marker{display:none}
summary .pm{width:32px;height:32px;border-radius:50%;background:var(--roam-ref-palette-sand-90);display:grid;place-items:center;flex:none;transition:transform var(--roam-ref-duration-slow)}
details[open] summary .pm{transform:rotate(45deg);background:var(--roam-ref-palette-gold)}
details p{margin:0 0 var(--roam-sys-flow-separated);color:var(--roam-ref-palette-forest-720);max-width:68ch}
table{border-collapse:separate;border-spacing:0;width:100%}
th,td{padding:var(--roam-ref-spacing-18) var(--roam-ref-spacing-20);text-align:left;border-bottom:1px solid var(--roam-ref-palette-sand-150)}

}
/* ── components/drawing.css ── */
@layer board{

/* The sprite: the symbol library at the top of every page (v3/parts/sprite.php), drawn nowhere itself. */
.sprite{position:absolute;width:0;height:0;overflow:hidden}

/* SVG fill */
.fill-brand-preferred{fill:var(--roam-ref-palette-brand-preferred)}
.fill-brand-premier{fill:var(--roam-ref-palette-brand-premier)}
.fill-brand-superhost{fill:var(--roam-ref-palette-brand-superhost)}
.fill-brand-superhost-star{fill:var(--roam-ref-palette-brand-superhost-star)}
.fill-clay-470{fill:var(--roam-ref-palette-clay-470)}
.fill-cream{fill:var(--roam-ref-palette-cream)}
.fill-forest{fill:var(--roam-ref-palette-forest)}
.fill-forest-720{fill:var(--roam-ref-palette-forest-720)}
.fill-forest-900{fill:var(--roam-ref-palette-forest-900)}
.fill-forest-light{fill:var(--roam-ref-palette-forest-light)}
.fill-forest-soft{fill:var(--roam-ref-palette-forest-soft)}
.fill-gold{fill:var(--roam-ref-palette-gold)}
.fill-gold-201{fill:var(--roam-ref-palette-gold-201)}
.fill-gold-270{fill:var(--roam-ref-palette-gold-270)}
.fill-gold-30{fill:var(--roam-ref-palette-gold-30)}
.fill-gold-640{fill:var(--roam-ref-palette-gold-640)}
.fill-gold-a18{fill:var(--roam-ref-palette-gold-a18)}
.fill-gold-a30{fill:var(--roam-ref-palette-gold-a30)}
.fill-gold-active{fill:var(--roam-ref-palette-gold-active)}
.fill-olive-210{fill:var(--roam-ref-palette-olive-210)}
.fill-olive-250{fill:var(--roam-ref-palette-olive-250)}
.fill-olive-700{fill:var(--roam-ref-palette-olive-700)}
.fill-sage{fill:var(--roam-ref-palette-sage)}
.fill-sand-110{fill:var(--roam-ref-palette-sand-110)}
.fill-sand-150{fill:var(--roam-ref-palette-sand-150)}
.fill-sand-190{fill:var(--roam-ref-palette-sand-190)}
.fill-sand-200{fill:var(--roam-ref-palette-sand-200)}
.fill-sand-220{fill:var(--roam-ref-palette-sand-220)}
.fill-sand-250{fill:var(--roam-ref-palette-sand-250)}
.fill-sand-70{fill:var(--roam-ref-palette-sand-70)}
.fill-sand-80{fill:var(--roam-ref-palette-sand-80)}
.fill-sand-90{fill:var(--roam-ref-palette-sand-90)}
.fill-stone-610{fill:var(--roam-ref-palette-stone-610)}
.fill-taupe-560{fill:var(--roam-ref-palette-taupe-560)}
.fill-teal{fill:var(--roam-ref-palette-teal)}
.fill-teal-160{fill:var(--roam-ref-palette-teal-160)}
.fill-teal-290{fill:var(--roam-ref-palette-teal-290)}
.fill-teal-670{fill:var(--roam-ref-palette-teal-670)}
.fill-teal-80{fill:var(--roam-ref-palette-teal-80)}
.fill-teal-a14{fill:var(--roam-ref-palette-teal-a14)}
.fill-teal-a20{fill:var(--roam-ref-palette-teal-a20)}
.fill-teal-a25{fill:var(--roam-ref-palette-teal-a25)}
.fill-white{fill:var(--roam-ref-palette-white)}

/* SVG stroke */
.stroke-brand-superhost-ink{stroke:var(--roam-ref-palette-brand-superhost-ink)}
.stroke-cream{stroke:var(--roam-ref-palette-cream)}
.stroke-forest{stroke:var(--roam-ref-palette-forest)}
.stroke-forest-soft{stroke:var(--roam-ref-palette-forest-soft)}
.stroke-gold{stroke:var(--roam-ref-palette-gold)}
.stroke-gold-270{stroke:var(--roam-ref-palette-gold-270)}
.stroke-gold-640{stroke:var(--roam-ref-palette-gold-640)}
.stroke-gold-active{stroke:var(--roam-ref-palette-gold-active)}
.stroke-olive-250{stroke:var(--roam-ref-palette-olive-250)}
.stroke-olive-440{stroke:var(--roam-ref-palette-olive-440)}
.stroke-sage{stroke:var(--roam-ref-palette-sage)}
.stroke-sage-400{stroke:var(--roam-ref-palette-sage-400)}
.stroke-sand-150{stroke:var(--roam-ref-palette-sand-150)}
.stroke-sand-190{stroke:var(--roam-ref-palette-sand-190)}
.stroke-sand-192{stroke:var(--roam-ref-palette-sand-192)}
.stroke-sand-220{stroke:var(--roam-ref-palette-sand-220)}
.stroke-sand-310{stroke:var(--roam-ref-palette-sand-310)}
.stroke-sand-400{stroke:var(--roam-ref-palette-sand-400)}
.stroke-sand-430{stroke:var(--roam-ref-palette-sand-430)}
.stroke-sand-431{stroke:var(--roam-ref-palette-sand-431)}
.stroke-sand-90{stroke:var(--roam-ref-palette-sand-90)}
.stroke-taupe-440{stroke:var(--roam-ref-palette-taupe-440)}
.stroke-teal{stroke:var(--roam-ref-palette-teal)}
.stroke-teal-290{stroke:var(--roam-ref-palette-teal-290)}
.stroke-teal-470{stroke:var(--roam-ref-palette-teal-470)}
.stroke-teal-670{stroke:var(--roam-ref-palette-teal-670)}
.stroke-white{stroke:var(--roam-ref-palette-white)}

/* Gradient stops */
.stop-forest-soft{stop-color:var(--roam-ref-palette-forest-soft)}
.stop-gold{stop-color:var(--roam-ref-palette-gold)}
.stop-gold-370{stop-color:var(--roam-ref-palette-gold-370)}
.stop-sage{stop-color:var(--roam-ref-palette-sage)}
.stop-teal{stop-color:var(--roam-ref-palette-teal)}

/* Mark fills */
.bg-forest-soft{background:var(--roam-ref-palette-forest-soft)}
.bg-gold{background:var(--roam-ref-palette-gold)}
.bg-gold-60{background:var(--roam-ref-palette-gold-60)}
.bg-olive-440{background:var(--roam-ref-palette-olive-440)}
.bg-sage{background:var(--roam-ref-palette-sage)}
.bg-sand-430{background:var(--roam-ref-palette-sand-430)}
.bg-sand-431{background:var(--roam-ref-palette-sand-431)}
.bg-sand-80{background:var(--roam-ref-palette-sand-80)}
.bg-teal{background:var(--roam-ref-palette-teal)}
.bg-teal-470{background:var(--roam-ref-palette-teal-470)}
.bg-teal-80{background:var(--roam-ref-palette-teal-80)}

/* Mark text */
.ink-gold-640{color:var(--roam-ref-palette-gold-640)}
.ink-olive-700{color:var(--roam-ref-palette-olive-700)}
.ink-teal-670{color:var(--roam-ref-palette-teal-670)}

}
/* ── components/text.css ── */
@layer board{

.num{font-variant-numeric:tabular-nums}
.d{font-family:var(--roam-ref-typeface-display);letter-spacing:var(--roam-ref-tracking-display)}

}
/* ── components/wrap.css ── */
@layer board{

.wrap{box-sizing:border-box;max-width:calc(var(--roam-sys-layout-column) + 2 * var(--roam-sys-space-page-x));margin:0 auto;padding:0 var(--roam-sys-space-page-x)}

}
/* ── components/button.css ── */
@layer board{

.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--roam-ref-spacing-10);min-height:52px;padding:0 var(--roam-ref-spacing-28);border:0 solid var(--roam-ref-palette-forest);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-forest);font:inherit;font-size:var(--roam-sys-type-body);font-weight:var(--roam-ref-weight-semibold);text-decoration:none;color:var(--roam-ref-palette-cream);cursor:pointer;transition:background-color var(--roam-ref-duration-base),border-color var(--roam-ref-duration-base),color var(--roam-ref-duration-base)}
.btn:is(:hover,:focus-visible){background:var(--roam-ref-palette-forest-light);color:var(--roam-ref-palette-cream)}
.btn-gold{border-color:transparent;background:var(--roam-ref-palette-gold);color:var(--roam-ref-palette-forest)}
.btn-gold:is(:hover,:focus-visible){background:var(--roam-ref-palette-gold-370);color:var(--roam-ref-palette-forest)}
.btn-light{border:1px solid var(--roam-ref-palette-sand-150);background:var(--roam-ref-palette-white);color:var(--roam-ref-palette-forest)}
.btn-light:is(:hover,:focus-visible){border-color:var(--roam-ref-palette-gold);background:var(--roam-ref-palette-gold-60);color:var(--roam-ref-palette-forest)}
/* More fills, from the v1 set: teal, sage, cream (on forest) and danger (a destructive action). */
.btn-teal{border-color:transparent;background:var(--roam-ref-palette-teal);color:var(--roam-ref-palette-forest)}
.btn-teal:is(:hover,:focus-visible){background:var(--roam-ref-palette-teal-active);color:var(--roam-ref-palette-forest)}
.btn-sage{border-color:transparent;background:var(--roam-ref-palette-sage);color:var(--roam-ref-palette-forest)}
.btn-sage:is(:hover,:focus-visible){background:var(--roam-ref-palette-sage-active);color:var(--roam-ref-palette-forest)}
.btn-cream{border-color:transparent;background:var(--roam-ref-palette-cream);color:var(--roam-ref-palette-forest)}
.btn-cream:is(:hover,:focus-visible){background:var(--roam-ref-palette-cream-active);color:var(--roam-ref-palette-forest)}
.btn-danger{border-color:transparent;background:var(--roam-ref-palette-error);color:var(--roam-ref-palette-cream)}
.btn-danger:is(:hover,:focus-visible){background:var(--roam-ref-palette-error-active);color:var(--roam-ref-palette-cream)}

.btn-line{display:inline-flex;align-items:center;justify-content:center;gap:var(--roam-ref-spacing-10);min-height:52px;padding:0 var(--roam-ref-spacing-24);border:1.5px solid var(--roam-ref-palette-forest);border-radius:var(--roam-sys-shape-full);background:transparent;font:inherit;font-weight:var(--roam-ref-weight-semibold);text-decoration:none;color:var(--roam-ref-palette-forest);transition:background-color var(--roam-ref-duration-base),border-color var(--roam-ref-duration-base),color var(--roam-ref-duration-base)}
.btn-line:is(:hover,:focus-visible){background:var(--roam-ref-palette-forest);color:var(--roam-ref-palette-cream)}

/* More outlines: gold, teal and cream sit on forest; danger on a light surface. The hover fills with the colour. */
.btn-line-gold{border-color:var(--roam-ref-palette-gold);color:var(--roam-ref-palette-gold)}
.btn-line-gold:is(:hover,:focus-visible){border-color:var(--roam-ref-palette-gold);background:var(--roam-ref-palette-gold);color:var(--roam-ref-palette-forest)}
.btn-line-teal{border-color:var(--roam-ref-palette-teal);color:var(--roam-ref-palette-teal)}
.btn-line-teal:is(:hover,:focus-visible){border-color:var(--roam-ref-palette-teal);background:var(--roam-ref-palette-teal);color:var(--roam-ref-palette-forest)}
.btn-line-cream{border-color:var(--roam-ref-palette-cream-a40);color:var(--roam-ref-palette-cream)}
.btn-line-cream:is(:hover,:focus-visible){border-color:var(--roam-ref-palette-cream);background:var(--roam-ref-palette-cream);color:var(--roam-ref-palette-forest)}
.btn-line-danger{border-color:var(--roam-ref-palette-error-a40);color:var(--roam-ref-palette-error)}
.btn-line-danger:is(:hover,:focus-visible){border-color:var(--roam-ref-palette-error);background:var(--roam-ref-palette-error);color:var(--roam-ref-palette-cream)}

/* After .btn-line, so it sizes both kinds. The icon keeps its size when a narrow column squeezes the label. */
.btn-md{box-sizing:border-box;min-height:48px;padding:0 var(--roam-ref-spacing-24);border-width:1.5px;font-size:var(--roam-sys-type-body-sm)}
.btn-md > svg{flex:none}

/* The small size (32px), after .btn-line so it sizes both kinds. */
.btn-sm{gap:var(--roam-ref-spacing-8);min-height:32px;padding:0 var(--roam-ref-spacing-12);font-size:var(--roam-sys-type-label)}
/* The smallest size (28px), for dense rows; after .btn-md so it wins on equal specificity. */
.btn-xs{gap:var(--roam-ref-spacing-4);min-height:28px;padding:0 var(--roam-ref-spacing-12);font-size:var(--roam-sys-type-caption)}
/* Layout helpers: full width, a row of buttons, a label that must not wrap. */
.btn-block{box-sizing:border-box;width:100%}
.btn-nowrap{white-space:nowrap}
.btn-group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--roam-ref-spacing-8)}
/* States. Disabled: dimmed and inert. Busy (aria-busy="true"): a spinner after the label, inert while it works;
   the spin takes its time from the duration scale, so reduced motion stills it. */
:is(.btn,.btn-line):is(:disabled,[aria-disabled="true"],[aria-busy="true"]){cursor:not-allowed;pointer-events:none}
:is(.btn,.btn-line):is(:disabled,[aria-disabled="true"]){opacity:var(--roam-ref-opacity-40)}
:is(.btn,.btn-line)[aria-busy="true"]::after{content:"";flex:none;width:14px;height:14px;border:2px solid currentColor;border-top-color:transparent;border-radius:var(--roam-sys-shape-full);animation:btn-spin var(--roam-ref-duration-longer) linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}

}
/* ── components/np-page.css ── */
@layer board{
/* ── Page and type ───────────────────────────────────────────────────────────────────────────────────────── */
.np{background:var(--roam-ref-palette-cream);font-family:var(--roam-ref-typeface-body);color:var(--roam-ref-palette-forest)}
.np :is(h1,h2,h3){font-family:var(--roam-ref-typeface-display);letter-spacing:var(--roam-ref-tracking-display);color:var(--roam-ref-palette-forest)}
/* The margin reset weighs one class, so a heading's own class can space it. */
.np :where(h1,h2,h3){margin:0}
.np h2{font-size:var(--roam-sys-type-section)}
.np h3{font-size:var(--roam-sys-type-card)}
/* A paragraph straight after a heading sits one related step below it. */
.np :is(h1,h2) + p{margin-top:var(--roam-sys-flow-related)}
.np .ic{flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Section bands ───────────────────────────────────────────────────────────────────────────────────────── */
.np-sec{padding:var(--roam-sys-space-section-y) 0;border-top:1px solid var(--roam-ref-palette-sand-150)}
/* A band that continues the hero above it, without the rule. */
.np-sec--joined{border-top:0}
.np-white{background:var(--roam-ref-palette-white)}
.np-cream{background:var(--roam-ref-palette-cream)}
.np-dark{border-top:0;background:radial-gradient(60% 90% at 100% 0%,var(--roam-ref-palette-gold-a28),transparent 70%),radial-gradient(50% 80% at 0% 100%,var(--roam-ref-palette-teal-a22),transparent 70%),linear-gradient(135deg,var(--roam-ref-palette-forest) 0%,var(--roam-ref-palette-forest-820) 55%,var(--roam-ref-palette-forest-light) 100%);color:var(--roam-ref-palette-cream)}
.np-dark h2,.np-dark h3{color:var(--roam-ref-palette-cream)}

/* ── Hero ────────────────────────────────────────────────────────────────────────────────────────────────── */
.np-hero{position:relative;padding:var(--roam-ref-spacing-48) 0 var(--roam-ref-spacing-56);background:radial-gradient(55% 70% at 100% 0%,var(--roam-ref-palette-gold-a18),transparent 70%),radial-gradient(45% 60% at 0% 100%,var(--roam-ref-palette-teal-a12),transparent 70%),var(--roam-ref-palette-cream)}
/* The brand rule along the hero's foot. */
.np-hero::after{content:"";position:absolute;right:0;bottom:0;left:0;height:3px;background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-sage),var(--roam-ref-palette-gold))}
.np-hero .wrap{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:var(--roam-sys-space-split)}
.np-hero h1{margin-top:var(--roam-sys-flow-related);font-size:var(--roam-sys-type-hero);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-tight);text-wrap:balance}
.v3-content .np-hero h1{font-size:var(--roam-sys-type-page)}
.np-hero--doc .wrap{display:block}
/* The marked phrase in a title: a thick gold underline. */
.np-hero h1 em{font-style:normal;text-decoration:underline;text-decoration-color:var(--roam-ref-palette-gold);text-decoration-thickness:6px;text-decoration-skip-ink:none;text-underline-offset:10px;color:var(--roam-ref-palette-forest)}

.np-crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--roam-ref-spacing-8);font-size:var(--roam-sys-type-label);font-weight:var(--roam-ref-weight-semibold);color:var(--roam-ref-palette-stone-610)}
.np-crumb a{font-weight:var(--roam-ref-weight-bold);text-decoration:none;color:var(--roam-ref-palette-teal-670)}
/* An eyebrow under the breadcrumb sits the same step below it as a title does. */
.np-crumb + .np-eye{margin-top:var(--roam-sys-flow-related)}
/* A back link to the parent page. */
.np-back{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-8);height:36px;padding:0 var(--roam-ref-spacing-14);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-white);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-bold);text-decoration:none;color:var(--roam-ref-palette-teal-670)}

/* ── Headings and copy ───────────────────────────────────────────────────────────────────────────────────── */
.np-eye{margin:0;font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-lg);text-transform:uppercase;color:var(--roam-ref-palette-gold-640)}
.np-dark .np-eye{color:var(--roam-ref-palette-forest-190)}
.np-h2{margin-top:var(--roam-sys-flow-close);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-tight);text-wrap:balance}
/* The short brand rule under a section heading. */
.np-h2::after{content:"";display:block;width:48px;height:3px;margin-top:var(--roam-ref-spacing-20);border-radius:var(--roam-sys-shape-full);background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-sage),var(--roam-ref-palette-gold))}
/* A sub-heading inside a section's flow, well clear of what precedes it. */
.np-sub{margin-top:var(--roam-sys-flow-group);font-weight:var(--roam-ref-weight-bold)}
.np-lead{max-width:62ch;margin:var(--roam-sys-flow-related) 0 0;font-size:var(--roam-sys-type-lead);line-height:var(--roam-ref-leading-body);color:var(--roam-ref-palette-forest-720)}
/* Running copy set at the lead size. */
.np-body{max-width:70ch;font-size:var(--roam-sys-type-lead);line-height:var(--roam-ref-leading-body);color:var(--roam-ref-palette-forest-800)}
.np-body p{margin:0 0 var(--roam-sys-flow-related)}
.np-body a{text-decoration:underline;text-decoration-color:var(--roam-ref-palette-teal-670-a35);text-underline-offset:3px;color:var(--roam-ref-palette-teal-670)}
.np-dark .np-lead{color:var(--roam-ref-palette-forest-190)}

/* The figure under a hero title (e.g. "+$27,500 a year"), led by a short gold rule. */
.np-tag{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-10);margin-top:var(--roam-ref-spacing-18);font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-card);font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-gold-640)}
.np-tag::before{content:"";width:28px;height:3px;border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-gold)}
.np-note{margin-top:var(--roam-sys-flow-separated);padding:var(--roam-sys-space-pad-sm);border-left:4px solid var(--roam-ref-palette-gold);border-radius:var(--roam-sys-shape-inset);background:var(--roam-ref-palette-gold-60);font-size:var(--roam-sys-type-body-sm);line-height:var(--roam-ref-leading-snug)}
/* A blank step between two blocks. */
.np-spacer{height:20px}

/* ── Buttons ─────────────────────────────────────────────────────────────────────────────────────────────── */
.np-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--roam-ref-spacing-12);margin-top:var(--roam-sys-flow-major)}
.np-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--roam-ref-spacing-8);height:52px;padding:0 var(--roam-ref-spacing-28);border:1.5px solid transparent;border-radius:var(--roam-sys-shape-full);font-size:var(--roam-sys-type-body);font-weight:var(--roam-ref-weight-bold);text-decoration:none}
.np-btn .ic{width:16px;height:16px}
.np-btn-gold{background:var(--roam-ref-palette-gold);color:var(--roam-ref-palette-forest)}
.np-btn-gold:hover{background:var(--roam-ref-palette-gold-active)}
.np-btn-line{border-color:var(--roam-ref-palette-forest);background:transparent;color:var(--roam-ref-palette-forest)}
.np-dark .np-btn-line{border-color:var(--roam-ref-palette-cream-a45);color:var(--roam-ref-palette-cream)}

/* A link set in the brand teal, bold (inline in a document). */
.np-link-strong{font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-teal-670)}

/* ── Split: a sticky intro column beside the content (stacked under 1024px) ──────────────────────────────── */
.np-split{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--roam-sys-space-split)}

/* ── The hero visual ─────────────────────────────────────────────────────────────────────────────────────── */
.np-vis{position:relative;display:grid;place-items:center;padding:var(--roam-ref-spacing-16);border-radius:var(--roam-sys-shape-container);background:radial-gradient(70% 60% at 85% 10%,var(--roam-ref-palette-gold-a28),transparent 70%),radial-gradient(60% 60% at 0% 100%,var(--roam-ref-palette-teal-a16),transparent 70%),linear-gradient(150deg,var(--roam-ref-palette-gold-60) 0%,var(--roam-ref-palette-gold-130) 100%);box-shadow:0 1px 0 var(--roam-ref-palette-white-a70) inset,var(--roam-ref-shadow-5)}
.np-vis::before{content:"";position:absolute;inset:var(--roam-ref-spacing-12);border:1px solid var(--roam-ref-palette-white-a70);border-radius:var(--roam-sys-shape-card);pointer-events:none}
.np-vis svg{display:block;width:100%;height:auto;max-height:440px}
/* Holding the guarantee document (guarantee.php's .gq). */
.np-vis:has(.gq){padding:var(--roam-ref-spacing-32) var(--roam-ref-spacing-18) var(--roam-ref-spacing-20)}

/* ── Accents ──────────────────────────────────────────────────────────────────────────────────────────────── */
/* A block's accent colour, set on it (or a parent) as a class: --acc the colour, --acc-d its darker text tone, --acc-t
   its tint; the cards, tiles, steps and category navs read them. */
.acc-teal{--acc:var(--roam-ref-palette-teal);--acc-d:var(--roam-ref-palette-teal-670);--acc-t:var(--roam-ref-palette-teal-a14)}
.acc-gold{--acc:var(--roam-ref-palette-gold);--acc-d:var(--roam-ref-palette-gold-640);--acc-t:var(--roam-ref-palette-gold-a18)}
.acc-sage{--acc:var(--roam-ref-palette-sage);--acc-d:var(--roam-ref-palette-olive-700);--acc-t:var(--roam-ref-palette-sage-a20)}
.acc-forest{--acc:var(--roam-ref-palette-forest-soft);--acc-d:var(--roam-ref-palette-forest-light);--acc-t:var(--roam-ref-palette-forest-soft-a14)}
.acc-ink{--acc:var(--roam-ref-palette-sand-400);--acc-d:var(--roam-ref-palette-sand-670);--acc-t:var(--roam-ref-palette-sand-400-a20)}

/* ── Badges and pills ────────────────────────────────────────────────────────────────────────────────────── */

.np-pills{display:flex;flex-wrap:wrap;gap:var(--roam-ref-spacing-8);margin-top:var(--roam-sys-flow-related)}
.np-pill{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-8);height:32px;padding:0 var(--roam-ref-spacing-14);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-white);font-size:var(--roam-sys-type-label);font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-forest)}
.np-pill .ic{width:15px;height:15px;color:var(--roam-ref-palette-gold-640)}
.np-pill.dev{border-color:transparent;background:var(--roam-ref-palette-teal-a12);color:var(--roam-ref-palette-teal-670)}
.np-pill.live{border-color:transparent;background:var(--roam-ref-palette-forest-soft-a12);color:var(--roam-ref-palette-forest-light)}
/* Badges: a larger pill with an icon disc (credentials, platform marks); .np-dark sets them on forest. */
.np-badges{display:flex;flex-wrap:wrap;gap:var(--roam-ref-spacing-12);margin-top:var(--roam-sys-flow-major)}
.np-badge{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-10);height:48px;padding:0 var(--roam-ref-spacing-18) 0 var(--roam-ref-spacing-8);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-white);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-forest)}
.np-badge i{display:grid;place-items:center;width:32px;height:32px;border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-forest);font-style:normal;color:var(--roam-ref-palette-gold-270)}
.np-badge i .ic{width:16px;height:16px}
.np-dark .np-badge{border-color:var(--roam-ref-palette-cream-a18);background:var(--roam-ref-palette-cream-a8);color:var(--roam-ref-palette-cream)}

/* The confirmation chip on thank-you pages (green), or gold where the next step is pending. */
.np-confirm{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-10);height:36px;padding:0 var(--roam-ref-spacing-14);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-forest-soft-a12);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-forest-light)}
.np-confirm .ic{width:18px;height:18px}
.np-confirm--gold{background:var(--roam-ref-palette-gold-a16);color:var(--roam-ref-palette-gold-640)}

/* ── Link cards and search (thank-you pages, 404, search results) ────────────────────────────────────────────────────────── */
.np-links{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--roam-sys-space-gap);margin-top:var(--roam-sys-flow-major)}
.np-link{display:flex;align-items:flex-start;gap:var(--roam-ref-spacing-14);padding:var(--roam-sys-space-pad-sm);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-white);text-decoration:none;color:var(--roam-ref-palette-forest)}
.np-link .np-ic-tile{display:grid;flex:none;place-items:center;width:44px;height:44px;border-radius:var(--roam-sys-shape-inset);background:var(--roam-ref-palette-gold-a18);color:var(--roam-ref-palette-gold-640)}
.np-link .np-ic-tile .ic{width:20px;height:20px}
.np-link b{display:block;font-size:var(--roam-sys-type-small)}
.np-link span{display:block;margin-top:var(--roam-ref-spacing-4);font-size:var(--roam-sys-type-body-sm);line-height:var(--roam-ref-leading-normal);color:var(--roam-ref-palette-stone-610)}
.np-search{display:flex;flex-direction:column;gap:var(--roam-ref-spacing-10);max-width:520px;margin-top:var(--roam-sys-flow-separated)}
.np-search input{flex:1;height:52px;padding:0 var(--roam-ref-spacing-18);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-white);font:inherit;font-size:var(--roam-sys-type-body)}
.np-search button{height:52px;padding:0 var(--roam-ref-spacing-24);border:0;border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-forest);font:inherit;font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-cream)}

@media (min-width:768px){
.np-hero{padding:var(--roam-ref-spacing-72) 0 var(--roam-ref-spacing-96)}
/* Above a document (the guarantee terms): a shorter foot, and the title alone (no visual beside it). */
.np-hero--doc{padding-bottom:var(--roam-ref-spacing-56)}
.np-vis{padding:var(--roam-ref-spacing-32)}
.np-vis:has(.gq){padding:var(--roam-ref-spacing-40) var(--roam-ref-spacing-36) var(--roam-ref-spacing-36)}
.np-links{grid-template-columns:repeat(2,minmax(0,1fr))}
.np-search{flex-direction:row}
}

@media (min-width:1024px){
.np-hero .wrap{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.np-split{grid-template-columns:minmax(0,4fr) minmax(0,7fr)}
.np-split>div:first-child{position:sticky;top:var(--roam-ref-spacing-96)}
.np-split h2{font-size:var(--roam-sys-type-subsection)}
.np-links{grid-template-columns:repeat(3,minmax(0,1fr))}
}

}
/* ── components/np-blocks.css ── */
@layer board{
.np-n-3{--n:3}
.np-n-4{--n:4}

/* ── Cards ───────────────────────────────────────────────────────────────────────────────────────────────── */
.np-cards{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--roam-sys-space-gap);margin-top:var(--roam-sys-flow-group)}
.np-card{position:relative;display:flex;flex-direction:column;padding:var(--roam-sys-space-pad-lg);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white)}
/* The highlighted card: a gold wash. */
.np-card.feature{border-color:var(--roam-ref-palette-gold-210);background:linear-gradient(180deg,var(--roam-ref-palette-gold-60),var(--roam-ref-palette-gold-110))}
.np-card .np-ic-tile{display:grid;place-items:center;width:52px;height:52px;border-radius:var(--roam-sys-shape-inset);background:var(--roam-ref-palette-teal-a14);color:var(--roam-ref-palette-teal-670)}
.np-card .np-ic-tile.gold{background:var(--roam-ref-palette-gold-a18);color:var(--roam-ref-palette-gold-640)}
.np-card .np-ic-tile.sage{background:var(--roam-ref-palette-sage-a20);color:var(--roam-ref-palette-olive-700)}
.np-card .np-ic-tile .ic{width:24px;height:24px}
.np-card h3{margin-top:var(--roam-sys-flow-related);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-card)}
.np-card .np-kicker{margin-top:var(--roam-sys-flow-related);font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-md);text-transform:uppercase;color:var(--roam-ref-palette-gold-640)}
.np-card .np-kicker + h3{margin-top:var(--roam-sys-flow-tight)}
.np-card p{margin:var(--roam-sys-flow-close) 0 0;font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}
.np-card ul{margin:var(--roam-sys-flow-related) 0 0;padding:0;list-style:none}
/* "Read more", pinned to the card's foot. */
.np-card a.np-more{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-6);margin-top:auto;padding-top:var(--roam-sys-flow-related);font-weight:var(--roam-ref-weight-bold);text-decoration:none;color:var(--roam-ref-palette-teal-670)}
.np-card a.np-more .ic{width:16px;height:16px}
/* A pull quote between blocks. */
.np-quote{margin-top:var(--roam-sys-flow-major);padding:var(--roam-sys-space-pad-lg);border-left:4px solid var(--roam-ref-palette-gold);border-radius:0 var(--roam-sys-shape-xl) var(--roam-sys-shape-xl) 0;background:var(--roam-ref-palette-white);font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-card);line-height:var(--roam-ref-leading-cozy);color:var(--roam-ref-palette-forest)}
.np-quote cite{display:block;margin-top:var(--roam-sys-flow-close);font-family:var(--roam-ref-typeface-body);font-size:var(--roam-sys-type-body-sm);font-style:normal;font-weight:var(--roam-ref-weight-semibold);color:var(--roam-ref-palette-stone-610)}
.np-card li{position:relative;padding:var(--roam-ref-spacing-8) 0 var(--roam-ref-spacing-8) var(--roam-ref-spacing-28);border-top:1px solid var(--roam-ref-palette-sand-90);font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-normal)}
/* Each list item is ticked: a green check in a sage disc. */
.np-card li::before{content:"";position:absolute;top:var(--roam-ref-spacing-12);left:0;width:18px;height:18px;border-radius:50%;background:var(--roam-ref-palette-sage-80) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233D6858' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/11px no-repeat}

/* ── Steps: numbered discs on a brand line (the line shows from 1024px, when the steps share a row) ──────── */
.np-steps{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--roam-sys-space-gap);margin-top:var(--roam-sys-flow-group)}
.np-step{position:relative}
.np-step i{display:grid;place-items:center;width:52px;height:52px;border:2px solid var(--roam-ref-palette-gold);border-radius:50%;background:var(--roam-ref-palette-cream);box-shadow:0 0 0 8px var(--roam-ref-palette-white);font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-body);font-style:normal;font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-none);color:var(--roam-ref-palette-forest)}
/* The disc's ring matches the band, so the line seems to pass behind it. */
.np-cream .np-step i{box-shadow:0 0 0 8px var(--roam-ref-palette-cream)}
.np-step h3{margin-top:var(--roam-sys-flow-related);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-card)}
.np-step p{margin:var(--roam-sys-flow-coupled) 0 0;font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}

/* ── Stat strip ──────────────────────────────────────────────────────────────────────────────────────────── */
.np-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:hidden;margin-top:var(--roam-sys-flow-group);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white);box-shadow:var(--roam-ref-shadow-1),var(--roam-ref-shadow-4)}
/* --stat-rule: the dividers' colour (lighter on a dark band). */
.np-stat{--stat-rule:var(--roam-ref-palette-sand-90);padding:var(--roam-sys-space-pad);border-left:1px solid var(--stat-rule)}
/* Two to a row on phones: rules between the pairs, not before each row's first. */
.np-stat:nth-child(odd){border-left:0}
.np-stat:nth-child(n+3){border-top:1px solid var(--stat-rule)}
.np-stat b{display:block;font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-figure-sm);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-none);letter-spacing:var(--roam-ref-tracking-display);color:var(--roam-ref-palette-forest)}
.np-stat span{display:block;margin-top:var(--roam-sys-flow-coupled);font-size:var(--roam-sys-type-body-sm);line-height:var(--roam-ref-leading-normal);color:var(--roam-ref-palette-stone-610)}
.np-dark .np-stats{border-color:var(--roam-ref-palette-cream-a14);background:var(--roam-ref-palette-cream-a6)}
.np-dark .np-stat{--stat-rule:var(--roam-ref-palette-cream-a14)}
.np-dark .np-stat b{color:var(--roam-ref-palette-cream)}
.np-dark .np-stat span{color:var(--roam-ref-palette-forest-190)}
/* The platform pills (components/ota.css) under a stat strip. */
.np-stats + .ota-pills{margin-top:var(--roam-sys-flow-major)}

/* ── Check list ──────────────────────────────────────────────────────────────────────────────────────────── */
.np-checks{display:grid;grid-template-columns:minmax(0,1fr);gap:0 var(--roam-sys-space-split);margin-top:var(--roam-sys-flow-group);padding:var(--roam-sys-space-pad-lg);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white)}
.np-check{display:flex;align-items:flex-start;gap:var(--roam-ref-spacing-14);padding:var(--roam-ref-spacing-18) 0;border-bottom:1px solid var(--roam-ref-palette-sand-90)}
.np-check:last-child{border-bottom:0}
.np-check .ic{width:22px;height:22px;margin-top:var(--roam-ref-spacing-2);color:var(--roam-ref-palette-forest-soft)}
.np-check b{display:block;font-size:var(--roam-sys-type-body)}
.np-check span{display:block;margin-top:var(--roam-sys-flow-tight);font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}

/* ── Answer box: the short answer, with its icon (above it on phones, in the margin from 768px) ─────────── */
.np-answer{position:relative;margin-top:var(--roam-sys-flow-group);padding:var(--roam-sys-space-pad-lg);border:1px solid var(--roam-ref-palette-gold-210);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white);box-shadow:var(--roam-ref-shadow-4)}
.np-answer .np-answer-ic{display:grid;place-items:center;width:40px;height:40px;margin-bottom:var(--roam-sys-flow-close);border-radius:var(--roam-sys-shape-inset);background:var(--roam-ref-palette-forest);color:var(--roam-ref-palette-gold-270)}
.np-answer .np-answer-ic .ic{width:20px;height:20px}
.np-answer .np-eye{margin-bottom:var(--roam-sys-flow-coupled)}
.np-answer p{margin:0;font-size:var(--roam-sys-type-lead);line-height:var(--roam-ref-leading-body);color:var(--roam-ref-palette-forest)}
.np-answer strong{font-weight:var(--roam-ref-weight-bold)}

/* ── FAQ (details/summary; the open item lifts) ──────────────────────────────────────────────────────────── */
.np-faq{display:flex;flex-direction:column;gap:var(--roam-sys-flow-close)}
.np-faq-i{padding:var(--roam-sys-space-pad);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-white)}
.np-faq-i[open]{border-color:var(--roam-ref-palette-sand-260);box-shadow:var(--roam-ref-shadow-4)}
.np-faq-i summary{display:flex;align-items:center;justify-content:space-between;gap:var(--roam-ref-spacing-20);padding:var(--roam-ref-spacing-20) 0;font-size:var(--roam-sys-type-small);font-weight:var(--roam-ref-weight-bold);list-style:none;cursor:pointer}
.np-faq-i summary::-webkit-details-marker{display:none}
.np-faq-i summary::after{content:"+";display:grid;flex:none;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--roam-ref-palette-sand-90);font-weight:var(--roam-ref-weight-medium)}
.np-faq-i[open] summary::after{content:"×";background:var(--roam-ref-palette-gold)}
.np-faq-a p{margin:0 0 var(--roam-sys-flow-related);font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-body);color:var(--roam-ref-palette-forest-720)}

/* ── Roles (careers) ─────────────────────────────────────────────────────────────────────────────────────── */
.np-roles{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--roam-sys-space-gap);margin-top:var(--roam-sys-flow-major)}
.np-role{display:block;padding:var(--roam-sys-space-pad-sm);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-white);text-decoration:none;color:var(--roam-ref-palette-forest)}
.np-role small{display:block;font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-sm);text-transform:uppercase;color:var(--roam-ref-palette-gold-640)}
.np-role b{display:block;margin-top:var(--roam-sys-flow-tight);font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-card);line-height:var(--roam-ref-leading-card)}
.np-role span{display:block;margin-top:var(--roam-sys-flow-coupled);font-size:var(--roam-sys-type-body-sm);color:var(--roam-ref-palette-stone-610)}

/* ── Ecosystem catalogue: categories, each a sticky intro beside its products; each category sets its
   accent (--acc, its dark --acc-d and tint --acc-t) ─────────────────────────────────────────────────────── */
.np-catnav{display:flex;flex-wrap:wrap;gap:var(--roam-ref-spacing-10);margin-top:var(--roam-sys-flow-separated)}
.np-catnav a{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-8);height:40px;padding:0 var(--roam-ref-spacing-16);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-white);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-bold);text-decoration:none;color:var(--roam-ref-palette-forest)}
.np-catnav a i{width:10px;height:10px;border-radius:50%;background:var(--acc)}
.np-catnav a b{font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-stone-610)}
.np-cat{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--roam-sys-space-gap)}
.np-cat + .np-cat{margin-top:var(--roam-sys-flow-group);padding-top:var(--roam-sys-space-section-y);border-top:1px solid var(--roam-ref-palette-sand-150)}
.np-cat-meta h2{margin-top:var(--roam-sys-flow-related);font-size:var(--roam-sys-type-subsection);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-heading)}
.np-cat-meta p{margin-top:var(--roam-sys-flow-close);font-size:var(--roam-sys-type-lead);line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}
.np-cat-meta .np-count{margin-top:var(--roam-sys-flow-related);font-size:var(--roam-sys-type-label);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-md);text-transform:uppercase;color:var(--acc-d)}
.np-cat-num{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:var(--roam-sys-shape-inset);background:var(--acc-t);font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-body);font-weight:var(--roam-ref-weight-bold);color:var(--acc-d)}
.np-prods{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--roam-sys-space-gap)}
.np-prod{position:relative;display:flex;flex-direction:column;overflow:hidden;padding:var(--roam-sys-space-pad-lg);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white);box-shadow:var(--roam-ref-shadow-1),var(--roam-ref-shadow-4)}
/* The category's accent along the card's top edge. */
.np-prod::before{content:"";position:absolute;top:0;right:0;left:0;height:4px;background:var(--acc)}
.np-prod-top{display:flex;align-items:center;gap:var(--roam-ref-spacing-14)}
.np-prod-ic{display:grid;flex:none;place-items:center;width:56px;height:56px;border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-forest);color:var(--acc)}
.np-prod-ic .ic{width:26px;height:26px}
.np-prod-kick{font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-lg);text-transform:uppercase;color:var(--acc-d)}
.np-prod h3{margin-top:var(--roam-ref-spacing-2);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-heading)}
.np-prod h3 small{font-family:var(--roam-ref-typeface-body);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-semibold);letter-spacing:0;color:var(--roam-ref-palette-stone-610)}
.np-prod p{flex:1;margin-top:var(--roam-sys-flow-related);font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}
.np-prod .np-pill{align-self:flex-start;height:26px;margin-top:var(--roam-ref-spacing-16);padding:0 var(--roam-ref-spacing-10);font-size:var(--roam-sys-type-caption);letter-spacing:var(--roam-ref-tracking-xs);text-transform:uppercase}
.np-prod a{display:inline-flex;align-self:flex-start;align-items:center;gap:var(--roam-ref-spacing-6);height:40px;margin-top:var(--roam-sys-flow-related);padding:0 var(--roam-ref-spacing-16);border:1.5px solid var(--acc);border-radius:var(--roam-sys-shape-full);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-bold);text-decoration:none;color:var(--acc-d)}
.np-prod a .ic{width:15px;height:15px}
/* The ecosystem diagram's icons, each in its product's colour. */
.eco-ic--teal{color:var(--roam-ref-palette-teal)}
.eco-ic--gold{color:var(--roam-ref-palette-gold)}
.eco-ic--sage{color:var(--roam-ref-palette-sage)}
.eco-ic--sand{color:var(--roam-ref-palette-sand-400)}
.eco-ic--forest{color:var(--roam-ref-palette-forest-soft)}

@media (min-width:768px){
.np-cards,.np-steps,.np-checks,.np-prods,.np-roles{grid-template-columns:repeat(2,minmax(0,1fr))}
.np-prods.one{grid-template-columns:minmax(0,1fr)}
.np-stats{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.np-stat:nth-child(odd){border-left:1px solid var(--stat-rule)}
.np-stat:first-child{border-left:0}
.np-stat:nth-child(n+3){border-top:0}
.np-check:nth-last-child(2){border-bottom:0}
.np-answer{padding:var(--roam-sys-space-pad) var(--roam-sys-space-pad-lg) var(--roam-sys-space-pad) var(--roam-ref-spacing-80)}
.np-answer .np-answer-ic{position:absolute;top:var(--roam-ref-spacing-28);left:var(--roam-ref-spacing-28);margin-bottom:0}
}

@media (min-width:1024px){
.np-cards{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.np-steps{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
.np-steps::before{content:"";position:absolute;top:var(--roam-ref-spacing-28);right:var(--roam-ref-spacing-28);left:var(--roam-ref-spacing-28);height:2px;background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-sage),var(--roam-ref-palette-gold))}
.np-roles{grid-template-columns:repeat(3,minmax(0,1fr))}
.np-cat{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--roam-sys-space-split)}
.np-cat-meta{position:sticky;top:var(--roam-ref-spacing-96)}
}

}
/* ── components/np-data.css ── */
@layer board{

/* ── Comparison table: ROAM's column (.us) stands out; on phones the table scrolls sideways in its frame ── */
.np-table{overflow:auto hidden;margin-top:var(--roam-sys-flow-group);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white)}
.np-table table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--roam-sys-type-body-sm)}
.np-table :is(th,td){padding:var(--roam-ref-spacing-18) var(--roam-ref-spacing-20);border-top:1px solid var(--roam-ref-palette-sand-90);line-height:var(--roam-ref-leading-normal);text-align:left;vertical-align:top}
.np-table thead th{border-top:0;background:var(--roam-ref-palette-cream);font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-sm);text-transform:uppercase;color:var(--roam-ref-palette-stone-610)}
.np-table thead th.us{background:var(--roam-ref-palette-forest);color:var(--roam-ref-palette-cream)}
.np-table td.us{background:var(--roam-ref-palette-sage-60);box-shadow:inset 3px 0 0 var(--roam-ref-palette-forest-soft);font-weight:var(--roam-ref-weight-semibold);color:var(--roam-ref-palette-forest)}
.np-table th[scope=row]{width:22%;font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-forest)}

/* ── Before and after: two columns and the change between them (stacked on phones) ───────────────────── */
.np-ba{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;gap:var(--roam-sys-space-gap);margin-top:var(--roam-sys-flow-group)}
.np-ba-col{padding:var(--roam-sys-space-pad);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white)}
.np-ba-col.after{border-color:var(--roam-ref-palette-forest);background:var(--roam-ref-palette-forest);color:var(--roam-ref-palette-cream)}
/* The column's label, not a heading step: small capitals in the body face. */
.np-ba-col h3{font-family:var(--roam-ref-typeface-body);font-size:var(--roam-sys-type-label);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-lg);text-transform:uppercase;color:var(--roam-ref-palette-stone-610)}
.np-ba-col.after h3{color:var(--roam-ref-palette-cream)}
.np-ba-col dl{display:grid;grid-template-columns:1fr 1fr;gap:var(--roam-ref-spacing-16);margin:var(--roam-sys-flow-related) 0 0}
.np-ba-col dt{font-size:var(--roam-sys-type-label);color:var(--roam-ref-palette-stone-610)}
.np-ba-col.after dt{color:var(--roam-ref-palette-forest-190)}
.np-ba-col dd{margin:var(--roam-sys-flow-tight) 0 0;font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-subsection);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-none);letter-spacing:var(--roam-ref-tracking-display)}
/* Revenue, the figure that matters, spans the column. */
.np-ba-col .rev{grid-column:1/-1;padding-top:var(--roam-ref-spacing-16);border-top:1px solid var(--roam-ref-palette-sand-90)}
.np-ba-col.after .rev{border-color:var(--roam-ref-palette-cream-a14)}
.np-ba-col .rev dd{font-size:var(--roam-sys-type-page)}
.np-ba-mid{display:grid;grid-auto-flow:column;place-items:center;align-content:center;justify-content:start;gap:var(--roam-sys-flow-coupled);text-align:left}
.np-ba-mid .arrow{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--roam-ref-palette-gold);color:var(--roam-ref-palette-forest)}
.np-ba-mid .arrow .ic{width:24px;height:24px}
.np-ba-mid b{font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-card-lg);color:var(--roam-ref-palette-forest-light)}
.np-ba-mid span{font-size:var(--roam-sys-type-label);color:var(--roam-ref-palette-stone-610)}

/* ── Bar comparison: each row a label, its tracks (this property's in the brand gradient) and a figure ── */
.np-bars{display:grid;gap:var(--roam-ref-spacing-18);margin-top:var(--roam-sys-flow-major)}
.np-bar-row{display:grid;grid-template-columns:minmax(0,1fr) 72px;align-items:center;gap:var(--roam-ref-spacing-16)}
.np-bar-row>b{grid-column:1/-1;font-size:var(--roam-sys-type-micro)}
.np-bar-row>em{font-style:normal;font-weight:var(--roam-ref-weight-bold);text-align:right;color:var(--roam-ref-palette-forest-light)}
.np-bar-trk{display:grid;gap:var(--roam-ref-spacing-6)}
.np-bar-trk i{width:var(--v);display:block;height:14px;border-radius:var(--roam-sys-shape-sm);background:var(--roam-ref-palette-sand-190)}
.np-bar-trk i.a{background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-sage),var(--roam-ref-palette-gold))}
.np-bar-trk small{font-size:var(--roam-sys-type-micro);color:var(--roam-ref-palette-stone-610)}
.np-legend{display:flex;gap:var(--roam-ref-spacing-20);margin-top:var(--roam-sys-flow-related);font-size:var(--roam-sys-type-micro);color:var(--roam-ref-palette-stone-610)}
.np-legend span::before{content:"";display:inline-block;width:12px;height:12px;margin-right:var(--roam-ref-spacing-6);border-radius:var(--roam-sys-shape-mark);background:var(--roam-ref-palette-sand-190);vertical-align:-1px}
.np-legend span.a::before{background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-gold))}
.np-legend span.pk::before{background:var(--roam-ref-palette-gold)}
.np-legend span.sh::before{background:var(--roam-ref-palette-sage)}
.np-legend span.lo::before{background:var(--roam-ref-palette-teal-160)}

/* ── Factor: one big multiplier beside its explanation, then where this property sits on the scale ─────── */
.np-factor{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;gap:var(--roam-ref-spacing-12);margin-top:var(--roam-sys-flow-major);padding:var(--roam-sys-space-pad-lg);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white)}
/* A display numeral: off the type scale on purpose. */
/* The factor figure is a display numeral, so its size stays on the reference scale. */
.np-factor b{font-family:var(--roam-ref-typeface-display);font-size:var(--roam-ref-typescale-56);line-height:var(--roam-ref-leading-none);letter-spacing:var(--roam-ref-tracking-display);color:var(--roam-ref-palette-forest)}
.np-factor p{margin:0;font-size:var(--roam-sys-type-body);line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}
.np-scale{display:grid;gap:var(--roam-ref-spacing-10);margin-top:var(--roam-sys-flow-related)}
.np-scale div{display:grid;grid-template-columns:120px minmax(0,1fr) 44px;align-items:center;gap:var(--roam-ref-spacing-14);font-size:var(--roam-sys-type-body-sm)}
.np-scale div a{font-weight:var(--roam-ref-weight-semibold);text-decoration:none;color:var(--roam-ref-palette-forest)}
.np-scale div i{width:var(--v);display:block;height:10px;border-radius:var(--roam-sys-shape-mark);background:var(--roam-ref-palette-sand-190)}
.np-scale div em{font-style:normal;font-weight:var(--roam-ref-weight-bold);text-align:right}
/* This property's row. */
.np-scale div.on i{background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-sage),var(--roam-ref-palette-gold))}
.np-scale div.on a{font-weight:800}

/* ── Monthly bars: twelve months, peak (.pk), shoulder (.sh) and low (.lo) season ───────────────────────── */
.np-months{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));align-items:end;gap:var(--roam-ref-spacing-4);height:130px;margin-top:var(--roam-sys-flow-major);padding:var(--roam-sys-space-pad-sm);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-white)}
.np-months div{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:var(--roam-sys-flow-tight);height:100%}
.np-months i{height:var(--v);display:block;width:100%;border-radius:var(--roam-sys-shape-sm) var(--roam-sys-shape-sm) var(--roam-sys-shape-mark) var(--roam-sys-shape-mark);background:var(--roam-ref-palette-sand-190)}
.np-months i.pk{background:var(--roam-ref-palette-gold)}
.np-months i.sh{background:var(--roam-ref-palette-sage)}
.np-months i.lo{background:var(--roam-ref-palette-teal-160)}
.np-months small{font-size:var(--roam-sys-type-micro);font-weight:var(--roam-ref-weight-bold);color:var(--roam-ref-palette-stone-610)}

@media (min-width:768px){
.np-table{overflow:hidden}
.np-table table{min-width:auto}
.np-ba{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
.np-ba-mid{grid-auto-flow:row;justify-content:normal;text-align:center}
.np-ba-mid span{max-width:120px}
.np-bar-row{grid-template-columns:150px minmax(0,1fr) 92px}
.np-bar-row>b{grid-column:auto}
.np-factor{grid-template-columns:auto minmax(0,1fr);gap:var(--roam-ref-spacing-28)}
.np-factor b{font-size:var(--roam-ref-typescale-64)}
.np-scale div{grid-template-columns:200px minmax(0,1fr) 52px;}
.np-months{gap:var(--roam-ref-spacing-6);height:160px}
}

}
/* ── components/gs.css ── */
@layer board{

.gs{padding:var(--roam-sys-space-section-y) 0;background:var(--roam-ref-palette-sand-90);color:var(--roam-ref-palette-forest)}
.gs-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-container);background:var(--roam-ref-palette-white);box-shadow:var(--roam-ref-shadow-5)}
/* Raised, so it paints over the photo that sits first on phones. */
.gs-bar{position:absolute;top:0;right:0;left:0;z-index:var(--roam-ref-z-raised);height:4px;background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-sage),var(--roam-ref-palette-gold))}
.gs-copy{display:flex;flex-direction:column;gap:var(--roam-sys-flow-related);min-width:0;padding:var(--roam-ref-spacing-28) var(--roam-ref-spacing-24) var(--roam-ref-spacing-32)}
.gs-eye{margin:0;font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-sm);text-transform:uppercase;color:var(--roam-ref-palette-gold-640)}
.gs-h{max-width:16ch;margin:0;font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-section);font-weight:var(--roam-ref-weight-semibold);line-height:var(--roam-ref-leading-tight);letter-spacing:var(--roam-ref-tracking-display);text-wrap:balance;color:var(--roam-ref-palette-forest)}
.gs-body{max-width:52ch;margin:var(--roam-sys-flow-related) 0 0;font-size:var(--roam-sys-type-lead);line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}
.gs-list{display:flex;flex-direction:column;gap:var(--roam-ref-spacing-10);margin:var(--roam-sys-flow-tight) 0 0;padding:0;list-style:none}
.gs-item{display:flex;align-items:center;gap:var(--roam-ref-spacing-12);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-semibold);color:var(--roam-ref-palette-forest)}
.gs-ck{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-gold);color:var(--roam-ref-palette-forest)}
.gs-ck svg{width:14px;height:14px}
.gs-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--roam-ref-spacing-14) var(--roam-ref-spacing-24);margin-top:var(--roam-sys-flow-coupled)}
.gs-call{font-size:var(--roam-sys-type-body-sm);color:var(--roam-ref-palette-stone-610)}
.gs-call a{white-space:nowrap}
.gs-media{position:relative;order:-1;height:220px;margin:0}
.gs-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.gs-pledge{position:absolute;right:var(--roam-ref-spacing-20);bottom:var(--roam-ref-spacing-20);left:var(--roam-ref-spacing-20);display:flex;align-items:center;gap:var(--roam-ref-spacing-10);padding:var(--roam-sys-space-pad-sm) var(--roam-sys-space-pad);border-radius:var(--roam-sys-shape-lg);background:var(--roam-ref-palette-white-a94);box-shadow:var(--roam-ref-shadow-4);font-size:var(--roam-sys-type-label);line-height:var(--roam-ref-leading-normal);color:var(--roam-ref-palette-forest)}
.gs-pledge-icon{flex:none;color:var(--roam-ref-palette-gold-active)}
.gs-pledge a{color:inherit}

@media (min-width:768px){
  .gs-card{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .gs-copy{padding:var(--roam-ref-spacing-56)}
  .gs-media{order:0;height:auto}
}

}
/* ── components/investment-profile.css ── */
@layer board{

/* ── Metrics and the view ────────────────────────────────────────────────────────────────────────────────── */
.iv-top{display:grid;grid-template-columns:minmax(0,1fr);align-items:start;gap:var(--roam-sys-space-gap);margin-top:var(--roam-sys-flow-major)}
.iv-grid{display:grid;grid-template-columns:minmax(0,1fr);overflow:hidden;border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-card);background:var(--roam-ref-palette-white)}
.iv-m{padding:var(--roam-ref-spacing-20) var(--roam-ref-spacing-24);border-bottom:1px solid var(--roam-ref-palette-sand-110)}
.iv-m:last-child{border-bottom:0}
.iv-m small{display:block;font:var(--roam-ref-weight-bold) var(--roam-sys-type-caption)/var(--roam-ref-leading-card) var(--roam-ref-typeface-body);letter-spacing:var(--roam-ref-tracking-sm);text-transform:uppercase;color:var(--roam-ref-palette-gold-640)}
.iv-m b{display:block;margin-top:var(--roam-sys-flow-tight);font:var(--roam-ref-weight-bold) var(--roam-sys-type-body)/var(--roam-ref-leading-card) var(--roam-ref-typeface-display);color:var(--roam-ref-palette-forest)}
/* The five-dot scale: lit dots show one teal-to-gold gradient across the row. */
.iv-dots{display:inline-flex;gap:var(--roam-ref-spacing-6);margin-top:var(--roam-ref-spacing-10)}
.iv-dots i{width:22px;height:8px;border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-sand-110)}
.iv-dots i.on{background:linear-gradient(90deg,var(--roam-ref-palette-teal),var(--roam-ref-palette-gold));background-size:130px 8px}
.iv-dots i.on:nth-child(2){background-position:-27px 0}
.iv-dots i.on:nth-child(3){background-position:-54px 0}
.iv-dots i.on:nth-child(4){background-position:-81px 0}
.iv-dots i.on:nth-child(5){background-position:-108px 0}
.iv-view p{margin:0;font-size:var(--roam-sys-type-lead);line-height:var(--roam-ref-leading-body);color:var(--roam-ref-palette-forest-720)}
.iv-view .np-eye{margin-bottom:var(--roam-sys-flow-coupled)}
.iv-view .iv-best{margin-top:var(--roam-sys-flow-related);padding-top:var(--roam-ref-spacing-18);border-top:1px solid var(--roam-ref-palette-sand-150);font-size:var(--roam-sys-type-body)}
.iv-view .iv-best b{color:var(--roam-ref-palette-forest)}

/* ── Revenue vs. return, by property type ────────────────────────────────────────────────────────────────── */
.iv-cmp{margin-top:var(--roam-sys-flow-group)}
.iv-cmp h3{margin:0;font-family:var(--roam-ref-typeface-display);font-size:var(--roam-sys-type-card);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-card);color:var(--roam-ref-palette-forest)}
.iv-cmp>p{margin:var(--roam-sys-flow-coupled) 0 0;color:var(--roam-ref-palette-forest-720)}
.iv-tw{margin-top:var(--roam-sys-flow-related);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-white)}
.iv-cmp table{width:100%;border-collapse:collapse}
.iv-cmp :is(th,td){font-size:var(--roam-sys-type-body);text-align:left}
.iv-cmp thead{display:none}
.iv-cmp thead th{padding:var(--roam-ref-spacing-14) var(--roam-ref-spacing-20);border-bottom:1px solid var(--roam-ref-palette-sand-110);font:var(--roam-ref-weight-bold) var(--roam-sys-type-caption)/var(--roam-ref-leading-card) var(--roam-ref-typeface-body);letter-spacing:var(--roam-ref-tracking-sm);text-transform:uppercase;color:var(--roam-ref-palette-stone-610)}
/* Phones: each row a card, each cell a label/value line. */
.iv-cmp tbody tr{display:block;padding:var(--roam-sys-flow-close) var(--roam-ref-spacing-18);border-bottom:1px solid var(--roam-ref-palette-sand-110)}
.iv-cmp tbody tr:last-child{border-bottom:0}
.iv-cmp tbody :is(th,td){display:flex;justify-content:space-between;align-items:center;gap:var(--roam-ref-spacing-12);padding:var(--roam-ref-spacing-6) 0;border-bottom:0}
.iv-cmp tbody th{padding-bottom:var(--roam-ref-spacing-8)}
.iv-cmp tbody td::before{content:attr(data-l);font:var(--roam-ref-weight-semibold) var(--roam-sys-type-label)/var(--roam-ref-leading-compact) var(--roam-ref-typeface-body);color:var(--roam-ref-palette-stone-610)}
.iv-cmp tbody th a{font-weight:var(--roam-ref-weight-semibold);text-decoration:none;color:var(--roam-ref-palette-forest)}
.iv-cmp tr.on{background:var(--roam-ref-palette-sage-60)}
.iv-cmp tr.on th a{font-weight:800}
.iv-cmp .iv-dots{margin-top:0}
.iv-cmp .iv-dots i{width:18px;height:7px}

@media (min-width:480px){
.iv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.iv-m:nth-child(odd){border-right:1px solid var(--roam-ref-palette-sand-110)}
.iv-m:nth-last-child(2){border-bottom:0}
}

/* A table from 768px: the header row shows, the cells take the table layout, the row labels go. */
@media (min-width:768px){
.iv-tw{overflow:auto}
.iv-cmp table{min-width:620px}
.iv-cmp thead{display:table-header-group}
.iv-cmp tbody tr{display:table-row;padding:0;border-bottom:0}
.iv-cmp tbody :is(th,td){display:table-cell;padding:var(--roam-ref-spacing-14) var(--roam-ref-spacing-20);border-bottom:1px solid var(--roam-ref-palette-sand-110)}
.iv-cmp tbody tr:last-child :is(th,td){border-bottom:0}
.iv-cmp tbody td::before{content:none}
}

@media (min-width:1024px){
.iv-top{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:var(--roam-sys-space-split)}
}

}
/* ── components/grid.css ── */
@layer board{

.g{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--roam-sys-space-gap)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}

@media (min-width:768px){
.g-md-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-md-2>:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - var(--roam-sys-space-gap) / 2)}
}

@media (min-width:1024px){
.g-lg-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-lg-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-lg-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-lg-6{grid-template-columns:repeat(6,minmax(0,1fr))}
.g-md-2>:last-child:nth-child(odd){grid-column:auto;justify-self:auto;width:auto}
}

}
/* ── components/header.css ── */
@layer board{




body{overflow-x:clip}


/* Platform status pills after a stat row (/guarantee/): the major flow step, as the old badge row had. */


}
/* ── components/site-header.css ── */
@layer board{

/* ── Guarantee bar ───────────────────────────────────────────────────────────────────────────────────────── */
.v3-bar{display:block;box-sizing:border-box;height:36px;padding:9px 0;background:var(--roam-ref-palette-gold);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-medium);line-height:18px;text-decoration:none;color:var(--roam-ref-palette-forest)}
.v3-bar:has(.v3-bar-link:hover){background:var(--roam-ref-palette-gold-370)}
/* One line at every width; the close button sits over the row's right end. */
.v3-bar-row{position:relative;display:flex;align-items:center;justify-content:center;gap:var(--roam-ref-spacing-8);font-size:var(--roam-sys-type-caption);white-space:nowrap}
.v3-bar-link{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-8);margin-right:var(--roam-ref-spacing-24);text-decoration:none;color:inherit}
.v3-bar-ic{display:none;flex:none;place-items:center;box-sizing:border-box;width:18px;height:18px;border:1.5px solid var(--roam-ref-palette-forest-a50);border-radius:50%;font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);line-height:var(--roam-ref-leading-none);color:var(--roam-ref-palette-forest)}
/* The guarantee's qualifier and terms link, from 768px. */
.v3-bar-more{display:none}
.v3-bar-more a{text-decoration:underline;text-underline-offset:var(--roam-ref-spacing-3);color:inherit}
.v3-bar-x{position:absolute;top:50%;right:calc(var(--roam-sys-space-page-x) - var(--roam-ref-spacing-12));width:44px;height:44px;padding:0;border:0;background:transparent;font:inherit;color:inherit;opacity:var(--roam-ref-opacity-70);cursor:pointer;transform:translateY(-50%);transition:opacity var(--roam-ref-duration-fast) ease}
.v3-bar-x:is(:hover,:focus-visible){opacity:1}
/* The two-bar X. */
.roam-x{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--roam-ref-spacing-6)}
.roam-x__bar{width:20px;height:2px;border-radius:var(--roam-sys-shape-xs);background:currentColor}
.roam-x__bar:first-child{transform:rotate(45deg) translateY(4px)}
.roam-x__bar:last-child{transform:rotate(-45deg) translateY(-4px)}

/* ── Header row ──────────────────────────────────────────────────────────────────────────────────────────── */
.v3-hdr{position:sticky;top:0;z-index:var(--roam-ref-z-dropdown);border-bottom:1px solid var(--roam-ref-palette-cream-a6);background:linear-gradient(145deg,var(--roam-ref-palette-forest) 0%,var(--roam-ref-palette-forest-light) 100%)}
.v3-hdr-row{display:flex;align-items:center;height:64px}
.v3-hdr-logo{display:flex;align-items:center}
.v3-hdr-logo-img{display:block;width:auto;height:24px}

/* The menus (from 1024px). */
.v3-nav{display:none}
.v3-nav-item{position:relative;display:flex;align-items:center;min-height:72px}
.v3-nav-top{display:inline-flex;align-items:center;gap:var(--roam-ref-spacing-6);font-size:var(--roam-sys-type-body);font-weight:var(--roam-ref-weight-medium);white-space:nowrap;text-decoration:none;color:var(--roam-ref-palette-cream-a86)}
.v3-nav-top:hover,.v3-nav-item.is-open .v3-nav-top{color:var(--roam-ref-palette-cream)}
.v3-nav-top svg{transition:transform var(--roam-ref-duration-base)}
.v3-nav-item.is-open .v3-nav-top svg{transform:rotate(180deg)}
.v3-menu{position:absolute;top:100%;left:50%;z-index:var(--roam-ref-z-nav);min-width:260px;padding:var(--roam-sys-space-pad-sm);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-white);box-shadow:var(--roam-ref-shadow-4),var(--roam-ref-shadow-1);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity var(--roam-ref-duration-fast),transform var(--roam-ref-duration-fast),visibility var(--roam-ref-duration-fast)}
.v3-nav-item.is-open .v3-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.v3-menu-wide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--roam-ref-spacing-4) var(--roam-ref-spacing-12);min-width:520px}
.v3-menu ul{margin:0;padding:0;list-style:none}
.v3-menu a{display:block;padding:var(--roam-ref-spacing-10) var(--roam-ref-spacing-14);border-radius:var(--roam-sys-shape-lg);font-size:var(--roam-sys-type-body);font-weight:var(--roam-ref-weight-medium);line-height:var(--roam-ref-leading-cozy);white-space:nowrap;text-decoration:none;color:var(--roam-ref-palette-forest)}
.v3-menu a:is(:hover,:focus-visible){background:var(--roam-ref-palette-sand-90);color:var(--roam-ref-palette-forest)}
.v3-menu a[aria-current="page"]{background:var(--roam-ref-palette-gold-60);color:var(--roam-ref-palette-gold-640)}
.v3-menu-group{padding-left:var(--roam-ref-spacing-12);border-left:1px solid var(--roam-ref-palette-sand-90)}
.v3-menu-label{margin:var(--roam-sys-flow-tight) var(--roam-ref-spacing-14);font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-sm);text-transform:uppercase;color:var(--roam-ref-palette-stone-610)}

/* The phone number (from 1280px) and the call to action. */
.v3-hdr-phone{display:none;font-size:var(--roam-sys-type-body);font-weight:var(--roam-ref-weight-semibold);white-space:nowrap;text-decoration:none;color:var(--roam-ref-palette-cream)}
.v3-hdr-phone:is(:hover,:focus-visible){text-decoration:underline;color:var(--roam-ref-palette-cream)}
.v3-hdr-cta{height:32px;min-height:32px;margin-left:auto;padding:0 var(--roam-ref-spacing-18);font-size:var(--roam-sys-type-body-sm);letter-spacing:var(--roam-ref-tracking-sm);line-height:var(--roam-ref-leading-none);white-space:nowrap}
.v3-hdr-cta-long{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0)}
.v3-hdr-cta-short{display:inline}

/* The burger: two bars that turn into an X while the drawer is open. */
.v3-burger{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 -10px 0 -8px;padding:0;border:0;background:transparent;cursor:pointer}
.v3-burger-box{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:var(--roam-ref-spacing-6);width:28px;height:28px}
.v3-burger-l,.v3-burger-s{display:block;border-radius:var(--roam-sys-shape-xs);background:var(--roam-ref-palette-cream);transition:transform var(--roam-ref-duration-base)}
.v3-burger-l{width:20px;height:2px}
.v3-burger-s{width:14px;height:1px}
.v3-drawer-open .v3-burger-l{transform:rotate(45deg) translateY(4px)}
.v3-drawer-open .v3-burger-s{width:20px;transform:rotate(-45deg) translateY(-4px)}

/* ── Drawer (under 1024px): a panel floating under the header row ───────────────────────────────────────── */
html.v3-drawer-open{overflow:hidden}
.v3-drawer{position:absolute;top:calc(100% + var(--roam-ref-spacing-8));right:var(--roam-ref-spacing-8);left:var(--roam-ref-spacing-8);max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-xl);background:var(--roam-ref-palette-cream);box-shadow:var(--roam-ref-shadow-5)}
.v3-drawer .wrap{padding-top:var(--roam-ref-spacing-8);padding-bottom:var(--roam-ref-spacing-24)}
.v3-drawer-group{border-bottom:1px solid var(--roam-ref-palette-sand-150)}
.v3-drawer-group summary{padding:var(--roam-ref-spacing-16) 0;font-size:var(--roam-sys-type-small);font-weight:var(--roam-ref-weight-semibold);color:var(--roam-ref-palette-forest)}
.v3-drawer-group summary svg{flex:none;color:var(--roam-ref-palette-gold-640);transition:transform var(--roam-ref-duration-base)}
.v3-drawer-group[open] summary svg{transform:rotate(180deg)}
.v3-drawer-group ul{margin:0 0 var(--roam-sys-flow-close);padding:0;list-style:none}
.v3-drawer-group a{display:flex;align-items:center;min-height:44px;padding:0 var(--roam-ref-spacing-12);border-radius:var(--roam-sys-shape-lg);font-size:var(--roam-sys-type-body);text-decoration:none;color:var(--roam-ref-palette-forest-720)}
.v3-drawer-group a:hover{background:var(--roam-ref-palette-sand-90);color:var(--roam-ref-palette-forest)}
.v3-drawer .v3-menu-label{margin:var(--roam-sys-flow-tight) var(--roam-ref-spacing-12)}
.v3-drawer-foot{display:flex;flex-direction:column;align-items:stretch;gap:var(--roam-ref-spacing-14);padding-top:var(--roam-ref-spacing-20);text-align:center}
.v3-drawer-foot a.num{font-weight:var(--roam-ref-weight-semibold);text-decoration:none;color:var(--roam-ref-palette-forest)}

@media (min-width:480px){
.v3-bar-ic{display:inline-grid}
.v3-hdr-cta-long{position:static;overflow:visible;width:auto;height:auto;clip:auto}
.v3-hdr-cta-short{display:none}
}

@media (min-width:768px){
.v3-bar-row{gap:var(--roam-ref-spacing-10);font-size:inherit;white-space:normal}
.v3-bar-link{gap:var(--roam-ref-spacing-10);margin-right:0}
.v3-bar-more{display:inline}
.v3-hdr-row{gap:var(--roam-ref-spacing-36);height:72px}
.v3-hdr-logo-img{height:32px}
.v3-hdr-cta{height:auto;min-height:40px;line-height:inherit}
.v3-burger{margin-left:var(--roam-ref-spacing-8)}
}

@media (min-width:1024px){
.v3-hdr-row{gap:0}
.v3-nav{display:flex;flex:1;justify-content:space-evenly}
.v3-burger,.v3-drawer{display:none}
html.v3-drawer-open{overflow:visible}
}

@media (min-width:1280px){
.v3-hdr-phone{display:inline}
.v3-hdr-cta{margin-left:var(--roam-ref-spacing-36);padding:0 var(--roam-ref-spacing-20);font-size:var(--roam-sys-type-label);letter-spacing:var(--roam-ref-tracking-xs)}
}

}
/* ── components/footer.css ── */
@layer board{

.v3-footer{padding:var(--roam-sys-space-section-y) 0 var(--roam-sys-flow-major);overflow:hidden;background:linear-gradient(180deg,var(--roam-ref-palette-cream) 0%,var(--roam-ref-palette-sand-90) 100%);box-shadow:inset 0 12px 24px -12px var(--roam-ref-palette-forest-a12);color:var(--roam-ref-palette-forest)}

/* ── Brand and contact ───────────────────────────────────────────────────────────────────────────────────── */
.footer-top{display:flex;flex-direction:column;justify-content:space-between;gap:var(--roam-sys-space-split);padding-bottom:var(--roam-sys-space-section-y);border-bottom:1px solid var(--roam-ref-palette-sand-190)}
.footer-brand{max-width:440px}
.footer-logo{display:inline-block}
.footer-logo-img{display:block;width:auto;height:40px}
.footer-about{margin:var(--roam-sys-flow-related) 0 0;line-height:var(--roam-ref-leading-snug);color:var(--roam-ref-palette-forest-720)}
.footer-social{display:flex;gap:var(--roam-ref-spacing-10);margin-top:var(--roam-sys-flow-separated)}
.footer-social-link{display:grid;place-items:center;width:42px;height:42px;border:1px solid var(--roam-ref-palette-sand-190);border-radius:50%;color:var(--roam-ref-palette-forest)}
.footer-social-link:is(:hover,:focus-visible){border-color:var(--roam-ref-palette-forest);color:var(--roam-ref-palette-forest)}
/* Column headings carry a short gold rule under them. */
.footer-heading{margin:0 0 var(--roam-sys-flow-related);padding-bottom:var(--roam-ref-spacing-10);background:linear-gradient(90deg,var(--roam-ref-palette-gold) 0 28px,transparent 28px) bottom left/100% 2px no-repeat;font-size:var(--roam-sys-type-caption);font-weight:var(--roam-ref-weight-bold);letter-spacing:var(--roam-ref-tracking-sm);text-transform:uppercase;color:var(--roam-ref-palette-forest)}
.footer-heading-link{text-decoration:none;color:inherit}
.footer-contact{display:flex;flex-wrap:wrap;gap:var(--roam-ref-spacing-8);max-width:420px}
.footer-contact-link{display:inline-flex;align-items:center;height:36px;padding:0 var(--roam-ref-spacing-14);border:1px solid var(--roam-ref-palette-sand-150);border-radius:var(--roam-sys-shape-full);background:var(--roam-ref-palette-white);font-size:var(--roam-sys-type-body-sm);font-weight:var(--roam-ref-weight-medium);text-decoration:none;color:var(--roam-ref-palette-forest)}
.footer-cta{min-height:44px;margin-top:var(--roam-ref-spacing-18);font-size:var(--roam-sys-type-body-sm)}

/* ── Link columns ────────────────────────────────────────────────────────────────────────────────────────── */
.footer-cols{gap:var(--roam-sys-space-gap);padding:var(--roam-sys-space-section-y) 0}
.footer-col{min-width:0}
.footer-links{display:flex;flex-direction:column;gap:var(--roam-ref-spacing-10);margin:0;padding:0;list-style:none}
.footer-link{font-size:var(--roam-sys-type-body-sm);line-height:var(--roam-ref-leading-cozy);text-decoration:none;color:var(--roam-ref-palette-forest-720)}
:is(.footer-heading-link,.footer-contact-link,.footer-link):is(:hover,:focus-visible){text-decoration:underline;color:var(--roam-ref-palette-forest)}

.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--roam-ref-spacing-16);padding-top:var(--roam-sys-flow-separated);border-top:1px solid var(--roam-ref-palette-sand-150);font-size:var(--roam-sys-type-label);color:var(--roam-ref-palette-stone-610)}

@media (min-width:768px){
.footer-cols{row-gap:var(--roam-sys-space-split)}
}

@media (min-width:1024px){
.footer-top{flex-direction:row}
}

}