/* Generated from mockups/canvas/project/SiteHome.dc.html by site/tools/css-from-boards.js. Do not edit: change the board, then run the tool. */
/* ds-tokens:start: Go Edit design system tokens (docs/DESIGN-SYSTEM.md, R-13). Light on :root; dark under the account-menu switch, or [data-theme="dark"] in the real app. Other boards adopt this block as-is. */
:root{
  /* surfaces */
  --ui-page:#F4F3F1;--ui-panel:#FFFFFF;--ui-raised:#FFFFFF;--ui-sunken:#F1EFEC;--ui-sunken-hover:#E9E6E2;--ui-hover:#F6F5F3;--ui-selected:#F1EFEC;--ui-scrim:rgba(18,16,25,.36);
  /* text */
  --ui-ink:#121019;--ui-ink-2:#3B3746;--ui-muted:#6A6675;--ui-faint:#858190;
  /* lines */
  --ui-line:rgba(18,16,25,.08);--ui-line-strong:rgba(18,16,25,.14);--ui-line-control:#858190;
  /* main button (D-33): the same in both themes */
  --ui-accent:#D63A27;--ui-accent-hover:#C2321F;--ui-accent-pressed:#AE2C1B;--ui-on-accent:#FFFFFF;
  /* selected and "on" (switches, chips, toggle buttons) */
  --ui-on:#121019;--ui-on-fg:#FFFFFF;--ui-knob:#FFFFFF;
  /* links */
  --ui-link:#B4361A;--ui-link-hover:#8A2A12;
  /* shared parts (teal, nothing else) */
  --ui-shared:#0E7C86;--ui-shared-text:#0B6E77;--ui-shared-bg:#E3F2F3;
  /* status: text on its own background */
  --ui-ok:#166534;--ui-ok-bg:#E6F4EC;--ui-warn:#9A3412;--ui-warn-bg:#FCEBDD;--ui-bad:#B42318;--ui-bad-bg:#FDE7E4;--ui-bad-solid:#B42318;--ui-bad-solid-hover:#9A1D14;
  --ui-info:#1D4ED8;--ui-info-bg:#E8EEFB;--ui-ai:#5B3FD0;--ui-ai-bg:#EFEBFD;
  /* focus: two-tone, so it shows on any colour */
  --ui-focus:#121019;--ui-focus-gap:#FFFFFF;
  /* inverse layers: toast, tooltip, Editor toolbar */
  --ui-inverse:#121019;--ui-inverse-fg:#FFFFFF;--ui-inverse-dim:rgba(255,255,255,.5);--ui-inverse-line:rgba(255,255,255,.28);--ui-inverse-hover:rgba(255,255,255,.16);
  /* Editor canvas (on the customer's site, the same in both themes) */
  --ui-ring:#121019;--ui-ring-2:#FFFFFF;--ui-drop:#D63A27;--ui-drop-fg:#FFFFFF;
  /* type */
  --ui-font:"Plus Jakarta Sans",system-ui,sans-serif;--ui-font-head:"Geist","Plus Jakarta Sans",system-ui,sans-serif;--ui-font-code:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --ui-fs-caption:12px;--ui-fs-label:13px;--ui-fs-body:14px;--ui-fs-title:16px;--ui-fs-heading:18px;--ui-fs-page:24px;--ui-fs-display:30px;
  /* space, size, radius */
  --ui-space-1:4px;--ui-space-2:8px;--ui-space-3:12px;--ui-space-4:16px;--ui-space-5:20px;--ui-space-6:24px;--ui-space-8:32px;--ui-space-12:48px;
  --ui-control:40px;--ui-control-sm:32px;--ui-control-touch:44px;
  --ui-gutter:18px;--ui-canvas-gutter:24px;--ui-rail:92px;--ui-topbar:64px;--ui-settings:320px;--ui-drawer:440px;--ui-dialog:460px;--ui-dialog-wide:560px;--ui-toolbar:30px;--ui-toolbar-touch:48px;
  --ui-radius-xs:6px;--ui-radius-sm:8px;--ui-radius-md:12px;--ui-radius-lg:16px;--ui-radius-pill:99px;
  /* elevation: one shadow, only for things that float */
  --ui-shadow-float:0 0 0 1px rgba(18,16,25,.08),0 8px 24px rgba(18,16,25,.12);
  /* motion */
  --ui-fast:120ms;--ui-base:150ms;--ui-slow:250ms;--ui-ease:cubic-bezier(.2,0,0,1);
  /* layers */
  --ui-z-canvas:0;--ui-z-panel:10;--ui-z-toolbar:20;--ui-z-topbar:30;--ui-z-menu:40;--ui-z-drawer:50;--ui-z-dialog:60;--ui-z-toast:70;--ui-z-tooltip:80;
}
body:has(#ge-theme:checked),[data-theme="dark"]{
  --ui-page:#121115;--ui-panel:#1A191E;--ui-raised:#1F1E24;--ui-sunken:#16151A;--ui-sunken-hover:#2A2930;--ui-hover:#26252C;--ui-selected:#2A2930;--ui-scrim:rgba(0,0,0,.56);
  --ui-ink:#F5F3F8;--ui-ink-2:#C9C6D3;--ui-muted:#9C99A8;--ui-faint:#6E6B7B;
  --ui-line:rgba(255,255,255,.08);--ui-line-strong:rgba(255,255,255,.14);--ui-line-control:#7A7787;
  --ui-on:#F5F3F8;--ui-on-fg:#121115;--ui-knob:#F5F3F8;
  --ui-link:#FF8A5B;--ui-link-hover:#FFB08F;
  --ui-shared:#2FA7B1;--ui-shared-text:#2FA7B1;--ui-shared-bg:#132D2F;
  --ui-ok:#5FD39A;--ui-ok-bg:#16291F;--ui-warn:#FFB27A;--ui-warn-bg:#33231A;--ui-bad:#FF8A80;--ui-bad-bg:#3A1D1D;
  --ui-info:#8DB4FF;--ui-info-bg:#1B2540;--ui-ai:#B9A6FF;--ui-ai-bg:#272040;
  --ui-focus:#F5F3F8;--ui-focus-gap:#121115;
  --ui-inverse:#F5F3F8;--ui-inverse-fg:#121115;--ui-inverse-dim:rgba(18,17,21,.45);--ui-inverse-line:rgba(18,17,21,.25);--ui-inverse-hover:rgba(18,17,21,.1);
  --ui-shadow-float:0 0 0 1px rgba(255,255,255,.12),0 8px 24px rgba(0,0,0,.45);
}
/* ds-tokens:end */
/* ds-components: the shared components every board uses, from the DesignSystem board (docs/DESIGN-SYSTEM.md §8), on the tokens.
   Loaded after each board's own CSS. Only components whose class means the same thing on every board are here; a board keeps its own
   (tokenised) layout for rows, menus, dialogs, drawers, toasts and the Editor toolbar, whose class names differ between boards. */
/* button */
.btn{--edge:inset 0 0 0 1px var(--ui-line-strong);display:inline-flex;align-items:center;justify-content:center;gap:8px;height:var(--ui-control);min-height:var(--ui-control);padding:0 18px;border:0;border-radius:var(--ui-radius-pill);background:var(--ui-raised);color:var(--ui-ink);font:600 var(--ui-fs-body)/1 var(--ui-font);white-space:nowrap;text-decoration:none;box-shadow:var(--edge);transition:background var(--ui-fast) var(--ui-ease),color var(--ui-fast) var(--ui-ease);flex:none}
.btn svg{width:18px;height:18px}
.btn:hover,.btn.is-hover{background:var(--ui-hover);color:var(--ui-ink)}
.btn:active,.btn.is-pressed{background:var(--ui-sunken)}
.btn.pri{--edge:0 0 #0000;background:var(--ui-accent);color:var(--ui-on-accent)}
.btn.pri:hover,.btn.pri.is-hover{background:var(--ui-accent-hover);color:var(--ui-on-accent)}
.btn.pri:active,.btn.pri.is-pressed{background:var(--ui-accent-pressed)}
.btn.quiet{--edge:0 0 #0000;background:transparent;color:var(--ui-ink-2)}
.btn.quiet:hover{background:var(--ui-hover);color:var(--ui-ink)}
.btn.danger{color:var(--ui-bad)}
.btn.danger:hover{color:var(--ui-bad)}
.btn.danger-solid{--edge:0 0 #0000;background:var(--ui-bad-solid);color:#fff}
.btn.danger-solid:hover{background:var(--ui-bad-solid-hover);color:#fff}
.btn[aria-pressed="true"]{--edge:0 0 #0000;background:var(--ui-on);color:var(--ui-on-fg)}
.btn.sm{height:var(--ui-control-sm);min-height:var(--ui-control-sm);padding:0 14px;font-size:var(--ui-fs-label)}
.btn.sm svg{width:16px;height:16px}
.btn[aria-disabled="true"],.btn.is-disabled,.btn.pri[aria-disabled="true"],.btn.pri.is-disabled{--edge:0 0 #0000;background:var(--ui-sunken);color:var(--ui-faint);cursor:not-allowed}
.btn[aria-busy="true"]{cursor:progress}
.spin{animation:ui-spin 1s linear infinite}
@keyframes ui-spin{to{transform:rotate(360deg)}}
/* round icon button: always has a tooltip and an aria-label */
.circ,.hcirc{--edge:inset 0 0 0 1px var(--ui-line-strong);display:inline-grid;place-items:center;width:var(--ui-control);height:var(--ui-control);padding:0;border:0;border-radius:var(--ui-radius-pill);background:var(--ui-raised);color:var(--ui-ink);box-shadow:var(--edge);flex:none;transition:background var(--ui-fast) var(--ui-ease)}
.circ svg,.hcirc svg{width:18px;height:18px}
.circ:hover,.hcirc:hover{background:var(--ui-hover)}
.circ.sm{width:var(--ui-control-sm);height:var(--ui-control-sm);min-height:var(--ui-control-sm)}
.circ.sm svg{width:16px;height:16px}
.circ.quiet{--edge:0 0 #0000;background:transparent}
.circ.quiet:hover{background:var(--ui-hover)}
.circ[aria-pressed="true"]{--edge:0 0 #0000;background:var(--ui-on);color:var(--ui-on-fg)}
.circ[aria-disabled="true"]{--edge:0 0 #0000;background:var(--ui-sunken);color:var(--ui-faint);cursor:not-allowed}
/* tooltip: shows on hover and on keyboard focus */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:var(--ui-z-tooltip);padding:6px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-inverse);color:var(--ui-inverse-fg);font:600 var(--ui-fs-label)/18px var(--ui-font);white-space:nowrap;box-shadow:var(--ui-shadow-float);pointer-events:none;text-align:left}
[data-tip].tip-b:hover::after,[data-tip].tip-b:focus-visible::after{bottom:auto;top:calc(100% + 8px)}
/* field (the look; each board keeps its own widths) */
.fld{--edge:inset 0 0 0 1px var(--ui-line-control);height:var(--ui-control);padding:0 12px;border:0;border-radius:var(--ui-radius-md);background:var(--ui-panel);color:var(--ui-ink);font:400 var(--ui-fs-body)/20px var(--ui-font);box-shadow:var(--edge);transition:box-shadow var(--ui-fast) var(--ui-ease)}
.fld::placeholder{color:var(--ui-muted)}
.fld:hover{--edge:inset 0 0 0 1px var(--ui-ink-2)}
textarea.fld{height:96px;padding:10px 12px;resize:vertical;display:block}
.fld[aria-invalid="true"]{--edge:inset 0 0 0 2px var(--ui-bad)}
.fld:disabled{--edge:inset 0 0 0 1px var(--ui-line-strong);background:var(--ui-sunken);color:var(--ui-faint);cursor:not-allowed}
.fld[readonly]{--edge:0 0 #0000;background:var(--ui-sunken)}
/* switch: always with its label and the word On / Off */
.switch{position:relative;display:inline-block;width:44px;height:24px;padding:0;border:0;border-radius:var(--ui-radius-pill);background:var(--ui-line-control);flex:none;transition:background var(--ui-base) var(--ui-ease)}
.switch i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:var(--ui-radius-pill);background:var(--ui-knob);transition:transform var(--ui-base) var(--ui-ease)}
.switch[aria-checked="true"]{background:var(--ui-on)}
.switch[aria-checked="true"] i{transform:translateX(20px);background:var(--ui-on-fg)}
.switch[aria-disabled="true"]{background:var(--ui-sunken);box-shadow:inset 0 0 0 1px var(--ui-line-strong);cursor:not-allowed}
.switch[aria-disabled="true"] i{background:var(--ui-faint)}
.sw-word{font:600 var(--ui-fs-label)/1 var(--ui-font);color:var(--ui-ink-2);min-width:24px}
/* segmented control and tabs: the same track; tabs switch content, segments choose a value */
.seg,.tabs{display:inline-flex;align-items:center;gap:2px;height:var(--ui-control);padding:4px;border-radius:var(--ui-radius-pill);background:var(--ui-sunken);flex:none}
.seg button,.tabs button,.seg a,.tabs a{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 14px;border:0;border-radius:var(--ui-radius-pill);background:none;color:var(--ui-ink-2);font:600 var(--ui-fs-label)/1 var(--ui-font);white-space:nowrap}
.seg button svg,.tabs button svg,.seg a svg,.tabs a svg{width:16px;height:16px}
.seg button:hover,.tabs button:hover,.seg a:hover,.tabs a:hover{background:var(--ui-sunken-hover);color:var(--ui-ink)}
.seg button[aria-pressed="true"],.seg a[aria-pressed="true"],.seg a[aria-current="page"],.tabs button[aria-selected="true"],.tabs a[aria-selected="true"],.tabs [aria-current="page"],.tabs button[aria-pressed="true"]{background:var(--ui-raised);color:var(--ui-ink);font-weight:700;box-shadow:inset 0 0 0 1px var(--ui-line-control)}
/* filter chips */
.chip{display:inline-flex;align-items:center;gap:6px;height:var(--ui-control-sm);padding:0 12px;border:0;border-radius:var(--ui-radius-pill);background:var(--ui-sunken);color:var(--ui-ink-2);font:600 var(--ui-fs-label)/1 var(--ui-font);white-space:nowrap;text-decoration:none;flex:none}
.chip svg{width:16px;height:16px}
.chip:hover{background:var(--ui-sunken-hover);color:var(--ui-ink)}
.chip[aria-pressed="true"]{background:var(--ui-on);color:var(--ui-on-fg)}
.chip .n{font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:8px}
/* pill (status, not a control) and count badge */
.pill{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--ui-radius-pill);font:600 var(--ui-fs-caption)/1 var(--ui-font);white-space:nowrap;flex:none}
.pill svg{width:14px;height:14px}
.pill .dot{width:8px;height:8px;border-radius:var(--ui-radius-pill);background:currentColor}
.pill.ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
.pill.warn{background:var(--ui-warn-bg);color:var(--ui-warn)}
.pill.bad{background:var(--ui-bad-bg);color:var(--ui-bad)}
.pill.info{background:var(--ui-info-bg);color:var(--ui-info)}
.pill.ai{background:var(--ui-ai-bg);color:var(--ui-ai)}
.pill.n{background:var(--ui-sunken);color:var(--ui-ink-2)}
.pill.shared{background:var(--ui-shared-bg);color:var(--ui-shared-text)}
.badge{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--ui-radius-pill);background:var(--ui-accent);color:var(--ui-on-accent);font:700 var(--ui-fs-caption)/1 var(--ui-font)}
.toast .btn{--edge:inset 0 0 0 1px var(--ui-inverse-line);height:32px;min-height:32px;padding:0 14px;background:transparent;color:var(--ui-inverse-fg);font-size:var(--ui-fs-label)}
.toast .btn:hover{background:var(--ui-inverse-hover);color:var(--ui-inverse-fg)}
.toast .circ,.toast .hcirc{--edge:0 0 #0000;background:transparent;color:var(--ui-inverse-fg)}
.toast .circ:hover,.toast .hcirc:hover{background:var(--ui-inverse-hover)}
/* focus: the two-tone ring keeps a component's own edge (DESIGN-SYSTEM §8.18) */
:is(.btn,.circ,.hcirc,.fld,.chip,.switch,.seg button,.tabs button):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ui-focus-gap),var(--edge,0 0 #0000)}
/* ds-shared:start: one definition and one markup pattern each (docs/DESIGN-SYSTEM.md §8): the switch line, menu, drawer, dialog, toast,
   list row, inline alert, empty state, skeleton, panel group and tooltip, and §8.22–§8.33 (colour swatch, number field, data table, choice
   tile, steps, text action, avatar, breadcrumb, stat, file, date and time) and §8.36–§8.37 (repeater row, add-on tile). It applies only inside a root that carries data-ds: boards that
   still give these class names their own meaning are untouched until the adoption pass (§9) deletes their own CSS and adds data-ds.
   :where() keeps a plain class's specificity, so removing the scope later changes nothing. The DesignSystem board carries this block word
   for word. */
/* switch line (§8.6): the label, then the switch, then On or Off; one 40 px line, and the whole line is the target */
:where([data-ds]) .sw-row{display:flex;align-items:center;gap:12px;min-height:var(--ui-control);cursor:pointer}
:where([data-ds]) .sw-row .sw-l{display:flex;flex-direction:column;flex:1;min-width:0}
:where([data-ds]) .sw-row .sw-l b{font:600 var(--ui-fs-body)/20px var(--ui-font);color:var(--ui-ink)}
:where([data-ds]) .sw-row .sw-l .help{font:400 var(--ui-fs-label)/18px var(--ui-font);color:var(--ui-muted)}
:where([data-ds]) .sw-row .sw-word{min-width:28px}
:where([data-ds]) .sw-row:has(.switch[aria-disabled="true"]){cursor:not-allowed}
/* menu (§8.13): a disclosure (button with aria-expanded + a list of buttons and links), floats 6 px under its button */
:where([data-ds]) .menu-at{position:relative;display:inline-flex}
:where([data-ds]) .menu{position:absolute;top:calc(100% + 6px);left:0;z-index:var(--ui-z-menu);min-width:200px;padding:6px;border-radius:var(--ui-radius-md);background:var(--ui-raised);box-shadow:var(--ui-shadow-float);display:flex;flex-direction:column;animation:ui-fade var(--ui-base) var(--ui-ease)}
:where([data-ds]) .menu.end{left:auto;right:0}
:where([data-ds]) .menu :where(button,a,label):not(.switch){display:flex;align-items:center;justify-content:flex-start;gap:10px;height:var(--ui-control);padding:0 12px;border:0;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-ink);font:500 var(--ui-fs-body)/1 var(--ui-font);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer}
:where([data-ds]) .menu :where(button,a,label):not(.switch) svg{width:16px;height:16px;color:var(--ui-ink-2)}
:where([data-ds]) .menu :where(button,a,label):not(.switch):hover{background:var(--ui-hover);color:var(--ui-ink)}
:where([data-ds]) .menu .m-sep{height:1px;background:var(--ui-line);margin:6px 4px}
:where([data-ds]) .menu .m-sp{flex:1}
:where([data-ds]) .menu .m-bad,:where([data-ds]) .menu .m-bad svg{color:var(--ui-bad)}
:where([data-ds]) .menu .m-bad:hover{color:var(--ui-bad)}
:where([data-ds]) .menu [aria-disabled="true"],:where([data-ds]) .menu [aria-disabled="true"] svg{color:var(--ui-faint);cursor:not-allowed}
:where([data-ds]) .menu [aria-disabled="true"]:hover{background:none;color:var(--ui-faint)}
:where([data-ds]) .menu :is([aria-selected="true"],[aria-checked="true"]) svg{color:var(--ui-ink)}
@keyframes ui-fade{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* scrim, drawer (§8.14), dialog (§8.15), toast (§8.16): fixed to the window; inside a .stage (a preview frame on a board) they sit in the frame */
:where([data-ds]) .scrim{position:fixed;inset:0;z-index:var(--ui-z-drawer);border:0;padding:0;background:var(--ui-scrim);cursor:default;animation:ui-fadeonly var(--ui-slow) var(--ui-ease)}
:where([data-ds]) .scrim.over{z-index:calc(var(--ui-z-dialog) - 1)}
:where([data-ds]) .drawer{position:fixed;top:12px;right:12px;bottom:12px;z-index:calc(var(--ui-z-drawer) + 1);width:var(--ui-drawer);max-width:calc(100% - 24px);display:flex;flex-direction:column;background:var(--ui-panel);border-radius:var(--ui-radius-lg);box-shadow:var(--ui-shadow-float);animation:ui-slide var(--ui-slow) var(--ui-ease)}
:where([data-ds]) .drawer .d-head{display:flex;align-items:center;gap:12px;padding:12px 12px 12px 24px;border-bottom:1px solid var(--ui-line)}
:where([data-ds]) .drawer .d-head :is(h2,h3){flex:1;margin:0;font:600 var(--ui-fs-heading)/26px var(--ui-font-head);letter-spacing:-.01em}
:where([data-ds]) .drawer .d-body{flex:1;overflow:auto;padding:24px;display:flex;flex-direction:column;gap:16px}
:where([data-ds]) .drawer .d-foot{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:16px 24px;border-top:1px solid var(--ui-line)}
:where([data-ds]) .dialog{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:var(--ui-z-dialog);width:var(--ui-dialog);max-width:calc(100% - 32px);display:flex;flex-direction:column;gap:16px;padding:24px;border-radius:var(--ui-radius-lg);background:var(--ui-panel);box-shadow:var(--ui-shadow-float);animation:ui-fadeonly var(--ui-slow) var(--ui-ease)}
:where([data-ds]) .dialog.wide{width:var(--ui-dialog-wide)}
:where([data-ds]) .dialog>:is(h2,h3){margin:0;font:600 var(--ui-fs-heading)/26px var(--ui-font-head);letter-spacing:-.01em}
:where([data-ds]) .dialog .d-acts{display:flex;justify-content:flex-end;align-items:center;gap:8px;flex-wrap:wrap}
:where([data-ds]) .toast{position:fixed;left:50%;bottom:28px;transform:translateX(-50%);z-index:var(--ui-z-toast);display:flex;align-items:center;gap:10px;height:44px;padding:0 6px 0 16px;border-radius:var(--ui-radius-pill);background:var(--ui-inverse);color:var(--ui-inverse-fg);font:600 var(--ui-fs-body)/1 var(--ui-font);white-space:nowrap;box-shadow:var(--ui-shadow-float);animation:ui-rise var(--ui-slow) var(--ui-ease)}
:where([data-ds]) .toast>svg{width:18px;height:18px;flex:none}
:where([data-ds]) .stage{position:relative;overflow:hidden}
:where([data-ds]) .stage :is(.scrim,.drawer,.dialog,.toast){position:absolute}
:where([data-ds]) .stage .toast{bottom:20px}
@keyframes ui-fadeonly{from{opacity:0}to{opacity:1}}
@keyframes ui-slide{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes ui-rise{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translateX(-50%)}}
/* list row (§8.12) */
:where([data-ds]) .list{display:flex;flex-direction:column}
:where([data-ds]) .row{position:relative;display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px;border-radius:var(--ui-radius-md);transition:background var(--ui-fast) var(--ui-ease)}
:where([data-ds]) .row+.row::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--ui-line)}
:where([data-ds]) .row:hover,:where([data-ds]) .row.menu-open{background:var(--ui-hover)}
:where([data-ds]) .row.is-sel{background:var(--ui-selected);box-shadow:inset 3px 0 0 var(--ui-on)}
:where([data-ds]) .row.moving{background:var(--ui-raised);box-shadow:var(--ui-shadow-float);z-index:2}
:where([data-ds]) .row .r-name{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 6px;border:0;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-ink);font:600 var(--ui-fs-body)/1 var(--ui-font);text-align:left;justify-content:flex-start}
:where([data-ds]) .row.is-sel .r-name{font-weight:700}
:where([data-ds]) .row .r-meta{flex:1;min-width:0;color:var(--ui-muted);font-size:var(--ui-fs-label)}
:where([data-ds]) .row .r-acts{display:flex;align-items:center;gap:6px;position:relative}
/* inline alert (§8.17) */
:where([data-ds]) .alert{display:flex;gap:12px;align-items:flex-start;padding:12px 16px;border-radius:var(--ui-radius-md);font:400 var(--ui-fs-body)/20px var(--ui-font)}
:where([data-ds]) .alert>svg{width:20px;height:20px;flex:none}
:where([data-ds]) .alert .a-body{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
:where([data-ds]) .alert .a-body b{font-weight:700}
:where([data-ds]) .alert .a-body span{color:var(--ui-ink)}
:where([data-ds]) .alert .a-acts{display:flex;gap:8px;margin-top:8px}
:where([data-ds]) .alert.ok{background:var(--ui-ok-bg);color:var(--ui-ok)}
:where([data-ds]) .alert.warn{background:var(--ui-warn-bg);color:var(--ui-warn)}
:where([data-ds]) .alert.bad{background:var(--ui-bad-bg);color:var(--ui-bad)}
:where([data-ds]) .alert.info{background:var(--ui-info-bg);color:var(--ui-info)}
:where([data-ds]) .alert.ai{background:var(--ui-ai-bg);color:var(--ui-ai)}
/* tooltip (§8.17): a real element, linked by aria-describedby; shows on hover and focus, stays while the pointer is on it, Esc hides it */
:where([data-ds]) .tip-at{position:relative;display:inline-flex}
:where([data-ds]) .tip{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:var(--ui-z-tooltip);padding:6px 10px;border-radius:var(--ui-radius-sm);background:var(--ui-inverse);color:var(--ui-inverse-fg);font:600 var(--ui-fs-label)/18px var(--ui-font);white-space:nowrap;box-shadow:var(--ui-shadow-float);visibility:hidden;opacity:0;transition:opacity var(--ui-fast) var(--ui-ease),visibility var(--ui-fast)}
:where([data-ds]) .tip::before{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
:where([data-ds]) .tip.b{bottom:auto;top:calc(100% + 8px)}
:where([data-ds]) .tip.b::before{top:auto;bottom:100%}
:where([data-ds]) .tip-at:is(:hover,:focus-within)>.tip{visibility:visible;opacity:1}
:where([data-ds]) .tip-at.tip-off>.tip{visibility:hidden;opacity:0}
/* empty state, skeleton, busy line, progress bar (§8.19) */
:where([data-ds]) .empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:32px 24px}
:where([data-ds]) .empty .e-ico{display:grid;place-items:center;width:56px;height:56px;margin-bottom:4px;border-radius:var(--ui-radius-pill);background:var(--ui-sunken);color:var(--ui-ink-2)}
:where([data-ds]) .empty .e-ico svg{width:24px;height:24px}
:where([data-ds]) .empty h3{margin:0;font:600 var(--ui-fs-title)/24px var(--ui-font)}
:where([data-ds]) .empty p{margin:0;max-width:360px;color:var(--ui-muted)}
:where([data-ds]) .empty .acts{display:flex;justify-content:center;gap:8px;margin-top:8px}
:where([data-ds]) .skel{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 12px}
:where([data-ds]) .skel i{display:block;height:12px;border-radius:var(--ui-radius-pill);background:var(--ui-sunken-hover);animation:ui-pulse 1.2s ease-in-out infinite}
:where([data-ds]) .skel .sk-pic{width:36px;height:36px;border-radius:var(--ui-radius-sm);flex:none}
:where([data-ds]) .skel .sk-lines{flex:1;display:flex;flex-direction:column;gap:8px}
@keyframes ui-pulse{50%{opacity:.45}}
:where([data-ds]) .busy-line{display:flex;align-items:center;gap:8px;padding:8px 12px;color:var(--ui-ink-2);font:600 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .busy-line svg{width:16px;height:16px}
:where([data-ds]) .progress{display:block;height:6px;border-radius:var(--ui-radius-pill);background:var(--ui-sunken);box-shadow:inset 0 0 0 1px var(--ui-line);overflow:hidden}
:where([data-ds]) .progress>i{display:block;width:0;height:100%;border-radius:inherit;background:var(--ui-on);transition:width var(--ui-slow) var(--ui-ease)}
/* panel group / accordion (§8.26) */
:where([data-ds]) .acc:not(.pill){display:flex;flex-direction:column}
:where([data-ds]) .acc-s+.acc-s{border-top:1px solid var(--ui-line)}
:where([data-ds]) .acc-t{margin:0;font:inherit}
:where([data-ds]) .acc-h{display:flex;align-items:center;gap:8px;width:100%;height:var(--ui-control);padding:0 12px;border:0;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-ink);font:600 var(--ui-fs-label)/1 var(--ui-font);text-align:left;cursor:pointer}
:where([data-ds]) .acc-h:hover{background:var(--ui-hover)}
:where([data-ds]) .acc-h .n{color:var(--ui-muted);font-weight:600}
:where([data-ds]) .acc-h .chev{width:16px;height:16px;margin-left:auto;color:var(--ui-ink-2);transition:transform var(--ui-base) var(--ui-ease)}
:where([data-ds]) .acc-h[aria-expanded="false"] .chev{transform:rotate(-90deg)}
:where([data-ds]) .acc-b{display:flex;flex-direction:column;gap:12px;padding:4px 12px 16px}
/* colour swatch with Custom colour (§8.22) */
:where([data-ds]) .swl{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
:where([data-ds]) .sw{--edge:inset 0 0 0 1px var(--ui-line-control);display:inline-grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:var(--ui-radius-pill);background:var(--c,var(--ui-sunken));color:var(--ui-ink-2);box-shadow:var(--edge);cursor:pointer;flex:none}
:where([data-ds]) .sw svg{width:16px;height:16px}
:where([data-ds]) .sw[aria-pressed="true"]{--edge:inset 0 0 0 1px var(--ui-line-control),0 0 0 2px var(--ui-panel),0 0 0 4px var(--ui-on)}
:where([data-ds]) .cpk{display:flex;flex-direction:column;gap:12px;padding:12px;border-radius:var(--ui-radius-md);background:var(--ui-panel);box-shadow:inset 0 0 0 1px var(--ui-line-strong)}
:where([data-ds]) .cpk-row{display:flex;align-items:flex-end;gap:8px}
:where([data-ds]) .cpk-row .field{flex:1}
:where([data-ds]) .cpk input[type="color"]{width:40px;height:40px;padding:0;border:0;border-radius:var(--ui-radius-sm);background:none;cursor:pointer;flex:none}
/* number field (§8.23) */
:where([data-ds]) .numc{display:inline-flex;align-items:center;gap:8px}
:where([data-ds]) .numc .fld{width:84px;text-align:right;font-variant-numeric:tabular-nums}
:where([data-ds]) .numc .unit{color:var(--ui-ink-2);font:400 var(--ui-fs-body)/1 var(--ui-font)}
/* device-only note (§8.21) */
:where([data-ds]) .dev-note{display:inline-flex;align-items:center;gap:6px;min-height:24px;color:var(--ui-muted);font:600 var(--ui-fs-caption)/16px var(--ui-font)}
:where([data-ds]) .dev-note .dot{width:8px;height:8px;border-radius:var(--ui-radius-pill);background:var(--ui-on);flex:none}
:where([data-ds]) .dev-note.changed{color:var(--ui-ink-2)}
/* data table (§8.24) */
:where([data-ds]) .t-split{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}
:where([data-ds]) .t-wrap{min-width:0;overflow-x:auto}
:where([data-ds]) .t-side{display:flex;flex-direction:column;gap:12px;padding:16px 20px 20px}
:where([data-ds]) .table{width:100%;min-width:640px;border-collapse:separate;border-spacing:0;font:400 var(--ui-fs-body)/20px var(--ui-font);color:var(--ui-ink)}
:where([data-ds]) .table th{height:40px;padding:0 12px;border-bottom:1px solid var(--ui-line-strong);color:var(--ui-muted);font:600 var(--ui-fs-label)/18px var(--ui-font);text-align:left;white-space:nowrap;vertical-align:middle}
:where([data-ds]) .table td{height:48px;padding:0 12px;border-bottom:1px solid var(--ui-line);vertical-align:middle}
:where([data-ds]) .table tbody tr{position:relative}
:where([data-ds]) .table tbody tr:has(.t-open){cursor:pointer}
:where([data-ds]) .table tbody tr:hover td{background:var(--ui-hover)}
:where([data-ds]) .table tbody tr.is-sel td{background:var(--ui-selected)}
:where([data-ds]) .table tbody tr.is-sel td:first-child{box-shadow:inset 3px 0 0 var(--ui-on)}
:where([data-ds]) .table .t-open{padding:0;border:0;background:none;color:var(--ui-ink);font:600 var(--ui-fs-body)/20px var(--ui-font);text-align:left;text-decoration:none;cursor:pointer}
:where([data-ds]) .table .t-open::after{content:"";position:absolute;inset:0}
:where([data-ds]) .table tr.is-sel .t-open{font-weight:700}
:where([data-ds]) .table .t-open:focus-visible{outline:none;box-shadow:none}
:where([data-ds]) .table tbody tr:has(.t-open:focus-visible){outline:2px solid var(--ui-focus);outline-offset:-2px}
:where([data-ds]) .table .t-sub{display:block;color:var(--ui-muted);font-size:var(--ui-fs-label);line-height:18px}
:where([data-ds]) .table .num{text-align:right;font-variant-numeric:tabular-nums}
:where([data-ds]) .table .sort{display:inline-flex;align-items:center;gap:4px;height:32px;margin:0 -8px;padding:0 8px;border:0;border-radius:var(--ui-radius-sm);background:none;color:inherit;font:inherit;cursor:pointer}
:where([data-ds]) .table .sort:hover{background:var(--ui-hover);color:var(--ui-ink)}
:where([data-ds]) .table .sort svg{width:16px;height:16px}
:where([data-ds]) .table th:is([aria-sort="ascending"],[aria-sort="descending"]) .sort{color:var(--ui-ink)}
@media (max-width:1279px){:where([data-ds]) .t-split{grid-template-columns:minmax(0,1fr)}}
/* choice tile (§8.25): S 56 · M 96 · L 140 */
:where([data-ds]) .tiles{display:flex;flex-wrap:wrap;gap:8px}
:where([data-ds]) .tile{--edge:inset 0 0 0 1px var(--ui-line-strong);display:inline-flex;flex-direction:column;align-items:stretch;gap:6px;width:96px;padding:6px 6px 8px;border:0;border-radius:var(--ui-radius-md);background:var(--ui-panel);box-shadow:var(--edge);color:var(--ui-ink-2);font:600 var(--ui-fs-label)/18px var(--ui-font);text-align:center;cursor:pointer;transition:background var(--ui-fast) var(--ui-ease);flex:none}
:where([data-ds]) .tile .t-pic{display:grid;place-items:center;height:64px;border-radius:var(--ui-radius-sm);background:var(--ui-sunken);color:var(--ui-ink-2);overflow:hidden}
:where([data-ds]) .tile .t-sub{color:var(--ui-muted);font:400 var(--ui-fs-caption)/16px var(--ui-font)}
:where([data-ds]) .tile:hover{background:var(--ui-hover);color:var(--ui-ink)}
:where([data-ds]) .tile[aria-pressed="true"]{--edge:inset 0 0 0 2px var(--ui-on);color:var(--ui-ink);font-weight:700}
:where([data-ds]) .tile[aria-disabled="true"]{background:var(--ui-panel);color:var(--ui-faint);cursor:not-allowed}
:where([data-ds]) .tile[aria-disabled="true"] .t-pic{opacity:.5}
:where([data-ds]) .tile.s{width:56px;gap:4px;padding:4px 4px 6px;font-size:var(--ui-fs-caption);line-height:16px}
:where([data-ds]) .tile.s .t-pic{height:40px}
:where([data-ds]) .tile.l{width:140px}
:where([data-ds]) .tile.l .t-pic{height:96px}
/* steps (§8.27) */
:where([data-ds]) .steps{display:flex;flex-direction:column;gap:8px}
:where([data-ds]) .steps .s-cap{color:var(--ui-muted);font:600 var(--ui-fs-caption)/16px var(--ui-font)}
:where([data-ds]) .steps ol{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;padding:0;list-style:none}
:where([data-ds]) .steps li{display:inline-flex;align-items:center;gap:8px;min-height:24px;color:var(--ui-ink-2);font:500 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .steps .s-n{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:var(--ui-radius-pill);box-shadow:inset 0 0 0 1.5px var(--ui-line-control);font:700 var(--ui-fs-caption)/1 var(--ui-font);flex:none}
:where([data-ds]) .steps .s-n svg{width:14px;height:14px}
:where([data-ds]) .steps li.done .s-n{background:var(--ui-on);color:var(--ui-on-fg);box-shadow:none}
:where([data-ds]) .steps li[aria-current="step"]{color:var(--ui-ink);font-weight:700}
:where([data-ds]) .steps li[aria-current="step"] .s-n{box-shadow:inset 0 0 0 2px var(--ui-on)}
:where([data-ds]) .steps li button{min-height:24px;padding:0;border:0;background:none;color:inherit;font:inherit;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* text action (§8.28): never for buy, pay or delete */
:where([data-ds]) .act{display:inline-flex;align-items:center;gap:4px;min-height:var(--ui-control-sm);padding:0 2px;border:0;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-ink);font:600 var(--ui-fs-body)/20px var(--ui-font);text-decoration:none;white-space:nowrap;cursor:pointer}
:where([data-ds]) .act svg{width:16px;height:16px}
:where([data-ds]) .act:hover{color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px}
:where([data-ds]) .act.nav,:where([data-ds]) .act.nav:hover{color:var(--ui-link)}
:where([data-ds]) .act.nav:hover{color:var(--ui-link-hover)}
:where([data-ds]) .act[aria-disabled="true"],:where([data-ds]) .act[aria-disabled="true"]:hover{color:var(--ui-faint);text-decoration:none;cursor:not-allowed}
/* avatar (§8.29): 40 · 32 · 24 */
:where([data-ds]) .ava{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:0;border-radius:var(--ui-radius-pill);background:var(--ui-on);color:var(--ui-on-fg);font:700 var(--ui-fs-label)/1 var(--ui-font);overflow:hidden;flex:none;object-fit:cover;min-height:0}
:where([data-ds]) .ava.sm{width:32px;height:32px}
:where([data-ds]) .ava.xs{width:24px;height:24px;font-size:var(--ui-fs-caption)}
:where([data-ds]) .who{display:inline-flex;align-items:center;gap:8px}
/* breadcrumb (§8.30) */
:where([data-ds]) .crumbs ol{display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0;list-style:none}
:where([data-ds]) .crumbs li{display:inline-flex;align-items:center;color:var(--ui-muted);font:600 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .crumbs :is(a,button){display:inline-flex;align-items:center;min-height:24px;padding:0 4px;border:0;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-muted);font:inherit;text-decoration:none;cursor:pointer}
:where([data-ds]) .crumbs :is(a,button):hover{color:var(--ui-ink);text-decoration:underline;text-underline-offset:3px}
:where([data-ds]) .crumbs .sep{margin:0 4px;color:var(--ui-faint);font-weight:400}
:where([data-ds]) .crumbs [aria-current]{padding:0 4px;color:var(--ui-ink)}
/* stat (§8.31) */
:where([data-ds]) .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;align-items:start}
:where([data-ds]) .stat{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg);background:var(--ui-panel)}
:where([data-ds]) .stat .s-l{color:var(--ui-muted);font:400 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .stat .s-v{color:var(--ui-ink);font:600 var(--ui-fs-display)/36px var(--ui-font-head);letter-spacing:-.03em}
:where([data-ds]) .stat .s-d{color:var(--ui-ink-2);font:400 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .stat .bars{display:flex;align-items:flex-end;gap:6px;height:48px;margin-top:8px}
:where([data-ds]) .stat .bars i{flex:1;max-width:24px;min-height:2px;border-radius:2px 2px 0 0;background:var(--ui-on)}
/* file field (§8.32) */
:where([data-ds]) .file{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:128px;padding:20px;border:1.5px dashed var(--ui-line-control);border-radius:var(--ui-radius-md);background:var(--ui-panel);color:var(--ui-ink-2);text-align:center}
:where([data-ds]) .file>svg{width:24px;height:24px}
:where([data-ds]) .file b{color:var(--ui-ink);font:600 var(--ui-fs-body)/20px var(--ui-font)}
:where([data-ds]) .file.is-over{border-style:solid;border-color:var(--ui-on);background:var(--ui-hover)}
:where([data-ds]) .files{display:flex;flex-direction:column}
:where([data-ds]) .file-i{display:flex;align-items:center;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid var(--ui-line)}
:where([data-ds]) .file-i .f-pic{display:grid;place-items:center;width:40px;height:40px;border-radius:var(--ui-radius-sm);background:var(--ui-sunken);color:var(--ui-ink-2);flex:none}
:where([data-ds]) .file-i .f-pic svg{width:18px;height:18px}
:where([data-ds]) .file-i .f-txt{display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
:where([data-ds]) .file-i .f-txt b{font:600 var(--ui-fs-body)/20px var(--ui-font);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:where([data-ds]) .file-i .f-meta{display:flex;align-items:center;gap:6px;color:var(--ui-muted);font:400 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .file-i .f-meta svg{width:16px;height:16px}
:where([data-ds]) .file-i.is-bad .f-meta{color:var(--ui-bad);font-weight:600}
:where([data-ds]) .file-i.is-done .f-meta{color:var(--ui-ok);font-weight:600}
/* date and time field (§8.33) */
:where([data-ds]) .dt{display:flex;flex-wrap:wrap;align-items:flex-start;gap:12px}
:where([data-ds]) .dt .fld{width:auto;min-width:168px}
:where([data-ds]) .dt-out{color:var(--ui-ink-2);font:600 var(--ui-fs-label)/18px var(--ui-font)}
body:has(#ge-theme:checked) :where([data-ds]) .fld,:where([data-theme="dark"]) :where([data-ds]) .fld,:where([data-theme="dark"][data-ds]) .fld{color-scheme:dark}
/* repeater row (§8.36): 48 px rows of a list inside a settings panel (form fields, FAQ items, slides) */
:where([data-ds]) .rpt{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
:where([data-ds]) .rpt-list{display:flex;flex-direction:column;gap:8px;width:100%;margin:0;padding:0;list-style:none}
:where([data-ds]) .rpt-r{width:100%;border-radius:var(--ui-radius-md);background:var(--ui-panel);box-shadow:inset 0 0 0 1px var(--ui-line-strong)}
:where([data-ds]) .rpt-h{display:flex;align-items:center;gap:4px;min-height:48px;padding:8px 4px}
:where([data-ds]) .rpt-n{display:flex;flex-wrap:wrap;align-items:center;column-gap:8px;flex:1;min-width:0;min-height:var(--ui-control-sm);padding:6px 8px;border:0;border-radius:var(--ui-radius-sm);background:none;color:var(--ui-ink);font:600 var(--ui-fs-body)/20px var(--ui-font);text-align:left;cursor:pointer}
:where([data-ds]) .rpt-n:hover{background:var(--ui-hover)}
:where([data-ds]) .rpt-n .r-t{overflow-wrap:normal}
:where([data-ds]) .rpt-n .r-sub{margin-left:auto;color:var(--ui-muted);font:400 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .rpt-n .chev{width:16px;height:16px;color:var(--ui-ink-2);flex:none;transition:transform var(--ui-base) var(--ui-ease)}
:where([data-ds]) .rpt-n[aria-expanded="false"] .chev{transform:rotate(-90deg)}
:where([data-ds]) .rpt-b{display:flex;flex-direction:column;gap:12px;padding:12px;border-top:1px solid var(--ui-line)}
:where([data-ds]) .rpt-r.is-lifted{background:var(--ui-raised);box-shadow:inset 0 0 0 1px var(--ui-line-strong),var(--ui-shadow-float)}
:where([data-ds]) .rpt-r.is-over{box-shadow:inset 0 0 0 1px var(--ui-line-strong),inset 0 3px 0 var(--ui-drop)}
:where([data-ds]) .rpt-r.is-over.after{box-shadow:inset 0 0 0 1px var(--ui-line-strong),inset 0 -3px 0 var(--ui-drop)}
:where([data-ds]) .rpt-h .circ{flex:none}
/* add-on tile (§8.37): a choice tile with a price line; its pop-over says what it is and where to get it */
:where([data-ds]) .tile .t-price{color:var(--ui-muted);font:400 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .ao-pop{display:flex;flex-direction:column;gap:12px;max-width:400px;padding:16px;border-radius:var(--ui-radius-lg);background:var(--ui-raised);box-shadow:inset 0 0 0 1px var(--ui-line-strong),var(--ui-shadow-float)}
:where([data-ds]) .ao-pop h3{margin:0;font:600 var(--ui-fs-title)/24px var(--ui-font)}
:where([data-ds]) .ao-pop p{margin:0;color:var(--ui-ink-2)}
:where([data-ds]) .ao-pop .ao-shot{display:block;height:96px;border-radius:var(--ui-radius-sm);background:var(--ui-sunken);overflow:hidden}
:where([data-ds]) .ao-pop .ao-price{color:var(--ui-muted);font:400 var(--ui-fs-label)/18px var(--ui-font)}
:where([data-ds]) .ao-pop .acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
/* focus ring for the components that draw their edge with a shadow (§8.18) */
:where([data-ds]) :is(.tile,.sw,.acc-h,.act,.sort,.crumbs a,.crumbs button):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px;box-shadow:0 0 0 2px var(--ui-focus-gap),var(--edge,0 0 #0000)}
/* ds-shared:end */
/* goedit.co.uk on the design system (DESIGN-SYSTEM §11, A-11; rebuilt 28 Oct 2026, wave R2-b2).
   build.js writes, in this order: tools/ds-tokens.css (the --ui-* tokens), tools/ds-components.css (button, field, chip, switch, focus ring…),
   this file (the website's own layout and the ways §11 differs from the app), the cookie notice, then each page's own CSS.
   §11: page #FAF9F7; solid white panels and cards with the hairline; no shadows, glass or blur; the brand gradient only in the logo;
   type 12 · 14 · 16 · 18 · 24 · 32 · 48 · 64 (Geist 600 from 24 up); buttons 48 in the hero and page-end calls to action, 40 in the nav
   and on cards, no hover lift; one main button per page; links are --ui-link and underlined inside sentences; fields are the app's .fld. */
:root{--site-page:#FAF9F7;--ink:var(--ui-ink);--ink2:var(--ui-ink-2);--mut:var(--ui-muted);--line:var(--ui-line);--hair:var(--ui-line);--hair2:var(--ui-line-strong);--mono:var(--ui-font-code)}
body{margin:0;background:var(--site-page);color:var(--ui-ink);font:16px/1.6 var(--ui-font);-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--ui-font-head);font-weight:600;letter-spacing:-.03em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
.wrap{width:100%;max-width:1200px;margin:0 auto;padding:0 24px}
.muted{color:var(--ui-muted)}
:where(small){font-size:max(12px,.85em)}
/* links inside sentences, phone numbers and email addresses are underlined (DESIGN-SYSTEM §1) */
:where(p,.top .wrap>span:first-child) a:not(.btn):not(.more),a[href^="tel:"]:not(.btn),a[href^="mailto:"]:not(.btn){text-decoration:underline;text-underline-offset:3px}
a[href^="tel:"]{white-space:nowrap}
/* buttons (§8.1 from ds-components.css): 40 px in the nav and on cards, 48 px in the hero and page-end calls to action; sized to the label */
.btn.sm{height:var(--ui-control);min-height:var(--ui-control);padding:0 18px;font-size:var(--ui-fs-body)}
:is(.hero,.phero,.final) .ctas .btn{height:48px;min-height:48px;padding:0 24px;font-size:16px}
/* the hero's tag (not a status pill) */
.pill{height:32px;padding:0 14px;gap:8px;background:var(--ui-panel);box-shadow:inset 0 0 0 1px var(--ui-line);font-size:var(--ui-fs-body);color:var(--ui-ink-2)}
.pill i{width:7px;height:7px;border-radius:99px;background:var(--ui-ok)}
/* a label above a section title: sentence case, never uppercase or letter-spaced (§11) */
.eyebrow{font:600 14px/20px var(--ui-font);color:var(--ui-ink-2)}
/* panels and cards */
.glass{background:var(--ui-panel);border:1px solid var(--ui-line);border-radius:var(--ui-radius-lg)}
section{position:relative}
.page{position:relative;overflow:hidden;isolation:isolate}
/* top bar + nav */
.top{font-size:var(--ui-fs-body);color:var(--ui-muted);border-bottom:1px solid var(--ui-line)}
.top .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;height:40px}
.top a{color:var(--ui-ink);font-weight:600}
.top a:hover{color:var(--ui-link)}
.nav{position:sticky;top:0;z-index:50;background:var(--site-page);border-bottom:1px solid var(--ui-line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.nav .links{display:flex;gap:4px;margin:0 auto}
.nav .links a{height:36px;display:inline-flex;align-items:center;padding:0 14px;border-radius:99px;color:var(--ui-ink-2);font-weight:600;font-size:var(--ui-fs-body)}
.nav .links a:hover{color:var(--ui-ink);background:var(--ui-hover)}
.nav .links a[aria-current="page"]{color:var(--ui-ink);background:var(--ui-sunken)}
.nav .right{display:flex;align-items:center;gap:10px}
/* the header at every width (R3-UI-A11Y Must fix 1, DESIGN-SYSTEM §11): Menu below 1100 px, Log in never hidden, "Free design" below 400 px */
.nav .wrap{position:relative}
.nmenu{display:none}
.nmenu>summary{list-style:none;cursor:pointer}
.nmenu>summary::-webkit-details-marker{display:none}
.nmenu[open]>summary{background:var(--ui-sunken)}
.nm-pop{position:absolute;top:calc(100% + 4px);right:24px;z-index:60;width:min(320px,calc(100% - 32px));padding:8px;border-radius:var(--ui-radius-lg);background:var(--ui-raised);box-shadow:var(--ui-shadow-float)}
.nm-pop ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.nm-pop a{display:flex;align-items:center;min-height:40px;padding:8px 12px;border-radius:10px;color:var(--ui-ink);font-weight:600;font-size:var(--ui-fs-body);line-height:1.4}
.nm-pop a:hover{background:var(--ui-hover)}
.nm-pop a[aria-current="page"]{background:var(--ui-sunken)}
.nm-more{display:none!important;margin-top:4px!important;padding-top:4px!important;border-top:1px solid var(--ui-line)}
.nm-more a{font-weight:500;color:var(--ui-ink-2)}
.cta-s,.t-short{display:none}
@media (max-width:1100px){.nmenu{display:block;margin-left:auto}}
.top .t-links{display:flex;gap:20px}
/* the top strip stays one line: below 900 px (so below 768 px too) it shows the phone number only; its links move into Menu */
@media (max-width:900px){.top .t-links{display:none}.nm-more{display:flex!important}}
@media (max-width:560px){.top .t-long{display:none}.top .t-short{display:inline}}
@media (max-width:600px){.nav .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:6px 8px;height:auto;padding:8px 16px 10px}.nav .wrap>a:first-child{min-width:0}.nmenu{margin-left:0}.nav .right{grid-column:1/-1;justify-content:flex-end;gap:8px}.nm-pop{right:16px}}
@media (max-width:400px){.cta-l{display:none}.cta-s{display:inline}}
/* hero */
.hero{padding:96px 0 32px;text-align:center}
.hero h1{font-size:64px;line-height:1.04;max-width:860px;margin:22px auto 0}
.hero .lead,.phero .lead{font-size:18px;line-height:1.6;color:var(--ui-muted);max-width:640px}
.hero .lead{margin:24px auto 0}
.hero .ctas{display:flex;justify-content:center;gap:12px;margin-top:36px;flex-wrap:wrap}
.trust{display:flex;justify-content:center;gap:26px;margin-top:22px;color:var(--ui-muted);font-size:var(--ui-fs-body);flex-wrap:wrap}
.trust span{display:inline-flex;align-items:center;gap:8px}
.trust b{color:var(--ui-ok);font-weight:800}
.phero{padding:88px 0 8px;text-align:center}
.phero h1{font-size:48px;line-height:1.05;max-width:820px;margin:20px auto 0}
.phero .lead{margin:20px auto 0}
.phero .ctas{display:flex;justify-content:center;gap:12px;margin-top:30px;flex-wrap:wrap}
.shot{position:relative;max-width:1120px;margin:72px auto 0}
.ic{width:38px;height:38px;border-radius:var(--ui-radius-md);display:grid;place-items:center;background:var(--ui-sunken);flex:none}
.ic svg{stroke:var(--ui-ink)}
/* "Built for" band */
.band{margin-top:110px;border-top:1px solid var(--ui-line);border-bottom:1px solid var(--ui-line);background:var(--ui-panel)}
.band .wrap{display:flex;align-items:center;gap:28px;height:84px}
.band .lbl{flex:none;font:600 14px/20px var(--ui-font);color:var(--ui-muted)}
/* sections */
.shead{max-width:720px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:14px;align-items:center}
.shead h2{font-size:32px;line-height:1.15}
.shead p{font-size:18px;color:var(--ui-muted)}
.sec{padding:112px 0 0}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;align-items:center}
.split.rev>:first-child{order:2}
.split h2{font-size:32px;line-height:1.15;margin-top:14px}
.split .copy p{color:var(--ui-muted);font-size:18px;margin-top:16px}
.ticks{display:flex;flex-direction:column;gap:14px;margin-top:26px}
.ticks div{display:flex;gap:12px;align-items:flex-start;color:var(--ui-ink-2)}
.ticks div::before{content:"✓";flex:none;width:24px;height:24px;border-radius:99px;display:grid;place-items:center;background:var(--ui-ok-bg);color:var(--ui-ok);font-weight:800;font-size:14px}
.cardx{padding:28px;display:flex;flex-direction:column;gap:12px}
.cardx h3{font-size:24px;line-height:1.2}
.cardx p{color:var(--ui-ink-2);font-size:16px}
.cardx a.more{margin-top:auto;font-weight:700;color:var(--ui-link)}
.cardx a.more:hover{color:var(--ui-link-hover);text-decoration:underline;text-underline-offset:3px}
/* four numbered steps (a layout, so not the app's .steps) */
.stepgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:56px;counter-reset:s}
.step{padding:26px;display:flex;flex-direction:column;gap:10px;position:relative}
.step::before{counter-increment:s;content:"Step " counter(s);font:600 14px/20px var(--ui-font);color:var(--ui-ink-2)}
.step h3{font-size:18px}
.step p{color:var(--ui-ink-2);font-size:16px}
/* two ways */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:56px}
.way{padding:34px;display:flex;flex-direction:column;gap:14px}
.way h3{font-size:24px}
.way .tag{align-self:flex-start;height:26px;padding:0 12px;border-radius:99px;background:var(--ui-ok-bg);color:var(--ui-ok);font-size:12px;font-weight:700;display:flex;align-items:center}
.ways .way.main{box-shadow:inset 0 0 0 1.5px var(--ui-ink)}
.way ul,.plan ul,.lst{padding:0;list-style:none;display:flex;flex-direction:column;gap:9px;color:var(--ui-ink-2)}
.way li::before,.plan li::before,.lst li::before{content:"✓  ";color:var(--ui-ok);font-weight:800}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:56px;align-items:stretch}
.plan{padding:30px;display:flex;flex-direction:column;gap:14px}
.plans .plan.hot{box-shadow:inset 0 0 0 1.5px var(--ui-ink)}
.plan .badge{align-self:flex-start;height:26px;padding:0 12px;border-radius:99px;background:var(--ui-on);color:var(--ui-on-fg);font-size:12px;font-weight:700;display:flex;align-items:center}
.plan .badge.n{background:var(--ui-sunken);color:var(--ui-ink-2)}
.plan h3{font-size:24px}
.plan .price{display:flex;align-items:baseline;gap:8px}
.plan .price b{font:600 48px var(--ui-font-head);letter-spacing:-.04em}
.plan .price span{color:var(--ui-muted);font-size:var(--ui-fs-body)}
.plan .cta{margin-top:auto;padding-top:10px}
.seg3{display:inline-flex;gap:4px;padding:4px;margin-top:30px;border-radius:99px;background:var(--ui-sunken)}
.seg3 button{height:40px;padding:0 22px;border:0;border-radius:99px;background:none;color:var(--ui-ink-2);font-weight:700}
.seg3 button:hover{background:var(--ui-sunken-hover);color:var(--ui-ink)}
.seg3 button[aria-pressed="true"]{background:var(--ui-raised);color:var(--ui-ink);box-shadow:inset 0 0 0 1px var(--ui-line-control)}
@media (max-width:400px){.seg3 button{padding:0 12px;font-size:14px;white-space:nowrap}}
.cmp{margin-top:48px;padding:10px;overflow-x:auto}
.cr{display:grid;grid-template-columns:minmax(220px,1.6fr) repeat(3,minmax(120px,1fr));align-items:center;min-height:54px;padding:0 18px}
.cr+.cr{border-top:1px solid var(--ui-line)}
.cr span{color:var(--ui-ink-2);font-size:16px;text-align:center}
.cr span:first-child{text-align:left;color:var(--ui-ink);font-weight:500}
.cr.ch span{font:600 16px var(--ui-font-head);color:var(--ui-ink)}
.cr .hot{background:var(--ui-hover);align-self:stretch;display:grid;place-items:center}
.cr.ch .hot{color:var(--ui-ink);border-radius:12px 12px 0 0}
.cr .y{color:var(--ui-ok);font-weight:800;font-size:18px}
.cr .no{color:var(--ui-muted)}
/* faq */
.faq{max-width:860px;margin:56px auto 0;display:flex;flex-direction:column;gap:12px}
.faq details{border-radius:var(--ui-radius-lg);background:var(--ui-panel);border:1px solid var(--ui-line);padding:0 24px}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:62px;font:600 16px var(--ui-font-head)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 24px var(--ui-font-head);color:var(--ui-ink-2);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{padding:0 0 22px;color:var(--ui-ink-2)}
/* forms: the app's field (.fld, §8.4) with its label above */
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form .full{grid-column:1/-1}
label.f{display:flex;flex-direction:column;gap:8px;font-weight:600;font-size:var(--ui-fs-body);color:var(--ui-ink-2)}
label.f small{font-weight:400;color:var(--ui-muted)}
label.f .fld{width:100%}
.chip[aria-pressed="true"]::before{content:"✓";font-weight:800}
/* a switch says On or Off (§8.6; the rules ds-frame.css gives the app) */
.sw-word .w-on,.switch[aria-checked="true"]+.sw-word .w-off{display:none}
.switch[aria-checked="true"]+.sw-word .w-on{display:inline}
/* text only screen readers hear */
.vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* final call to action + footer */
.final{margin-top:130px;text-align:center;padding:80px 24px;border-radius:var(--ui-radius-lg);position:relative;overflow:hidden;background:var(--ui-panel);border:1px solid var(--ui-line)}
.final h2{font-size:48px;line-height:1.04}
.final p{color:var(--ui-ink-2);font-size:18px;margin-top:16px}
.final .ctas{display:flex;justify-content:center;gap:12px;margin-top:32px;flex-wrap:wrap}
footer{margin-top:110px;border-top:1px solid var(--ui-line);padding:64px 0 40px;color:var(--ui-muted);font-size:var(--ui-fs-body);background:var(--ui-panel)}
.fgrid{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:32px}
.fgrid h4{margin:0 0 14px;color:var(--ui-ink);font:600 14px var(--ui-font-head);letter-spacing:-.01em}
.fgrid ul{list-style:none;padding:0;display:flex;flex-direction:column;gap:10px}
.fgrid a:hover{color:var(--ui-ink)}
.uk{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.uk span{height:28px;padding:0 12px;border-radius:99px;background:var(--ui-panel);display:flex;align-items:center;font-size:12px;font-weight:700;color:var(--ui-ink-2)}
.fbot{display:flex;justify-content:space-between;gap:16px;margin-top:48px;padding-top:24px;border-top:1px solid var(--ui-line);flex-wrap:wrap}
.fbot .fl{display:flex;gap:8px 20px;flex-wrap:wrap}
/* the company line (W-3, D-69) */
.fbot .coline{flex-basis:100%;font-size:12px;line-height:1.8}
/* placeholders the owner still has to fill in: never mistaken for finished copy */
/* D-69: facts only the owner can give, e.g. [Company number]: muted, in square brackets, with a dashed edge, never mistaken for real copy */
.todo{display:inline-flex;align-items:center;padding:0 6px;border-radius:6px;border:1px dashed var(--ui-line-control);color:var(--ui-muted);font-family:var(--ui-font);font-weight:500;font-size:inherit;line-height:1.5;letter-spacing:0;white-space:nowrap;vertical-align:baseline}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
@media (max-width:1100px){.hero h1{font-size:48px}.stepgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.split,.ways{grid-template-columns:minmax(0,1fr)}.split.rev>:first-child{order:0}.plans{grid-template-columns:minmax(0,1fr)}.nav .links{display:none}.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.phero h1{font-size:32px}.hero .lead,.phero .lead{font-size:16px}.shead h2,.split h2{font-size:24px}.final h2{font-size:32px}.stepgrid,.form{grid-template-columns:minmax(0,1fr)}}
.nav .logo{display:block;height:28px;width:auto}
@media (max-width:400px){.nav .logo{height:22px}.nav .right .btn{padding:0 14px}.pill{height:auto;min-height:32px;padding:6px 14px;white-space:normal;line-height:20px;text-align:left}}