/* Gegenereerd uit marketing/redesign-2026-09/tideline/tideline.css door import_design.py */
/* Tideline by Olunda: homepage band (#tideline) and the /tideline/ page.
   Source: web/tideline-2026-10/02-design/tideline-showcase.html (ai-brand-designer), built 07-10-2026.
   Loaded after olunda-home.css; it reuses the site tokens (colours, font, section rhythm, buttons, FAQ)
   and only adds what is new. Prefixes: tl- (living window), tlh- (homepage band), tp- (page), lvl- (levels),
   dev- (browser frame), feed- and own- (diagrams), qs- (questions), sys- (systems), wm (watermark).
   Motion: transform and opacity only (the cash line uses stroke-dashoffset). Everything is visible without JS
   and without animation; html[data-motion="paused"] and prefers-reduced-motion stop every loop. */

/* ---------- Shared bits ---------- */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute !important;width:1px;word-wrap:normal !important;}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem 1.75rem;}
/* The site's secondary link is made for dark sections; on paper and sand it needs ink text. */
.paper .btn-secondary,.sand .btn-secondary{color:var(--ink);border-bottom-color:var(--gold);}
@media (hover:hover) and (pointer:fine){ .paper .btn-secondary:hover,.sand .btn-secondary:hover{color:var(--gold-deep);} }
.tl-micro{margin:1rem 0 0;font-size:0.875rem;color:var(--ink-soft);}
.ink .tl-micro{color:rgba(250,248,244,0.68);}

/* Ring glyph for the levels: one, two, three rings */
.glyph{width:44px;height:44px;flex:none;display:block;}
.glyph .r{fill:none;stroke:var(--gold-deep);stroke-width:6;}
.glyph .c{fill:var(--gold-deep);}
.ink .glyph .r{stroke:var(--gold-light);}
.ink .glyph .c{fill:var(--gold-core);}

/* ---------- The living window: the one product visual ---------- */
.tl-stage{position:relative;min-width:0;padding:clamp(0.5rem,2vw,1.5rem);}
.tl-rings{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible;}
.tl-rings circle{fill:none;stroke:var(--gold-light);stroke-width:1.5;opacity:0.28;transform-box:fill-box;transform-origin:center;}
@media (prefers-reduced-motion:no-preference){
  .tl-rings circle{animation:tlRing 9s var(--ease-out) infinite;}
  .tl-rings circle:nth-child(2){animation-delay:3s;}
  .tl-rings circle:nth-child(3){animation-delay:6s;}
  html[data-motion="paused"] .tl-rings circle{animation-play-state:paused;}
}
@keyframes tlRing{0%{opacity:0;transform:scale(0.55);}20%{opacity:0.4;}100%{opacity:0;transform:scale(1.05);}}

.tl-win{position:relative;z-index:1;background:#fff;color:var(--ink);border-radius:20px;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,0.35);overflow:hidden;min-width:0;}
.tl-bar{display:flex;align-items:center;gap:8px;padding:11px 16px;border-bottom:1px solid #EFEAE0;font-size:0.82rem;color:var(--ink-soft);flex-wrap:wrap;}
.tl-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block;}
.tl-bar b{margin-left:6px;color:var(--ink);font-weight:600;}
.tl-sample{margin-left:auto;font-size:0.72rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--gold);border-radius:999px;padding:2px 9px;background:#FBF6EC;white-space:nowrap;}
.tl-live{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--gold-deep);font-size:0.8rem;}
.tl-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);}
@media (prefers-reduced-motion:no-preference){
  .tl-live::before{animation:tlBlink 1.6s ease-in-out infinite;}
  html[data-motion="paused"] .tl-live::before{animation-play-state:paused;}
}
@keyframes tlBlink{50%{opacity:0.3;}}

.tl-tabs{display:flex;gap:0.4rem;padding:12px 16px 0;flex-wrap:wrap;}
.tl-tab{position:relative;overflow:hidden;font:inherit;font-size:0.85rem;font-weight:600;cursor:pointer;color:var(--ink-soft);background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 15px;min-height:36px;transition:color 180ms ease,background-color 180ms ease,border-color 180ms ease;}
.tl-tab[aria-pressed="true"]{color:var(--ink);background:var(--gold-light);border-color:var(--gold-light);}
.tl-tab:focus-visible{outline:3px solid var(--gold-deep);outline-offset:2px;}
.tl-tab .bar{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ink);opacity:0.35;transform:scaleX(0);transform-origin:left;display:none;}
html.tl-js .tl-tab[aria-pressed="true"] .bar.run{display:block;animation:tlBar var(--dwell,7000ms) linear forwards;animation-play-state:paused;}
html.tl-js .tl-tab[aria-pressed="true"] .bar.run.go{animation-play-state:running;}
html[data-motion="paused"] .tl-tab .bar{display:none !important;}
@keyframes tlBar{to{transform:scaleX(1);}}
@media (prefers-reduced-motion:reduce){ .tl-tab .bar{display:none !important;} }

/* No JS: the three views are stacked and fully visible. The script turns them into tabs. */
.tl-panel{padding:16px;border-top:1px solid #F3EFE7;margin-top:12px;}
/* Fixed window height over the tabs: the panels share one grid cell, the hidden ones keep their place. */
html.tl-js .tl-panels{display:grid;}
html.tl-js .tl-panels > .tl-panel{grid-area:1/1;}
html.tl-js .tl-panels > .tl-panel:not(.on){display:block;visibility:hidden;}
html.tl-js .tl-panel{border-top:0;margin-top:0;}
html.tl-js .tl-panel:not(.on){display:none;}
/* The window sits inside an .ink section: its own text colours must win over ".ink p". */
.tl-win p,.ink .tl-win p{color:var(--ink);margin:0;}
.tl-win .tl-title,.ink .tl-win .tl-title{font-weight:700;font-size:0.72rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--ink-soft);margin:0 0 0.6rem;line-height:1.4;}
.tl-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem;margin-bottom:1rem;}
.tl-kpis > div{border-left:1px solid var(--line);padding-left:0.7rem;min-width:0;}
.tl-kpis > div:first-child{border-left:0;padding-left:0;}
.tl-kpis span{display:block;font-size:0.72rem;color:var(--ink-soft);line-height:1.3;}
.tl-kpis b{display:block;font-size:clamp(1.1rem,2.2vw,1.55rem);font-weight:600;line-height:1.2;color:var(--ink);white-space:nowrap;}

/* Pulse chart: bars rise like a tide to the budget line (the tideline) */
.tl-chart{position:relative;height:118px;margin:0 0 0.35rem;}
.tl-bars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:7px;border-bottom:1px solid var(--line);}
.tl-bars i{flex:1;background:var(--gold);border-radius:6px 6px 0 0;height:var(--h);transform-origin:bottom;min-width:0;}
.tl-bars i.hi{background:var(--gold-deep);}
.tl-tide{position:absolute;left:0;right:0;bottom:var(--t,64%);height:0;border-top:2px dashed var(--gold-deep);opacity:0.85;pointer-events:none;}
.tl-tide span{position:absolute;left:0;top:-1.6em;font-size:0.68rem;font-weight:700;color:var(--gold-deep);background:#fff;padding:0 4px;letter-spacing:0.04em;}
.tl-days{display:flex;gap:7px;font-size:0.68rem;color:var(--ink-soft);margin-bottom:1rem;}
.tl-days span{flex:1;text-align:center;}
.tl-signals{list-style:none;margin:0;padding:0;display:grid;gap:0.5rem;}
.tl-signals li{display:flex;gap:0.6rem;align-items:flex-start;font-size:0.86rem;line-height:1.4;background:var(--sand);border-radius:12px;padding:0.6rem 0.8rem;color:var(--ink);}
.tl-signals li::before{content:"";flex:none;width:9px;height:9px;margin-top:0.35em;border-radius:50%;background:var(--gold-deep);}
.tl-signals li.warn::before{border-radius:2px;transform:rotate(45deg);background:#B0561F;}

/* Control: cash line plus figures */
.tl-cash{display:block;width:100%;height:auto;margin-bottom:0.6rem;}
.tl-cash .grid{stroke:#EFEAE0;stroke-width:1;}
.tl-cash .area{fill:rgba(181,128,79,0.12);}
.tl-cash .ln{fill:none;stroke:var(--gold-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.tl-cash .ln2{fill:none;stroke:var(--ink-soft);stroke-width:1.5;stroke-dasharray:4 4;opacity:0.7;}
.tl-rows{list-style:none;margin:0;padding:0;}
.tl-rows li{display:flex;justify-content:space-between;gap:1rem;font-size:0.86rem;padding:0.5rem 0;border-top:1px solid #F3EFE7;color:var(--ink);}
.tl-rows li span{color:var(--ink-soft);}
.tl-rows li b{font-weight:600;white-space:nowrap;}

/* Group: ranking with status shapes plus words */
.tl-rank{list-style:none;margin:0;padding:0;display:grid;gap:0.45rem;}
.tl-rank li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.5fr) 5.2rem;gap:0.7rem;align-items:center;font-size:0.86rem;padding:0.45rem 0;border-top:1px solid #F3EFE7;color:var(--ink);}
.tl-rank li:first-child{border-top:0;}
.tl-rank .nm{font-weight:600;min-width:0;}
.tl-rank .tr{height:8px;background:var(--sand);border-radius:99px;overflow:hidden;}
.tl-rank .tr i{display:block;height:100%;width:var(--w);background:var(--gold);border-radius:99px;transform-origin:left;}
.chip-st{text-align:center;font-size:0.7rem;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;background:var(--sand);color:var(--gold-deep);}
.chip-st.ok{background:#E9EFE4;color:#3E5A33;}
.chip-st.watch{background:#F7EBCF;color:#7A5A12;}
.chip-st.act{background:#F6DFD3;color:#8E3B16;}
.tl-win .tl-cap,.ink .tl-win .tl-cap{font-size:0.75rem;color:var(--ink-soft);margin:0.7rem 0 0;line-height:1.45;}

/* Entrance per panel. Only added by the script while the window is on screen, so a hidden tab or a missed
   observer never leaves anything half-drawn: without .tl-play every mark is simply at full size. */
@media (prefers-reduced-motion:no-preference){
  .tl-play .tl-bars i{animation:tlRise 1000ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 80ms);}
  .tl-play .tl-cash .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:tlDraw 1600ms var(--ease-out) forwards;}
  .tl-play .tl-rank .tr i{animation:tlGrow 1000ms var(--ease-out) both;animation-delay:calc(var(--i,0) * 90ms);}
}
@keyframes tlRise{from{transform:scaleY(0.06);opacity:0.5;}to{transform:scaleY(1);opacity:1;}}
@keyframes tlDraw{to{stroke-dashoffset:0;}}
@keyframes tlGrow{from{transform:scaleX(0.05);}to{transform:scaleX(1);}}

/* ---------- Watermark "Tideline by Olunda", bottom right of every dashboard image ----------
   Same spec as for real client dashboards (02-design/notities.md). Decorative: the name is also in the text. */
.wm{display:inline-flex;align-items:center;gap:5px;
    font-size:11px;font-weight:600;letter-spacing:0.02em;line-height:1;color:var(--ink);opacity:0.7;
    background:rgba(255,255,255,0.72);border-radius:999px;padding:4px 9px 4px 6px;pointer-events:none;user-select:none;-webkit-user-select:none;white-space:nowrap;}
.wm svg{width:12px;height:12px;display:block;flex:none;}
.wm .pn{font-weight:700;}
@media (max-width:640px){ .wm{font-size:10px;} .wm svg{width:11px;height:11px;} }
/* The strip under every dashboard image and window: the mark sits bottom right and never covers data. */
.tl-foot,.dev-foot{display:flex;justify-content:flex-end;align-items:center;padding:7px 12px 8px;border-top:1px solid #EFEAE0;background:#fff;}
/* ---------- Homepage band #tideline ---------- */
.tlh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center;}
@media (min-width:960px){ .tlh-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;} }
.tlh-levels{list-style:none;margin:0 0 2rem;padding:0;display:grid;gap:1rem;}
.tlh-levels li{display:flex;gap:1rem;align-items:center;}
.tlh-levels .glyph{width:38px;height:38px;}
.tlh-levels b{color:var(--paper);font-weight:600;}
.tlh-levels span{display:block;color:rgba(250,248,244,0.78);font-size:0.95rem;line-height:1.45;}

/* ---------- /tideline/ hero ---------- */
.tp-hero{padding-top:clamp(3rem,7vw,5rem);padding-bottom:clamp(4.5rem,9vw,7rem);}
.tp-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.75rem;align-items:center;}
@media (min-width:960px){ .tp-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3rem;} }
.tp-hero h1{font-weight:600;color:var(--paper);font-size:clamp(2.1rem,3.2vw + 1.2rem,3.9rem);line-height:1.07;letter-spacing:-0.01em;margin:0;}
.ink .tp-sub{font-size:clamp(1rem,0.4vw + 0.95rem,1.1875rem);line-height:1.65;color:rgba(250,248,244,0.78);max-width:50ch;margin:1.4rem 0 2rem;}
/* The page has continuous motion, so it carries the same pause control as the homepage hero, but in the text flow. */
.tp-tools{margin-top:2rem;}
.tp-tools .motion-toggle{position:static;}

/* Narrow text sections */
.tp-narrow{max-width:62ch;}
.tp-narrow p{font-size:1.0625rem;}

/* One number per question */
.qs-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center;}
@media (min-width:900px){ .qs-grid{grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:4rem;} }
.qs-list{list-style:none;margin:1.5rem 0 1.75rem;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;}
@media (min-width:600px){ .qs-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2rem;} }
.qs-list li{font-weight:600;font-size:clamp(1.1rem,0.6vw + 1rem,1.35rem);line-height:1.3;color:var(--ink);}
.qs-list li::before{content:"";display:block;width:24px;height:24px;margin-bottom:0.6rem;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 0 6px rgba(181,128,79,0.14);}
.qs-phone{max-width:300px;margin:0 auto;width:100%;}
.qs-phone .dev-view{aspect-ratio:9/16;}

/* Levels: alternating rows, browser frames with the real screens */
.lvl{display:grid;grid-template-columns:minmax(0,1fr);gap:1.75rem;padding-block:clamp(2rem,5vw,3.5rem);border-top:1px solid var(--line);align-items:center;}
.lvl.first{border-top:0;padding-top:0.5rem;}
@media (min-width:900px){
  .lvl{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3.5rem;}
  .lvl.flip{grid-template-columns:minmax(0,7fr) minmax(0,5fr);}
  .lvl.flip .lvl-media{order:-1;}
}
.lvl-text{min-width:0;}
.lvl-head{display:flex;gap:1rem;align-items:center;margin-bottom:0.9rem;}
.lvl-head h3{margin:0;font-size:clamp(1.75rem,1.6vw + 1.2rem,2.5rem);}
.lvl-label{font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin:1rem 0 0.25rem;}
.lvl-text p:not(.lvl-label){max-width:48ch;margin:0 0 0.5rem;}
.lvl-try{margin-top:1.25rem;}
.lvl-media{min-width:0;}
.lvl-extra{margin-top:clamp(1.5rem,4vw,2.5rem);padding:1.25rem 1.5rem;border-radius:14px;background:var(--sand);max-width:70ch;}
.lvl-extra p{margin:0;}

.dev{margin:0;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 22px 50px rgba(43,42,40,0.12);overflow:hidden;}
.dev-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid #EFEAE0;font-size:0.78rem;color:var(--ink-soft);flex-wrap:wrap;}
.dev-bar i{width:9px;height:9px;border-radius:50%;background:var(--line);display:inline-block;}
.dev-url{margin-left:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.dev-view{position:relative;overflow:hidden;aspect-ratio:16/10;background:var(--paper);}
.dev-view img{display:block;width:100%;height:auto;}
@media (max-width:640px){ .lvl .dev-view{aspect-ratio:4/5;} }
/* Hover with a real pointer: the screen glides down to show more. Transform only. */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .dev-view img{transition:transform 1.2s var(--ease-out);}
  .lvl .dev:hover .dev-view img{transform:translateY(-34%);transition-duration:6s;transition-timing-function:cubic-bezier(0.45,0,0.25,1);}
  html[data-motion="paused"] .lvl .dev:hover .dev-view img{transform:none;}
}

/* How it works: feed diagram plus steps */
.feed{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;margin:2rem 0 0.5rem;align-items:center;}
@media (min-width:860px){ .feed{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:0;} }
.feed-src{display:grid;gap:0.7rem;}
.feed-row{display:flex;align-items:center;}
.feed-chip{flex:none;min-width:8.5rem;font-size:0.9rem;font-weight:600;color:var(--paper);background:rgba(250,248,244,0.06);border:1px solid rgba(250,248,244,0.22);border-radius:999px;padding:7px 16px;text-align:center;}
.feed-line{display:none;position:relative;flex:1;height:2px;background:rgba(217,168,104,0.28);overflow:hidden;}
.feed-line::after{content:"";position:absolute;left:0;top:0;width:28%;height:100%;background:var(--gold-light);transform:translateX(-100%);}
@media (min-width:860px){ .feed-line{display:block;} }
@media (min-width:860px) and (prefers-reduced-motion:no-preference){
  .feed-line::after{animation:tlFeed 3.2s var(--ease-out) infinite;animation-delay:calc(var(--i,0) * 450ms);}
  html[data-motion="paused"] .feed-line::after{animation-play-state:paused;}
}
@keyframes tlFeed{0%{transform:translateX(-100%);}70%,100%{transform:translateX(360%);}}
.feed-hub{display:grid;place-items:center;justify-self:center;width:132px;height:132px;}
.feed-hub svg{display:block;width:132px;height:132px;}
.feed-out{display:flex;align-items:center;min-width:0;}
.feed-mini{flex:none;width:min(220px,100%);border-radius:14px;background:#fff;border:1px solid var(--line);padding:12px;display:grid;gap:8px;}
.feed-mini .b{display:flex;align-items:flex-end;gap:4px;height:44px;}
.feed-mini .b i{flex:1;background:var(--gold);border-radius:3px 3px 0 0;height:var(--h);}
.feed-mini .k{display:flex;gap:6px;}
.feed-mini .k i{flex:1;height:10px;border-radius:99px;background:var(--sand);}
.tp-steps{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;margin-top:2.5rem;}
@media (min-width:760px){
  .tp-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2.25rem;}
  .tp-step{padding-left:2rem;border-left:1px solid rgba(250,248,244,0.14);}
  .tp-step:first-child{padding-left:0;border-left:none;}
}
.tp-step-num{font-weight:600;color:var(--gold-light);font-size:clamp(2rem,3vw,2.75rem);line-height:1;margin-bottom:0.6rem;}

/* Your own cloud */
.own-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center;}
@media (min-width:900px){ .own-grid{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:3.5rem;} }
.own{display:grid;grid-template-columns:minmax(0,1fr);gap:1rem;}
.own-src{display:flex;flex-wrap:wrap;gap:0.5rem;}
.own-src span{font-size:0.85rem;font-weight:600;color:var(--ink-soft);background:var(--sand);border:1px solid var(--line);border-radius:999px;padding:5px 13px;}
.own-cloud{position:relative;border:2px solid var(--gold);border-radius:28px;padding:2.6rem 1.25rem 1.25rem;background:#fff;}
.own-tag{position:absolute;left:1.25rem;top:-0.85rem;background:var(--gold-deep);color:var(--paper);font-weight:700;font-size:0.78rem;letter-spacing:0.06em;text-transform:uppercase;padding:4px 14px;border-radius:999px;max-width:calc(100% - 2.5rem);}
.own-in{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem;}
.own-in > div{background:var(--sand);border-radius:14px;padding:0.9rem 1rem;font-weight:600;font-size:0.95rem;line-height:1.35;min-width:0;}
.own-in small{display:block;font-weight:500;color:var(--ink-soft);font-size:0.72rem;margin-top:0.2rem;white-space:nowrap;}
@media (max-width:440px){ .own-in{grid-template-columns:minmax(0,1fr);} }
.own-olunda{display:flex;align-items:center;gap:0.75rem;color:var(--ink-soft);font-size:0.9rem;font-weight:600;padding-left:1.25rem;border-left:2px dashed var(--gold);margin-left:2rem;}
.own-olunda .glyph{width:30px;height:30px;}

/* Systems */
.sys-groups{list-style:none;margin:1.5rem 0 1.5rem;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem;}
@media (min-width:760px){ .sys-groups{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem 2.5rem;} }
.sys-cat{display:block;font-weight:700;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);margin-bottom:0.5rem;}
.sys-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:0.5rem;}
.sys-list li{font-weight:600;font-size:1rem;color:var(--ink);background:var(--paper);border:1px solid var(--line);border-radius:999px;padding:7px 17px;}
.sys-note{max-width:62ch;}
#systems p,.qs-copy p{max-width:65ch;}
.sys-legal{max-width:62ch;font-size:0.875rem;color:var(--ink-soft);}

/* Demo request (#demo) */
.tp-demo-head{max-width:640px;position:relative;z-index:1;}
.tp-demo-head p{color:rgba(250,248,244,0.85);max-width:56ch;}
.tp-demo-form{margin-top:2.5rem;max-width:560px;position:relative;z-index:1;}
.tp-demo-form .tp-form-intro{font-weight:600;color:var(--paper);margin:0 0 1.25rem;}
/* The Olunda brand mark (brand/assets/olunda-mark.svg) as a large, static watermark: right in the section,
   partly running off the edge, about 10% opacity, under the content, never behind text or form fields (tested). */
.demo-mark{position:absolute;z-index:0;width:clamp(380px,43vw,820px);aspect-ratio:1;right:calc(-1 * clamp(90px,10.4vw,200px));top:clamp(0.5rem,2vw,2.5rem);opacity:0.10;pointer-events:none;}
.demo-mark circle{fill:none;stroke:#D9A868;stroke-width:2.5;}
.demo-mark .dot{fill:#E4B579;stroke:none;}
@media (max-width:899px){ .demo-mark{display:none;} }
.ink .tp-payoff{margin-top:2.5rem;font-weight:600;color:var(--gold-light);}

/* ---------- Homepage band: note under the three levels ---------- */
.ink .tlh-note{margin:-0.5rem 0 1.75rem;max-width:46ch;color:rgba(250,248,244,0.85);}

/* ---------- /tideline/ #tailored: one dashboard in four steps (same window, same script) ----------
   The four panels share one grid cell, so the window keeps the height of the tallest step and nothing below jumps.
   Without JS (no html.tl-js) the four steps stand under each other, each with its own caption. */
.tt-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:2.5rem;align-items:center;}
@media (min-width:960px){ .tt-grid{grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:3.5rem;} }
.tt-copy p{max-width:52ch;font-size:1.0625rem;}
.sand .tt-win{box-shadow:0 22px 50px rgba(43,42,40,0.14);}
.tt-stage{padding:0;}
.dev-cap{margin:0;padding:0.6rem 14px 0.8rem;}
html.tl-js .tt-panels{display:grid;}
html.tl-js .tt-win .tl-panel{grid-area:1/1;}
html.tl-js .tt-win .tl-panel:not(.on){display:block;visibility:hidden;}
.tt-win .tl-tab{font-size:0.8rem;padding:6px 12px;}
.tt-win .tt-step,.ink .tt-win .tt-step{font-size:0.78rem;color:var(--ink-soft);margin:0 0 0.6rem;line-height:1.4;}
.tt-step span{font-weight:700;color:var(--gold-deep);}
html.tl-js .tt-step span{display:none;}

/* The screen inside the window. Standard concept = Olunda colours; .tt-client = the second house style from the
   demos ("Client theme"). Window bar, "Sample data" and the watermark stay the same in every step. */
.tt-screen{--tt-accent:var(--gold);--tt-deep:var(--gold-deep);--tt-ink:var(--ink);--tt-sand:var(--sand);--tt-line:var(--line);--tt-muted:var(--ink-soft);--tt-bg:#FFFFFF;
  background:var(--tt-bg);color:var(--tt-ink);border:1px solid var(--tt-line);border-radius:14px;padding:14px;transition:background-color 400ms ease,border-color 400ms ease;}
.tt-client .tt-screen{--tt-accent:#2E8A91;--tt-deep:#1B5F66;--tt-ink:#13293A;--tt-sand:#E3EEEF;--tt-line:#D3E0E3;--tt-muted:#52677A;--tt-bg:#F4F7F8;}
.tt-head{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.tt-logo{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:10px;color:var(--tt-deep);}
.tt-logo svg{width:26px;height:26px;}
.tt-logo-yours{width:auto;min-width:76px;height:38px;padding:0 8px;border:1.5px dashed var(--tt-accent);background:#fff;font-size:0.68rem;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--tt-deep);}
.tt-name{min-width:0;}
.tt-win .tt-title,.ink .tt-win .tt-title{margin:0;font-weight:700;font-size:0.95rem;color:var(--tt-ink);line-height:1.2;}
.tt-win .tt-sub,.ink .tt-win .tt-sub{margin:0;font-size:0.72rem;color:var(--tt-muted);line-height:1.3;}
.tt-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.5rem;margin-bottom:0.9rem;}
@media (max-width:520px){ .tt-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }
.tt-kpis > div{border-left:2px solid var(--tt-accent);padding:2px 0 2px 0.55rem;min-width:0;}
.tt-kpis > div.tt-new{position:relative;background:var(--tt-sand);border-radius:0 8px 8px 0;}
.tt-kpis > div.tt-new{padding-bottom:24px;}
.tt-kpis > div.tt-new .tt-chg{position:absolute;right:5px;bottom:5px;}
.tt-kpis span{display:flex;flex-wrap:wrap;align-items:center;gap:4px;font-size:0.7rem;color:var(--tt-muted);line-height:1.3;}
.tt-kpis b{display:block;font-size:clamp(1rem,1.6vw,1.3rem);font-weight:600;line-height:1.25;color:var(--tt-ink);white-space:nowrap;}
.tt-screen .tl-bars i{background:var(--tt-accent);}
.tt-screen .tl-bars i.hi{background:var(--tt-deep);}
.tt-screen .tl-bars{border-bottom-color:var(--tt-line);}
.tt-screen .tl-tide{border-top-color:var(--tt-deep);}
.tt-screen .tl-tide span{color:var(--tt-deep);background:var(--tt-bg);}
.tt-screen .tl-chart{height:84px;margin-bottom:0.2rem;}
.tt-module{margin-top:0.8rem;padding:0.6rem 0.75rem 0.2rem;border-radius:10px;background:var(--tt-sand);}
.tt-win .tt-mod-title,.ink .tt-win .tt-mod-title{margin:0 0 0.2rem;font-size:0.78rem;font-weight:700;color:var(--tt-ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
.tt-ghost{background:transparent;border:1.5px dashed var(--tt-line);min-height:104px;display:grid;place-items:center;padding:0.6rem;}
.tt-win .tt-ghost .tt-mod-title,.ink .tt-win .tt-ghost .tt-mod-title{color:var(--tt-muted);font-weight:600;margin:0;}
.tt-module .tl-rows li{font-size:0.8rem;border-top-color:var(--tt-line);color:var(--tt-ink);}
.tt-module .tl-rows li span{color:var(--tt-muted);}
/* Small marker on whatever changed in a step. Olunda gold, so it reads as a note on the screen, not part of it. */
.tt-chg{display:inline-block;font-size:0.6rem;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--gold-deep);background:#FBF6EC;border:1px solid var(--gold);border-radius:999px;padding:1px 6px;line-height:1.3;white-space:nowrap;}
/* Change animation: only while the window is on screen (.tl-play), so it never hides anything. */
@media (prefers-reduced-motion:no-preference){
  .tl-play .tt-new{animation:ttIn 650ms var(--ease-out) both;animation-delay:250ms;}
  .tl-play.tt-recolour .tt-screen{animation:ttTint 500ms ease-out both;}
}
@keyframes ttIn{from{opacity:0;transform:translateY(10px) scale(0.97);}to{opacity:1;transform:none;}}
@keyframes ttTint{from{opacity:0.6;}to{opacity:1;}}

/* Header: current page in the menu */
nav.primary-nav a[aria-current="page"],.nav-toggle .panel a[aria-current="page"]{color:var(--gold-light);}

@media (prefers-reduced-motion:reduce){
  .tl-rings circle,.tl-live::before,.feed-line::after{animation:none !important;}
  .dev-view img{transition:none !important;}
}
/* ---------- Homepage Services: text link under row 4 (Tideline by Olunda) ---------- */
.service-link{margin:0;}
@media (min-width:880px){ .service-link{grid-column:2;margin-top:-1rem;} }

/* ---------- /tideline/ #views: one dashboard, five views ----------
   Same language as the toolbox in "How we work": pill tabs with a progress bar on ink, the scene, a caption.
   The five frames share one grid cell (the tallest sets the height, nothing below jumps). On a tab change the
   numbers and the week bars move from where they were to where they land (FLIP, transform only, in
   olunda-tideline.js). Without JS the five views stand under each other, each with its caption. */
.vw{margin-top:2rem;position:relative;z-index:1;}
.vw .vw-tabs{padding:0;gap:0.5rem;}
.vw .vw-tab{color:rgba(250,248,244,0.82);border-color:rgba(250,248,244,0.28);background:transparent;font-size:0.9rem;padding:8px 16px;min-height:40px;}
.vw .vw-tab[aria-pressed="true"]{color:var(--ink);background:var(--gold-light);border-color:var(--gold-light);}
.vw .vw-tab:focus-visible{outline:3px solid var(--gold-light);outline-offset:2px;}
@media (hover:hover) and (pointer:fine){ .vw .vw-tab:not([aria-pressed="true"]):hover{color:var(--paper);border-color:rgba(250,248,244,0.5);} }
.vw .tl-panel{padding:0;border-top:0;margin-top:2.5rem;}
html.tl-js .vw .tl-panel{margin-top:0;}
html.tl-js .vw-frames{display:grid;margin-top:2rem;}
html.tl-js .vw .vw-frame{grid-area:1/1;display:flex;}
html.tl-js .vw .vw-frame:not(.on){visibility:hidden;}
.vw-frame{flex-direction:column;justify-content:center;min-width:0;}
.vw-holder{display:grid;place-items:center;min-height:0;padding:0.5rem 0 0;}
.vw-cap,.ink .vw-cap{margin:1.1rem auto 0;max-width:62ch;text-align:center;color:rgba(250,248,244,0.78);font-size:0.975rem;}
.vw-cap b{color:var(--paper);font-weight:600;margin-right:0.25rem;}

/* Shared content */
.vw-device{position:relative;min-width:0;color:var(--ink);}
.vw-device p,.ink .vw-device p{margin:0;color:inherit;}
.vw-screen{position:relative;background:#fff;overflow:hidden;}
.vw-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;}
.vw-name{font-weight:700;font-size:0.85rem;line-height:1.25;min-width:0;}
.vw-name small{display:block;font-weight:500;font-size:0.7rem;color:var(--ink-soft);}
.vw-device span{line-height:1.3;}
.vw-device b[data-k]{display:inline-block;font-weight:600;color:var(--ink);white-space:nowrap;line-height:1.15;will-change:auto;}
.vw-bars{position:relative;height:72px;}
.vw-b{position:absolute;inset:0;display:flex;align-items:flex-end;gap:5px;border-bottom:1px solid var(--line);}
.vw-b i{flex:1;height:var(--h);background:var(--gold);border-radius:4px 4px 0 0;}
.vw-b i:nth-child(1),.vw-b i:nth-child(2){background:var(--gold-deep);}
.vw-tide{position:absolute;left:0;right:0;bottom:64%;border-top:2px dashed var(--gold-deep);opacity:0.8;}
.vw-bars-sm{height:46px;}
.vw-bars-sm .vw-b{gap:3px;}
.vw-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:12px;padding-top:8px;}
.vw-wmrow{display:flex;justify-content:flex-end;margin-top:10px;}
.vw .tl-sample{margin-left:0;}

/* 1. Laptop */
.vw-laptop-d{width:min(680px,100%);}
.vw-laptop-d .vw-screen{border:10px solid #3A3835;border-bottom-width:14px;border-radius:14px 14px 4px 4px;padding:16px 16px 10px;}
.vw-base{height:12px;margin:0 -5%;background:linear-gradient(#4A4743,#3A3835);border-radius:0 0 12px 12px;}
.vw-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px;}
.vw-kpis > div{border-left:2px solid var(--gold);padding-left:10px;min-width:0;}
.vw-kpis span{display:block;font-size:0.72rem;color:var(--ink-soft);}
.vw-kpis b[data-k]{font-size:clamp(1.05rem,2.2vw,1.6rem);}

/* 2. Phone */
.vw-phone-d{width:216px;}
.vw-phone-d .vw-screen{border:8px solid #3A3835;border-radius:30px;padding:26px 14px 12px;}
.vw-notch{position:absolute;top:6px;left:50%;width:56px;height:6px;margin-left:-28px;border-radius:99px;background:#3A3835;}
.vw-stack{display:grid;gap:8px;margin-bottom:12px;}
.vw-stack > div{background:var(--sand);border-radius:10px;padding:8px 10px;}
.vw-stack span{display:block;font-size:0.68rem;color:var(--ink-soft);}
.vw-stack b[data-k]{font-size:1.45rem;}

/* 3. Wall screen: dark, big and airy */
.vw-wall-d{width:min(820px,100%);}
.vw-wall-d .vw-screen{background:#1F1E1C;color:var(--paper);border:6px solid #4A4743;border-radius:8px;padding:22px 26px 12px;aspect-ratio:16/8;display:flex;flex-direction:column;}
.vw-wall-d .vw-name{font-size:1rem;color:var(--paper);}
.vw-wall-d .vw-name small{color:rgba(250,248,244,0.7);}
.vw-wall-d .tl-sample{background:transparent;color:var(--gold-light);border-color:var(--gold-light);}
.vw-big{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:auto 0 18px;padding-top:12px;}
.vw-big span{display:block;font-size:0.8rem;color:rgba(250,248,244,0.72);letter-spacing:0.02em;}
.vw-big b[data-k]{color:var(--paper);font-size:clamp(1.5rem,4.6vw,3.4rem);font-weight:600;}
.vw-wall-d .vw-b{border-bottom-color:rgba(250,248,244,0.2);}
.vw-wall-d .vw-b i{background:var(--gold-light);}
.vw-wall-d .vw-b i:nth-child(1),.vw-wall-d .vw-b i:nth-child(2){background:var(--gold-core);}
.vw-wall-d .vw-tide{border-top-color:var(--paper);opacity:0.5;}
.vw-wall-d .wm{color:var(--paper);opacity:0.75;background:rgba(43,42,40,0.55);}
.vw-stand{width:22%;height:16px;margin:0 auto;background:#4A4743;clip-path:polygon(30% 0,70% 0,100% 100%,0 100%);}

/* 4. Morning e-mail */
.vw-mail-d{width:min(560px,100%);background:#fff;border-radius:12px;border:1px solid var(--line);box-shadow:0 22px 50px rgba(0,0,0,0.35);overflow:hidden;}
.vw-mailbar{display:flex;align-items:center;gap:7px;padding:9px 14px;background:var(--sand);font-size:0.75rem;font-weight:600;color:var(--ink-soft);}
.vw-mailbar i{width:8px;height:8px;border-radius:50%;background:var(--line);}
.vw-mailbar span{margin-left:6px;}
.vw-mailhead{padding:12px 18px 10px;border-bottom:1px solid var(--line);}
.vw-subj{font-weight:700;font-size:0.95rem;}
.vw-device .vw-from{font-size:0.75rem;color:var(--ink-soft);}
.vw-mailbody{padding:12px 18px 0;font-size:0.85rem;}
.vw-lines{list-style:none;margin:10px 0 12px;padding:0;}
.vw-lines li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:5px 0;border-top:1px dashed var(--line);}
.vw-lines b[data-k]{font-size:0.95rem;}
.vw-mail-d .vw-foot{margin:12px 18px 0;padding-bottom:12px;}

/* 5. A4 for the MT meeting */
.vw-a4-d{width:min(300px,100%);}
.vw-sheet{background:#fff;aspect-ratio:210/297;padding:22px 22px 14px;box-shadow:0 22px 50px rgba(0,0,0,0.35);display:flex;flex-direction:column;font-size:0.75rem;}
.vw-a4head{border-bottom:2px solid var(--ink);padding-bottom:8px;margin-bottom:12px;}
.vw-a4title{font-weight:700;font-size:0.95rem;}
.vw-device .vw-a4sub{font-size:0.7rem;color:var(--ink-soft);}
.vw-table{width:100%;border-collapse:collapse;margin-bottom:14px;}
.vw-table th,.vw-table td{text-align:left;padding:5px 0;border-bottom:1px solid var(--line);font-size:0.75rem;}
.vw-table thead th{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);font-weight:700;}
.vw-table tbody th{font-weight:500;}
.vw-table td,.vw-table thead th:last-child{text-align:right;}
.vw-table b[data-k]{font-size:0.85rem;}
.vw-device .vw-a4lbl{font-size:0.62rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-soft);font-weight:700;margin-bottom:6px;}
.vw-a4-d .vw-foot{margin-top:auto;font-size:0.65rem;}
.vw-a4-d .wm.wm-foot,.vw-mail-d .wm.wm-foot{font-size:10px;}

@media (max-width:520px){
  .vw-laptop-d .vw-screen{border-width:7px;border-bottom-width:10px;padding:12px 10px 8px;}
  .vw-kpis{gap:6px;}
  .vw-kpis > div{padding-left:6px;}
  .vw-wall-d .vw-screen{padding:14px 12px 10px;aspect-ratio:auto;}
  .vw-big{gap:8px;margin:14px 0;}
  .vw .vw-tab{font-size:0.82rem;padding:7px 12px;}
}


/* Tap targets on phones: at least 44 px */
@media (max-width:640px){ .tl-tab,.vw .vw-tab{min-height:44px;} }

/* ---------- Living dashboards: Pulse, Control, Group (#levels) and the phone (#what-you-get) ----------
   The CSS below is the END STATE: without JS, in a hidden tab, under reduced motion or when paused, every number,
   bar and row is complete. The script adds .lv-armed when a frame comes into view and then switches parts on
   step by step (.lv-on). Motion: transform and opacity, stroke-dashoffset for the cash line. */
.dev-view.is-live{aspect-ratio:auto;overflow:hidden;background:var(--paper);}
.lv{position:relative;padding:14px 16px 12px;font-size:12px;line-height:1.35;color:var(--ink);font-variant-numeric:tabular-nums;text-align:left;}
.lv p{margin:0;color:var(--ink);font-size:inherit;}
.lv-head{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.lv-mark{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--gold);display:grid;place-items:center;font-size:9.5px;font-weight:700;color:var(--gold-deep);}
.lv-head b{display:block;font-size:12.5px;line-height:1.2;}
.lv-head small{display:block;font-size:10.5px;color:var(--ink-soft);}
.lv .lv-title{font-weight:600;font-size:15px;margin:0 0 8px;}
.lv-title small{font-weight:400;font-size:11px;color:var(--ink-soft);margin-left:6px;}
.lv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:10px;}
.lv-kpi{border-left:2px solid var(--gold);padding-left:7px;min-width:0;}
.lv-l{display:block;font-size:10.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.lv-num{display:block;font-size:clamp(15px,1.5vw,19px);font-weight:600;white-space:nowrap;line-height:1.25;}
.lv-d{display:flex;gap:4px;align-items:baseline;font-size:10px;color:var(--ink-soft);line-height:1.25;}
.lv-up,.lv-down{flex:none;width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;}
.lv-up{border-bottom:6px solid #3F7350;}
.lv-down{border-top:6px solid #A63F2E;}
.lv-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:10px;}
.lv-card{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;min-width:0;}
.lv .lv-ct{font-size:11px;font-weight:600;margin:0 0 6px;}
.lv-ct small{font-weight:400;color:var(--ink-soft);margin-left:4px;}
/* Pulse: weeks against budget */
.lvw{display:flex;gap:4px;padding-bottom:24px;}
.lvw-col{position:relative;flex:1;height:78px;}
.lvw-bar{position:absolute;left:14%;right:14%;bottom:0;height:var(--h);background:var(--gold);border-radius:2px 2px 0 0;transform-origin:bottom;}
.lvw-bud{position:absolute;left:0;right:0;bottom:var(--b);border-top:2px solid var(--ink);opacity:0.7;}
.lvw-col span{position:absolute;top:calc(100% + 3px);left:-4px;right:-4px;text-align:center;font-size:8.5px;line-height:1.15;color:var(--ink-soft);}
/* Pulse: busy hours */
.lvh-grid{display:grid;grid-template-columns:20px repeat(11,minmax(0,1fr));gap:2px;font-size:8.5px;color:var(--ink-soft);align-items:center;}
.lvh-grid i{display:block;height:11px;border-radius:2px;background:rgba(138,94,48,var(--a));}
.lvh-hr{text-align:center;}
.lv-signal{margin-top:10px;display:flex;gap:8px;align-items:flex-start;background:var(--sand);border-radius:8px;padding:7px 10px;font-size:11.5px;}
.lv-signal i{flex:none;width:10px;height:10px;margin-top:3px;border-radius:50%;background:#3F7350;}
.lv-signal.warn i{border-radius:2px;transform:rotate(45deg);background:#A8700F;}
/* Control: P&L and cash */
.lvp-table{width:100%;border-collapse:collapse;font-size:10.5px;}
.lvp-table th,.lvp-table td{padding:3.5px 0 3.5px 6px;text-align:right;border-bottom:1px solid var(--line);white-space:nowrap;}
.lvp-table th[scope="row"]{text-align:left;font-weight:500;padding-left:0;white-space:normal;}
.lvp-table thead th{font-size:9px;color:var(--ink-soft);font-weight:600;}
.lvp-table .lv-tot{font-weight:700;}
.lvp-table .lv-tot th{font-weight:700;}
.lvp-table .neg{color:#A63F2E;}
.lvp-table .pos{color:#3F7350;}
.lvc-svg{display:block;width:100%;height:auto;}
.lvc-svg .g{stroke:var(--line);stroke-width:1;}
.lvc-line{fill:none;stroke:var(--gold-deep);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0;}
.lvc-low{fill:none;stroke:var(--ink-soft);stroke-width:1.4;stroke-dasharray:3 3;opacity:0.55;}
.lvc-pt circle{fill:#A63F2E;}
.lvc-pt text{font-size:10px;font-weight:700;fill:var(--ink);text-anchor:end;}
.lvc-ax{font-size:9px;fill:var(--ink-soft);}
/* Group: ranking that sorts itself, wage cost per location */
.lvg-headrow,.lvg-row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,0.7fr) minmax(0,0.7fr) 4.2rem;gap:6px;align-items:center;font-size:11px;}
.lvg-headrow{font-size:9px;color:var(--ink-soft);font-weight:600;margin-bottom:2px;}
.lvg-rows{position:relative;height:124px;}
.lvg-row{position:absolute;left:0;right:0;top:0;height:31px;border-top:1px solid var(--line);transform:translateY(calc(var(--to) * 100%));}
.lvg-n{font-weight:600;min-width:0;white-space:nowrap;}
.lvg-r,.lvg-c{text-align:right;}
.lvg-flag{font-style:normal;font-size:8px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;color:#8E3B16;background:#F6DFD3;border-radius:99px;padding:1px 6px;margin-left:5px;display:inline-block;}
.lv-group .chip-st{font-size:9px;padding:2px 6px;}
.lvb{position:relative;display:grid;gap:9px;padding:4px 0 2px;}
.lvb-row{display:grid;grid-template-columns:5.6rem minmax(0,1fr) 2.6rem;gap:6px;align-items:center;font-size:10.5px;}
.lvb-row b{text-align:right;font-weight:600;}
.lvb-track{position:relative;height:8px;background:var(--sand);border-radius:99px;overflow:hidden;}
.lvb-track i{display:block;height:100%;width:var(--w);background:var(--gold);border-radius:99px;transform-origin:left;}
.lvb-avg{position:absolute;top:0;bottom:0;left:calc(5.6rem + 6px + (100% - 5.6rem - 2.6rem - 12px) * 0.76);border-left:1.5px dashed var(--ink);opacity:0.6;}
/* The soft "someone is looking" highlight */
.lv-cursor{position:absolute;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid rgba(138,94,48,0.5);background:rgba(217,168,104,0.16);pointer-events:none;opacity:0;z-index:4;transition:transform 0.9s var(--ease-out),opacity 0.4s ease;}
.lv-armed .lv-cursor.on{opacity:1;}

/* Start state, only while armed */
.lv [data-lv]{transition:opacity 0.5s ease,transform 0.6s var(--ease-out);}
.lv .lv-kpi:nth-child(2){transition-delay:0.08s;}
.lv .lv-kpi:nth-child(3){transition-delay:0.16s;}
.lv .lv-kpi:nth-child(4){transition-delay:0.24s;}
.lv-armed .lv-kpi:not(.lv-on),.lv-armed .lv-signal:not(.lv-on),.lv-armed .lvp-table tr[data-lv]:not(.lv-on),.lv-armed .lvg-flag:not(.lv-on),.lv-armed .lvc-pt:not(.lv-on){opacity:0;transform:translateY(6px);}
.lvp-table tr[data-lv]{transition-delay:calc(var(--i) * 0.12s);}
.lvw-bar{transition:transform 0.9s var(--ease-out) calc(var(--i) * 0.07s);}
.lvw-bud{transition:opacity 0.4s ease calc(0.5s + var(--i) * 0.07s);}
.lv-armed .lvw:not(.lv-on) .lvw-bar{transform:scaleY(0.04);}
.lv-armed .lvw:not(.lv-on) .lvw-bud{opacity:0;}
.lvh-grid i{transition:opacity 0.35s ease calc(var(--i) * 0.06s);}
.lv-armed .lvh:not(.lv-on) .lvh-grid i{opacity:0;}
.lv .lvc-line{transition:stroke-dashoffset 1.8s var(--ease-out);}
.lv-armed .lvc-line:not(.lv-on){stroke-dashoffset:1;}
.lvg-row{transition:transform 0.9s var(--ease-out);}
.lv-armed .lvg-rows:not(.lv-on) .lvg-row{transform:translateY(calc(var(--from) * 100%));}
.lvb-track i{transition:transform 0.9s var(--ease-out) calc(var(--i) * 0.1s);}
.lv-armed .lvb:not(.lv-on) .lvb-track i{transform:scaleX(0.04);}
.lv-reset,.lv-reset *{transition:none !important;}

/* Phones: simplify, never shrink to unreadable */
@media (max-width:640px){
  .lv{padding:12px 12px 10px;}
  .lv-kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px;}
  .lv-cols{grid-template-columns:minmax(0,1fr);}
  .lv-pulse .lv-wide{display:none;}
  .lvp-table .lv-bud{display:none;}
  .lv-group .lv-card + .lv-card{display:none;}
  .lvg-headrow,.lvg-row{grid-template-columns:minmax(0,1.8fr) minmax(0,0.7fr) 4.2rem;}
  .lvg-c,.lvg-headrow span:nth-child(3){display:none;}
}

/* ---------- Phone in "One number per question" ---------- */
.qs-phone{max-width:290px;margin:0 auto;width:100%;}
.lvp-body{position:relative;background:#fff;border:8px solid #3A3835;border-radius:32px;padding:24px 12px 0;overflow:hidden;box-shadow:0 22px 50px rgba(43,42,40,0.16);}
.lvp-notch{position:absolute;top:7px;left:50%;width:56px;height:6px;margin-left:-28px;border-radius:99px;background:#3A3835;}
.lvp-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:12px;margin-bottom:10px;}
.lvp-bar .tl-sample{margin-left:0;}
.lvp-screen{position:relative;}
.lvp-armed .lvp-screen{height:318px;overflow:hidden;}
.lvp-scroll{transition:transform 0.8s var(--ease-out);}
.lvp-tile{display:block;background:var(--sand);border-radius:12px;padding:10px 12px;margin-bottom:8px;border:2px solid transparent;transition:opacity 0.35s ease,border-color 0.35s ease;font-variant-numeric:tabular-nums;}
.lvp-armed .lvp-tile{opacity:0.5;}
.lvp-armed .lvp-tile.on{opacity:1;border-color:var(--gold);}
.lvp-q{display:block;font-size:9.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:3px;}
.lvp-l{display:block;font-size:11px;color:var(--ink-soft);}
.lvp .lv-num{font-size:24px;}
.lvp-s{display:block;font-size:11px;color:var(--ink-soft);margin-top:2px;}
.lvp-s b{color:#3F7350;}
.lvp-cmp{display:block;margin:7px 0 3px;}
.lvp-track{display:block;position:relative;height:10px;background:#fff;border-radius:99px;}
.lvp-act{position:absolute;left:0;top:0;bottom:0;width:var(--w);background:var(--gold);border-radius:99px;transform-origin:left;transition:transform 0.9s var(--ease-out) 0.15s;}
.lvp-wage{background:#B0561F;}
.lvp-budm{position:absolute;top:-4px;bottom:-4px;left:var(--b);border-left:2px solid var(--ink);}
.lvp-armed .lvp-tile:not(.on) .lvp-act{transform:scaleX(0.05);}
.lvf{display:flex;gap:4px;margin-top:6px;}
.lvf-col{flex:1;display:flex;flex-direction:column;align-items:center;min-width:0;}
.lvf-col i{display:block;width:100%;height:calc(var(--h) * 0.6);min-height:3px;background:var(--gold);border-radius:2px 2px 0 0;transform-origin:bottom;margin-top:auto;transition:transform 0.7s var(--ease-out) calc(var(--i) * 0.09s);}
.lvf{height:86px;align-items:stretch;}
.lvf-col em{font-style:normal;font-size:9px;color:var(--ink-soft);margin-top:3px;}
.lvf-col small{font-size:8px;color:var(--ink-soft);}
.lvp-armed .lvp-tile:not(.on) .lvf-col i{transform:scaleY(0.05);}
.lvp-foot{margin:0 -12px;}
.qs-q{all:unset;cursor:pointer;display:block;font:inherit;color:inherit;border-radius:6px;}
.qs-q:focus-visible{outline:3px solid var(--gold-deep);outline-offset:4px;}
.qs-q[aria-pressed="true"]{color:var(--gold-deep);}
.qs-list li:has(.qs-q[aria-pressed="true"])::before{background:var(--gold);}
.qs-list li::before{transition:background-color 0.3s ease;}
@media (prefers-reduced-motion:reduce){ .lv *,.lvp *{transition:none !important;} }

/* ---------- #views: realistic device proportions, devices at the top of the stage ---------- */
html.tl-js .vw .vw-frame{justify-content:flex-start;}
.vw-holder{padding-top:0;place-items:start center;}
html.tl-js .vw-frames{margin-top:1.5rem;}
.vw-laptop-d{width:min(600px,100%);}
.vw-laptop-d .vw-screen{aspect-ratio:16/10;display:flex;flex-direction:column;border-radius:12px 12px 0 0;}
.vw-laptop-d .vw-bars{flex:1;min-height:60px;}
.vw-base{position:relative;height:14px;margin:0 -7%;background:linear-gradient(#55524D,#3A3835);border-radius:0 0 14px 14px;}
.vw-base::before{content:"";position:absolute;left:50%;top:0;width:18%;height:5px;margin-left:-9%;background:#2B2A28;border-radius:0 0 6px 6px;}
.vw-wall-d{width:min(720px,100%);}
.vw-wall-d .vw-screen{aspect-ratio:16/9;}
.vw-phone-d{width:200px;}
.vw-a4-d{width:min(290px,100%);}
.vw-phone-d .tl-sample{font-size:0.58rem;padding:1px 6px;}

/* ---------- Phones (09-10): text in dashboards at least 11 px, tap targets at least 44 px ---------- */
@media (max-width:640px){
  .wm,.vw-a4-d .wm.wm-foot,.vw-mail-d .wm.wm-foot{font-size:11px;}
  .tl-days,.tl-tide span{font-size:11px;}
  .lvp-q,.lvf-col em,.lvf-col small{font-size:11px;}
  .lv-mark{width:30px;height:30px;font-size:11px;}
  .lv-head small,.lv-title small,.lv-ct small,.lv-l,.lv-d,.lvw-col span,.lvp-table,.lvp-table thead th,.lvg-headrow,.lv-group .chip-st,.lvg-flag,.lvb-row{font-size:11px;}
  .lvw{padding-bottom:32px;}
  .lvg-flag{padding:1px 5px;}
  .tt-chg,.vw-stack span,.vw .tl-sample,.vw-phone-d .tl-sample,.vw-name small,.vw-device .vw-a4sub,.vw-table thead th,.vw-device .vw-a4lbl,.vw-a4-d .vw-foot,.tt-logo-yours{font-size:11px;}
  .motion-toggle{min-height:44px;}
  .own-src span{font-size:0.875rem;}
  .qs-q{min-height:44px;display:flex;align-items:center;}
}