/* AiOS looks. Every rule sits under a data-look-* attribute that looks.js sets from the tenant's "look" config, so with no look
   nothing here applies and the page is exactly as built. Colours come only from the tenant's branding variables (--accent, --bg,
   --ink, --sub, --tab-on-bg). No rule changes the card structure, the words, the tile grid or the content column. */

:root[data-look-brand-tone] {
  --look-hl: var(--tab-on-bg, var(--accent));           /* the tenant's highlight: its selected-tab colour, else its brand colour */
  --look-on-brand: #fff;                                /* readable ink on the brand colour */
  --look-on-brand-soft: rgba(255, 255, 255, .72);
  --look-on-brand-line: rgba(255, 255, 255, .18);
  --look-mist: color-mix(in srgb, var(--look-hl) 4%, var(--bg, #fff));
  --look-outset: 28px;                                  /* how far a casing sits outside the cards (the cards never move) */
}
:root[data-look-brand-tone="light"] {
  --look-on-brand: var(--ink, #1a1a1a);
  --look-on-brand-soft: color-mix(in srgb, var(--ink, #1a1a1a) 70%, transparent);
  --look-on-brand-line: color-mix(in srgb, var(--ink, #1a1a1a) 16%, transparent);
}
:root[data-look-brand-tone] #aiosShell[data-device="mobile"] { --look-outset: 16px; }

@property --look-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes look-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes look-breathe { from { opacity: .78; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes look-comet { to { --look-angle: 360deg; } }

/* ---------- 1. Opening: backdrop ---------- */

/* Glow: a soft light in the tenant's highlight colour behind the greeting and the orb. */
:root[data-look-opening-backdrop="glow"] #welcomeScreen { position: relative; isolation: isolate; }
:root[data-look-opening-backdrop="glow"] #welcomeScreen::before {
  content: ''; position: absolute; inset: -72px 0 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(42% 38% at 50% 30%, color-mix(in srgb, var(--look-hl) 17%, transparent) 0%, transparent 70%),
    radial-gradient(60% 50% at 50% 95%, color-mix(in srgb, var(--look-hl) 7%, transparent) 0%, transparent 70%);
  animation: look-breathe 7s ease-in-out infinite alternate;
}

/* Media: the tenant's own image behind the whole opening screen, washed toward the page colour where the words sit. */
:root[data-look-opening-backdrop="media"] #aiosShell:has(#welcomeScreen:not([hidden])) {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg, #fff) 70%, transparent) 0%, color-mix(in srgb, var(--bg, #fff) 20%, transparent) 38%, transparent 60%),
    var(--look-media) center 62% / cover no-repeat,
    var(--bg, #fff);
}
:root[data-look-opening-backdrop="media"] #aiosShell:has(#welcomeScreen:not([hidden])) .topbar { background: transparent; }
/* A top bar fill set in the console's Design tab (fine-tune Header) wins over the clear bar, so the bar, its logo and its menu
   colour stay the same on every screen. With no fill set the bar stays clear over the picture, as above. */
:root[data-look-opening-backdrop="media"][data-ft-header] #aiosShell:has(#welcomeScreen:not([hidden])) .topbar { background: var(--ft-header-bg, transparent); }
/* The dock (composer and attribution) keeps its own solid background over the picture (Owner, 13 Oct). */

/* Drift: the tenant's picture behind the whole opening, frosted, drifting slowly (Owner, 13 Oct 2026, the "Aurora" opening).
   The page colour veils the top, where the greeting sits, and the foot, above the dock; a soft frost and blur sit over all of
   it. The dock keeps its own solid background. */
@keyframes look-drift { from { background-size: 100% 100%, 100% 100%, max(150%, 1700px) auto; background-position: 0 0, 0 0, 44% 78%; } to { background-size: 100% 100%, 100% 100%, max(170%, 1950px) auto; background-position: 0 0, 0 0, 58% 70%; } }
:root[data-look-opening-backdrop="drift"] #aiosShell:has(#welcomeScreen:not([hidden])) { position: relative; isolation: isolate; background: var(--bg, #fff); }
:root[data-look-opening-backdrop="drift"] #aiosShell:has(#welcomeScreen:not([hidden]))::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(color-mix(in srgb, var(--bg, #fff) 10%, transparent), color-mix(in srgb, var(--bg, #fff) 10%, transparent)),
    linear-gradient(180deg, color-mix(in srgb, var(--bg, #fff) 92%, transparent) 0%, color-mix(in srgb, var(--bg, #fff) 55%, transparent) 26%, color-mix(in srgb, var(--bg, #fff) 5%, transparent) 50%, transparent 64%, color-mix(in srgb, var(--bg, #fff) 78%, transparent) 86%, color-mix(in srgb, var(--bg, #fff) 96%, transparent) 100%),
    var(--look-media) no-repeat;
  background-size: 100% 100%, 100% 100%, max(150%, 1700px) auto; background-position: 0 0, 0 0, 50% 80%;
  filter: blur(3px);
  animation: look-drift 26s ease-in-out infinite alternate;
}
:root[data-look-opening-backdrop="drift"] #aiosShell:has(#welcomeScreen:not([hidden])) .topbar { background: transparent; }

/* ---------- 2. Opening: tiles ---------- */

:root[data-look-opening-tiles] #welcomeActions .welcome-action { transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }

/* Outline: a hairline and nothing else; the highlight colour answers the pointer. */
:root[data-look-opening-tiles="outline"] #welcomeActions .welcome-action {
  background: color-mix(in srgb, var(--bg, #fff) 70%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 16%, transparent); box-shadow: none;
}
:root[data-look-opening-tiles="outline"] #welcomeActions .welcome-action-icon { background: none; border: 1px solid color-mix(in srgb, var(--look-hl) 22%, transparent); border-radius: 50%; }
:root[data-look-opening-tiles="outline"] #welcomeActions .welcome-action:hover {
  transform: translateY(-2px); background: color-mix(in srgb, var(--look-hl) 4%, var(--bg, #fff));
  border-color: color-mix(in srgb, var(--look-hl) 60%, transparent); box-shadow: 0 14px 30px -20px color-mix(in srgb, var(--look-hl) 55%, transparent);
}

/* Soft: tinted tiles with no edge, a white icon well. */
:root[data-look-opening-tiles="soft"] #welcomeActions .welcome-action {
  background: color-mix(in srgb, var(--look-hl) 6%, var(--bg, #fff)); border: 1px solid transparent; box-shadow: none;
}
:root[data-look-opening-tiles="soft"] #welcomeActions .welcome-action-icon { background: var(--bg, #fff); box-shadow: 0 1px 2px rgba(16, 24, 40, .06); }
:root[data-look-opening-tiles="soft"] #welcomeActions .welcome-action:hover {
  transform: translateY(-2px); background: color-mix(in srgb, var(--look-hl) 10%, var(--bg, #fff)); box-shadow: 0 16px 30px -22px color-mix(in srgb, var(--look-hl) 60%, transparent);
}

/* Glass: frosted panels, made for a media backdrop. How much of the backdrop shows through is its own setting (frost). */
:root[data-look-opening-tiles="glass"] { --look-frost: 58%; --look-frost-hover: 78%; }
:root[data-look-opening-tiles="glass"][data-look-opening-frost="frosted"] { --look-frost: 86%; --look-frost-hover: 94%; }
:root[data-look-opening-tiles="glass"][data-look-opening-frost="solid"] { --look-frost: 97%; --look-frost-hover: 100%; }
:root[data-look-opening-tiles="glass"] #welcomeActions .welcome-action {
  background: color-mix(in srgb, var(--bg, #fff) var(--look-frost), transparent);
  -webkit-backdrop-filter: blur(16px) saturate(150%); backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid color-mix(in srgb, var(--bg, #fff) 75%, transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 18px 40px -26px rgba(20, 30, 70, .45);
}
:root[data-look-opening-tiles="glass"] #welcomeActions .welcome-action-icon { background: color-mix(in srgb, var(--look-hl) 9%, var(--bg, #fff)); box-shadow: none; }
:root[data-look-opening-tiles="glass"] #welcomeActions .welcome-action:hover {
  transform: translateY(-3px); background: color-mix(in srgb, var(--bg, #fff) var(--look-frost-hover), transparent);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 24px 46px -26px rgba(20, 30, 70, .5);
}

/* Gloss: see-through glass with a glaze (Owner, 13 Oct 2026, "a little more gloss"). A sheen across the top, a soft glare
   across the face, a bright rim above and a faint highlight-coloured edge below, glazed icon casings. On hover the box lifts
   and a light crosses it, behind the words. Made for a media or drift backdrop. */
@keyframes look-sweep { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(220%) skewX(-18deg); } }
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(160deg, color-mix(in srgb, var(--bg, #fff) 82%, transparent), color-mix(in srgb, var(--bg, #fff) 58%, transparent));
  -webkit-backdrop-filter: blur(22px) saturate(170%); backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid color-mix(in srgb, var(--bg, #fff) 95%, transparent);
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 1) inset, 0 -1px 0 color-mix(in srgb, var(--look-hl) 16%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--look-hl) 8%, transparent), 0 2px 6px -2px rgba(30, 50, 120, .12),
    0 26px 52px -30px color-mix(in srgb, var(--look-hl) 45%, rgba(30, 50, 120, .5));
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s ease;
}
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .66) 41%, rgba(255, 255, 255, .18) 50%, rgba(255, 255, 255, 0) 58%),
    linear-gradient(180deg, rgba(255, 255, 255, .62) 0%, rgba(255, 255, 255, .18) 34%, rgba(255, 255, 255, 0) 52%);
}
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
}
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action:hover {
  transform: translateY(-4px);
  box-shadow:
    0 1.5px 0 rgba(255, 255, 255, 1) inset, 0 -1px 0 color-mix(in srgb, var(--look-hl) 22%, transparent) inset,
    0 0 0 1px color-mix(in srgb, var(--look-hl) 18%, transparent), 0 4px 10px -4px rgba(30, 50, 120, .16),
    0 36px 64px -30px color-mix(in srgb, var(--look-hl) 55%, rgba(30, 50, 120, .55));
}
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action:hover::after { opacity: 1; animation: look-sweep .9s ease; }
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action :is(.welcome-action-title, .welcome-action-sub, .welcome-action-icon) { position: relative; z-index: 1; }
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action .welcome-action-title { font-weight: 400; }
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action-icon {
  overflow: hidden; background: transparent; box-shadow: 0 6px 14px -8px color-mix(in srgb, var(--look-hl) 60%, transparent);
}
:root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action-icon::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(180deg, rgba(255, 255, 255, .6) 0%, rgba(255, 255, 255, .16) 46%, rgba(255, 255, 255, 0) 50%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset;
}

/* Numbered: an index in each corner and a highlight line that draws along the foot on hover. */
:root[data-look-opening-tiles="numbered"] #welcomeActions { counter-reset: look-tile; }
:root[data-look-opening-tiles="numbered"] #welcomeActions .welcome-action {
  counter-increment: look-tile; position: relative; overflow: hidden;
  background: var(--bg, #fff); border: 1px solid color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: none;
}
:root[data-look-opening-tiles="numbered"] #welcomeActions .welcome-action::before {
  content: counter(look-tile, decimal-leading-zero); position: absolute; top: .9em; right: 1.1em;
  font-size: 13px; font-weight: 400; letter-spacing: .06em; font-variant-numeric: tabular-nums; color: var(--sub, #66727f);
}
:root[data-look-opening-tiles="numbered"] #welcomeActions .welcome-action::after {
  content: ''; position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--look-hl);
  transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2, .7, .2, 1);
}
:root[data-look-opening-tiles="numbered"] #welcomeActions .welcome-action:hover { border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
:root[data-look-opening-tiles="numbered"] #welcomeActions .welcome-action:hover::after,
:root[data-look-opening-tiles="numbered"] #welcomeActions .welcome-action:focus-visible::after { transform: scaleX(1); }
:root[data-look-opening-tiles="numbered"] #welcomeActions .welcome-action-icon { background: none; }

/* Ink: tiles in the brand colour. */
:root[data-look-opening-tiles="ink"] #welcomeActions .welcome-action { background: var(--accent); border: 1px solid var(--accent); box-shadow: 0 18px 34px -24px rgba(0, 0, 0, .55); }
:root[data-look-opening-tiles="ink"] #welcomeActions .welcome-action-title { color: var(--look-on-brand); }
:root[data-look-opening-tiles="ink"] #welcomeActions .welcome-action-sub { color: var(--look-on-brand-soft); }
:root[data-look-opening-tiles="ink"] #welcomeActions .welcome-action-icon { background: var(--bg, #fff); }
:root[data-look-opening-tiles="ink"] #welcomeActions .welcome-action:hover {
  transform: translateY(-3px); box-shadow: 0 22px 40px -22px color-mix(in srgb, var(--look-hl) 70%, transparent), 0 0 0 1px color-mix(in srgb, var(--look-hl) 70%, transparent);
}

/* ---------- 3. Type ---------- */

:root[data-look-headings="light"] #welcomeHeader { font-weight: 300; letter-spacing: -.018em; }
:root[data-look-headings="light"] #aiosShell .set-group-label { font-weight: 300; letter-spacing: -.012em; }
:root[data-look-headings="light"] #welcomeActions .welcome-action-title { font-weight: 600; }
/* Large greeting: the greeting a size up, set tighter (Owner, 13 Oct 2026). The opening still fits with no scroll: scale.js
   measures the greeting as drawn. */
:root[data-look-greeting="large"] #welcomeHeader { letter-spacing: -.025em; }
/* The welcome line's size is its screen group's (welcome.css); a large greeting is that size times 1.28, set tighter. */
:root[data-look-greeting="large"] { --look-greet-scale: 1.28; --look-greet-lh: 1.12; }

/* Font kit: the tenant's licensed brand font (look.fonts) ahead of the branding fonts. The attribution lockup keeps its own font. */
:root[data-look-fonts] {
  --brand-font-body: var(--look-font-body) !important;
  --brand-font-display: var(--look-font-heading) !important;
  --body-font: var(--look-font-body) !important;
  --heading-font: var(--look-font-heading) !important;
}
:root[data-look-fonts] body { font-family: var(--look-font-body) !important; }
:root[data-look-fonts] #welcomeHeader,
:root[data-look-fonts] .aios-welcome,
:root[data-look-fonts] .welcome-action-title { font-family: var(--look-font-heading) !important; }

/* ---------- 3b. The orb ---------- */

/* Highlight: the orb's dots in the tenant's highlight colour (its selected-tab colour) instead of its brand colour (Owner,
   13 Oct 2026, "make the orb that nice blue"). Only inside the orb; listening keeps its green. */
:root[data-look-orb="highlight"] .orb { --accent: var(--look-hl); }
:root[data-look-orb="highlight"] .voice-stage:not(.listening) { --voice: var(--look-hl); }

/* ---------- 4. Canvas surface ---------- */

:root[data-look-surface="mist"] #aiosShell,
:root[data-look-surface="mist"] #aiosShell .topbar { background-color: var(--look-mist); }
:root[data-look-surface="mist"] #aiosShell .composer { background: var(--bg, #fff); }

/* ---------- 5. Cards: names as the client writes them ---------- */

:root[data-look-names="asWritten"] #aiosShell .cname { text-transform: none; letter-spacing: -.012em; font-weight: 650; font-size: calc(var(--t-base, 16px) * 1.08); }
:root[data-look-names="asWritten"] #aiosShell .pc-name { text-transform: none; letter-spacing: -.016em; font-weight: 600; }

/* ---------- 6. Card designs (face cards in a set; document cards keep their own design) ---------- */

/* Lifted: the photo breaks out of the card and casts its own shadow. */
:root[data-look-cards="lifted"] #aiosShell .set > .card:not(.doc) {
  overflow: visible; margin-top: 16px; height: calc(100% - 16px); border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 9%, transparent); box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  transition: box-shadow .3s ease, transform .3s ease;
}
:root[data-look-cards="lifted"] #aiosShell .set > .card:not(.doc) .media {
  width: auto; min-width: 0; align-self: stretch; margin: -16px 14px 0; border-radius: 14px; transition: transform .35s cubic-bezier(.2, .7, .2, 1);
  box-shadow: 0 22px 34px -22px rgba(16, 24, 40, .55), 0 2px 6px rgba(16, 24, 40, .08);
}
:root[data-look-cards="lifted"] #aiosShell .set > .card:not(.doc):hover { box-shadow: 0 26px 44px -30px rgba(16, 24, 40, .4); }
:root[data-look-cards="lifted"] #aiosShell .set > .card:not(.doc):hover .media { transform: translateY(-5px); }
:root[data-look-detail="lifted"] #aiosShell .pc { border-radius: 20px; overflow: visible; margin-top: 16px; }
:root[data-look-detail="lifted"] #aiosShell .pc-hero { margin: -16px 16px 0; width: auto; min-width: 0; border-radius: 16px; box-shadow: 0 26px 40px -26px rgba(16, 24, 40, .55); }
:root[data-look-detail="lifted"] #aiosShell .pc > .cta-bar:last-child { border-radius: 0 0 20px 20px; }

/* Overlay, Reveal and Cut corner share one base: the photo is the card and the words sit on a shade over it. */
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) {
  min-height: 460px; border: 0; background: #0b0e14; color: #fff; border-radius: 16px; isolation: isolate;
  box-shadow: 0 24px 40px -30px rgba(10, 14, 20, .6);
  --cta-bg: #fff; --cta-ink: #0b0e14; --sub: rgba(255, 255, 255, .7); --ink: #fff; --line: rgba(255, 255, 255, .18);
}
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) .media {
  position: absolute; inset: 0; max-height: none; aspect-ratio: auto; height: 100%; z-index: -1;
}
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) .media img {
  width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc):hover .media img { transform: scale(1.04); }
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) .cbody {
  flex: 0 0 auto; margin-top: auto; padding-top: 72px;
  background: linear-gradient(0deg, rgba(8, 10, 16, .93) 0%, rgba(8, 10, 16, .84) 58%, rgba(8, 10, 16, 0) 100%);
}
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) :is(.cname, .fact-value) { color: #fff; }
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) .fact-note { color: rgba(255, 255, 255, .78); }
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) :is(.caddr, .fact-label, .cta-or) { color: rgba(255, 255, 255, .72); }
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) :is(.frow, .fact) { border-color: rgba(255, 255, 255, .16); }
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) .frow.blank { border-color: transparent; }
:root:is([data-look-cards="overlay"], [data-look-cards="reveal"], [data-look-cards="cutcorner"]) #aiosShell .set > .card:not(.doc) .cta-bar-btn { background: #fff; color: #0b0e14; }

/* Reveal: the photo is the card. Only the name and line show, at the bottom; the facts and the button rise over the photo
   when the pointer arrives. The card keeps its shape, so nothing around it moves. */
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) { min-height: 0; height: auto; align-self: start; aspect-ratio: 3 / 4; }
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) .cbody { padding-top: 120px; transition: padding-top .45s cubic-bezier(.2, .7, .2, 1); }
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) :is(.facts, .cta-bar, .cta-or) {
  max-height: 0; min-height: 0; opacity: 0; overflow: hidden; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; transform: translateY(10px);
  transition: max-height .45s cubic-bezier(.2, .7, .2, 1), opacity .3s ease, transform .45s cubic-bezier(.2, .7, .2, 1), padding .45s ease, margin .45s ease;
}
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc):is(:hover, :focus-within) .cbody { padding-top: 40px; }
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc):is(:hover, :focus-within) :is(.facts, .cta-bar, .cta-or) { max-height: 260px; opacity: 1; transform: none; }
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc):is(:hover, :focus-within) .facts { margin-top: 10px; }
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc):is(:hover, :focus-within) .cta-bar { padding-top: 12px; }
:root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc):is(:hover, :focus-within) .cta-or { margin: 8px 16px; }
/* No pointer to hover with (phones, tablets): everything shows, still over the photo. */
@media (hover: none) {
  :root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) .cbody { padding-top: 64px; }
  :root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) :is(.facts, .cta-bar, .cta-or) { max-height: none; opacity: 1; transform: none; }
  :root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) .facts { margin-top: 10px; }
  :root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) .cta-bar { padding-top: 12px; }
  :root[data-look-cards="reveal"] #aiosShell .set > .card:not(.doc) .cta-or { margin: 8px 16px; }
}
:root[data-look-cards="reveal"] #aiosShell[data-device="mobile"] .set > .card:not(.doc) .cbody { padding-top: 64px; }
:root[data-look-cards="reveal"] #aiosShell[data-device="mobile"] .set > .card:not(.doc) :is(.facts, .cta-bar, .cta-or) { max-height: none; opacity: 1; transform: none; }
:root[data-look-cards="reveal"] #aiosShell[data-device="mobile"] .set > .card:not(.doc) .facts { margin-top: 10px; }
:root[data-look-cards="reveal"] #aiosShell[data-device="mobile"] .set > .card:not(.doc) .cta-bar { padding-top: 12px; }
:root[data-look-cards="reveal"] #aiosShell[data-device="mobile"] .set > .card:not(.doc) .cta-or { margin: 8px 16px; }

/* Cut corner: two corners cut away and a wall to wall banner button. */
:root[data-look-cards="cutcorner"] #aiosShell .set > .card:not(.doc) {
  border-radius: 0; clip-path: polygon(26px 0, 100% 0, 100% calc(100% - 26px), calc(100% - 26px) 100%, 0 100%, 0 26px);
}
:root[data-look-cards="cutcorner"] #aiosShell .set > .card:not(.doc) .cbody { padding-bottom: 0; }
:root[data-look-cards="cutcorner"] #aiosShell .set > .card:not(.doc) .cta-bar { margin-left: -5.5%; margin-right: -5.5%; padding-bottom: 0; }
:root[data-look-cards="cutcorner"] #aiosShell .set > .card:not(.doc) .cta-bar:last-child { margin-bottom: 0; }
:root[data-look-cards="cutcorner"] #aiosShell .set > .card:not(.doc) .cta-bar-btn { border-radius: 0; min-height: 56px; }
:root[data-look-cards="cutcorner"] #aiosShell .set > .card:not(.doc) .cta-bar + .cta-or + .cta-bar .cta-bar-btn { background: transparent; color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }

/* Detail, Overlay and Cut corner: the detail opens on its photo, with the name over it. */
:root:is([data-look-detail="overlay"], [data-look-detail="cutcorner"]) #aiosShell .pc-id {
  position: relative; z-index: 1; margin-top: -104px; padding-top: 56px; color: #fff;
  background: linear-gradient(0deg, rgba(8, 10, 16, .94) 0%, rgba(8, 10, 16, .9) 30%, rgba(8, 10, 16, .55) 70%, rgba(8, 10, 16, 0) 100%);
}
:root:is([data-look-detail="overlay"], [data-look-detail="cutcorner"]) #aiosShell .pc-name { color: #fff; }
:root:is([data-look-detail="overlay"], [data-look-detail="cutcorner"]) #aiosShell .pc-addr { color: rgba(255, 255, 255, .78); }
:root:is([data-look-detail="overlay"], [data-look-detail="cutcorner"]) #aiosShell .pc-hero .hcount { bottom: 116px; }
:root[data-look-detail="cutcorner"] #aiosShell .pc { border-radius: 0; clip-path: polygon(30px 0, 100% 0, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 30px); }
:root[data-look-detail="cutcorner"] #aiosShell .pc > .cta-bar { padding: 0; }
:root[data-look-detail="cutcorner"] #aiosShell .pc > .cta-bar .cta-bar-btn { border-radius: 0; min-height: 60px; }

/* Two-tone: the photo over a solid block of the brand colour. */
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc) {
  border: 0; border-radius: 16px; background: var(--accent); box-shadow: 0 24px 40px -30px rgba(10, 14, 20, .55);
  --cta-bg: var(--look-on-brand); --cta-ink: var(--accent); --line: var(--look-on-brand-line);
  transition: transform .3s ease, box-shadow .3s ease;
}
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc):hover { transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(10, 14, 20, .6); }
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc) :is(.cname, .fact-value) { color: var(--look-on-brand); }
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc) .fact-note { color: var(--look-on-brand); opacity: .8; }
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc) :is(.caddr, .fact-label, .cta-or) { color: var(--look-on-brand-soft); }
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc) :is(.frow, .fact) { border-color: var(--look-on-brand-line); }
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc) .frow.blank { border-color: transparent; }
:root[data-look-cards="twotone"] #aiosShell .set > .card:not(.doc) .cta-bar-btn { background: var(--look-on-brand); color: var(--accent); }
:root[data-look-detail="twotone"] #aiosShell .pc :is(.pc-id, .pc-facts) { background: var(--accent); border-color: var(--look-on-brand-line); }
:root[data-look-detail="twotone"] #aiosShell .pc :is(.pc-name, .pc-fact .v) { color: var(--look-on-brand); }
:root[data-look-detail="twotone"] #aiosShell .pc :is(.pc-addr, .pc-fact .k) { color: var(--look-on-brand-soft); }
:root[data-look-detail="twotone"] #aiosShell .pc .pc-fact { border-color: var(--look-on-brand-line); }
:root[data-look-detail="twotone"] #aiosShell .pc { border: 0; border-radius: 18px; }

/* ---------- 7. Set casings (around the cards; the cards keep their size and place) ---------- */

:root[data-look-casing] #aiosShell .set-section > .page-wrap { position: relative; isolation: isolate; }

/* Cover: a block in the brand colour above the set carries its heading and count. */
:root[data-look-casing="cover"] #aiosShell .set-section > .page-wrap > .set-group-head {
  margin: 0 calc(-1 * var(--look-outset)) 18px; padding: 30px var(--look-outset) 26px; border-radius: 18px;
  background: var(--accent); color: var(--look-on-brand);
}
:root[data-look-casing="cover"] #aiosShell .set-section > .page-wrap > .set-group-head :is(.set-group-label, .set-group-count) { color: inherit; }
:root[data-look-casing="cover"] #aiosShell .set-section > .page-wrap > .set-group-head .set-group-count { opacity: .7; }

/* Masthead: a strip of the set's own photos carries the heading; the cards rise over its edge. */
:root[data-look-casing="masthead"] #aiosShell .set-section > .page-wrap > .look-strip {
  position: absolute; z-index: -1; top: 0; left: calc(-1 * var(--look-outset)); right: calc(-1 * var(--look-outset)); height: 230px;
  display: flex; border-radius: 20px; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .5s ease;
}
:root[data-look-casing="masthead"] #aiosShell .set-section > .page-wrap > .look-strip.is-ready { opacity: 1; }
:root[data-look-casing="masthead"] #aiosShell .look-strip > span { flex: 1 1 0; background-size: cover; background-position: center; }
:root[data-look-casing="masthead"] #aiosShell .look-strip::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 10, 16, .62) 0%, rgba(8, 10, 16, .38) 55%, rgba(8, 10, 16, .1) 100%);
}
:root[data-look-casing="masthead"] #aiosShell .set-section > .page-wrap:has(> .look-strip) > .set-group-head { padding: 34px 0 0; min-height: 132px; }
:root[data-look-casing="masthead"] #aiosShell .set-section > .page-wrap:has(> .look-strip.is-ready) > .set-group-head :is(.set-group-label, .set-group-count) { color: #fff; transition: color .5s ease; }
:root[data-look-casing="masthead"] #aiosShell[data-device="mobile"] .set-section > .page-wrap > .look-strip { height: 190px; border-radius: 0; }
:root[data-look-casing="masthead"] #aiosShell[data-device="mobile"] .set-section > .page-wrap:has(> .look-strip) > .set-group-head { padding-top: 26px; min-height: 108px; }

/* Showcase: a dark stage lit by the photo of the card the pointer is on. */
:root[data-look-casing="showcase"] #aiosShell .set-section > .page-wrap {
  margin: 0 calc(-1 * var(--look-outset)); padding: 26px var(--look-outset) var(--look-outset); border-radius: 22px; overflow: hidden; background: #0b0d12;
}
:root[data-look-casing="showcase"] #aiosShell .set-section > .page-wrap::before {
  content: ''; position: absolute; inset: -20%; z-index: -2; pointer-events: none;
  background: var(--look-stage, none) center / cover no-repeat; filter: blur(60px) saturate(1.5) brightness(.72); opacity: .5;
  transition: background-image .6s ease;
}
:root[data-look-casing="showcase"] #aiosShell .set-section > .page-wrap::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(130% 100% at 50% 0%, rgba(8, 10, 16, .1) 0%, rgba(8, 10, 16, .72) 100%);
}
:root[data-look-casing="showcase"] #aiosShell .set-section > .page-wrap > .set-group-head :is(.set-group-label, .set-group-count) { color: #fff; }
:root[data-look-casing="showcase"] #aiosShell .set-section > .page-wrap > .set-group-head .set-group-count { opacity: .7; }
:root[data-look-casing="showcase"] #aiosShell .set-section + .set-section { margin-top: 20px; }
:root[data-look-casing="showcase"] #aiosShell[data-device="mobile"] .set-section > .page-wrap { border-radius: 0; }

/* Comet frame: a light runs round the outline of the set. */
:root[data-look-casing="comet"] #aiosShell .set-section > .page-wrap {
  margin: 0 calc(-1 * var(--look-outset)); padding: 22px var(--look-outset) var(--look-outset); border-radius: 24px;
}
:root[data-look-casing="comet"] #aiosShell .set-section > .page-wrap::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; padding: 1.5px;
  background:
    conic-gradient(from var(--look-angle), transparent 0deg 230deg, color-mix(in srgb, var(--look-hl) 35%, transparent) 300deg, var(--look-hl) 352deg, transparent 360deg),
    linear-gradient(color-mix(in srgb, var(--accent) 12%, transparent), color-mix(in srgb, var(--accent) 12%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  --look-angle: 120deg; animation: look-comet 7s linear infinite;
}
:root[data-look-casing] #aiosShell .set-section + .set-section { margin-top: 22px; }

/* ---------- 8. Motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  :root[data-look-motion="rise"] #welcomeActions .welcome-action,
  :root[data-look-motion="rise"] #aiosShell .set > .card,
  :root[data-look-motion="rise"] #aiosShell .pc { animation: look-rise .6s cubic-bezier(.2, .7, .2, 1) backwards; }
  :root[data-look-motion="rise"] #welcomeActions .welcome-action:nth-child(2), :root[data-look-motion="rise"] #aiosShell .set > .card:nth-child(2) { animation-delay: 70ms; }
  :root[data-look-motion="rise"] #welcomeActions .welcome-action:nth-child(3), :root[data-look-motion="rise"] #aiosShell .set > .card:nth-child(3) { animation-delay: 140ms; }
  :root[data-look-motion="rise"] #welcomeActions .welcome-action:nth-child(4), :root[data-look-motion="rise"] #aiosShell .set > .card:nth-child(4) { animation-delay: 210ms; }
  :root[data-look-motion="rise"] #welcomeActions .welcome-action:nth-child(5), :root[data-look-motion="rise"] #aiosShell .set > .card:nth-child(5) { animation-delay: 280ms; }
  :root[data-look-motion="rise"] #welcomeActions .welcome-action:nth-child(n+6), :root[data-look-motion="rise"] #aiosShell .set > .card:nth-child(n+6) { animation-delay: 350ms; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-look-opening-backdrop="drift"] #aiosShell:has(#welcomeScreen:not([hidden]))::before,
  :root[data-look-opening-tiles="gloss"] #welcomeActions .welcome-action:hover::after,
  :root[data-look-opening-backdrop="glow"] #welcomeScreen::before,
  :root[data-look-casing="comet"] #aiosShell .set-section > .page-wrap::before { animation: none; }
}

/* The visitor's question in the tenant's own fill (look.question.fill, owner 13 Oct 2026). The words keep the page's ink, so the
   fill must be a light colour. */
:root[data-look-question="fill"] .msg-user { background: var(--look-question); color: var(--ink); }

/* Emphasis in the font's Medium (type.strong "medium", owner 13 Oct 2026): "the reason I love Elza is because it's thin". Every
   heavy weight in the conversation (names, facts, labels, tabs, buttons, bold words, headings in a card) draws at 500, as the
   tenant's own website does; nothing changes size. */
:root[data-look-strong="medium"] #aiosShell :is(b, strong, h1, h2, h3, h4, h5, h6, button, label, .cname, .pc-name, .fact-value,
  .fact-label, .v, .k, .n, .tab-label, .cta-bar-label, .cta-arrow, .cta-or, .p-caption, .hcount, .pc-back, .aios-trail-step,
  .aios-trail-chevron, .set-group-count, .next-label, .fmt) { font-weight: 500; }
:root[data-look-strong="medium"] :is(#versionMark, .version) { font-weight: 500; }

/* ---------- 8. Design kit (14 Oct 2026): generic dials, each off unless a tenant's look turns it on ---------- */

/* Canvas Frost: a quiet frosted surface, fine neutral dots at the edges, a white plane where the answer sits. */
:root[data-look-surface="frost"] #aiosShell {
  background-color: #F9FAFD;
  background-image:
    radial-gradient(120% 60% at 50% -10%, color-mix(in srgb, var(--look-hl, var(--accent)) 4.5%, transparent), transparent 70%),
    radial-gradient(54% 62% at 50% 56%, #fff 55%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(rgba(72, 88, 136, .20) .9px, transparent 1.3px);
  background-size: 100% 100%, 100% 100%, 20px 20px;
  background-attachment: fixed;
}
:root[data-look-surface="frost"] #aiosShell .topbar { background-color: transparent; }

/* Card edge Halo: a thin outline and a soft glow in the brand colour. */
:root[data-look-cards-edge="halo"] #aiosShell :is(.set > .card:not(.doc), .pc) {
  border: 1px solid color-mix(in srgb, var(--look-hl, var(--accent)) 16%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--look-hl, var(--accent)) 3.5%, transparent), 0 22px 44px -24px color-mix(in srgb, var(--look-hl, var(--accent)) 16%, transparent);
}

/* Card edge Lift (owner, 14 Oct 2026: keep the Halo edge, but the cards must stand clearly apart from the canvas): the Halo outline and
   glow, with a soft drop shadow under each card. */
:root[data-look-cards-edge="lift"] #aiosShell :is(.set > .card:not(.doc), .pc) {
  border: 1px solid color-mix(in srgb, var(--look-hl, var(--accent)) 16%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--look-hl, var(--accent)) 3.5%, transparent), 0 2px 6px rgba(16, 24, 40, .07), 0 18px 40px -14px rgba(16, 24, 40, .26);
}

/* CTA corner: the button corner from square-ish to fully round; standard keeps the built 10px. */
:root[data-look-cta-corner="sharp"] #aiosShell .screen { --aios-r-cta: 4px; }
:root[data-look-cta-corner="soft"] #aiosShell .screen { --aios-r-cta: 16px; }
:root[data-look-cta-corner="round"] #aiosShell .screen { --aios-r-cta: 999px; }

/* Facts band: a full-width dark band under the photo, a line of the brand colour where the photo ends. */
:root[data-look-facts-band="band"] #aiosShell .pc .pc-facts {
  position: relative; padding: 16px 0; border-top: 2px solid var(--look-hl, var(--accent)); border-bottom: 0;
  background: radial-gradient(60% 140% at 50% 0%, color-mix(in srgb, var(--look-hl, var(--accent)) 22%, transparent), transparent 70%), linear-gradient(180deg, #161B27 0%, #0D1119 100%);
}
/* With the name over the photo, the part of the name block that runs past the photo is solid, never a grey veil over the page. */
:root[data-look-facts-band="band"]:is([data-look-detail="overlay"], [data-look-detail="cutcorner"]) #aiosShell .pc .pc-id {
  background: linear-gradient(180deg, rgba(13, 17, 25, 0) 0, rgba(13, 17, 25, .55) 40px, rgba(13, 17, 25, .9) 78px, #0D1119 104px, #0D1119 100%);
}
:root[data-look-facts-band="band"] #aiosShell .pc .pc-fact { padding: 4px 18px; }
:root[data-look-facts-band="band"] #aiosShell .pc .pc-fact + .pc-fact { border-left-color: rgba(255, 255, 255, .16); }
:root[data-look-facts-band="band"] #aiosShell .pc .pc-fact .k { font-size: 11px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: color-mix(in srgb, var(--look-hl, var(--accent)) 50%, #fff); }
:root[data-look-facts-band="band"] #aiosShell .pc .pc-fact .v { margin-top: 4px; color: #fff; font-size: 20px; font-weight: 400; line-height: 1.25; }
:root[data-look-facts-band="band"] #aiosShell[data-device="mobile"] .pc .pc-facts { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
:root[data-look-facts-band="band"] #aiosShell[data-device="mobile"] .pc .pc-fact:nth-child(odd) { border-left: 0; }
:root[data-look-facts-band="band"] #aiosShell[data-device="mobile"] .pc .pc-fact .v { font-size: 17px; }

/* Detail media Single: each picture in a tab is one whole image, edge to edge, its caption beneath. No gallery frame. */
:root[data-look-detail-media="single"] #aiosShell .pc > .pane { --look-pane-pad: 30px; padding-left: var(--look-pane-pad); padding-right: var(--look-pane-pad); }
:root[data-look-detail-media="single"] #aiosShell[data-device="mobile"] .pc > .pane { --look-pane-pad: 20px; }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .rset.gallerys { display: block; margin-left: calc(-1 * var(--look-pane-pad)); margin-right: calc(-1 * var(--look-pane-pad)); }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .rset.gallerys > .rcell + .rcell { margin-top: 24px; }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .rset.gallerys .rset-title { display: none; }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .p-gallery { margin: 0; width: auto; max-width: none; border: 0; border-radius: 0; background: none; box-shadow: none; transform: none; }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .p-gallery .p-gallery-open { cursor: default; pointer-events: none; }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .p-gallery .p-image { aspect-ratio: auto; background: none; }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .p-gallery .p-image img { height: auto; object-fit: contain; }
:root[data-look-detail-media="single"] #aiosShell .pc .pane .p-gallery .p-caption {
  position: static; min-height: 0; padding: 8px var(--look-pane-pad) 0; background: none; color: var(--sub); font-size: 12.5px; font-weight: 300; pointer-events: auto;
}
:root[data-look-detail-media="single"] #aiosShell .pc .pane .p-gallery :is(.p-gallery-controls, .p-gallery-strip) { display: none; }
/* Detail hero Single: the photo is one picture. No photo count, and a tap on it opens nothing. */
:root[data-look-detail-hero="single"] #aiosShell .pc-hero .hcount { display: none; }
:root[data-look-detail-hero="single"] #aiosShell .pc-hero img { pointer-events: none; cursor: default; }

/* Detail type Editorial: an eyebrow, a light title, a lead line, sections under hairlines, lists in the brand colour. */
:root[data-look-detail-type="editorial"] #aiosShell .pc .pc-name { font-size: 38px; font-weight: 300; letter-spacing: -.01em; line-height: 1.1; text-transform: none; }
:root[data-look-detail-type="editorial"] #aiosShell[data-device="mobile"] .pc .pc-name { font-size: 28px; }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pc-addr { font-size: 16px; font-weight: 300; }
:root[data-look-detail-type="editorial"] #aiosShell .pc > .pane { padding-top: 30px; }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose { max-width: none; font-size: 16.5px; line-height: 1.6; font-weight: 300; }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose h5 { margin: 0 0 10px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose h3 { margin: 0 0 12px; font-size: 30px; font-weight: 300; line-height: 1.18; letter-spacing: -.01em; }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose h3 + p { font-size: 18px; color: var(--sub); }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose h4 { margin: 28px 0 8px; padding-top: 24px; border-top: 1px solid var(--line); font-size: 22px; font-weight: 400; }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose > h4:first-child { margin-top: 4px; padding-top: 0; border-top: 0; }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose li::marker { color: var(--accent); }
:root[data-look-detail-type="editorial"] #aiosShell .pc .pane .prose ul.checklist { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 18px; }
:root[data-look-detail-type="editorial"] #aiosShell[data-device="mobile"] .pc .pane .prose ul.checklist { grid-template-columns: 1fr; }
:root[data-look-detail-type="editorial"] #aiosShell[data-device="mobile"] .pc .pane .prose h3 { font-size: 24px; }

/* Choice screen Cinematic: the tenant's photo full bleed under a dark veil, the headline on the left, the two choices as glass
   panels on the right. The AiOS panel carries the AiOS orb and the persona line; the classic panel carries no mark. Portrait
   screens (phones, tablets held upright) stack it in one column. The gate still fits its screen with no scroll (scale.js). */
:root[data-look-gate="cinematic"] #toggleScreen {
  position: relative; isolation: isolate; color: #fff; --gcol: 1240; --gate-photo-pos: 62% 40%;
  background: #0E1520;
}
/* The photo on its own layer, so it fades in when the screen lands instead of popping in over the dark fill. */
:root[data-look-gate="cinematic"] #toggleScreen::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--gate-banner, var(--look-gate-media, none)) var(--gate-photo-pos) / cover no-repeat;
}
:root[data-look-gate="cinematic"] #toggleScreen::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(7, 11, 20, .92) 0%, rgba(7, 11, 20, .6) 16%, rgba(7, 11, 20, 0) 40%),
    linear-gradient(90deg, rgba(7, 11, 20, .74) 0%, rgba(7, 11, 20, .4) 42%, rgba(7, 11, 20, .08) 100%);
}
:root[data-look-gate="cinematic"] #toggleScreen .toggle-screen {
  display: grid; grid-template-columns: minmax(0, 1fr) min(calc(500 * var(--t)), 42cqw); column-gap: min(calc(72 * var(--t)), 5cqw); align-items: center; text-align: left;
}
:root[data-look-gate="cinematic"] #toggleScreen .gate-logo { grid-column: 1 / -1; grid-row: 1; justify-self: start; height: calc(30 * var(--u)); margin: 0 0 calc(48 * var(--u)); filter: brightness(0) invert(1); }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-headline { grid-column: 1; grid-row: 2; align-self: end; margin: 0; color: #fff; font-size: min(calc(64 * var(--t)), 4.6cqw); font-weight: 200; line-height: 1.04; letter-spacing: -.02em; text-align: left; text-wrap: balance; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-headline .sentence { display: block; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-subhead { grid-column: 1; grid-row: 3; align-self: start; max-width: 34ch; margin-top: calc(22 * var(--u)); color: rgba(255, 255, 255, .86); font-size: calc(20 * var(--t)); text-align: left; text-wrap: pretty; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-cards {
  grid-column: 2; grid-row: 2 / span 2; align-self: center; display: flex; flex-direction: column; gap: calc(14 * var(--u)); width: 100%; min-height: 0; margin: 0;
}
/* Panels: dark glass with a clear outline, so the copy reads on any photo. The AiOS panel sits above the classic one. */
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card {
  position: relative; z-index: 1;
  display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: calc(10 * var(--t)); min-height: 0; padding: calc(24 * var(--u)) calc(26 * var(--t));
  border: 1.5px solid rgba(255, 255, 255, .42); border-radius: calc(20 * var(--t)); background: rgba(8, 12, 22, .66); color: #fff; text-align: left;
  -webkit-backdrop-filter: blur(24px) saturate(120%); backdrop-filter: blur(24px) saturate(120%);
  box-shadow: 0 28px 60px -26px rgba(0, 0, 0, .85), inset 0 1px 0 rgba(255, 255, 255, .16);
}
/* Both panels in the same dark glass (owner, 14 Oct 2026), so the AiOS orb and its button stand out. */
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card:has(#enterAios) { z-index: 2; }
/* The AiOS orb (orb.js draws it, the same sphere as the opening screen), beside the AiOS title. The sphere fills its box. */
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-orb { display: inline-flex; flex: 0 0 auto; pointer-events: none; width: calc(52 * var(--t)); height: calc(52 * var(--t)); margin-right: calc(8 * var(--t)); }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-orb svg { transform: scale(1.42); }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-orb { pointer-events: none; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-orb circle { fill: #fff; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-title { flex: 0 0 100%; margin: 0; color: #fff; font-size: calc(26 * var(--t)); font-weight: 300; line-height: 1.2; letter-spacing: -.005em; text-align: left; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-orb + .toggle-card-title { flex: 1 1 0; min-width: 0; height: auto; min-height: 0; align-self: center; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-persona { flex: 0 0 100%; margin: calc(12 * var(--u)) 0 0; color: #fff; font-size: calc(15 * var(--t)); font-weight: 500; line-height: 1.4; letter-spacing: .01em; opacity: 1; text-align: left; }
/* The persona line ships hidden (the standard gate folds it into the body copy); this design shows it whenever it has words.
   runtime.css hides [hidden] with !important, so this scoped rule needs it too. */
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-persona:not(:empty) { display: block !important; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-body { flex: 0 0 100%; margin: calc(8 * var(--u)) 0 0; color: rgba(255, 255, 255, .85); font-size: calc(16 * var(--t)); line-height: 1.5; text-align: left; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-persona:not(:empty) + .toggle-card-body { margin-top: calc(4 * var(--u)); }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card > div:not([class]) { display: none; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button {
  flex: 0 0 auto; width: auto; margin: calc(18 * var(--u)) 0 0; padding: 0 calc(24 * var(--t)); border-radius: calc(10 * var(--t));
  background: transparent; border: 1px solid rgba(255, 255, 255, .6); color: #fff;
}
/* Both choose buttons always take the wider one's width (owner, 14 Oct 2026); scale.js measures it into --choice-btn-w. */
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button { min-width: var(--choice-btn-w, 0px); }
:root[data-look-gate="cinematic"] #toggleScreen #enterAios { background: #fff; border-color: #fff; color: #0B0E14; }
/* The arrow keeps a clear gap from "See it now" (owner, 15 Oct 2026). A leading space in the content was dropped by the button's
   flex layout, so the arrow sat against the last letter; a real margin holds the gap at every size. */
:root[data-look-gate="cinematic"] #toggleScreen #enterAios::after { content: "\2192"; margin-inline-start: .5em; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button:hover { background: #fff; color: #0B0E14; }
/* The choose buttons lift on hover and on keyboard focus (owner, 14 Oct 2026), so a visitor feels them answer before they click. */
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button {
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, background-color .15s, color .15s;
}
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button:is(:hover, :focus-visible) {
  transform: translateY(-3px); box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .28);
}
:root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button:active { transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) {
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button:is(:hover, :focus-visible, :active) { transform: none; }
}
:root[data-look-gate="cinematic"] body.a11y-reduce-motion #toggleScreen .toggle-card-button:is(:hover, :focus-visible, :active) { transform: none; }
:root[data-look-gate="cinematic"] #toggleScreen .toggle-poweredby {
  grid-column: 1 / -1; grid-row: 4; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; gap: calc(20 * var(--t)); margin-top: calc(56 * var(--u));
}
:root[data-look-gate="cinematic"] #toggleScreen .toggle-poweredby .attr-mark { filter: brightness(0) invert(1); width: calc(170 * var(--t)); }
:root[data-look-gate="cinematic"] #toggleScreen .attribution { width: auto; margin: 0; color: rgba(255, 255, 255, .72); text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look-gate="cinematic"] #toggleScreen::after { animation: look-gate-photo 1.1s ease-out both, look-gate-drift 22s ease-in-out 1.1s infinite alternate; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-screen > * { animation: look-gate-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-headline { animation-delay: .08s; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-subhead { animation-delay: .16s; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-cards { animation-delay: .24s; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-poweredby { animation-delay: .36s; }
  @keyframes look-gate-photo { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
  @keyframes look-gate-drift { from { background-position: var(--gate-photo-pos); } to { background-position: 66% 44%; } }
  @keyframes look-gate-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
}
/* Portrait, phones and upright tablets (direction B2, picked by the owner on 14 Oct 2026): the copy at the top under the logo, the
   photo open through the middle, the two choices as equal glass boxes at the foot. The AiOS box carries its title, the orb, the
   persona line and the arrow; the classic box its title, line and arrow. The AiOS body line is left out. */
@container (orientation: portrait) {
  :root[data-look-gate="cinematic"] #toggleScreen { --gate-photo-pos: 70% 50%; }
  :root[data-look-gate="cinematic"] #toggleScreen::before { background: linear-gradient(180deg, rgba(7, 11, 20, 0) 0%, rgba(7, 11, 20, .08) 44%, rgba(7, 11, 20, .22) 56%, rgba(7, 11, 20, .9) 72%, rgba(7, 11, 20, .97) 100%); }
  :root[data-look-gate="cinematic"] #toggleScreen .gate-logo { filter: brightness(0) invert(1) drop-shadow(0 1px 10px rgba(0, 0, 0, .45)); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-headline, :root[data-look-gate="cinematic"] #toggleScreen .toggle-subhead { text-shadow: 0 1px 18px rgba(0, 0, 0, .5); }
  /* The screen's full height less its own padding (and 2px of slack), so the choices sit at the foot while scale.js can still tell it fits. */
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-screen {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto auto; align-items: start; max-width: none;
    min-height: calc(100cqh - max(calc(var(--pad-y) * var(--u)), env(safe-area-inset-top, 0px)) - max(calc(var(--pad-y) * var(--u)), env(safe-area-inset-bottom, 0px)) - 2px);
  }
  :root[data-look-gate="cinematic"] #toggleScreen .gate-logo { height: calc(21 * var(--u)); margin-bottom: calc(30 * var(--u)); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-headline { grid-row: 2; align-self: start; font-size: min(calc(37 * var(--t)), 9.6cqw); line-height: 1.04; letter-spacing: -.02em; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-subhead { grid-row: 3; max-width: none; margin-top: calc(12 * var(--u)); font-size: calc(15 * var(--t)); line-height: 1.45; color: rgba(255, 255, 255, .88); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-cards { grid-column: 1; grid-row: 5; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 1fr; gap: calc(10 * var(--u)); margin-top: calc(24 * var(--u)); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card {
    grid-row: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto 1fr; column-gap: calc(12 * var(--t)); align-items: start;
    padding: calc(16 * var(--u)) calc(14 * var(--t)) calc(14 * var(--u)) calc(18 * var(--t)); border-radius: calc(20 * var(--t));
  }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-orb { grid-column: 2; grid-row: 1 / span 2; justify-self: end; width: calc(44 * var(--t)); height: calc(44 * var(--t)); margin: 0; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-title { grid-column: 1; grid-row: 1; align-self: center; font-size: calc(20 * var(--t)); line-height: 1.15; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-title { grid-column: 1 / -1; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-persona { grid-column: 1; grid-row: 2; margin: calc(5 * var(--u)) 0 0; font-size: calc(13 * var(--t)); font-weight: 400; line-height: 1.38; color: rgba(255, 255, 255, .8); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card:has(#enterAios) .toggle-card-body { display: none; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { grid-column: 1 / -1; grid-row: 2; margin: calc(5 * var(--u)) 0 0; font-size: calc(13 * var(--t)); line-height: 1.38; color: rgba(255, 255, 255, .8); }
  /* The two actions: the label with an arrow in a circle, white for AiOS, outlined for the classic site. */
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button {
    grid-column: 1 / -1; grid-row: 3; align-self: end; justify-self: end; display: inline-flex; align-items: center; gap: calc(10 * var(--t));
    width: auto; min-width: 0; height: auto; margin: calc(12 * var(--u)) 0 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #fff; font-size: calc(14.5 * var(--t)); font-weight: 500;
  }
  /* The AiOS arrow spans its box like the classic one, now that no language control sits beside it (15 Oct 2026): the title keeps its width. */
  :root[data-look-gate="cinematic"] #toggleScreen #enterAios { grid-column: 1 / -1; background: transparent; color: #fff; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button::after {
    content: "\2192"; display: grid; place-items: center; flex: none; width: calc(42 * var(--t)); height: calc(42 * var(--t)); border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .6); font-size: calc(18 * var(--t)); font-weight: 400;
  }
  :root[data-look-gate="cinematic"] #toggleScreen #enterAios::after { margin-inline-start: 0; background: #fff; border-color: #fff; color: #0B0E14; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button:hover, :root[data-look-gate="cinematic"] #toggleScreen #enterAios:hover { background: transparent; color: #fff; }
  /* On portrait screens the arrow circle carries the lift: the label rises with it, the shadow sits under the circle. */
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button:is(:hover, :focus-visible) { box-shadow: none; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button::after { transition: box-shadow .2s ease, background-color .15s, color .15s; }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card-button:is(:hover, :focus-visible)::after { box-shadow: 0 12px 24px -8px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .35); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-button:is(:hover, :focus-visible)::after { background: rgba(255, 255, 255, .14); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-poweredby { grid-row: 6; flex-direction: column; align-items: flex-start; gap: calc(6 * var(--u)); margin-top: calc(16 * var(--u)); }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-poweredby .attr-mark { width: calc(118 * var(--t)); }
  :root[data-look-gate="cinematic"] #toggleScreen .attribution { text-align: left; white-space: normal; }
}
/* Upright tablets: the phone layout, drawn larger with wider side margins. */
@container (orientation: portrait) and (min-width: 600px) {
  :root[data-look-gate="cinematic"] #toggleScreen {
    --gt: clamp(1px, min(.165cqw, .1144cqh), 1.7px); --gu: clamp(.6px, min(.165cqw, .1144cqh), 1.7px); --edge: max(24px, 6cqw);
  }
  :root[data-look-gate="cinematic"] #toggleScreen .toggle-subhead { max-width: 36ch; }
}

/* ---------- 9. Highlight details and fills (owner, 16 Oct 2026): generic, each off unless a look turns it on ---------- */

/* The tenant's highlight colour: its selected-tab colour from the console, else its brand colour. */
:root:is([data-look-cta-line="highlight"], [data-look-next-star="highlight"], [data-look-banner-fill="ink"]) {
  --look-hl-detail: var(--tab-on-bg, var(--accent));
}

/* The photo's fact banner on the page ink, its icon in the highlight colour (16 Oct 2026). Colour only: the banner keeps its place,
   size and words. */
:root[data-look-banner-fill="ink"] #aiosShell .media .incentives-banner { background: var(--ink, #111); color: #fff; }
:root[data-look-banner-fill="ink"] #aiosShell .media .incentives-banner svg { color: var(--look-hl-detail); }
:root[data-look-banner-fill="ink"] #aiosShell .pc-hero .incentives-banner { background: var(--ink, #111); color: #fff; }
:root[data-look-banner-fill="ink"] #aiosShell .pc-hero .incentives-banner svg { color: var(--look-hl-detail); }

/* Action button: a 2px outline and the arrow in the highlight colour; the fill and the words keep the button colours. Drawn inside
   the button, so nothing changes size. A button that is off keeps its grey. The arrow is drawn, not typed (owner, 16 Oct 2026: the
   typed arrow came out small and low): a brand font without the arrow character hands it to whatever font the device has, so a
   drawn arrow is the same size and centred on the words everywhere. The character stays in the page for screen readers. */
:root[data-look-cta-line="highlight"] #aiosShell .cta-bar-btn:not(:disabled):not(.off) { box-shadow: inset 0 0 0 2px var(--look-hl-detail); }
:root[data-look-cta-line="highlight"] #aiosShell .cta-bar-btn:not(:disabled):not(.off) .cta-arrow {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; overflow: hidden; color: transparent; line-height: 1;
  background-color: var(--look-hl-detail);
  -webkit-mask: var(--look-arrow) center / contain no-repeat; mask: var(--look-arrow) center / contain no-repeat;
}
:root[data-look-cta-line="highlight"] {
  --look-arrow: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNiAxNic+PHBhdGggZD0nTTIuNSA4aDEwLjVNOSAzLjc1IDEzLjI1IDggOSAxMi4yNScgZmlsbD0nbm9uZScgc3Ryb2tlPScjMDAwJyBzdHJva2Utd2lkdGg9JzIuMScgc3Ryb2tlLWxpbmVjYXA9J3JvdW5kJyBzdHJva2UtbGluZWpvaW49J3JvdW5kJy8+PC9zdmc+);
}

/* Follow-up prompts: the stars in the highlight colour; the fill a faint wash of the page ink, so the words read and the prompt is
   not pure white. */
:root[data-look-next-star="highlight"] #aiosShell .aios-next-btn .spark { color: var(--look-hl-detail); }
:root[data-look-next-star="highlight"] #aiosShell .aios-next-btn .spark svg { color: var(--look-hl-detail); filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--look-hl-detail) 40%, transparent)); }
:root[data-look-next-fill="ink"] #aiosShell .aios-next-btn { background-color: color-mix(in srgb, var(--ink, #1a1a1a) 5%, transparent); }
:root[data-look-next-fill="ink"] #aiosShell .aios-next-btn:hover { background-color: color-mix(in srgb, var(--ink, #1a1a1a) 9%, transparent); }

/* Pagination bar (sort, per page, pages) in the tenant's own fill (set.bar). */
:root[data-look-set-bar="fill"] #aiosShell .set-bar { background: var(--look-set-bar); }

/* Empty photo slots in the tenant's own fill (photos.fill): the card photo, the detail photo, compare and document thumbnails, behind
   the tenant logo placeholder and while a photo loads. */
:root[data-look-photo="fill"] :is(#aiosShell, #aiosShell .screen) { --lockup: var(--look-photo); }