/* Rosco marketing site: feature pages.
   Colours, fonts and shadows come from tokens.css (marketing/shared/tokens.css), loaded first.
   Two layers, kept apart by name:
     page layer   .wordmark .btn .hero .problem .feature .rest-grid ...  (marketing copy and layout)
     ui- layer    .ui-card .ui-table .ui-status ...                      (the product screens inside .frame)
   State classes are always is-* / has-* (is-active, is-pressed, is-focused...). */

@font-face{font-family:'Outfit';font-style:normal;font-weight:300;font-display:swap;src:url(fonts/outfit-latin-300-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/outfit-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/outfit-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-weight:600;font-display:swap;src:url(fonts/outfit-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/jetbrains-mono-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/jetbrains-mono-latin-500-normal.woff2) format('woff2')}

/* =====================================================================
   Page layer
   ===================================================================== */
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--site-bg);color:var(--site-ink);font:300 var(--text-lg)/1.6 var(--font-sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 var(--site-gutter)}
.mono{font-family:var(--font-mono)}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--site-ink);outline-offset:3px;border-radius:var(--radius-sm)}
.site-footer a:focus-visible,.manifesto a:focus-visible,.bento-tile.is-ink:focus-visible{outline-color:var(--site-bg)}   /* on ink, the ink outline would vanish */
.skip-link{position:absolute;left:var(--space-4);top:-100px;z-index:60;padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);background:var(--site-ink);color:var(--site-bg);font:400 var(--text-md)/1 var(--font-sans);text-decoration:none}
.skip-link:focus{top:var(--space-4)}
#main:focus{outline:none}

/* header: the pill (glass, further down), the main links, and one panel (#site-menu) opened by "Features" on wide screens
   and by "Menu" below 960px, where the main links are hidden. site.js toggles [hidden] and aria-expanded. */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50}
.top .wrap{height:68px;display:flex;align-items:center;gap:var(--space-10)}
.menu-toggle{display:inline-flex;align-items:center;gap:var(--space-2);height:40px;padding:0 var(--space-3);border:0;border-radius:999px;background:none;font:400 var(--text-md)/1 var(--font-sans);color:var(--site-muted);cursor:pointer}
.menu-toggle:after{content:'';width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
.menu-toggle:hover,.menu-toggle[aria-expanded=true]{color:var(--site-ink)}
.menu-toggle[aria-expanded=true]:after{transform:translateY(2px) rotate(-135deg)}
.menu-toggle.is-all{display:none}
.site-menu{position:absolute;left:0;right:0;top:100%;padding:var(--space-2) var(--site-gutter) 0;pointer-events:auto}
.site-menu-inner{position:relative;max-width:1180px;margin:0 auto;padding:var(--space-6) var(--space-7) var(--space-7);border-radius:var(--radius-xl);border:1px solid var(--glass-rim);background:var(--glass-fill-strong);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.site-menu a{display:block;padding:var(--space-2) 0;font:400 var(--text-lg)/1.4 var(--font-sans);color:var(--site-ink-2);text-decoration:none}
.site-menu a:hover{color:var(--site-ink);text-decoration:underline;text-underline-offset:4px}
.site-menu-main a[aria-current]{color:var(--site-ink);font-weight:500;text-decoration:underline;text-decoration-color:var(--site-moss);text-underline-offset:5px}
.site-menu-main{display:none}   /* on wide screens the main links are already in the header */
.site-menu-label{margin:0 0 var(--space-4);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--site-moss)}
.site-menu-section+.site-menu-section{margin-top:var(--space-7);padding-top:var(--space-6);border-top:1px solid var(--site-line)}
/* which sections show: the Features and Resources buttons open one each; the narrow-screen Menu opens all */
.site-menu[data-show=features] .site-menu-section:not([data-section=features]),.site-menu[data-show=resources] .site-menu-section:not([data-section=resources]){display:none}
.site-menu[data-show=features] .site-menu-main,.site-menu[data-show=resources] .site-menu-main{display:none}
.site-menu-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-2) var(--space-6)}
.site-menu-grid.is-resources{grid-template-columns:repeat(2,minmax(0,1fr));max-width:620px}
.menu-item{display:flex;gap:var(--space-3);align-items:flex-start;padding:var(--space-3) var(--space-3);margin:0 calc(-1 * var(--space-3));border-radius:var(--radius-md);text-decoration:none;color:var(--site-ink)}
.site-menu a.menu-item{display:flex;padding:var(--space-3);font:inherit}
.menu-item:hover,.menu-item:focus-visible{background:var(--site-card);text-decoration:none}
.menu-icon{flex:none;display:grid;place-items:center;width:36px;height:36px;border-radius:var(--radius-md);border:1px solid var(--site-line);background:var(--site-surface);color:var(--site-moss)}
.menu-text{display:flex;flex-direction:column;gap:2px;min-width:0}
.menu-text b{font:500 var(--text-md)/1.3 var(--font-sans);color:var(--site-ink)}
.menu-text span{font:300 var(--text-sm)/1.4 var(--font-sans);color:var(--site-muted)}
.menu-item[aria-current] b{text-decoration:underline;text-decoration-color:var(--site-moss);text-underline-offset:4px}
.wordmark{display:inline-flex;align-items:center;gap:var(--space-2);font:600 var(--text-4xl)/1 var(--font-sans);letter-spacing:-.04em;text-decoration:none;color:var(--site-ink)}
.wordmark svg{display:block;width:auto;height:.96em;flex:none}
.nav{display:flex;gap:var(--space-8);flex:1}
.nav a,.nav-login{font:400 var(--text-md)/1 var(--font-sans);color:var(--site-muted);text-decoration:none;white-space:nowrap}
.nav a:hover,.nav-login:hover,.nav a[aria-current]{color:var(--site-ink)}
.nav a[aria-current]{text-decoration:underline;text-decoration-color:var(--site-moss);text-underline-offset:6px}
.nav .menu-toggle{height:auto;padding:0}
.top-actions{display:flex;align-items:center;gap:var(--space-6)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;height:50px;padding:0 var(--space-6);border-radius:var(--radius-md);font:400 var(--text-base)/1 var(--font-sans);text-decoration:none;white-space:nowrap;transition:background .2s,border-color .2s}
.btn-primary{background:var(--site-cta);color:var(--site-white);border:1px solid var(--site-cta)}
.btn-primary:hover{background:var(--site-cta-hover);border-color:var(--site-cta-hover)}
.btn-secondary{background:var(--ui-card);color:var(--site-ink);border:1px solid var(--site-line-strong)}
.btn-secondary:hover{border-color:var(--site-line-hover)}
.btn-small{height:40px;padding:0 var(--space-5);border-radius:var(--radius-md);font-size:var(--text-md)}
/* secondary actions are quiet text links, so the main button is the one obvious next step */
.text-link{display:inline-flex;align-items:center;gap:var(--space-2);font:400 var(--text-base)/1.3 var(--font-sans);color:var(--site-ink);text-decoration:underline;text-decoration-color:var(--site-line-hover);text-underline-offset:5px}
.text-link:hover{text-decoration-color:var(--site-ink)}
.text-link svg{flex:none}
.cta-row .text-link{min-height:44px}
.copy .text-link{margin-top:var(--space-7)}
.cta-block{min-width:0}
.chapter,.feature{scroll-margin-top:84px}   /* anchors land below the sticky header */
.cta-note{margin:var(--space-4) 0 0;font:400 var(--text-sm)/1.5 var(--font-sans);color:var(--site-muted)}
.plans,.bento{scroll-margin-top:84px}

/* hero */
.hero{padding:var(--space-30) 0 var(--space-16)}
.eyebrow{display:flex;align-items:center;gap:var(--space-4);margin:0 0 var(--space-8);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--site-moss)}
.eyebrow:before{content:'';width:26px;height:1px;background:var(--site-moss)}
h1{margin:0;max-width:16.5em;font:500 var(--text-display)/1.02 var(--font-sans);letter-spacing:-.04em}
.lede{max-width:760px;margin:var(--space-8) 0 0;font:300 var(--text-lede)/1.6 var(--font-sans);color:var(--site-muted)}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-7);margin-top:var(--space-10)}
.hero-panel{margin-top:var(--space-19)}
/* front page hero (3 Oct 2026, Codex review): the proposition, one sentence, two actions, and one still product view beside them */
.hero.is-home{padding-bottom:var(--space-16)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:center}
.brand-line{margin:0 0 var(--space-5);font:500 var(--text-3xl)/1.2 var(--font-sans);letter-spacing:-.02em;color:var(--site-ink)}
.hero.is-home h1{font-size:clamp(36px,4.6vw,64px);max-width:12em}
.hero.is-home .lede{max-width:560px}
/* 7 Oct 2026: the 3 Oct two-tone headline in the home hero's text column; the promise in ink runs into what Rosco is, in muted */
.hero.is-home h1.two-tone{max-width:15em;margin-bottom:var(--space-8);font-size:clamp(34px,3.9vw,54px);line-height:1.08}
h1.two-tone span{color:var(--site-muted)}
.hero-proof{min-width:0}
.hero-proof .text-link{margin-top:var(--space-5)}
.frame.is-still .frame-caption{justify-content:flex-start}
/* a still crop of a tour screen: --x/--y/--w/--h in world units (1040 x 650); fitted to its box with no script (tan(atan2()) turns the width ratio into a scale) */
.tour-crop{--cx:var(--x);--cy:var(--y);--cw:var(--w);--ch:var(--h);position:relative;overflow:hidden;aspect-ratio:var(--cw)/var(--ch);container-type:inline-size;border-radius:var(--radius-lg);border:1px solid var(--ui-card-line);background:var(--ui-white)}
.tour-crop .world{transform:scale(tan(atan2(100cqw,calc(var(--cw) * 1px)))) translate(calc(var(--cx) * -1px),calc(var(--cy) * -1px))}
.tour-crop .a-view,.tour-crop .a-panel,.tour-crop .a-res{opacity:1;visibility:visible}
.tour-crop .a-cur,.tour-crop .a-ring,.tour-crop .a-fade{display:none}
.tour-crop mark{background-size:100% 100%}
.tour-crop .a-rdate{background:var(--app-highlight);color:var(--app-ink)}

/* the problem */
.problem{background:var(--site-band);border-top:1px solid var(--site-line);border-bottom:1px solid var(--site-line);padding:var(--space-24) 0;margin-top:var(--space-24)}
.section-label{margin:0 0 var(--space-7);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--site-moss)}
.problem p:not(.section-label){margin:0;max-width:1080px;font:400 var(--text-statement)/1.24 var(--font-sans);letter-spacing:-.025em;color:var(--site-ink)}
/* front page: the manifesto — the problem on ink, its words lighting up as you scroll (Assemble's reveal) */
.manifesto{background:var(--site-ink);color:var(--site-bg)}
.has-manifesto .manifesto{height:260vh}
.manifesto-sticky{padding:var(--space-24) 0}
.has-manifesto .manifesto-sticky{position:sticky;top:68px;min-height:calc(100vh - 68px);display:flex;align-items:center;padding:var(--space-16) 0}
.manifesto-sticky .wrap{width:100%}
.manifesto .section-label{color:var(--site-lime)}
.manifesto-h{margin:0 0 var(--space-8);max-width:860px;text-wrap:balance;font:500 clamp(30px,3.6vw,50px)/1.1 var(--font-sans);letter-spacing:-.03em}
.manifesto-p{margin:0;max-width:860px;font:300 clamp(18px,1.7vw,23px)/1.55 var(--font-sans);letter-spacing:-.005em;text-align:left;text-wrap:pretty}
.manifesto-p+.manifesto-p{margin-top:var(--space-4)}
.manifesto-p.is-close{margin-top:var(--space-8);font-weight:400;font-size:clamp(20px,2vw,27px);color:var(--site-lime)}
.has-manifesto .manifesto .is-close .w:not(.is-lit){color:var(--site-manifesto-dim)}
.manifesto .w{transition:color .35s ease}
.has-manifesto .manifesto .w:not(.is-lit){color:var(--site-manifesto-dim)}
.file-tag{display:inline-block;margin:0 .15em;padding:.1em .5em;border:1px solid currentColor;border-radius:var(--radius-sm);font:400 .5em/1.6 var(--font-mono);letter-spacing:0;vertical-align:.25em;overflow-wrap:anywhere}


/* bento grid at the foot of every page: six feature tiles, each a cropped real screen that plays on hover */
.bento{padding:var(--space-24) 0 var(--space-23)}
.bento-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
.bento-tile{position:relative;isolation:isolate;display:flex;flex-direction:column;height:390px;overflow:hidden;padding:var(--space-7) var(--space-7) 0;border:1px solid var(--glass-rim);border-radius:var(--radius-xl);background:var(--glass-pane);box-shadow:var(--glass-shadow);color:var(--site-ink);text-decoration:none;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.bento-tile:hover{transform:translateY(-3px)}
.bento-tile.is-wide{grid-column:span 2}
.bento-tile .eyebrow{margin-bottom:var(--space-4)}
.bento-tile h3{margin:0;max-width:24em;font:400 var(--text-xl)/1.3 var(--font-sans);letter-spacing:-.01em;text-wrap:balance}
.bento-tile[aria-current] h3:after{content:' · this page';color:var(--site-label);font-size:var(--text-base)}
.bento-link{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:var(--space-4);font:400 var(--text-base)/1 var(--font-sans);color:var(--site-ink);text-decoration:underline;text-decoration-color:var(--site-line-hover);text-underline-offset:5px}
.bento-tile:hover .bento-link{text-decoration-color:currentColor}
.bento .section-label,.more-features .section-label{font-size:var(--text-xs);font-weight:400}
.more-note{margin:calc(-1 * var(--space-4)) 0 var(--space-5);font:300 var(--text-base)/1.5 var(--font-sans);color:var(--site-label)}
.bento-shot{position:relative;flex:1;min-height:0;margin-top:var(--space-5);overflow:hidden;-webkit-mask-image:linear-gradient(var(--site-black) 72%,transparent);mask-image:linear-gradient(var(--site-black) 72%,transparent)}
.bento-scale{width:calc(100% / .55);transform:scale(.55);transform-origin:0 0}
.bento-tile.is-wide .bento-scale{width:calc(100% / .72);transform:scale(.72)}
.frame.is-tile{padding:var(--space-4);border-radius:var(--radius-lg)}
.more-features{margin-top:var(--space-16)}
.more-features ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-3) var(--space-8)}
.more-features li{font:300 var(--text-lg)/1.5 var(--font-sans);color:var(--site-muted)}

/* front page: who it's for */
.audience .copy{max-width:820px}


/* feature sections: split, split.is-flipped, stacked */
.feature{padding-top:var(--space-30)}
.numeral{display:block;margin-bottom:var(--space-6);font:400 var(--text-md)/1 var(--font-mono);color:var(--site-moss)}
h2{margin:0;font:500 var(--text-heading)/1.13 var(--font-sans);letter-spacing:-.03em}
.feature-body{margin:var(--space-7) 0 0;font:300 var(--text-body)/1.65 var(--font-sans);color:var(--site-muted)}
.dash-list{list-style:none;margin:var(--space-8) 0 0;padding:0}
.dash-list li{position:relative;padding:var(--space-2) 0 var(--space-2) var(--space-12);font:300 var(--text-xl)/1.45 var(--font-sans);color:var(--site-ink-2)}
.dash-list li:before{content:'—';position:absolute;left:0;color:var(--site-faint)}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
/* the moss rule beside every block of section copy (from the tour) */
.feature .copy{border-left:2px solid var(--site-moss);padding-left:var(--space-7)}
.split.is-flipped .copy{order:2}
.split.is-flipped .panel{order:1}
.stacked .copy{max-width:820px}
.stacked .panel{margin-top:var(--space-11)}
.panel-note{margin:var(--space-5) var(--space-2) 0;font:400 var(--text-xs)/1.6 var(--font-mono);color:var(--site-label)}

/* the rest of it */
.rest{padding-top:var(--space-33)}
.rest h3{margin:0 0 var(--space-9);font:400 var(--text-5xl)/1.1 var(--font-sans);letter-spacing:-.025em}
.rest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--site-line);border-radius:var(--radius-xl);overflow:hidden;background:var(--site-surface)}
.rest-grid>div{padding:var(--space-9) var(--space-10) var(--space-10);border-right:1px solid var(--site-line);border-bottom:1px solid var(--site-line)}
.rest-grid>div:nth-child(3n){border-right:0}
.rest-grid>div:nth-last-child(-n+3){border-bottom:0}
.rest-grid h4{margin:0 0 var(--space-4);font:400 var(--text-3xl)/1.3 var(--font-sans);letter-spacing:-.01em}
.rest-grid p{margin:0;font:300 var(--text-lg)/1.6 var(--font-sans);color:var(--site-muted)}

/* closing call to action */
.closer{margin-top:var(--space-30);background:var(--site-closing);border-top:1px solid var(--site-line)}
.closer .wrap>div{display:flex;align-items:center;justify-content:space-between;gap:var(--space-10);flex-wrap:wrap;padding:var(--space-20) 0}
.closer h2{max-width:13em}
.closer .cta-row{margin-top:0}

/* front page: the moment — one framed project, four states, stepped with previous/next buttons (3 Oct 2026: no scroll-pinning) */
.moment{position:relative}
.moment-sticky{padding:var(--space-20) 0 var(--space-12)}
.moment-nav{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-8)}
.moment-btn{display:grid;place-items:center;width:46px;height:46px;padding:0;border-radius:50%;border:1px solid var(--site-line-strong);background:var(--site-card);color:var(--site-ink);cursor:pointer;transition:border-color .2s,background .2s}
.moment-btn:hover{border-color:var(--site-ink)}
.moment-btn:disabled{opacity:.35;cursor:default;border-color:var(--site-line-strong)}
.moment-count{min-width:4.5em;text-align:center;font:400 var(--text-sm)/1 var(--font-mono);color:var(--site-label)}
.moment-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.moment-ticks{display:flex;gap:var(--space-2);margin-bottom:var(--space-8)}
.moment-ticks i{display:block;width:36px;height:3px;border-radius:2px;background:var(--site-line-strong);transition:background .4s ease}
.moment-ticks i.is-active{background:var(--site-moss)}
.moment-caps{list-style:none;margin:0;padding:0;display:grid}
.moment-cap{grid-area:1/1;opacity:0;transform:translateY(12px);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.moment-cap.is-active{opacity:1;transform:none}
.moment-cap p{margin:var(--space-5) 0 0;font:300 var(--text-body)/1.6 var(--font-sans);color:var(--site-muted)}
.moment-copy .text-link{margin-top:var(--space-10)}
.moment-stage{position:relative;justify-self:center}
.moment-frame{position:relative;height:min(70vh,580px);aspect-ratio:4/5;max-width:100%;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--ui-card-line);background:var(--ui-white);box-shadow:var(--shadow-lift)}
.moment-view{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.moment-view.is-active{opacity:1}
.moment-world{position:absolute;inset:0;overflow:hidden}
.moment-world{--tx:var(--x);--ty:0}
.moment-world .world{transform:translate(calc(var(--tx) * var(--k, .6) * -1px),calc(var(--ty) * var(--k, .6) * -1px)) scale(var(--k, .6))}
.moment-note{margin:var(--space-6) 0 0;text-align:center;font:400 var(--text-xs)/1.5 var(--font-mono);color:var(--site-label)}
.moment .a-view{opacity:1;visibility:visible}   /* the phase panel stays closed here so the tracking columns show (3 Oct 2026) */
.moment-view:first-child .a-res{display:none}
.moment .a-tabs .is-current{color:var(--app-ink);box-shadow:inset 0 -2px 0 var(--app-ink)}
.moment-chips{position:absolute;inset:0;pointer-events:none}
.moment-chip{position:absolute;display:flex;flex-direction:column;gap:2px;padding:var(--space-3) var(--space-4);border:1px solid var(--site-line);border-radius:var(--radius-md);background:var(--site-card);box-shadow:var(--shadow-lift);font:400 var(--text-sm)/1.35 var(--font-sans);white-space:nowrap;opacity:0;transform:translateY(14px);transition:opacity .5s ease .12s,transform .7s cubic-bezier(.2,.7,.2,1) .12s}
.moment-chip b{font-weight:500;color:var(--site-ink)}
.moment-chip span{color:var(--site-muted)}
.moment-chip.is-a{left:-64px;top:14%}
.moment-chip.is-b{right:-56px;bottom:12%;transition-delay:.3s}
.moment-chip.is-active{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.moment-cap,.moment-view,.moment-chip,.moment-ticks i{transition:none}}
/* fallback (reduced motion, or no script): the four captions listed, the four screens stacked and labelled, nothing held */
html:not(.has-moment) .moment:not(.is-parked) .moment-cap{position:static;opacity:1;transform:none}
html:not(.has-moment) .moment:not(.is-parked) .moment-caps{display:block}
html:not(.has-moment) .moment:not(.is-parked) .moment-cap+.moment-cap{margin-top:var(--space-8)}
html:not(.has-moment) .moment:not(.is-parked) .moment-frame{height:auto;aspect-ratio:auto;overflow:visible;border:0;background:none;box-shadow:none}
html:not(.has-moment) .moment:not(.is-parked) .moment-view{position:relative;opacity:1;width:min(100%,464px);height:auto;aspect-ratio:4/5;overflow:hidden;border-radius:var(--radius-lg);border:1px solid var(--ui-card-line);background:var(--ui-white);box-shadow:var(--shadow-lift)}
html:not(.has-moment) .moment:not(.is-parked) .moment-view+.moment-view{margin-top:var(--space-10)}
html:not(.has-moment) .moment:not(.is-parked) .moment-view:before{content:attr(data-label);position:absolute;left:0;right:0;bottom:0;z-index:2;padding:var(--space-3) var(--space-4);background:var(--site-card);border-top:1px solid var(--site-line);font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--site-ink)}
html:not(.has-moment) .moment:not(.is-parked) .moment-chips,html:not(.has-moment) .moment:not(.is-parked) .moment-ticks{display:none}
html:not(.has-moment) .moment:not(.is-parked) .moment-grid{align-items:start}
html:not(.has-moment) .moment:not(.is-parked) .moment-world{--tx:var(--px);--ty:var(--py)}   /* the stacked views are narrow: use the tighter crops */
html:not(.has-moment) .moment:not(.is-parked) .moment-copy{position:sticky;top:96px}

/* front page: plans next to the main button (risk reversal at the decision point) */
.plans{padding-top:var(--space-30)}
.plans h2{margin-bottom:var(--space-4)}
.plans-lede{margin:0 0 var(--space-9);max-width:640px;font:300 var(--text-lede)/1.6 var(--font-sans);color:var(--site-muted)}
/* the front page runs tighter between sections */
.hero.is-home~.feature,.hero.is-home~.plans{padding-top:var(--space-24)}
.plan-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);max-width:820px}
.plan{display:flex;flex-direction:column;padding:var(--space-8) var(--space-9);border:1px solid var(--site-line);border-radius:var(--radius-xl);background:var(--site-card)}
.plan-name{font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--site-moss)}
.plan-price{margin-top:var(--space-4);font:500 var(--text-heading)/1 var(--font-sans);letter-spacing:-.03em}
.plan-price small{font:300 var(--text-base)/1 var(--font-sans);letter-spacing:0;color:var(--site-muted)}
.plan .dash-list{margin-top:var(--space-5)}
.plan-limits{margin:var(--space-5) 0 0;font:300 var(--text-base)/1.5 var(--font-sans);color:var(--site-muted)}
.plan .text-link{margin-top:var(--space-6);align-self:flex-start}
.plan-note{max-width:820px;margin:var(--space-6) 0 0;font:300 var(--text-base)/1.5 var(--font-sans);color:var(--site-muted)}
.plan-note a{color:inherit}

/* features list and footer */
.feature-list{background:var(--site-band);border-top:1px solid var(--site-line);padding:var(--space-19) 0 var(--space-23)}
.feature-list .section-label{font-family:var(--font-sans);font-weight:500;letter-spacing:.24em;margin-bottom:var(--space-9)}
.feature-list ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4) var(--space-10)}
.feature-list li{font:300 var(--text-xl)/1.5 var(--font-sans);color:var(--site-muted)}
.feature-list a{text-decoration:none;color:var(--site-ink-2)}
.feature-list a:hover{text-decoration:underline;text-underline-offset:4px}
.feature-list [aria-current]{color:var(--site-ink);font-weight:400}
.site-footer{border-top:1px solid var(--site-line);padding:var(--space-7) 0 var(--space-10);font:300 var(--text-sm)/1.6 var(--font-sans);color:var(--site-label)}
.site-footer .wrap{display:flex;gap:var(--space-6);justify-content:space-between;flex-wrap:wrap}
.site-footer a{color:inherit;text-decoration:underline;text-decoration-color:var(--site-line-hover);text-underline-offset:4px}
.site-footer a:hover{color:var(--site-ink);text-decoration-color:var(--site-ink)}
.footer-links{display:flex;gap:var(--space-6)}   /* Contact and Privacy Policy, kept together at the right (5 Oct 2026) */

/* pricing terms: one readable column of headings and paragraphs (5 Oct 2026) */
.terms-body{padding-bottom:var(--space-16)}
.terms{max-width:720px}
.terms h2{margin:var(--space-12) 0 var(--space-4);font:500 var(--text-2xl)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--site-ink)}
.terms h2:first-child{margin-top:0}
.terms p{margin:0 0 var(--space-4);font:300 var(--text-body)/1.65 var(--font-sans);color:var(--site-ink-2)}
.terms a{color:inherit;text-decoration:underline;text-decoration-color:var(--site-line-hover);text-underline-offset:4px}
.terms a:hover{text-decoration-color:var(--site-ink)}

/* features index (hub) */
.hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-20)}
.hub-card{display:flex;flex-direction:column;padding:var(--space-9) var(--space-10) var(--space-9);border:1px solid var(--site-line);border-radius:var(--radius-xl);background:var(--site-card);text-decoration:none;transition:border-color .25s,background .25s}
.hub-card.is-wide{grid-column:1/-1;background:var(--ui-frame)}
.hub-card:hover{border-color:var(--site-card-line-hover);background:var(--site-card-hover)}
.hub-card .eyebrow{margin-bottom:var(--space-6)}
.hub-card h2{font-size:var(--text-heading-sm)}
.hub-card p{margin:var(--space-4) 0 var(--space-7);font:300 var(--text-lg)/1.6 var(--font-sans);color:var(--site-muted)}
.hub-card-link{margin-top:auto;font:400 var(--text-base)/1 var(--font-sans)}

/* How it works: the Calga Bronte tour, one chapter per section, steps lighting up with the screen */
.chapter-index{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 var(--space-6);margin-top:var(--space-16);border-top:1px solid var(--site-line);border-bottom:1px solid var(--site-line)}
.chapter-index a{display:flex;align-items:baseline;gap:var(--space-3);padding:var(--space-5) 0;font:400 var(--text-md)/1.3 var(--font-sans);color:var(--site-ink);text-decoration:none}
.chapter-index a span{font:400 var(--text-xs)/1 var(--font-mono);color:var(--site-moss)}
.chapter-index a:hover{text-decoration:underline;text-underline-offset:4px}
.chapter-grid{display:grid;grid-template-columns:minmax(240px,320px) minmax(0,1fr);gap:clamp(32px,4vw,64px);align-items:center}
/* step lists: beside each tour chapter (.chapter-steps) and under each feature screen (.panel-steps); they light up with the screen */
.chapter-steps{list-style:none;margin:var(--space-8) 0 0;padding:0}
.panel-steps{list-style:none;display:flex;flex-wrap:wrap;gap:0 var(--space-7);margin:var(--space-5) var(--space-2) 0;padding:0}
.chapter-steps li,.panel-steps li{display:flex}
.step-btn{display:flex;align-items:center;min-height:44px;gap:var(--space-4);margin:0;padding:var(--space-2) 0;border:0;background:none;text-align:left;font:300 var(--text-xl)/1.45 var(--font-sans);color:var(--site-label);cursor:pointer;transition:color .35s ease}
.panel-steps .step-btn{gap:var(--space-3);font-size:var(--text-md);font-weight:400}
.step-btn[aria-current]{color:var(--site-ink)}
.frame:not(.is-ready) .step-btn,.chapter:not(.is-ready) .step-btn{cursor:default}   /* until the panel is built the list is plain text */
.frame:not(.is-ready) .play-toggle,.chapter:not(.is-ready) .play-toggle{display:none}
.is-held .step-btn[aria-current]{text-decoration:underline;text-decoration-color:var(--site-moss);text-underline-offset:4px}
.step-btn i{flex:none;display:block;width:28px;height:2px;border-radius:1px;background:linear-gradient(var(--site-moss),var(--site-moss)) 0 0/calc(var(--p,0)*100%) 100% no-repeat,var(--site-line-strong)}
.panel-steps .step-btn i{width:22px}
li.is-done .step-btn{color:var(--site-muted)}
li.is-done .step-btn i{--p:1;opacity:.45}
li.is-active .step-btn,.is-ready .step-btn:hover{color:var(--site-ink)}
li.is-active .step-btn i{height:3px}
.tour-stage{position:relative;width:100%;aspect-ratio:1040/650;overflow:hidden;container-type:inline-size;border-radius:var(--radius-lg);border:1px solid var(--ui-card-line);background:var(--ui-white);box-shadow:var(--shadow-card)}
.tour-clock{visibility:hidden;margin-left:auto;font-variant-numeric:tabular-nums}
.tour-stage .world{transform:scale(tan(atan2(100cqw,1040px)))}
.chapter:not(.is-ready) .a-content>.a-view:last-child,.chapter:not(.is-ready) .a-res{opacity:1;visibility:visible}
.chapter:not(.is-ready) .a-cur,.chapter:not(.is-ready) .a-ring{display:none}
.chapter:not(.is-ready) mark{background-size:100% 100%}
.qa .tour-clock{visibility:visible}

/* =====================================================================
   Frame: the grey surround that holds a product screen, its caption and its play toggle
   ===================================================================== */
.frame{position:relative;background:var(--ui-frame);border:1px solid var(--ui-frame-line);border-radius:var(--radius-frame);padding:var(--space-7);overflow:hidden}
.frame-stage{position:relative}
.frame-caption{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-5);margin:var(--space-5) var(--space-2) 0;font:400 var(--text-xs)/1.6 var(--font-mono);color:var(--site-label)}
.frame-caption:empty{display:none}
.frame-caption.is-solo{justify-content:flex-end;margin-top:var(--space-4)}
.play-toggle{flex:none;width:30px;height:30px;margin:-4px -4px 0 auto;border-radius:50%;border:1px solid var(--ui-toggle-line);background:var(--ui-card);color:var(--site-muted);display:grid;place-items:center;cursor:pointer;padding:0}
.play-toggle:hover{color:var(--site-ink);border-color:var(--ui-toggle-hover)}
.play-toggle svg{fill:currentColor}
.play-toggle .icon-play,.play-toggle.is-paused .icon-pause{display:none}
.play-toggle.is-paused .icon-play{display:block}
.solo-wrap{padding:var(--space-5)}

/* =====================================================================
   ui- layer: product screens
   ===================================================================== */
/* cards and headings */
.ui-card{position:relative;background:var(--ui-card);border:1px solid var(--ui-card-line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card)}
.ui-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-6) var(--space-7)}
.ui-head.is-stacked{display:block}
.ui-head-actions{display:flex;gap:var(--space-3);align-items:center}
.ui-title{margin:0;font:500 var(--text-4xl)/1.1 var(--font-sans);letter-spacing:-.02em}
.ui-title.is-small{font-size:var(--text-3xl);font-weight:400}
.ui-subtitle{margin-top:var(--space-2);font:300 var(--text-md)/1.3 var(--font-sans);color:var(--ui-label)}
.ui-overline{display:block;font:400 var(--text-xs)/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-label)}
.ui-kicker{display:block;padding:var(--space-6) var(--space-7) 0;font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-label)}
.ui-card-title{margin:var(--space-4) var(--space-7) 0;font:400 var(--text-3xl)/1.25 var(--font-sans);letter-spacing:-.01em}
.ui-footnote{padding:var(--space-1) var(--space-7) var(--space-7);font:400 var(--text-xs)/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ui-label)}
.ui-footnote.has-space-top{padding-top:var(--space-6)}
.ui-footnote.has-rule{padding-top:var(--space-5);border-top:1px solid var(--ui-row-line)}
.ui-footnote.has-space-sm{padding-top:var(--space-5)}
.ui-footnote.has-space-xs{padding-top:var(--space-4)}
.ui-spread{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.ui-spread.is-baseline{align-items:baseline}
.ui-gap-xs{height:4px}
.ui-gap-sm{height:12px}
.ui-gap-md{height:16px}

/* buttons, chips, tokens inside screens (drawn, never interactive) */
.ui-button{display:inline-flex;align-items:center;gap:var(--space-2);height:42px;padding:0 var(--space-5);border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 var(--text-md)/1 var(--font-sans);color:var(--ui-ink-2);white-space:nowrap}
.ui-button.is-primary{background:var(--ui-ink);border-color:var(--ui-ink);color:var(--ui-white)}
.ui-button.is-small{height:34px;padding:0 var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-md)}
.ui-button-block{display:flex;margin:var(--space-5) var(--space-7) var(--space-7);height:50px;border-radius:var(--radius-md);background:var(--ui-ink);color:var(--ui-white);align-items:center;justify-content:center;font:400 var(--text-lg)/1 var(--font-sans)}
.ui-button-block.is-pressed,.ui-button.is-pressed{background:var(--ui-black)}
.ui-button-row{display:flex;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-5) var(--space-7) var(--space-7)}
.ui-button-row.is-end{justify-content:flex-end}
.ui-button-row.is-flush-top{padding-top:0}
.ui-chip{display:inline-flex;align-items:center;height:36px;padding:0 var(--space-4);border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ui-label);white-space:nowrap}
.ui-chip.is-active{border-color:var(--ui-ink);color:var(--ui-ink)}
.ui-tokens{display:flex;flex-wrap:wrap;gap:var(--space-2)}
.ui-token{display:inline-flex;align-items:center;height:40px;padding:0 var(--space-4);border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 var(--text-md)/1 var(--font-sans);white-space:nowrap}
.ui-toolbar{display:flex;gap:var(--space-3);align-items:center;flex-wrap:wrap;padding:0 var(--space-7) var(--space-6)}
.ui-toolbar.has-divider{border-bottom:1px solid var(--ui-row-line);padding-top:0}
.ui-toolbar.is-top{padding-top:var(--space-6);padding-bottom:var(--space-5)}

/* status: one component, soft by default, solid for lead status */
.ui-cell-label{display:none}   /* phones only: labels the GST-inclusive total once the column heading is gone */
.ui-image.is-drawn{display:grid;place-items:center;color:var(--ui-muted)}
.ui-image.is-drawn:after{display:none}
.ui-image.is-drawn svg{width:72%;height:72%}
.template-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.template-card{display:flex;flex-direction:column;padding:var(--space-8) var(--space-8) var(--space-7);border:1px solid var(--site-line);border-radius:var(--radius-xl);background:var(--site-card)}
.template-card h3{margin:0 0 var(--space-3);font:500 var(--text-3xl)/1.25 var(--font-sans);letter-spacing:-.01em}
.template-card p{margin:0 0 var(--space-7);font:300 var(--text-lg)/1.55 var(--font-sans);color:var(--site-muted)}
.template-card .btn{margin-top:auto;align-self:flex-start}
.template-card small{margin-top:var(--space-3);font:400 var(--text-xs)/1.4 var(--font-mono);color:var(--site-label)}
.btn.is-pending{opacity:.55;cursor:default}
.template-steps{list-style:none;margin:var(--space-10) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-8)}
.template-steps li p{margin:0;font:300 var(--text-lg)/1.55 var(--font-sans);color:var(--site-ink-2)}
.ui-status{display:inline-flex;align-items:center;height:28px;padding:0 var(--space-3);border-radius:var(--radius-sm);border:1px solid;font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.ui-status.is-green{background:var(--ui-green-bg);border-color:var(--ui-green-line);color:var(--ui-green)}
.ui-status.is-amber{background:var(--ui-amber-bg);border-color:var(--ui-amber-line);color:var(--ui-amber)}
.ui-status.is-blue{background:var(--ui-blue-bg);border-color:var(--ui-blue-line);color:var(--ui-blue)}
.ui-status.is-purple{background:var(--ui-purple-bg);border-color:var(--ui-purple-line);color:var(--ui-purple)}
.ui-status.is-solid{height:26px;padding:0 var(--space-2);border:0;border-radius:var(--radius-sm);font:500 var(--text-2xs)/1 var(--font-mono);letter-spacing:.12em}
.ui-status.is-solid.is-blue{background:var(--ui-blue);color:var(--ui-white)}
.ui-status.is-solid.is-won{background:var(--ui-won);color:var(--ui-white)}
.ui-status.is-solid.is-amber{background:var(--ui-amber-solid);color:var(--ui-white)}
.ui-status.is-solid.is-grey{background:var(--ui-count);color:var(--ui-grey)}
.ui-status.is-solid.is-roomy{height:28px;padding:0 var(--space-3)}
.ui-dot{display:inline-block;width:9px;height:9px;border-radius:50%;flex:none}

/* tables: a CSS grid per row; columns from --cols on .ui-table (and --cols-sm on phones) */
.ui-table{font:400 var(--text-base)/1.35 var(--font-sans)}
.ui-table-head,.ui-row{display:grid;grid-template-columns:var(--cols);align-items:center;column-gap:var(--space-4);padding:0 var(--space-7)}
.ui-table-head{min-height:58px;background:var(--ui-head);font:400 var(--text-xs)/1.2 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ui-label)}
.ui-row{min-height:66px;border-top:1px solid var(--ui-row-line);padding-top:var(--space-3);padding-bottom:var(--space-3)}
.ui-table-head+.ui-row{border-top:0}
.ui-row.is-title{background:var(--ui-title-row);font-weight:500}
.ui-row.is-skeleton{overflow:hidden}
.ui-row.is-top-aligned{align-items:start}
.ui-table.is-compact{padding-bottom:var(--space-4)}
.is-compact .ui-table-head{background:none;min-height:34px;padding-top:0}
.is-compact .ui-row{border-top:0;min-height:44px;padding-top:var(--space-1);padding-bottom:var(--space-1);font-size:var(--text-lg)}
.is-fees .ui-row{min-height:64px}
.is-fees .ui-row.is-total{background:var(--ui-soft);font-weight:500}
.ui-name-cell{display:flex;align-items:center;gap:var(--space-4)}
.ui-name-cell .ui-dot{margin-right:-4px}
.ui-person{display:flex;align-items:center}
.ui-avatar{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--ui-navy);color:var(--ui-white);font:400 var(--text-2xs)/1 var(--font-mono);margin-right:var(--space-4);flex:none}
.ui-check{color:var(--ui-green);font-size:var(--text-2xl);line-height:1}
.ui-check svg,.ui-task-mark svg{display:block}

/* text utilities (both layers) */
.align-end{text-align:right;justify-self:end}
.align-center{text-align:center;justify-self:center}
.tone-muted{color:var(--ui-label)}
.tone-faint{color:var(--ui-faint)}
.tone-italic{font-style:italic;color:var(--ui-label)}
.tone-positive{color:var(--ui-green)}
.tone-negative{color:var(--ui-red)}
.tone-forecast{color:var(--ui-forecast-ink)}
.tone-over{color:var(--ui-red-bar)}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.weight-medium{font-weight:500}
.numerals{font-variant-numeric:tabular-nums}
.is-block{display:block}
.is-hidden{display:none}

/* form fields */
.ui-form{padding:var(--space-2) var(--space-7) var(--space-7)}
.ui-form.is-flush-top{padding-top:0}
.ui-field-label{display:block;margin:var(--space-6) 0 var(--space-3);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-label)}
.ui-input{display:flex;align-items:center;min-height:50px;padding:var(--space-3) var(--space-5);border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 var(--text-lg)/1.4 var(--font-sans);color:var(--ui-ink);transition:none}
.ui-input.is-placeholder{color:var(--ui-faint)}
.ui-input.is-multiline{align-items:flex-start;min-height:76px}
.ui-input.is-dashed{border-style:dashed;background:transparent;color:var(--ui-faint)}
.ui-input.is-url{margin:var(--space-5) var(--space-7) 0;font:400 var(--text-md)/1.3 var(--font-mono);color:var(--ui-ink);overflow:hidden;white-space:nowrap}
.is-focused{border-color:var(--ui-ink)!important;box-shadow:var(--shadow-focus)}
.ui-caret{display:inline-block;width:1.5px;height:1.05em;margin-left:1px;background:var(--ui-ink);vertical-align:-.15em;opacity:0}
.ui-search{display:inline-flex;align-items:center;gap:2px;height:44px;min-width:210px;padding:0 var(--space-4);border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:300 var(--text-base)/1 var(--font-sans);color:var(--ui-faint);white-space:nowrap}
.ui-search-text{color:var(--ui-ink)}
.ui-search.has-mono-placeholder .ui-search-placeholder{font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase}

/* progress bars */
.ui-track{position:relative;height:9px;border-radius:var(--radius-sm);background:var(--ui-empty-line);overflow:hidden}
.ui-track>i{position:absolute;top:0;bottom:0;left:0;border-radius:var(--radius-sm);width:0}
.ui-track>i.is-segment{border-radius:0}

/* flow: card, connector, card */
.ui-flow{display:grid;grid-template-columns:minmax(0,1fr) 190px minmax(0,1fr);gap:var(--space-7);align-items:center}
.ui-flow .ui-card{align-self:start}
.ui-connector{display:flex;flex-direction:column;align-items:center;gap:var(--space-3);text-align:center;font:400 var(--text-xs)/1.5 var(--font-mono);letter-spacing:.17em;text-transform:uppercase;color:var(--ui-label)}
.ui-connector-line{position:relative;display:block;width:100%;height:1px;background:var(--ui-connector);transform-origin:0 50%}
.ui-arrow{position:absolute;right:-1px;top:-5px;width:0;height:0;border-left:7px solid var(--ui-label);border-top:5px solid transparent;border-bottom:5px solid transparent}
.ui-arrow.is-start{right:auto;left:-1px;transform:scaleX(-1)}
.ui-pair{display:flex;justify-content:space-between;gap:var(--space-4);padding:var(--space-2) var(--space-7);font:300 var(--text-lg)/1.4 var(--font-sans);color:var(--ui-muted)}
.ui-pair b{font-weight:400;color:var(--ui-ink)}
.ui-pair b.tone-negative{color:var(--ui-red)}
.ui-pair b.tone-positive{color:var(--ui-green)}

/* image placeholder (diagonal hatch, as in the designs) */
.ui-image{position:relative;width:96px;height:84px;border-radius:var(--radius-md);border:1px solid var(--ui-image-line);background:repeating-linear-gradient(135deg,var(--ui-segmented) 0 9px,var(--ui-hatch) 9px 18px);flex:none}
.ui-image:after{content:'IMAGE';position:absolute;left:0;right:0;bottom:9px;text-align:center;font:400 var(--text-micro)/1 var(--font-mono);letter-spacing:.08em;color:var(--ui-faint)}

/* drawn cursor and press ring (appended inside .frame by site.js) */
.ui-cursor{position:absolute;left:0;top:0;width:22px;height:26px;z-index:30;pointer-events:none;filter:var(--shadow-cursor);transform-origin:2px 1px;opacity:0;visibility:hidden}
.ui-cursor path{fill:var(--ui-ink);stroke:var(--ui-white)}
.ui-press-ring{position:absolute;left:-18px;top:-18px;width:36px;height:36px;border-radius:50%;border:2px solid var(--ui-ring-line);background:var(--ui-ring-fill);z-index:29;pointer-events:none;opacity:0;visibility:hidden}

/* ---------- screens: timesheets ---------- */
.ui-cell{display:flex;align-items:center;justify-content:center;height:50px;border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);font:400 var(--text-lg)/1 var(--font-sans)}
.ui-cell.is-empty{background:var(--ui-empty);border-color:var(--ui-empty-line);color:var(--ui-faint)}
.ui-timesheet .ui-row{column-gap:var(--space-3)}
.ui-timesheet .ui-row.is-total{background:var(--ui-soft);font:400 var(--text-md)/1 var(--font-mono);color:var(--ui-muted);min-height:62px}
.ui-timesheet .ui-row.is-total>span:first-child{letter-spacing:.12em;text-transform:uppercase;font-size:var(--text-xs)}
.ui-grand-total{color:var(--ui-ink);font-weight:500;font-size:var(--text-lg)}
.ui-footer-actions{display:flex;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-5) var(--space-7) var(--space-7);border-top:1px solid var(--ui-row-line)}
.ui-day{padding:var(--space-4) var(--space-7);background:var(--ui-title-row);border-top:1px solid var(--ui-row-line);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ui-label)}
.ui-entries .ui-row{min-height:62px}
.ui-meter{padding:var(--space-7) var(--space-8) var(--space-7)}
.ui-meter-row{margin-top:var(--space-6)}
.ui-meter .ui-meter-label{display:flex;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-3);font:300 var(--text-lg)/1.3 var(--font-sans)}
.ui-meter .ui-meter-label span:last-child{color:var(--ui-ink-2);white-space:nowrap}
.ui-meter-total{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-4);margin-top:var(--space-8);padding-top:var(--space-7);border-top:1px solid var(--ui-row-line)}
.ui-figure{font:300 var(--text-figure)/1 var(--font-sans);letter-spacing:-.02em}
.ui-legend{margin-top:var(--space-6);font:400 var(--text-xs)/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ui-label)}
.ui-legend.is-sentence{text-transform:none;letter-spacing:0}
.ui-filters{display:flex;gap:var(--space-4);flex-wrap:wrap;margin-bottom:var(--space-6)}
.ui-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-bottom:var(--space-6)}
.ui-stat{padding:var(--space-7) var(--space-7)}
.ui-stat-value{margin:var(--space-4) 0 var(--space-2);font:300 var(--text-stat)/1 var(--font-sans);color:var(--ui-navy);letter-spacing:-.01em}
.ui-stat-note{font:300 var(--text-base)/1.3 var(--font-sans);color:var(--ui-label)}
.ui-columns-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-bottom:var(--space-6)}

/* ---------- screens: leads ---------- */
.ui-segmented{display:inline-flex;margin:var(--space-1) var(--space-7) 0;padding:var(--space-1);border-radius:var(--radius-lg);background:var(--ui-segmented)}
.ui-segmented span{padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);font:400 var(--text-base)/1 var(--font-sans);color:var(--ui-label)}
.ui-segmented .is-active{background:var(--ui-field);color:var(--ui-ink);box-shadow:var(--shadow-raised)}
.ui-amount{display:inline-flex;align-items:center;height:36px;padding:0 var(--space-3);border-radius:var(--radius-md);background:var(--ui-amount-bg);color:var(--ui-amount-ink);font:400 var(--text-base)/1 var(--font-sans);white-space:nowrap}
.ui-total{display:flex;justify-content:space-between;align-items:baseline;padding:var(--space-6) var(--space-7) var(--space-2);border-top:1px solid var(--ui-row-line);background:var(--ui-soft)}
.ui-total+.ui-pair{background:var(--ui-soft);padding-bottom:var(--space-6);font-size:var(--text-md)}
.ui-progress{padding:0 var(--space-7);margin-top:var(--space-5)}
.ui-progress .ui-meter-label{display:flex;justify-content:space-between;gap:var(--space-3);margin-bottom:var(--space-3);font:300 var(--text-lg)/1.3 var(--font-sans)}

/* ---------- screens: meeting minutes ---------- */
.ui-tabs{display:flex;gap:var(--space-10);padding:var(--space-6) var(--space-7) 0;border-bottom:1px solid var(--ui-row-line)}
.ui-tabs span{padding-bottom:var(--space-4);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ui-label)}
.ui-tabs .is-active{color:var(--ui-ink);box-shadow:inset 0 -3px 0 var(--ui-ink)}
.ui-meta{display:grid;grid-template-columns:1fr 1.1fr 1fr 1fr;gap:var(--space-7);padding:var(--space-2) var(--space-7) var(--space-7);border-bottom:1px solid var(--ui-row-line)}
.ui-action-bar{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;padding:var(--space-5) var(--space-7)}
.ui-spacer{flex:1}
.ui-variation{display:inline-block;width:13px;height:13px;transform:rotate(45deg);border:2px solid var(--ui-mark-line);border-radius:var(--radius-xs);background:var(--ui-mark-bg)}
.ui-variation.is-on{border-color:var(--ui-blue);background:var(--ui-blue-bg);box-shadow:inset 0 0 0 2px var(--ui-white),inset 0 0 0 9px var(--ui-blue)}
.ui-task-mark{display:inline-flex;font-size:var(--text-2xl);line-height:1;color:var(--ui-mark-off)}
.ui-task-mark.is-on{color:var(--ui-green)}
.ui-add-row{padding:var(--space-5) var(--space-7) var(--space-6);border-top:1px solid var(--ui-row-line);font:300 var(--text-base)/1 var(--font-sans);color:var(--ui-faint)}
.ui-checklist{list-style:none;margin:var(--space-4) var(--space-7) 0;padding:0}
.ui-checklist li{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-2) 0;font:300 var(--text-lg)/1.3 var(--font-sans)}
.ui-checkbox{position:relative;display:inline-block;vertical-align:middle;width:21px;height:21px;border-radius:var(--radius-sm);border:1.5px solid var(--ui-checkbox-line);background:var(--ui-field);flex:none}
.ui-checkbox svg{position:absolute;inset:0;margin:auto;opacity:0;color:var(--ui-white)}
.ui-checkbox.is-checked{background:var(--ui-ink);border-color:var(--ui-ink)}
.ui-checkbox.is-checked svg{opacity:1;color:var(--ui-white)}
.ui-item{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);margin:var(--space-3) var(--space-7) 0;padding:var(--space-4) var(--space-5);border:1px solid var(--ui-card-line);border-radius:var(--radius-md);background:var(--ui-field);font:300 var(--text-lg)/1.3 var(--font-sans)}
.ui-filter-row{display:flex;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-6) var(--space-7) var(--space-6)}
.ui-skeleton{display:block;height:12px;border-radius:var(--radius-sm);background:var(--ui-empty-line)}
.ui-cards-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6)}
.ui-cards-2 .ui-card{padding-bottom:var(--space-7)}
.ui-meta-line{margin:var(--space-3) var(--space-7) 0;font:300 var(--text-base)/1.4 var(--font-sans);color:var(--ui-label)}
.ui-state{display:flex;align-items:center;gap:var(--space-3);margin:var(--space-4) var(--space-7) 0;font:300 var(--text-lg)/1 var(--font-sans)}
.ui-state.is-green{color:var(--ui-green)}
.ui-state.is-blue{color:var(--ui-blue)}
.ui-state.is-amber{color:var(--ui-amber)}
.ui-state .ui-dot{background:currentColor}
.ui-textarea{margin:var(--space-6) var(--space-7) 0;min-height:150px;padding:var(--space-5) var(--space-5);border:1px solid var(--ui-field-line);border-radius:var(--radius-lg);background:var(--ui-field);font:300 var(--text-base)/1.4 var(--font-sans);color:var(--ui-faint)}
.ui-textarea .ui-skeleton{margin:var(--space-2) 0 var(--space-4);height:11px}

/* ---------- screens: FF&E schedules ---------- */
.ui-schedule .ui-row{align-items:start;padding-top:var(--space-5);padding-bottom:var(--space-5)}
.ui-spec b{display:block;font-weight:500;font-size:var(--text-lg);letter-spacing:.01em}
.ui-spec span{display:block;color:var(--ui-ink-2);font-weight:300}
.ui-spec small{display:block;margin-top:var(--space-2);font:400 var(--text-xs)/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ui-label)}
.ui-paste-row{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;padding:var(--space-5) var(--space-7);border-top:1px solid var(--ui-row-line)}
.ui-paste-target{display:inline-flex;align-items:center;gap:var(--space-3);height:50px;padding:0 var(--space-5);border:1.5px dashed var(--ui-dashed);border-radius:var(--radius-md);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ui-label)}
.ui-paste-target.is-hovered{border-color:var(--ui-ink);color:var(--ui-ink)}
.ui-summary{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-3) var(--space-8);padding:var(--space-5) var(--space-7);border-top:1px solid var(--ui-row-line);background:var(--ui-soft);font:300 var(--text-lg)/1.3 var(--font-sans)}
.ui-legend-item{display:inline-flex;align-items:center;gap:var(--space-3);color:var(--ui-ink-2)}
.ui-spec-lines{padding:var(--space-1) var(--space-7) var(--space-7);font:400 var(--text-xs)/2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ui-label)}
.ui-row-card{display:flex;gap:var(--space-6);align-items:flex-start;padding:var(--space-5) var(--space-7) var(--space-4)}
.ui-row-card b{display:block;font:500 var(--text-2xl)/1.3 var(--font-sans)}
.ui-row-card span{display:block;margin-top:var(--space-1);font:300 var(--text-xl)/1.35 var(--font-sans);color:var(--ui-ink-2)}
.ui-template{display:flex;justify-content:space-between;align-items:center;margin:var(--space-3) var(--space-7) 0;padding:var(--space-4) var(--space-4) var(--space-4) var(--space-6);border:1px solid var(--ui-card-line);border-radius:var(--radius-lg);background:var(--ui-field);font:300 var(--text-lg)/1.3 var(--font-sans)}
.ui-card.has-space-bottom{padding-bottom:var(--space-7)}
.ui-card.has-space-bottom-sm{padding-bottom:var(--space-5)}
.ui-card.has-space-top{margin-top:var(--space-6)}

/* ---------- screens: fee tracking ---------- */
.ui-summary-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6);margin-bottom:var(--space-6)}
.ui-pair-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-6) var(--space-8);padding:var(--space-1) var(--space-7) var(--space-7)}
.ui-pair-grid span{display:block;margin-bottom:var(--space-2);font:400 var(--text-xs)/1 var(--font-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--ui-label)}
.ui-pair-grid b{font:300 var(--text-2xl)/1.2 var(--font-sans)}
.ui-calc{padding:var(--space-7) var(--space-8) var(--space-6)}
.ui-calc-line{display:flex;justify-content:space-between;gap:var(--space-5);padding:var(--space-2) 0;font:300 var(--text-xl)/1.35 var(--font-sans);color:var(--ui-ink-2)}
.ui-calc-line.is-result{color:var(--ui-ink);font-weight:400}
.ui-calc-rule{height:1px;background:var(--ui-row-line);margin:var(--space-3) 0 var(--space-2);transform-origin:0 50%}
.ui-cards-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6);margin-top:var(--space-6)}
.ui-cards-3 .ui-card{padding:var(--space-7) var(--space-8) var(--space-7)}
.ui-cards-3 p{margin:var(--space-4) 0 0;font:300 var(--text-lg)/1.45 var(--font-sans);color:var(--ui-ink-2)}

/* ---------- screens: contacts ---------- */
.ui-contact b{display:block;font-weight:500}
.ui-contact span{display:block;color:var(--ui-ink-2);font-weight:300}
.ui-contact small{display:block;font:300 var(--text-md)/1.4 var(--font-sans);color:var(--ui-label)}
.ui-entity{margin:var(--space-3) var(--space-7) 0;padding:var(--space-4) var(--space-5);border:1px solid var(--ui-card-line);border-radius:var(--radius-md);background:var(--ui-field)}
.ui-entity>b{display:block;font:400 var(--text-lg)/1.3 var(--font-sans)}
.ui-entity>span:not(.ui-status){display:block;font:300 var(--text-base)/1.35 var(--font-sans);color:var(--ui-label)}
.ui-entity.ui-item{display:flex}
.ui-entity.is-selected{border-color:var(--ui-ink);background:var(--ui-white);box-shadow:var(--shadow-select)}
.ui-add-field{margin:var(--space-3) var(--space-7) 0;padding:var(--space-4) var(--space-5);border:1.5px dashed var(--ui-dashed);border-radius:var(--radius-md);font:300 var(--text-base)/1.3 var(--font-sans);color:var(--ui-faint)}
.ui-add-field.is-typing{border-style:solid;border-color:var(--ui-ink);color:var(--ui-ink);background:var(--ui-white)}
.ui-pipeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.ui-column{background:var(--ui-head);border:1px solid var(--ui-card-line);border-radius:var(--radius-lg);padding:var(--space-6) var(--space-6) var(--space-6);align-self:start}
.ui-column h5{display:flex;align-items:center;gap:var(--space-3);margin:0 0 var(--space-5);font:400 var(--text-xl)/1 var(--font-sans)}
.ui-count{display:inline-grid;place-items:center;min-width:26px;height:26px;padding:0 var(--space-2);border-radius:var(--radius-sm);background:var(--ui-count);font:400 var(--text-xs)/1 var(--font-mono)}
.ui-column .ui-count.is-green{background:var(--ui-green-bg);color:var(--ui-green)}
.ui-kanban-card{position:relative;padding:var(--space-4) var(--space-5);border:1px solid var(--ui-card-line);border-radius:var(--radius-lg);background:var(--ui-card);margin-top:var(--space-3)}
.ui-kanban-card:first-of-type{margin-top:0}
.ui-kanban-card small{display:block;font:300 var(--text-md)/1.3 var(--font-sans);color:var(--ui-label)}
.ui-kanban-card b{display:block;margin:var(--space-2) 0 2px;font:400 var(--text-lg)/1.3 var(--font-sans)}
.ui-kanban-card span{display:block;font:300 var(--text-md)/1.3 var(--font-sans);color:var(--ui-label)}
.ui-kanban-card .ui-find{margin-top:var(--space-4);padding:var(--space-3);border:1px solid var(--ui-card-line);border-radius:var(--radius-md);text-align:center;font:300 var(--text-md)/1 var(--font-sans);color:var(--ui-label)}
.ui-kanban-card.is-required b{margin:0}
.ui-column-empty{padding:var(--space-9) 0 var(--space-6);text-align:center;font:300 var(--text-base)/1 var(--font-sans);color:var(--ui-label)}
.ui-board-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-5);margin:var(--space-1) var(--space-1) var(--space-7)}
.ui-board-head .ui-title{font-weight:400}
.ui-view-toggle{display:inline-flex;gap:var(--space-1)}
.ui-view-toggle span{padding:var(--space-3) var(--space-6);border-radius:var(--radius-lg);font:400 var(--text-base)/1 var(--font-sans);color:var(--ui-label)}
.ui-view-toggle .is-active{background:var(--ui-card);color:var(--ui-ink);border:1px solid var(--ui-card-line)}
.is-self-start{align-self:flex-start}

/* =====================================================================
   Liquid glass (2 Oct 2026): what floats is frosted glass that blurs what passes behind it; what rests is a
   lighter pane. Every glass surface has a lit top edge (a white sheen: light, not colour). The moss main
   button stays the one solid thing on the page.
   ===================================================================== */
.top{background:transparent;border-bottom:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:var(--space-3) var(--site-gutter) 0;pointer-events:none}
.top .wrap{pointer-events:auto;position:relative;isolation:isolate;max-width:1180px;height:60px;padding:0 var(--space-2) 0 var(--space-6);border-radius:999px;border:1px solid var(--glass-rim);background:var(--glass-fill);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.top .wrap:before,.plan:before,.hub-card:before,.moment-chip:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glass-sheen);pointer-events:none}
.btn{border-radius:999px}
.btn-primary,.btn-primary:hover{border-color:var(--site-cta);box-shadow:var(--cta-shadow)}
.btn-primary{background:var(--cta-sheen),var(--site-cta)}
.btn-primary:hover{background:var(--cta-sheen),var(--site-cta-hover)}
.frame{isolation:isolate;background:var(--glass-pane);border-color:var(--glass-rim);box-shadow:var(--shadow-card)}
.plan,.hub-card,.hub-card.is-wide{position:relative;isolation:isolate;background:var(--glass-pane);border-color:var(--glass-rim);box-shadow:var(--glass-shadow)}
.play-toggle{border-color:var(--glass-rim);background:var(--glass-fill-strong);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.moment-chip{isolation:isolate;border-radius:16px;border-color:var(--glass-rim);background:var(--glass-fill);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:var(--glass-blur);backdrop-filter:var(--glass-blur)}
.moment-frame{border-color:var(--glass-rim);box-shadow:var(--shadow-lift)}
.manifesto .file-tag{background:var(--glass-fill-dark);border-color:var(--glass-rim-soft)}
/* ambient light: a faint moss-and-lime glow fixed behind the page, drifting slowly, so the glass has something to
   catch. It sits under every section; bands with their own ground (manifesto, closer, features list) cover it. */
body:before{content:'';position:fixed;inset:-12vmax;z-index:-1;pointer-events:none;
  background:radial-gradient(42vmax 32vmax at 16% 18%,var(--light-lime),transparent 70%),
             radial-gradient(38vmax 30vmax at 86% 34%,var(--light-moss),transparent 72%),
             radial-gradient(46vmax 34vmax at 64% 86%,var(--light-lime-soft),transparent 70%),
             radial-gradient(30vmax 24vmax at 8% 72%,var(--light-moss),transparent 72%);
  animation:ambient-drift 48s ease-in-out infinite alternate}
@keyframes ambient-drift{from{transform:translate3d(-2vmax,-1vmax,0) scale(1)}to{transform:translate3d(2.5vmax,2vmax,0) scale(1.06)}}
@media (prefers-reduced-motion:reduce){body:before{animation:none}}
.qa body:before{animation:none}

/* the held manifesto slides under the glass header instead of stopping below it */
.has-manifesto .manifesto-sticky{top:0;min-height:100vh;padding-top:calc(72px + var(--space-6));padding-bottom:var(--space-8)}

/* =====================================================================
   Assemble moments (2 Oct 2026): highlighter, floating tiles, compact pill, lime and ink tiles,
   the closing card in rings, the giant wordmark
   ===================================================================== */
/* lime highlighter sweeps under the last word of the headline (the same marker the tour uses in its screens) */
mark.hl{color:inherit;padding:0 .06em;margin:0 -.06em;border-radius:.14em;background:linear-gradient(var(--site-lime),var(--site-lime)) no-repeat 0 88%/0% 72%;animation:hl-sweep 1.1s .6s cubic-bezier(.6,0,.2,1) forwards}
@keyframes hl-sweep{to{background-size:100% 72%}}

/* the practice objects (Assemble's app-icons) ride the closing card's rings only; .icon-face carries the 3D tilt and float */
.icon{position:absolute;width:var(--size,88px);aspect-ratio:1}
.icon-face{display:grid;place-items:center;width:100%;height:100%;border-radius:26%;border:1px solid var(--glass-rim);background:linear-gradient(160deg,var(--ui-white),var(--site-surface));box-shadow:var(--icon-shadow);transform:perspective(520px) rotateX(var(--rx,10deg)) rotateY(var(--ry,-12deg)) rotate(var(--r,0deg));animation:icon-float 8s ease-in-out var(--d,0s) infinite alternate}
.icon-face svg{width:80%;height:80%;overflow:visible}
@keyframes icon-float{from{transform:perspective(520px) rotateX(var(--rx,10deg)) rotateY(var(--ry,-12deg)) rotate(var(--r,0deg)) translateY(-5px)}to{transform:perspective(520px) rotateX(calc(var(--rx,10deg) - 6deg)) rotateY(calc(var(--ry,-12deg) + 9deg)) rotate(var(--r,0deg)) translateY(6px)}}
/* the objects' drawings */
.i-paper{fill:var(--ui-white);stroke:var(--site-line-hover);stroke-width:1.4}
.i-straw{fill:var(--site-lime)}
.i-olive{fill:var(--site-moss)}
.i-yellow{fill:var(--site-moss)}
.i-ink{fill:var(--site-ink)}
.i-fold{fill:var(--ui-head)}
.i-line{fill:none;stroke:var(--site-label);stroke-width:2;stroke-linecap:round}
.i-num{font:600 20px var(--font-sans);fill:var(--site-ink)}
.i-badge{font:600 10px var(--font-sans);fill:var(--site-white)}
.i-note{fill:var(--desk-paper)}
.i-notefold{fill:var(--site-lime)}
.i-pencil{fill:none;stroke:var(--site-ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.i-pencil-box{fill:none;stroke:var(--site-ink-2);stroke-width:1.4}
.i-hand{fill:none;stroke:var(--site-ink);stroke-width:2.4;stroke-linecap:round}

/* the closing card's rings carry a few of the same objects, orbiting slowly (Assemble's closer) */
.orbit{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.orbit-ring{position:absolute;left:0;top:0;animation:orbit-spin 120s linear infinite}
.orbit-ring.is-inner{--rad:min(380px,46vw)}
.orbit-ring.is-outer{--rad:min(600px,75vw);animation-direction:reverse}
.orbit .icon{--size:76px;left:-38px;top:-38px;transform:rotate(var(--a)) translateX(var(--rad)) rotate(calc(-1 * var(--a)));transition:none}
.orbit .icon-face{animation:orbit-counter 120s linear infinite}
.orbit .is-outer .icon-face{animation-direction:reverse}
.orbit .is-cal{--a:200deg}
.orbit .is-mail{--a:16deg}
.orbit .is-sheet{--a:168deg}
.orbit .is-note{--a:346deg}
.orbit .is-clock{--a:192deg}
@keyframes orbit-spin{to{transform:rotate(360deg)}}
@keyframes orbit-counter{from{transform:rotate(0deg)}to{transform:rotate(-360deg)}}

/* the pill tightens once you scroll (Assemble's compact menu) */
.top .wrap{transition:max-width .6s cubic-bezier(.2,.7,.2,1),height .4s ease}
.top.is-compact .wrap{max-width:1000px;height:54px}   /* room for the main links and the Features button */

/* bento rhythm: one lime tile, one ink tile */
.bento-tile.is-lime{background:var(--site-lime)}
.bento-tile.is-lime .eyebrow,.bento-tile.is-lime[aria-current] h3:after{color:var(--site-ink)}
.bento-tile.is-lime .eyebrow:before{background:var(--site-ink)}
.bento-tile.is-ink{background:var(--site-ink);border-color:var(--glass-rim-soft);color:var(--site-bg)}
.bento-tile.is-ink:before{opacity:.12}
.bento-tile.is-ink .eyebrow{color:var(--site-lime)}
.bento-tile.is-ink .eyebrow:before{background:var(--site-lime)}
.bento-tile.is-ink .frame{background:var(--glass-fill-dark);border-color:var(--glass-rim-soft)}

/* the closing card: centred glass in concentric rings over a dot grid, with the lime light behind it */
.closer{position:relative;overflow:hidden;margin-top:var(--space-30);padding:var(--space-28) 0;border-top:0;background:radial-gradient(circle,var(--site-line-strong) 1px,transparent 1.5px) 0 0/22px 22px}
.closer:before,.closer:after{content:'';position:absolute;left:50%;top:50%;aspect-ratio:1;border:1px solid var(--site-line-strong);border-radius:50%;transform:translate(-50%,-50%);pointer-events:none}
.closer:before{width:min(760px,92vw)}
.closer:after{width:min(1200px,150vw)}
.closer .wrap>div{position:relative;z-index:1;isolation:isolate;flex-direction:column;justify-content:center;gap:var(--space-8);max-width:680px;margin:0 auto;padding:var(--space-14) var(--space-12) var(--space-12);text-align:center;border:1px solid var(--glass-rim);border-radius:var(--radius-xl);background:var(--glass-fill-strong);box-shadow:var(--glass-shadow),0 0 140px 50px var(--light-lime)}
.closer .wrap>div:before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glass-sheen);pointer-events:none}
.closer h2{max-width:none;text-wrap:balance}
.closer .cta-row{justify-content:center}

/* the giant wordmark fills the bottom of the ink footer */
.site-footer{display:flex;flex-direction:column;overflow:hidden;padding:0;border-top:0;background:var(--site-ink);color:var(--site-faint)}
.site-footer .wrap{width:100%;padding-top:var(--space-7);padding-bottom:var(--space-7);border-bottom:1px solid var(--footer-line)}
.site-footer a{text-decoration-color:var(--footer-line)}
.site-footer a:hover{color:var(--site-bg);text-decoration-color:var(--site-bg)}
.footer-mark{order:2;display:flex;align-items:flex-end;gap:.05em;margin:var(--space-6) 0 -.17em;padding:0 var(--site-gutter);font:600 clamp(96px,24vw,380px)/.9 var(--font-sans);letter-spacing:-.06em;color:var(--footer-mark);white-space:nowrap}
.footer-mark svg{flex:none;width:auto;height:.74em;margin-bottom:.06em}

@media (prefers-reduced-motion:reduce){mark.hl{animation:none;background-size:100% 72%}.icon-face,.orbit-ring{animation:none}.top .wrap{transition:none}}
.qa mark.hl{animation:none;background-size:100% 72%}
.qa .icon-face,.qa .orbit-ring{animation:none}

/* =====================================================================
   Responsive: one block per width, widest first
   ===================================================================== */
/* Journal (8 Oct 2026): index list and article reading column */
.hero.is-journal{padding-bottom:var(--space-12)}
.journal{padding:0 0 var(--space-12)}
.journal-list{border-top:1px solid var(--site-line)}
.journal-row{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;padding:var(--space-10) 0;border-bottom:1px solid var(--site-line);color:inherit;text-decoration:none}
.journal-cover{display:block;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--site-line);border-radius:var(--radius-xl);background:var(--site-card)}
.journal-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.journal-row:hover .journal-cover img{transform:scale(1.025)}
.journal-text{display:flex;flex-direction:column;align-items:flex-start}
.journal-meta{font:400 var(--text-xs)/1.4 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--site-label)}
.journal-row h2{margin:var(--space-4) 0 0;max-width:24em;font-size:clamp(24px,2.3vw,32px);line-height:1.2;letter-spacing:-.02em;text-wrap:balance}
.journal-dek{display:block;max-width:44em;margin:var(--space-4) 0 var(--space-6);font:300 var(--text-lg)/1.6 var(--font-sans);color:var(--site-muted)}
.journal-row:hover .text-link{text-decoration-color:var(--site-ink)}
.post-head{padding:var(--space-24) 0 0}
.post .wrap{max-width:860px}
.post-back{display:inline-flex;align-items:center;gap:var(--space-2);margin:0 0 var(--space-10);font:400 var(--text-md)/1.3 var(--font-sans);color:var(--site-muted);text-decoration:none}
.post-back:hover{color:var(--site-ink)}
.post-head h1{max-width:none;font-size:clamp(34px,4.2vw,56px);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.post-cover{margin:var(--space-12) 0 0;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--site-line);border-radius:var(--radius-xl);background:var(--site-card)}
.post-cover img{display:block;width:100%;height:100%;object-fit:cover}
.post-body{padding:var(--space-12) 0 0;font:300 var(--text-body)/1.7 var(--font-sans);color:var(--site-ink-2)}
.post-body p,.post-body ul,.post-body ol,.post-body blockquote{margin:0 0 var(--space-6)}
.post-body h2{margin:var(--space-14) 0 var(--space-5);font-size:clamp(26px,2.4vw,34px);line-height:1.18;letter-spacing:-.025em;color:var(--site-ink);text-wrap:balance}
.post-body h3{margin:var(--space-10) 0 var(--space-4);font:500 var(--text-3xl)/1.3 var(--font-sans);letter-spacing:-.01em;color:var(--site-ink)}
.post-body strong{font-weight:500;color:var(--site-ink)}
.post-body ul,.post-body ol{padding-left:1.3em}
.post-body li{margin:0 0 var(--space-3);padding-left:.2em}
.post-body li::marker{color:var(--site-moss)}
.post-body blockquote{padding:var(--space-2) 0 var(--space-2) var(--space-6);border-left:2px solid var(--site-moss);font-size:clamp(22px,2.2vw,30px);line-height:1.3;letter-spacing:-.02em;font-weight:400;color:var(--site-ink)}
.post-body blockquote p{margin:0}
.post-body hr{margin:var(--space-12) 0;border:0;border-top:1px solid var(--site-line)}
.post-body a{color:var(--site-ink);text-decoration:underline;text-decoration-color:var(--site-line-hover);text-underline-offset:4px}
.post-body a:hover{text-decoration-color:var(--site-ink)}
.post-download{margin:0 0 var(--space-10);padding:var(--space-7) var(--space-8);border:1px solid var(--site-line);border-radius:var(--radius-xl);background:var(--site-card)}
.post-download a{display:inline-flex;align-items:center;gap:var(--space-3);font:500 var(--text-md)/1.3 var(--font-sans);color:var(--site-moss);text-decoration:none}
.post-download a:hover{text-decoration:underline;text-underline-offset:4px}
.post-download p{margin:var(--space-2) 0 0;font:300 var(--text-base)/1.5 var(--font-sans);color:var(--site-muted)}
.post-foot{margin:var(--space-14) 0 0;padding:var(--space-8) 0 var(--space-24);border-top:1px solid var(--site-line)}
@media (max-width:720px){
  .journal-row{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}
  .post-head{padding-top:var(--space-16)}
}
@media (prefers-reduced-motion:reduce){.journal-cover img{transition:none}}
@media (max-width:1100px){
  .nav{gap:var(--space-6)}
  .top .wrap{gap:var(--space-7)}
}
@media (max-width:1060px){
  .ui-flow{grid-template-columns:minmax(0,1fr)}
  .ui-connector{padding:var(--space-1) 0}
  .ui-connector-line{width:1px;height:46px;transform-origin:50% 0}
  .ui-arrow{right:auto;left:-5px;top:auto;bottom:-1px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid var(--ui-label);border-bottom:0}
  .ui-arrow.is-start{left:-5px;top:-1px;bottom:auto;transform:scaleY(-1)}
  .ui-stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
}
@media (max-width:960px){
  .split{grid-template-columns:minmax(0,1fr)}
  .split.is-flipped .copy{order:1}
  .split.is-flipped .panel{order:2}
  .chapter-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .chapter-index{grid-template-columns:repeat(3,minmax(0,1fr))}
  .moment-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}
  html:not(.has-moment) .moment:not(.is-parked) .moment-copy{position:static}   /* one column: the captions sit above the stacked screens */
  .bento-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-10)}
  .hero-proof{max-width:560px}
  .orbit{display:none}
  .more-features ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moment-frame{height:min(50vh,460px)}
  .moment-chip.is-a{left:-12px}
  .moment-chip.is-b{right:-12px}
  .feature .copy{border-left:0;padding-left:0}
  .ui-columns-2,.ui-summary-cards,.ui-cards-2{grid-template-columns:minmax(0,1fr)}
  .ui-cards-3{grid-template-columns:minmax(0,1fr)}
  .ui-pipeline{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .template-grid,.template-steps{grid-template-columns:minmax(0,1fr)}
  .site-menu-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rest-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rest-grid>div:nth-child(n){border-right:1px solid var(--site-line);border-bottom:1px solid var(--site-line)}
  .rest-grid>div:nth-child(2n){border-right:0}
  .rest-grid>div:nth-last-child(-n+2){border-bottom:0}
  .ui-meta{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav{display:none}
  .menu-toggle.is-all{display:inline-flex}
  .site-menu-main{display:grid;gap:0;margin-bottom:var(--space-6);padding-bottom:var(--space-5);border-bottom:1px solid var(--site-line)}
  .hub-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:720px){
  :root{--site-gutter:16px}
  body{font-size:var(--text-base)}
  .hero{padding:var(--space-16) 0 var(--space-10)}
  .hero-panel{margin-top:var(--space-12)}
  .problem{padding:var(--space-15) 0;margin-top:var(--space-18)}
  .feature{padding-top:var(--space-21)}
  .rest{padding-top:var(--space-23)}
  .rest-grid{grid-template-columns:minmax(0,1fr)}
  .rest-grid>div:nth-child(n){border-right:0;border-bottom:1px solid var(--site-line);padding:var(--space-7) var(--space-6)}
  .rest-grid>div:nth-child(n):last-child{border-bottom:0}
  .feature-list ul{grid-template-columns:minmax(0,1fr)}
  .closer{margin-top:var(--space-21)}
  .closer .wrap>div{padding:var(--space-14) 0}
  .nav-login{display:none}
  .site-menu{padding-left:var(--space-2);padding-right:var(--space-2)}
  .site-menu-inner{padding:var(--space-5) var(--space-5) var(--space-6);max-height:calc(100vh - 90px);overflow:auto}
  .site-menu-grid,.site-menu-grid.is-resources{grid-template-columns:minmax(0,1fr)}
  .menu-item{padding:var(--space-2) var(--space-3)}
  .brand-line{font-size:var(--text-xl)}
  .top .wrap{gap:var(--space-4);justify-content:space-between}
  .top{padding:var(--space-2) var(--space-2) 0}
  .top .wrap{height:56px;padding:0 6px 0 var(--space-4)}
  .dash-list li{padding-left:var(--space-9);font-size:var(--text-lg)}
  .hide-on-phone{display:none!important}
  .chapter-index{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:var(--space-12)}
  .chapter-steps{margin-top:var(--space-5)}
  .chapter-steps li{font-size:var(--text-lg)}
  .panel-steps{flex-direction:column;margin:var(--space-3) var(--space-1) 0}
  .panel-steps li{padding:var(--space-1) 0;font-size:var(--text-md)}

  .frame{padding:var(--space-3);border-radius:var(--radius-xl)}
  .play-toggle{width:44px;height:44px;margin:-8px -6px 0 auto}
  .plan-grid{grid-template-columns:minmax(0,1fr)}
  .moment-ticks{margin-bottom:var(--space-5)}
  .manifesto-h{font-size:27px;margin-bottom:var(--space-5)}
  .manifesto-p{font-size:16.5px;line-height:1.5}
  .manifesto-p+.manifesto-p{margin-top:var(--space-3)}
  .manifesto-p.is-close{margin-top:var(--space-5);font-size:18px}
  .bento{padding:var(--space-18) 0}
  .hero.is-home{padding-bottom:var(--space-12)}
  /* invoice rows as cards: number and project on one line, total and status on the next, nothing overlapping (3 Oct 2026) */
  .ui-invoices .ui-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'num status' 'proj total';row-gap:var(--space-1);align-items:center}
  .ui-invoices .ui-row>:nth-child(1){grid-area:num}
  .ui-invoices .ui-row>:nth-child(2){grid-area:proj}
  .ui-invoices .ui-row>:nth-child(8){grid-area:total;justify-self:end}
  .ui-invoices .ui-row>:nth-child(9){grid-area:status;justify-self:end}
  .ui-invoices .ui-table-head{grid-template-columns:minmax(0,1fr) auto}
  .ui-invoices .ui-table-head>:nth-child(2),.ui-invoices .ui-table-head>:nth-child(8){display:none}
  .ui-cell-label{display:block;font:400 var(--text-2xs)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ui-label)}
  .ui-meter-label{flex-wrap:wrap;gap:0 var(--space-3)}
  .ui-meter-label>span:last-child{white-space:normal;text-align:right}
  .closer{padding:var(--space-18) 0}
  .closer .wrap>div{padding:var(--space-10) var(--space-6) var(--space-8);gap:var(--space-6)}
  .top.is-compact .wrap{height:56px}
  .bento-grid{grid-template-columns:minmax(0,1fr)}
  .bento-tile.is-wide{grid-column:auto}
  .bento-tile.is-wide .bento-scale{width:calc(100% / .62);transform:scale(.62)}
  .bento-tile{height:auto;padding:var(--space-6) var(--space-6) var(--space-6)}
  .bento-shot{display:none}   /* on phones the tiles are compact cards: the shrunken screens aren't readable at this size */
  .bento-grid{gap:var(--space-3)}
  .more-features ul{grid-template-columns:minmax(0,1fr)}
  .moment-cap h2{font-size:var(--text-heading-sm)}
  .moment-cap p{margin-top:var(--space-3);font-size:var(--text-base)}
  .moment-copy .text-link{margin-top:var(--space-4)}
  .moment-frame{height:min(44vh,420px)}
  .moment-world{--tx:var(--px);--ty:var(--py)}
  .tour-crop{--cx:var(--px,var(--x));--cy:var(--py,var(--y));--cw:var(--pw,var(--w));--ch:var(--ph,var(--h))}
  .moment-note{margin-top:var(--space-4);font-size:var(--text-2xs)}
  .moment-chip{font-size:var(--text-2xs);padding:var(--space-2) var(--space-3)}
  .plans{padding-top:var(--space-23)}
  .top .btn-small{padding:0 var(--space-3);font-size:var(--text-sm)}
  .top-actions{gap:var(--space-1)}
  .menu-toggle{padding:0 var(--space-2)}
  .frame-caption,.frame-caption.is-solo{margin:var(--space-3) var(--space-1) 2px;font-size:var(--text-2xs)}
  .ui-card{border-radius:var(--radius-md)}
  .ui-head{padding:var(--space-5) var(--space-4);flex-wrap:wrap}
  .ui-title{font-size:var(--text-3xl)}
  .ui-table{font-size:var(--text-sm)}
  .ui-table-head,.ui-row{grid-template-columns:var(--cols-sm,var(--cols));padding-left:var(--space-4);padding-right:var(--space-4);column-gap:var(--space-2)}
  .ui-table-head{font-size:var(--text-2xs);letter-spacing:.04em;min-height:46px}
  .ui-row{min-height:54px}
  .ui-toolbar,.ui-footer-actions,.ui-action-bar,.ui-paste-row,.ui-summary,.ui-button-row,.ui-filter-row{padding-left:var(--space-4);padding-right:var(--space-4)}
  .ui-kicker,.ui-footnote,.ui-tabs,.ui-meta,.ui-form,.ui-calc,.ui-meter{padding-left:var(--space-4);padding-right:var(--space-4)}
  .ui-card-title,.ui-pair,.ui-progress,.ui-checklist,.ui-item,.ui-meta-line,.ui-state,.ui-textarea,.ui-template,.ui-entity,.ui-add-field,.ui-segmented,.ui-button-block,.ui-pair-grid{margin-left:var(--space-4);margin-right:var(--space-4)}
  .ui-pair,.ui-pair-grid{padding-left:0;padding-right:0}
  .ui-button-block{margin-bottom:var(--space-5)}
  .ui-stats{grid-template-columns:minmax(0,1fr)}
  .ui-stat{padding:var(--space-5) var(--space-5)}
  .ui-stat-value{margin:var(--space-3) 0 var(--space-2)}
  .ui-pipeline{grid-template-columns:minmax(0,1fr)}
  .ui-meta{grid-template-columns:minmax(0,1fr)}
  .ui-row-card{padding-left:var(--space-4);padding-right:var(--space-4)}
  .ui-spec-lines{padding-left:var(--space-4);padding-right:var(--space-4);font-size:var(--text-2xs)}
  .ui-image{width:72px;height:64px}
  .ui-search{min-width:0}

  .ui-cell{height:34px;font-size:var(--text-xs);border-radius:var(--radius-sm)}
  .ui-timesheet .ui-table-head,.ui-timesheet .ui-row{padding-left:var(--space-3);padding-right:var(--space-3);column-gap:var(--space-1)}
  .ui-timesheet .ui-table-head{letter-spacing:0}
  .ui-timesheet .ui-row{min-height:48px;padding-top:var(--space-2);padding-bottom:var(--space-2)}
  .ui-timesheet .ui-row.is-total{font:400 var(--text-xs)/1 var(--font-sans);min-height:46px}
  .ui-timesheet .ui-row.is-total>span:first-child{letter-spacing:0;font-size:var(--text-2xs)}
  .ui-grand-total{font-size:var(--text-sm)}
  .ui-timesheet .ui-head-actions .ui-button{height:36px;padding:0 var(--space-3);font-size:var(--text-sm)}
}

@media (max-width:360px){
  .wordmark span{display:none}   /* the mark alone (the link is still named "Rosco home"): room for the account button and Menu */
  .top .btn-small{padding:0 var(--space-3)}
}

/* QA only: ?qa freezes CSS transitions and smooth scrolling so jumped-to stills are exact */
html.qa{scroll-behavior:auto}
.qa *,.qa *:before,.qa *:after{transition:none!important}

/* ---------- screens: site administration › Claims (4 Oct 2026) ----------
   One grid: the contract columns, then a column group per claim. The first header row carries the six column labels
   level with the claim group names; the thinner second row only Approved | Claimed | Approved. Claim 1 (approved) is
   tinted as in the app. Under 1120px the panel drops Approved Vars, Claimed to Date, Remaining and the cents; phones
   keep Cost Centre, Adjusted Contract and Claim 2 Approved (hide-on-phone, as the other panels). */
.ui-claims-tabs{gap:var(--space-9);padding-top:var(--space-5)}
.ui-claims-basis{font:400 var(--text-sm)/1 var(--font-sans);color:var(--ui-label);white-space:nowrap}
.ui-button.is-icon{padding:0 var(--space-2);color:var(--ui-label)}
.ui-button.is-small svg{display:block;flex:none}
.ui-lock{display:inline-block;vertical-align:-2px;margin-left:var(--space-1);color:var(--ui-label)}
.ui-lock svg{display:block}
.is-claims{font-size:var(--text-sm)}
.is-claims .ui-table-head,.is-claims .ui-row{column-gap:var(--space-3)}
.is-claims .ui-table-head{white-space:normal;line-height:1.25}
.is-claims .ui-claims-groups{min-height:54px;align-items:center;border-bottom:1px solid var(--ui-row-line)}
.is-claims .ui-claims-sub{min-height:34px}
.is-claims .is-centre{text-align:center;justify-self:center}
.ui-cg{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center}
.ui-cg>span{display:inline-flex;align-items:center;gap:3px;font:400 var(--text-sm)/1.2 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ui-ink-2);white-space:nowrap}
.ui-cg>span svg{display:block;color:var(--ui-label)}
.ui-cg-tick{display:inline-flex;margin:0 2px}
.ui-cg-tick svg{color:var(--ui-green)}
.ui-cg small{font:400 var(--text-2xs)/1 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ui-label)}
.ui-cg-2{grid-column:8/10}
.is-claims .ui-row{min-height:60px}
.is-claims .ui-row.is-group{background:var(--ui-title-row);font-weight:500}
.ui-claims-name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-1) var(--space-2);min-width:0}
.ui-claims-name>span{display:inline-flex;align-items:center;gap:var(--space-1)}
.ui-claims-name>span svg{display:block;color:var(--ui-label)}
.ui-notes{display:inline-flex;align-items:center;gap:1px;font:400 var(--text-2xs)/1 var(--font-sans);color:var(--ui-label);white-space:nowrap}
.ui-notes svg{display:block;color:var(--ui-faint)}
.ui-claim-cell{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;text-align:center}
.ui-claim-cell small{font:400 var(--text-2xs)/1 var(--font-sans);color:var(--ui-label)}
.ui-claim-cell b{font-weight:inherit}
.is-group .ui-claim-cell b{font-weight:500}
.ui-claim-field{display:flex;align-items:center;gap:var(--space-1);width:100%;min-width:0}
.ui-claim-field i{font-style:normal;color:var(--ui-faint)}
.ui-claim-box{flex:1;min-width:0;display:flex;align-items:center;justify-content:flex-end;height:34px;padding:0 6px;border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field);overflow:hidden;white-space:nowrap;transition:none}
.ui-claim-box.is-locked{background:var(--ui-empty);border-color:var(--ui-empty-line);color:var(--ui-muted)}
.is-claims .is-tint{align-self:stretch;justify-self:stretch;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0 -6px;padding:0 6px;background:var(--ui-green-bg)}
.is-claims .ui-row .is-tint{margin-top:calc(var(--space-3)*-1);margin-bottom:calc(var(--space-3)*-1);padding-top:var(--space-3);padding-bottom:var(--space-3)}
@media (max-width:1120px){
  .ui-claims .hide-on-mid{display:none!important}
  .ui-claims .ui-cents{display:none}
}
@media (min-width:721px) and (max-width:1120px){
  .is-claims .ui-table-head,.is-claims .ui-row{grid-template-columns:minmax(0,1.6fr) repeat(2,minmax(0,1fr)) repeat(3,minmax(0,1.1fr))}
  .is-claims .ui-cg-2{grid-column:5/7}
}
@media (max-width:720px){
  .ui-claims-tabs{gap:var(--space-5)}
  .is-claims .ui-table-head,.is-claims .ui-row{column-gap:var(--space-2)}
  .is-claims .ui-cg-2{grid-column:3/4}
  .ui-claims-name>span{white-space:normal;line-height:1.2}
  .ui-claim-box{height:32px;padding:0 var(--space-2)}
}
/* ---------- screens: invoicing — bill run and invoice editor (4 Oct 2026) ---------- */
/* tokens: --ui-red-bg:#FBECEA and --ui-red-line:#F1C9C4 go into shared/tokens.css on the --ui-red line (not here) */
.ui-back{display:block;margin-bottom:var(--space-3);font:400 var(--text-sm)/1 var(--font-sans);color:var(--ui-label)}
.ui-run-controls{display:grid;grid-template-columns:auto 190px 190px;gap:var(--space-6);padding:0 var(--space-7) var(--space-6);border-bottom:1px solid var(--ui-row-line)}
.ui-run-controls .ui-field-label{margin-top:0}
.ui-freq{display:inline-flex;padding:var(--space-1);border:1px solid var(--ui-field-line);border-radius:var(--radius-md);background:var(--ui-field)}
.ui-freq span{padding:var(--space-3) var(--space-4);border-radius:var(--radius-sm);font:400 var(--text-base)/1 var(--font-sans);color:var(--ui-label);white-space:nowrap}
.ui-freq .is-active{background:var(--ui-ink);color:var(--ui-white)}
.ui-input.is-date{justify-content:space-between;gap:var(--space-3);color:var(--ui-ink)}
.ui-input.is-date svg{color:var(--ui-ink-2);flex:none}
.ui-input.is-select{justify-content:space-between;gap:var(--space-3)}
.ui-input.is-select svg{color:var(--ui-label);flex:none}
.ui-stats.is-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.ui-stats.is-inset{gap:0;margin:0;border-bottom:1px solid var(--ui-row-line)}
.ui-stat.is-tile{padding:var(--space-5) var(--space-7);border-right:1px solid var(--ui-row-line)}
.ui-stat.is-tile:last-child{border-right:0}
.ui-tile-label{display:block;font:300 var(--text-sm)/1.2 var(--font-sans);color:var(--ui-label)}
.ui-stat.is-tile .ui-stat-value{margin:var(--space-2) 0 0;font:500 var(--text-3xl)/1.1 var(--font-sans);color:var(--ui-ink);letter-spacing:0}
.ui-billrun .ui-table-head{font-size:var(--text-2xs);letter-spacing:0}   /* seven columns and the actions: tighter headings so they fit on one line */
.ui-billrun .ui-table-head,.ui-billrun .ui-row{column-gap:var(--space-2)}
.ui-unbilled b{display:block;font-weight:400}
.ui-unbilled small{display:block;font:300 var(--text-sm)/1.3 var(--font-sans);color:var(--ui-label)}
.ui-last>span{display:block}
.ui-flag{display:inline-flex;align-items:center;height:28px;padding:0 var(--space-3);border-radius:var(--radius-sm);font:400 var(--text-xs)/1 var(--font-sans);white-space:nowrap}
.ui-flag.is-red{background:var(--ui-red-bg);color:var(--ui-red)}
.ui-flag.is-amber{background:var(--ui-amber-bg);color:var(--ui-amber)}
.ui-last .ui-flag{margin-top:var(--space-1)}
.ui-row-actions{display:flex;gap:var(--space-2);justify-content:flex-end}
.ui-button.is-danger{color:var(--ui-red)}
.ui-button.is-pressed-soft{background:var(--ui-segmented)}
/* the editor: the left column as one card, the right rail as a second */
.ui-editor{display:grid;grid-template-columns:minmax(0,2.1fr) minmax(0,1fr);gap:var(--space-6);align-items:start}
.ui-doc-id{display:flex;flex:none;align-items:center;gap:var(--space-3);font:400 var(--text-lg)/1 var(--font-sans);white-space:nowrap}
.ui-doc-head .ui-head-actions{flex-wrap:wrap;justify-content:flex-end}
.ui-editor-form .ui-field-label:first-child{margin-top:0}
.ui-field-rows{display:grid;gap:var(--space-3);max-width:520px;margin:0 0 var(--space-2) auto}
.ui-field-row{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:center;gap:var(--space-4)}
.ui-field-row .ui-field-label{margin:0}
.ui-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:var(--space-6);margin-top:var(--space-5)}
.ui-helper{margin:var(--space-2) 0 0;font:300 var(--text-sm)/1.4 var(--font-sans);color:var(--ui-label)}
.ui-rule{height:1px;margin:var(--space-6) 0 var(--space-1);background:var(--ui-row-line)}
.ui-bill-type{display:flex;gap:var(--space-3);flex-wrap:wrap}
.ui-hours-box{margin-top:var(--space-5);padding:var(--space-5) var(--space-5) var(--space-6);border:1px solid var(--ui-card-line);border-radius:var(--radius-lg);background:var(--ui-soft)}
.ui-radios{display:flex;gap:var(--space-6);flex-wrap:wrap;font:300 var(--text-base)/1 var(--font-sans)}
.ui-radio-opt{display:inline-flex;align-items:center;gap:var(--space-2)}
.ui-radio{display:inline-block;width:16px;height:16px;border-radius:50%;border:1.5px solid var(--ui-checkbox-line);background:var(--ui-field);flex:none}
.ui-radio.is-on{border-color:var(--ui-ink);box-shadow:inset 0 0 0 3px var(--ui-white),inset 0 0 0 8px var(--ui-ink)}
.ui-range{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin:var(--space-5) 0;font:300 var(--text-base)/1 var(--font-sans)}
.ui-range .ui-input{min-height:42px;width:150px;padding:var(--space-2) var(--space-4);font-size:var(--text-base)}
.ui-phase-group{margin-top:var(--space-5)}
.ui-phase-group b{display:block;margin-bottom:var(--space-2);font:500 var(--text-base)/1.3 var(--font-sans)}
.ui-phase-line{display:flex;align-items:center;gap:var(--space-3);font:300 var(--text-base)/1.3 var(--font-sans)}
.ui-hours-box>.ui-button.is-primary{margin-top:var(--space-6)}
.ui-lines{border-top:1px solid var(--ui-row-line);margin-top:var(--space-2)}
.ui-lines-body{position:relative}
.ui-empty-note{position:absolute;inset:0;display:grid;place-items:center;padding:var(--space-4);background:var(--ui-card);font:300 var(--text-base)/1.4 var(--font-sans);color:var(--ui-label);text-align:center}
.ui-empty-note[hidden]{display:none}   /* the markup is the finished screen; site.js sets display:grid inline while the note is shown */
/* the rail */
.ui-rail{align-self:start}
.ui-rail-section{padding:var(--space-5) var(--space-6);border-top:1px solid var(--ui-row-line)}
.ui-rail-section:first-child{border-top:0}
.ui-rail-h{display:block;margin-bottom:var(--space-3);font:500 var(--text-base)/1.3 var(--font-sans)}
.ui-rail-line{display:flex;justify-content:space-between;gap:var(--space-4);font:300 var(--text-sm)/1.4 var(--font-sans);color:var(--ui-ink-2)}
.ui-rail-line.is-spaced{margin-top:var(--space-4)}
.ui-link{color:var(--ui-ink);font-weight:400}
.ui-rail-note{margin:0;font:300 var(--text-sm)/1.4 var(--font-sans);color:var(--ui-label)}
.ui-rail .ui-back{margin:0 0 var(--space-4)}
.ui-rail .ui-overline{margin-bottom:var(--space-3)}
.ui-mini-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);margin-bottom:var(--space-4)}
.ui-mini-tile{padding:var(--space-3) var(--space-4);border:1px solid var(--ui-card-line);border-radius:var(--radius-md);background:var(--ui-field)}
.ui-mini-tile span{display:block;font:300 var(--text-2xs)/1.3 var(--font-sans);color:var(--ui-label)}
.ui-mini-tile b{display:block;margin-top:2px;font:500 var(--text-lg)/1.2 var(--font-sans)}
.ui-mini-tile small{display:block;font:300 var(--text-2xs)/1.3 var(--font-sans);color:var(--ui-label)}
.ui-rail-rows{border:1px solid var(--ui-card-line);border-radius:var(--radius-md);background:var(--ui-field);overflow:hidden}
.ui-rail-rows+.ui-rail-rows{margin-top:var(--space-3)}
.ui-rail-row{display:flex;justify-content:space-between;align-items:center;gap:var(--space-3);min-height:40px;padding:var(--space-2) var(--space-4);border-top:1px solid var(--ui-row-line);font:300 var(--text-sm)/1.3 var(--font-sans)}
.ui-rail-row:first-child{border-top:0}
.ui-rail-row.is-head{background:var(--ui-head);font-weight:500}
.ui-rail-row.is-sub>span:first-child{display:inline-flex;align-items:center;gap:var(--space-2)}
.ui-rail-row .ui-checkbox.is-small{width:16px;height:16px}
.ui-rail-row svg{color:var(--ui-label)}
.ui-rail .ui-flag{margin-top:var(--space-2)}
@media (min-width:1240px){.ui-billrun .ui-table-head>span{white-space:nowrap}}   /* one line each once the frame is full width; narrower, the two-word headings wrap */
@media (max-width:960px){
  .ui-editor{grid-template-columns:minmax(0,1fr)}
  .ui-run-controls{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr)}
}
@media (max-width:720px){
  .ui-run-controls{grid-template-columns:minmax(0,1fr);gap:var(--space-4);padding-left:var(--space-4);padding-right:var(--space-4)}
  .ui-freq{display:flex}
  .ui-freq span{flex:1;text-align:center;padding:var(--space-3) var(--space-1);font-size:var(--text-sm)}
  .ui-stats.is-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ui-stat.is-tile{padding:var(--space-4) var(--space-4)}
  .ui-stat.is-tile:nth-child(2){border-right:0}
  .ui-stat.is-tile:nth-child(-n+2){border-bottom:1px solid var(--ui-row-line)}
  /* bill run rows as cards: project and status on one line, unbilled and Start invoice on the next */
  .ui-billrun .ui-row{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:'proj status' 'unb act';row-gap:var(--space-2);align-items:center}
  .ui-billrun .ui-row>:nth-child(1){grid-area:proj}
  .ui-billrun .ui-row>:nth-child(3){grid-area:unb}
  .ui-billrun .ui-row>:nth-child(7){grid-area:status;justify-self:end}
  .ui-billrun .ui-row>:nth-child(8){grid-area:act;justify-self:end}
  .ui-billrun .ui-table-head{grid-template-columns:minmax(0,1fr) auto}
  .ui-billrun .ui-table-head>:nth-child(3),.ui-billrun .ui-table-head>:nth-child(8){display:none}
  .ui-field-rows{max-width:none}
  .ui-field-row{grid-template-columns:110px minmax(0,1fr)}
  .ui-two{grid-template-columns:minmax(0,1fr)}
  .ui-hours-box{padding:var(--space-4)}
  .ui-range .ui-input{width:138px}
  .ui-rail-section{padding:var(--space-4)}
  .ui-mini-tiles{gap:var(--space-2)}
  .ui-mini-tile{padding:var(--space-2) var(--space-3)}
}