/* Isolated first-visit experiment. Approved scene geometry and timing remain intact. */
.hero-copy .hero-audience{font:600 .75rem/1.4 Archivo,Arial,sans-serif;letter-spacing:.035em;color:#ceddd1;margin:0 0 14px;max-width:none}
.hero-copy>a[data-walkthrough-entry]{min-height:44px}
.hero-copy>a.cue-emphasis{color:#fff}.hero-copy>a.cue-emphasis span{animation:cue-nudge 1.1s ease-out 1}
.hint{height:44px;visibility:hidden;pointer-events:none}
@media(max-width:819px){.site-nav{padding:20px 6%;gap:6px}.site-nav .nav-wordmark{flex:none}.site-nav>div{gap:12px;flex:none}.site-nav>div>a{white-space:nowrap;flex:none}.site-nav .nav-contact.nav-cta{padding:8px 10px}.site-nav .nav-contact span{display:none}}
@media(max-width:380px){.site-nav .nav-contact.nav-cta{padding-inline:8px}.site-nav>div{gap:8px}}
@keyframes cue-nudge{0%,100%{transform:translateY(0)}45%{transform:translateY(5px)}}
.expand-demo{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:44px;padding:10px 16px;border:1px solid #83998a;border-radius:99px;background:transparent;color:inherit;font:600 .875rem/1.4 Archivo,Arial,sans-serif;cursor:pointer;margin-top:14px}
.expand-demo:hover{background:#ffffff12}.demo-roles button{min-height:44px}.finish-copy .demo-roles{margin-top:14px}
.tour-end{display:grid;grid-template-columns:1fr 1fr;gap:48px;border:0}.proof-intro>p:not(.section-kicker){font-size:1rem;line-height:1.6;max-width:42ch}.proof-intro .centre-location{font-size:.875rem!important}
.centre-examples{display:grid;gap:14px}.centre-examples .tour-end-actions{flex-direction:row;align-items:center;gap:20px;flex-wrap:wrap}.tour-end-actions .expand-demo{margin:0;color:var(--co-green)}
.price-summary{margin-bottom:40px;max-width:44ch}.price-summary .price{font:400 clamp(32px,3vw,46px)/1.2 CentreDisplay,Georgia,serif;color:var(--co-ink);margin:0 0 14px}.price-summary .price span{display:block;font:400 1rem/1.5 Archivo,Arial,sans-serif;margin-top:5px}.price-summary>p:not(.price){font-size:.9375rem;line-height:1.65;color:#4e5b51;margin:10px 0}
.tour-screen:popover-open{position:fixed!important;inset:0!important;left:0!important;top:0!important;width:100vw!important;height:100dvh!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important;opacity:1!important;mask:none!important;border:0!important;border-radius:0!important;padding:0!important;background:#f3f4f0!important;z-index:9999;display:flex!important;flex-direction:column;overflow:hidden!important;color:#1f2a22}
.tour-screen:popover-open iframe{position:relative!important;inset:auto!important;display:block;width:100%!important;height:0!important;min-height:0;flex:1;transform:none!important;margin:0 auto;border:0;pointer-events:auto!important}
.demo-toolbar{display:none}.tour-screen:popover-open .demo-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,calc((100vw - 1000px)/2)) 12px;background:#f3f4f0;flex-shrink:0}.demo-toolbar h2{font:400 1.25rem/1.2 CentreDisplay,Georgia,serif;margin:0 auto 0 0}.demo-toolbar button{font:600 .875rem/1.3 Archivo,Arial,sans-serif;min-height:44px;padding:8px 14px;border:1px solid #89988d;border-radius:99px;color:#1f2a22;background:transparent;cursor:pointer}.demo-toolbar button[aria-pressed=true]{background:#2d5a42;color:white}.demo-toolbar .demo-close{background:white}.demo-toolbar small{width:100%;font-size:.75rem;color:#526156;line-height:1.4}
.demo-status{font:1rem/1.6 Archivo,Arial,sans-serif;margin:auto;padding:24px}.demo-status[hidden]{display:none}.demo-sentinel{position:fixed;width:1px;height:1px;opacity:0;pointer-events:none}
@media(max-width:819px){.hero-copy .hero-audience{font-size:.6875rem;margin-bottom:8px}.tour-end{grid-template-columns:1fr;gap:24px;padding:40px 6%}.centre-examples{grid-template-columns:1fr 1fr;gap:10px}.centre-examples .tour-end-actions{grid-column:1/-1}.finish-copy .expand-demo{margin-top:6px;min-height:40px;padding:7px 14px;font-size:.8125rem}.finish-copy .demo-roles{margin-top:8px;display:inline-flex;margin-right:8px}.demo-toolbar h2{font-size:1.125rem}.demo-toolbar{column-gap:6px!important}.demo-toolbar button{padding:8px 11px}.price-summary{margin-bottom:32px}}
@media(max-width:380px){.centre-examples{grid-template-columns:1fr}.demo-toolbar h2{width:100%}.tour-portrait .finish-copy{top:18px}}
@media(prefers-reduced-motion:reduce){.hero-copy>a.cue-emphasis span{animation:none}.hero-copy .hero-audience{display:none}}
/* At short viewports use the existing linear reading mode instead of a tiny pinned product. */
@media(max-height:480px) and (pointer:coarse),(max-height:340px){.journey{height:auto!important;min-height:100svh}.stage{height:auto!important;min-height:100svh!important;position:relative!important;transform:none!important;overflow:visible!important}.stage canvas,.stage>.poster,.stage>.intro-ground,.outcome-copy,.tour-copy,.finish-copy,.stage>.tour-screen:not(:popover-open),.hint{display:none!important}.site-nav{position:relative;flex-wrap:wrap;gap:16px;padding:20px 6%}.site-nav>div{gap:16px;flex-wrap:wrap}.hero-copy{position:relative!important;inset:auto!important;width:auto!important;max-width:700px!important;padding:32px 6%;opacity:1!important;transform:none!important;visibility:visible!important}.hero-copy h1{font-size:clamp(36px,8vw,64px);overflow-wrap:anywhere}.hero-copy .support{max-width:45ch}.tour-mobile{display:block!important;background:var(--co-paper);color:var(--co-ink);padding:40px 6%}.tour-mobile article{max-width:620px;margin:0 auto 40px}.tour-mobile>header{max-width:620px;margin:0 auto 32px}.mobile-product{display:none}.mobile-actions{display:none}.mobile-step-copy p{font-size:1rem;line-height:1.6}.mobile-step-copy h3{font:400 1.6rem/1.2 CentreDisplay,Georgia,serif}.tour-role{font-size:.875rem}}
/* The same reading mode is also available when enlarged text no longer fits the cinematic frame. */
html.reading-mode .journey{height:auto!important;min-height:100svh}html.reading-mode .stage{height:auto!important;min-height:100svh!important;position:relative!important;transform:none!important;overflow:visible!important}html.reading-mode .stage canvas,html.reading-mode .poster,html.reading-mode .intro-ground,html.reading-mode .outcome-copy,html.reading-mode .tour-copy,html.reading-mode .finish-copy,html.reading-mode .stage>.tour-screen:not(:popover-open),html.reading-mode .hint{display:none!important}html.reading-mode .site-nav{position:relative;flex-wrap:wrap;gap:16px}html.reading-mode .site-nav>div{flex-wrap:wrap;gap:16px}html.reading-mode .hero-copy{position:relative!important;inset:auto!important;padding:32px 6%;width:100%!important;max-width:800px!important;opacity:1!important;transform:none!important;visibility:visible!important}html.reading-mode .hero-copy h1{font-size:clamp(2.5rem,10vw,5rem)!important;overflow-wrap:anywhere}html.reading-mode .hero-copy .support{max-width:45ch}html.reading-mode .tour-mobile{display:block!important;background:var(--co-paper);color:var(--co-ink);padding:40px 6%}html.reading-mode .tour-mobile article,html.reading-mode .tour-mobile>header{max-width:680px;margin:0 auto 36px}html.reading-mode .mobile-product,html.reading-mode .mobile-actions{display:none}html.reading-mode .mobile-step-copy p{line-height:1.6}html.reading-mode .hero-copy .hero-audience{display:block}

.tour-screen:popover-open{clip-path:none!important;-webkit-mask-image:none!important;mask-image:none!important}


.tour-screen:popover-open{pointer-events:auto!important}

@media(prefers-reduced-motion:no-preference){.tour-portrait .finish-copy .demo-roles{margin:0!important}}
html.reading-mode .nav-wordmark{max-width:100%;overflow-wrap:anywhere}html.reading-mode .site-nav>div{max-width:100%}

.lead-section{align-items:start;row-gap:36px}.lead-section .price-summary{grid-column:1/-1;display:grid;grid-template-columns:1.2fr 1fr;gap:24px 70px;max-width:none;margin:0 0 12px}.lead-section .price-summary .price{color:#faf8f4}.lead-section .price-summary .price-details p{font-size:.9375rem;line-height:1.6;max-width:44ch;color:#e0e9e1;margin:0 0 10px}.lead-section .price-summary .price span{display:inline-block;margin-left:12px}.lead-section .price-summary .price-details{max-width:44ch}
@media(max-width:819px){.lead-section .price-summary{display:block;margin-bottom:32px}.lead-section .price-summary .price{margin-bottom:16px}.lead-section .price-summary .price-details{max-width:38ch}}
@media(max-height:480px) and (pointer:coarse),(max-height:340px){.demo-toolbar h2,.demo-toolbar small{display:none!important}.tour-screen:popover-open .demo-toolbar{padding:6px 12px!important;flex-wrap:nowrap;justify-content:flex-end;gap:6px!important}.demo-toolbar button{font-size:.8125rem;padding:6px 10px;min-height:40px}}

.tour-portrait .tour-explanation{font-size:14px;line-height:1.4}.tour-portrait .tour-copy h2{font-size:22px;line-height:1.1}

html.demo-expanded{overflow:hidden!important;background:#f3f4f0!important}html.demo-expanded body{background:#f3f4f0!important}

@media(max-width:380px){.tour-portrait .tour-chapters{gap:0}.tour-portrait .tour-chapters button{min-width:24px;width:24px;padding:8px 0;font-size:10px}.tour-portrait .tour-skip{font-size:10px}}

.experiment-pricing{padding:72px 6%;background:var(--co-paper);color:var(--co-ink)}
.experiment-pricing h2{font:400 clamp(28px,3.5vw,44px)/1.15 CentreDisplay,Georgia,serif;margin:0 0 16px}
.price-setup{font:400 16px/1.6 Archivo,Arial,sans-serif;color:#435147;max-width:60ch;margin:0 0 36px}
.price-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(6,auto);column-gap:18px;row-gap:0;align-items:stretch}
/* r3 measured: tried 4% side padding + 14px gap to give Operations' description a shot at 3 lines
   instead of 4. Measured result: still 4 lines (the width gain was too small to matter), and the
   narrower gutter let Operations' bottom-right leaf overflow the page at 1440 (confirmed via
   scrollWidth). Reverted - not a real win, and it broke something that was fine. */
.price-card{border:1px solid #cbd2c9;background:#fff;border-radius:18px;padding:28px;display:grid;grid-template-rows:subgrid;grid-row:span 6;align-content:start}
.price-card h3{font:600 22px/1.3 Archivo,Arial,sans-serif;margin:0 0 8px}.price-card .price{font:400 42px/1.2 CentreDisplay,Georgia,serif;margin:20px 0 0}.price-card .price span{display:block;font:400 14px/1.5 Archivo,Arial,sans-serif;margin-top:6px}
.plan-badge{display:inline-block;vertical-align:middle;margin-left:6px;padding:4px 8px;border-radius:999px;background:#e9eee9;color:#2d5a42;font:600 11px/1.2 Archivo,Arial,sans-serif;white-space:nowrap}
.price-card .price-tag{font:600 18px/1.35 CentreDisplay,Georgia,serif;margin:18px 0 8px;color:#1f2a22}
.price-card .price-lede{font:400 15px/1.6 Archivo,Arial,sans-serif;margin:0 0 20px;color:#435147;width:100%;max-width:none}
.price-features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:100%}
.price-features li{font:400 15px/1.5 Archivo,Arial,sans-serif;color:#2c3a2f;padding-left:18px;position:relative}
.price-features li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:#2d5a42}
.price-features li.feature-inherit{font-weight:600}
.price-card:first-child{border-color:#2d5a42}.pricing-fine{font:400 15px/1.65 Archivo,Arial,sans-serif;max-width:100ch;margin:20px 0 0}.pricing-fine a{color:inherit;text-underline-offset:3px}
.price-more{width:100%}
.price-more summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;font:600 15px/1.4 Archivo,Arial,sans-serif;color:#2d5a42;padding:10px 4px;margin:0 -4px;min-height:44px;border-radius:8px}
.price-more summary::-webkit-details-marker{display:none}
.price-more summary::after{content:"";width:9px;height:9px;flex-shrink:0;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s ease-out}
.price-more[open] summary::after{transform:rotate(-135deg)}
.price-more summary:hover{background:#eef2ee}
.price-more summary:focus-visible{outline:2px solid #2d5a42;outline-offset:2px}
.price-more .price-features{padding-top:6px}
@supports(interpolate-size:allow-keywords){
 .price-more{interpolate-size:allow-keywords}
 .price-more::details-content{overflow:hidden;transition:content-visibility .2s ease-out allow-discrete,block-size .2s ease-out;block-size:0}
 .price-more[open]::details-content{block-size:auto}
}
@media(prefers-reduced-motion:reduce){.price-more summary::after{transition:none}.price-more::details-content{transition:none}}
@media(max-width:819px){.experiment-pricing{padding:44px 6%}.price-card{padding:24px}.price-card .price{font-size:36px;margin:16px 0 0}}
.price-cta{grid-row:6;align-self:end}

/* Mobile: horizontal swipe carousel instead of a stacked column, plus jump-to pills. */
.price-pills{display:none}
@media(max-width:819px){
 .price-pills{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 16px;flex-wrap:wrap}
 .price-pills button{min-height:36px;padding:6px 14px;border-radius:99px;border:1px solid #b7c2b9;background:#fff;color:#435147;font:600 .8125rem/1.3 Archivo,Arial,sans-serif;cursor:pointer}
 .price-pills button[aria-pressed="true"]{background:#2d5a42;color:#fff;border-color:#2d5a42}
 .price-pills .pill-sep{color:#93a096;font-size:.8125rem}
 .price-cards{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;grid-template-rows:repeat(6,auto);align-items:stretch;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding-inline:calc((100% - 84% - 14px)/2);scroll-padding-inline:calc((100% - 84% - 14px)/2);-ms-overflow-style:none;scrollbar-width:none;margin-inline:-6%}
 .price-cards::-webkit-scrollbar{display:none}
 .price-card{scroll-snap-align:center}
}
@media(prefers-reduced-motion:reduce){.price-cards{scroll-behavior:auto}}

/* Quiet teaser line where the About section used to sit (moved to about.html, 23 Sep 2026). Same
   body type as .pricing-fine's quiet lines, no box, no rule dividing it from the paper either
   side. max-width:none overrides the page's global p{max-width:27ch} (which otherwise shrinks
   any bare <p> to a narrow wrapped column) - this element also carries the full-bleed background,
   so a ch-based cap here would leave a gap of body-green showing past the capped edge. */
.about-teaser{margin:0;max-width:none;padding:64px 6%;background:var(--co-paper);color:#435147;font:400 16px/1.65 Archivo,Arial,sans-serif}
.about-teaser a{color:#2d5a42;text-underline-offset:3px}
@media(max-width:819px){.about-teaser{padding:48px 7%}}

/* Keep the progress lane below the product, respecting the device safe area. */
@media(min-width:820px) and (prefers-reduced-motion:no-preference){body:not(.tour-portrait) .tour-chapters{margin-top:40px}}
@media(prefers-reduced-motion:no-preference){.tour-portrait .tour-chapters,.tour-portrait .tour-skip{bottom:max(6px,env(safe-area-inset-bottom,0px))}}

/* Readable supporting copy on the paper surface, not inherited hero grey. */
.tour-end .proof-intro>p:not(.section-kicker){color:#34483a;font-size:1.125rem;font-weight:400;line-height:1.65;max-width:40ch;margin:20px 0 0}
.tour-end .proof-intro>p.credibility{font-size:.875rem;line-height:1.5;color:#4e5b51;margin-top:24px;max-width:45ch}
.reflow-hero{display:none}
html.reading-mode .reflow-hero{display:block;position:relative;width:min(88%,800px);height:auto;margin:0 auto 40px;object-fit:contain}
@media(max-height:480px) and (pointer:coarse),(max-height:340px){.reflow-hero{display:block;position:relative;width:min(88%,800px);height:auto;margin:0 auto 40px;object-fit:contain}}

/* "Why choose CentreOS" (benefits-bank.md, approved 25 Sep 2026). Slid in quietly between the
   tour-end proof section and the FAQ: same .section-kicker + heading pair as neighbouring
   sections, and the title/body pair reuses art-direction.css's dormant .purpose-list type
   (600-weight Archivo title, #4E5B51 body) rather than a new card system. No borders, no icons,
   same paper background and padding rhythm as .experiment-pricing right after it.
   Alignment (fixed 25 Sep 2026): .faq-intro/.faq-list each centre themselves with a DIFFERENT
   max-width (40em vs 52em), so FAQ's own intro and list do not share a left edge either -
   .experiment-pricing is the section that actually aligns, because its heading and .price-cards
   are plain children of the section with no per-child max-width/margin:auto. Copied that:
   .benefits-intro and .benefits-grid are both flush against the section's own padding (which
   uses tour-end's max(6%, calc((100% - 1200px)/2)) so it still caps and centres on wide screens),
   so kicker, heading and the grid all share one left edge.
   Body width (fixed 25 Sep 2026): web.css's global p{max-width:27ch} was capping every item body
   to ~240px regardless of its 344-605px column, because .benefits-grid p never declared its own
   max-width so the cascade fell through to that global rule. max-width:none lets it fill the
   column, matching how .price-setup (60ch, uncentred) and .purpose-list p (43ch) each set their
   own explicit width rather than inheriting the 27ch default.
   Desktop re-fix (25 Sep 2026, round 3, desktop only - mobile untouched by this block since the
   819px media query below still fully overrides padding/margin/grid-template-columns): the round-2
   fix above still didn't match the FAQ. Reason: .faq-intro (max-width:40em;margin:0 auto) and
   .faq-list (max-width:52em;margin:0 auto) are BOTH centred against the same padded section, so
   with the section's %-padding cancelling out of the centring maths, each box's left edge reduces
   to (viewport - itsOwnMaxWidth)/2 - a CONSTANT 96px apart (half the 12em difference) at every
   width, never the same edge. .experiment-pricing "aligning" was a false lead: it has no per-child
   centring at all. The fix actually asked for is to reuse .faq-intro's own mechanism verbatim
   (same 40em/auto) on BOTH .benefits-intro and .benefits-grid, so they compute the identical
   formula and land on the exact same edge as .faq-intro at every width, with no hardcoded px.
   Section padding reverts to plain 6% (drop the max(6%, 1200px-cap) calc from round 2) because
   that calc changes the centring formula above ~1280px and would stop matching FAQ exactly. */
.benefits-section{padding:72px 6%;background:var(--co-paper);color:var(--co-ink)}
.benefits-intro{max-width:40em;margin:0 auto 40px}
.benefits-intro h2{font:400 clamp(32px,3.5vw,48px)/1.15 CentreDisplay,Georgia,serif;margin:0}
.benefits-intro .section-kicker{margin-bottom:20px}
.benefits-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:40em;margin:0 auto}
.benefits-grid h3{font:600 20px/1.3 Archivo,Arial,sans-serif;margin:0 0 10px}
.benefits-grid p{font-size:16px;line-height:1.6;color:#4E5B51;margin:0;max-width:none}
@media(max-width:819px){.benefits-section{padding:44px 6%}.benefits-intro{margin-bottom:28px}.benefits-grid{grid-template-columns:1fr;gap:28px}}

/* "Why choose CentreOS" ticks (Max's FINAL pick, 26 Sep 2026, after a five-direction round -
   real product snippets, big numerals, tinted cards + glow, a scroll-linked list, a draggable
   deck and a scroll carousel were all built, shown live and rejected in turn; this is the only
   one kept, the ?why switch and every other direction's code have been removed). Hanging indent
   via CSS grid so source order stays icon, title, body while only col 2 (title+body) shares a
   left text edge - the icon lives in col 1 alone, baseline-aligned to the title's first line.
   The tick reuses demo-phone.js's own svgTick() path (M4 10.5l4 4 8-9) recoloured into a solid
   badge rather than a new invented glyph. */
.benefits-grid.why-x{gap:40px 32px}
.why-x article{display:grid;grid-template-columns:auto 1fr;column-gap:.65em;align-items:baseline}
.why-x-tick{grid-column:1;grid-row:1;align-self:start;margin-top:.2em}
.why-x h3{grid-column:2;grid-row:1;margin:0}
.why-x p{grid-column:2;grid-row:2;margin:8px 0 0}
.proof-intro>h2{margin-top:40px}@media(max-width:819px){.proof-intro>h2{margin-top:32px}}

/* Demo opener / end card (9 Oct round, C): the real product (Explore view, or the guided iframe on the end card) sits behind, blurred and under an ink scrim; one raised card on it. Card surface = the site's .price-card radius (18px) + the board's raised shadow + a 1px top edge-light (website-build-rules 11). Buttons reuse .expand-demo (outline) and .price-cta (filled); explore left/top, wanted action right/bottom (reach rule). */
.demo-choice{display:none}.demo-choice:focus{outline:none}
.tour-screen:popover-open .demo-choice{display:flex;position:absolute;inset:0;z-index:1;align-items:center;justify-content:center;padding:16px;overflow:auto;background:rgba(20,34,26,.52);animation:demo-scrim-in 260ms ease-out both}
.tour-screen:popover-open .demo-toolbar{position:relative;z-index:2}
.tour-screen[data-demo-mode=opener] iframe,.tour-screen[data-demo-mode=end] iframe{pointer-events:none!important}
.tour-screen[data-demo-mode=opener] iframe{transition:opacity 260ms ease-out}.tour-screen[data-demo-mode=opener]:not([data-demo-ready]) iframe{opacity:0}
.tour-screen[data-demo-mode=opener] .demo-status,.tour-screen[data-demo-mode=end] .demo-status{display:none}
.demo-choice-card{width:100%;max-width:540px;box-sizing:border-box;margin:auto;border:0;background:var(--co-paper,#FAF8F4);border-radius:18px;box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 0 0 1px rgba(28,36,22,.06),0 8px 16px -4px rgba(28,36,22,.10),0 24px 48px -12px rgba(28,36,22,.16),0 48px 96px -24px rgba(28,36,22,.22);padding:28px 40px 28px;text-align:center;color:#1f2a22;animation:demo-card-in 320ms cubic-bezier(.23,1,.32,1) both}
.demo-choice-card>*{animation:demo-child-in 320ms cubic-bezier(.23,1,.32,1) both}
.demo-choice-card>:nth-child(1){animation-delay:120ms}.demo-choice-card>:nth-child(2){animation-delay:190ms}.demo-choice-card>:nth-child(3){animation-delay:260ms}.demo-choice-card>:nth-child(4){animation-delay:330ms}
.demo-choice-mark{display:block;width:60px;height:60px;margin:0 auto 24px;color:#2d5a42}
.demo-choice-card h2{font:400 clamp(1.75rem,1.4rem + 1.2vw,2.25rem)/1.15 CentreDisplay,Georgia,serif;margin:0 0 8px;text-wrap:balance}
.demo-choice-card p{font:400 17px/1.55 Archivo,Arial,sans-serif;margin:0 auto 20px;max-width:38ch;color:rgba(31,42,34,.68);text-wrap:balance}
.demo-choice-actions{display:flex;gap:12px}
.demo-choice-actions>button{flex:1 1 0;min-width:0;margin:0;width:auto;align-self:stretch;height:52px;min-height:52px;padding:0 20px;border:0;border-radius:999px;font:600 15px/1.2 Archivo,Arial,sans-serif;cursor:pointer;transition:background-color 160ms ease-out,box-shadow 160ms ease-out,transform 160ms ease-out}
.demo-choice-actions>.expand-demo{background:var(--co-stone,#F1EEE7);color:#1f2a22}
.demo-choice-actions>.expand-demo:hover{background:#E8E4DB}
.demo-choice-actions>.price-cta{background:#2d5a42;color:var(--co-paper,#FAF8F4);box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(20,34,26,.25),0 6px 16px -6px rgba(20,34,26,.45)}
.demo-choice-actions>.price-cta:hover{background:#264d39;transform:translateY(-1px)}
.demo-choice-actions>.price-cta:active{transform:none;box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 1px 2px rgba(20,34,26,.25)}
.demo-choice-actions>button:focus-visible{outline:3px solid #2d5a42;outline-offset:3px}
.demo-choice-actions>.price-cta{outline:3px solid #2d5a42;outline-offset:3px}.demo-choice-actions>.price-cta:focus-visible{outline:4px solid #14291d;outline-offset:3px}
.demo-choice.demo-leaving{animation:demo-scrim-out 180ms ease-out both;pointer-events:none}
.demo-choice.demo-leaving .demo-choice-card{animation:demo-card-out 180ms ease-out both}
.demo-choice.demo-leaving .demo-choice-card>*{animation:none}
@keyframes demo-scrim-in{from{background-color:rgba(20,34,26,0)}to{background-color:rgba(20,34,26,.52)}}
@keyframes demo-scrim-out{to{opacity:0}}
@keyframes demo-card-in{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}
@keyframes demo-card-out{to{opacity:0;transform:scale(.98)}}
@keyframes demo-child-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.demo-choice-card{animation:demo-fade 200ms ease-out both}.demo-choice-card>*{animation:none}.demo-choice.demo-leaving .demo-choice-card{animation:none}.demo-choice-actions>.price-cta:hover{transform:none}@keyframes demo-fade{from{opacity:0}to{opacity:1}}}
@media(max-width:480px){.demo-choice-card{padding:32px 24px 28px}.demo-choice-card h2{font-size:28px}.demo-choice-mark{width:52px;height:52px}.demo-choice-card p{font-size:15.5px}.demo-choice-actions{flex-direction:column}}
.tour-screen[data-demo-mode]:not([data-demo-mode=explore]) .demo-toolbar [data-expanded-role]{display:none}