/* 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);
}

/* Picture (owner, 16 and 18 Oct 2026: "a picture per prompt cropped to fit"; every box lifts on hover, no select button or
   arrow): each prompt box is a whole picture, its heading over it at the bottom left in white on a soft dark gradient, its
   description below the heading where descriptions show. The picture is the look's own for that place (opening.pictures,
   looks.js marks the box data-look-pic), else the prompt's icon from the console drawn to cover the box. A box with neither
   keeps the drawn tile. One shadow, no outline; the corners are the tiles' own. The words sit at the foot of every box and every
   description takes the tallest one's height (scale.js), so the headings' last lines sit on one row across the boxes. */
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen { --os-pic-minh: calc(var(--os-head) * 6.5); }
:root[data-look-opening-tiles="picture"] #aiosShell[data-os-layout="phone"] #welcomeScreen { --os-pic-minh: calc(var(--os-head) * 6.4); }
:root[data-look-opening-tiles="picture"] #aiosShell[data-os-layout="short"] #welcomeScreen { --os-pic-minh: calc(var(--os-head) * 3.2); }
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) {
  position: relative; isolation: isolate; overflow: hidden; justify-content: flex-end; align-items: flex-start; text-align: left;
  min-height: max(var(--os-tile-minh, 0px), var(--os-pic-minh));
  padding: calc(var(--os-tpad) + 2 * var(--os-tile-padv, 0px)) var(--os-tpad) var(--os-tpad);
  border: 0; background: #16181c; color: #fff; box-shadow: 0 16px 32px -20px rgba(10, 12, 16, .55);
  transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease;
}
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action[data-look-pic]::before {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: var(--look-tile-pic, none) center / cover no-repeat; transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic])::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: linear-gradient(0deg, rgba(0, 0, 0, .84) 0%, rgba(0, 0, 0, .64) 50%, rgba(0, 0, 0, .34) 80%, rgba(0, 0, 0, .2) 100%);
}
/* The look's own picture: no icon well. The console's icon as the picture: the well becomes the whole box, its image cropped to fit. */
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action[data-look-pic] > .welcome-action-icon { display: none; }
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:not([data-look-pic]):has(> .welcome-action-icon > img:not([hidden])) > .welcome-action-icon {
  position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; margin: 0; border: 0; border-radius: inherit; background: none; box-shadow: none; overflow: hidden;
  transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:not([data-look-pic]) > .welcome-action-icon > img:not([hidden]) { width: 100%; height: 100%; object-fit: cover; }
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) .welcome-action-title {
  position: relative; z-index: 1; min-height: 0; color: #fff; font-weight: 500; text-align: left; text-shadow: 0 1px 12px rgba(0, 0, 0, .35);
}
/* Phones show headings only, three across: a long name keeps to two or three balanced lines instead of one word a line. */
:root[data-look-opening-tiles="picture"] #aiosShell[data-os-layout="phone"] #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) .welcome-action-title {
  font-size: .86em; line-height: 1.12; text-wrap: balance; hyphens: none;
}
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) .welcome-action-sub {
  position: relative; z-index: 1; min-height: var(--os-sub-minh, 0px); color: rgba(255, 255, 255, .86); text-align: left;
}
:root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]):is(:hover, :focus-visible) {
    transform: translateY(-4px); box-shadow: 0 26px 44px -22px rgba(10, 12, 16, .6);
  }
  :root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action[data-look-pic]:is(:hover, :focus-visible)::before,
  :root[data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:not([data-look-pic]):is(:hover, :focus-visible) > .welcome-action-icon { transform: scale(1.05); }
}
:root[data-look-opening-tiles="picture"] body.a11y-reduce-motion #welcomeActions .welcome-action:is(:hover, :focus-visible),
:root[data-look-opening-tiles="picture"] body.a11y-reduce-motion #welcomeActions .welcome-action:is(:hover, :focus-visible)::before,
:root[data-look-opening-tiles="picture"] body.a11y-reduce-motion #welcomeActions .welcome-action:is(:hover, :focus-visible) > .welcome-action-icon { transform: none !important; }

/* Square boxes (look.opening.shape "square", owner 19 Oct 2026): every prompt box square cornered and flat on the page, like a
   contact sheet of stills; it still lifts on hover. */
:root[data-look-opening-shape="square"] #aiosShell #welcomeScreen #welcomeActions .welcome-action { border-radius: 0; }
:root[data-look-opening-shape="square"] #aiosShell #welcomeScreen #welcomeActions .welcome-action > .welcome-action-icon { border-radius: 0; }
:root[data-look-opening-shape="square"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) { box-shadow: none; }

/* Descriptions on hover (look.opening.reveal "hover", picture boxes, owner 19 Oct 2026): only the heading at rest; on hover or
   keyboard focus the description rises into the box under it and the shade deepens to carry it. The description keeps its place
   in the layout the whole time, so the opening's sizing measures and sizes every box exactly as it would with descriptions shown:
   at rest it is only invisible and the heading is moved down over its room. Only screens with a mouse do this; touch screens
   (tablets) show their descriptions as built, and phones keep headings only as built.
   On hover each box lifts its heading only as far as its own description needs (owner, 30 Oct 2026: a one-line description left
   two lines of empty space under it, the lift being the tallest description's): the room every description keeps is the tallest
   one's, so a shorter one and its heading are moved down by the room it leaves spare (--os-sub-spare, from scale.js's
   --os-sub-own) and the words end at the foot of the box. */
@media (hover: hover) and (pointer: fine) {
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) {
    --os-sub-spare: max(0px, calc(var(--os-sub-minh, 0px) - var(--os-sub-own, var(--os-sub-minh, 0px))));
  }
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) .welcome-action-title {
    transform: translateY(calc(var(--os-sub-minh, 0px) + var(--os-head-gap, 0px))); transition: transform .4s cubic-bezier(.2, .7, .2, 1);
  }
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) .welcome-action-sub { opacity: 0; transform: translateY(calc(var(--os-sub-spare, 0px) + 12px)); transition: opacity .3s ease, transform .4s cubic-bezier(.2, .7, .2, 1); }
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]):is(:hover, :focus-visible) .welcome-action-title { transform: translateY(var(--os-sub-spare, 0px)); }
  /* While scale.js lays the opening out, the words take their places at once, never sliding there (owner report 23 Oct 2026). */
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen.os-fitting #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) :is(.welcome-action-title, .welcome-action-sub) { transition: none; }
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]):is(:hover, :focus-visible) .welcome-action-sub { opacity: 1; transform: translateY(var(--os-sub-spare, 0px)); }
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic])::after { background: linear-gradient(0deg, rgba(0, 0, 0, .72) 0%, rgba(0, 0, 0, .3) 45%, rgba(0, 0, 0, .08) 75%, rgba(0, 0, 0, 0) 100%); }
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]):is(:hover, :focus-visible)::after { background: linear-gradient(0deg, rgba(0, 0, 0, .86) 0%, rgba(0, 0, 0, .62) 55%, rgba(0, 0, 0, .36) 85%, rgba(0, 0, 0, .24) 100%); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
  :root[data-look-opening-reveal="hover"][data-look-opening-tiles="picture"] #aiosShell #welcomeScreen #welcomeActions .welcome-action:is(:has(> .welcome-action-icon > img:not([hidden])), [data-look-pic]) :is(.welcome-action-title, .welcome-action-sub) { transition: none; }
}

/* ---------- 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. Its width is the card's less its two insets, never auto: an auto
   width took its size from the photo's 4:3 shape and a phone's 240px height cap, so on a 402-wide phone the photo was 320 wide and sat
   to the left, 15px in on one side and 35 on the other (owner, 20 Oct 2026). */
: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: calc(100% - 28px); min-width: 0; align-self: center; 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); }
/* Lifted detail (Detail design C, owner 19 Oct 2026): the photo floats inside the card, inset on three sides and raised above its
   top edge with a long soft shadow, over a band of the brand tint; the card keeps its own corner and edge. */
/* No tinted band behind the raised photo: the face cards have none either (owner, 19 Oct 2026). */
:root[data-look-detail="lifted"] #aiosShell .pc { overflow: visible; margin-top: 18px; background: #FFFFFF; }
/* Buttons stay in their cards (owner, 20 Oct 2026). Every detail declares its button bars sticky (runtime.css, ".pc .cta-bar"), which
   also catches the face cards inside a detail's tab, but an ordinary detail clips its overflow, so nothing ever sticks. The lifted
   detail lets its photo out (overflow visible), which woke them: a card's Contact us floated over the card above it until the card
   scrolled into place. In a lifted detail every button bar stays where its card puts it. */
:root[data-look-detail="lifted"] #aiosShell .pc .cta-bar { position: static; }
:root[data-look-detail="lifted"] #aiosShell .pc-hero { margin: -18px 18px 0; width: auto; min-width: 0; border-radius: calc(var(--aios-r-detail, 14px) + 2px); box-shadow: 0 26px 40px -26px rgba(16, 24, 40, .6), 0 2px 6px rgba(16, 24, 40, .08); }
:root[data-look-detail="lifted"] #aiosShell[data-device="mobile"] .pc-hero { margin: -14px 12px 0; }
:root[data-look-detail="lifted"] #aiosShell .pc-id { padding: 18px 20px 14px; }
:root[data-look-detail="lifted"] #aiosShell .pc > :last-child { border-radius: 0 0 var(--aios-r-detail, 14px) var(--aios-r-detail, 14px); }

/* 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 media Wide (owner, 19 Oct 2026): every gallery and video in a detail tab runs the full width of the detail, edge to edge,
   one under another, never side by side. A gallery keeps its arrows, count, caption and strip; a video keeps its poster and plays in place. */
:root[data-look-detail-media="wide"] #aiosShell .pc > .pane { --look-pane-pad: 20px; }
:root[data-look-detail-media="wide"] #aiosShell[data-device="mobile"] .pc > .pane { --look-pane-pad: 16px; }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane :is(.rset.gallerys, .rset.videos) { display: block; margin-left: calc(-1 * var(--look-pane-pad)); margin-right: calc(-1 * var(--look-pane-pad)); }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane :is(.rset.gallerys, .rset.videos) > .rcell + .rcell { margin-top: 28px; }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane :is(.rset.gallerys, .rset.videos) .rset-title { padding: 0 var(--look-pane-pad); }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane :is(.p-gallery, .p-video) { width: auto; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none; transform: none; }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane .p-gallery-open .p-image { aspect-ratio: 16 / 9; }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane .p-video:hover { transform: none; }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane .p-video-poster { border-radius: 0; max-height: none; }
:root[data-look-detail-media="wide"] #aiosShell .pc .pane .p-video-body { padding-left: var(--look-pane-pad); padding-right: var(--look-pane-pad); }
/* 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; }
}

/* ---------- Cinematic choice screen options (owner, 29 Oct 2026): generic, each off unless a look turns it on ----------
   gate.panel "glass": the photo still fills the screen, with a slow zoom in place of the drift, and a frosted glass panel holds the two
     choices and, under them, the attribution: down the right side at full height on landscape screens (the logo at the top left and
     the headline at the foot, over the open photo), and from under the copy to the foot on portrait screens. The boxes are clear glass
     on the panel, of one height, the AiOS orb silver beside its title, the persona line and the body copy always shown, and each box
     keeps a real Choose button at its foot.
   gate.buttons "highlight": both Choose buttons filled with the tenant's highlight colour (its selected-tab colour from the console,
     else its brand colour), the words in its selected-tab label colour, else white. Portrait screens without the panel fill the arrow
     circles instead.
   gate.rule "highlight": a short rule in the highlight colour over the headline.
   The landscape panel is drawn into the gate's empty picture hook (#gateStrips), which this design does not otherwise use; on portrait
   screens the boxes and the attribution carry the panel themselves, reaching the screen's sides and foot. */
:root[data-look-gate="cinematic"]:is([data-look-gate-buttons="highlight"], [data-look-gate-rule="highlight"]) { --look-gate-hl: var(--tab-on-bg, var(--accent)); }

:root[data-look-gate="cinematic"][data-look-gate-rule="highlight"] #toggleScreen .toggle-headline::before {
  content: ""; display: block; width: calc(56 * var(--t)); height: max(3px, calc(4 * var(--t))); margin: 0 0 calc(24 * var(--u)); border-radius: 2px; background: var(--look-gate-hl);
}

/* The boxes, on either orientation. A box is never the button itself, so .toggle-card:not(#enterAios) matches both boxes; it only gives a
   rule the weight to win over the cinematic design's own rules for one box or the other. */
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card {
  display: grid; grid-row: auto; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto 1fr auto; align-items: start; align-content: stretch; column-gap: calc(16 * var(--t)); row-gap: 0;
  min-height: calc(284 * var(--u)); padding: calc(30 * var(--u)) calc(32 * var(--t));
  border: 1.5px solid rgba(255, 255, 255, .34); border-radius: calc(24 * var(--t));
  background: linear-gradient(180deg, rgba(255, 255, 255, .1) 0%, rgba(255, 255, 255, .035) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 18px 40px rgba(0, 0, 0, .25);
}
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-orb {
  grid-column: 1; grid-row: 1; align-self: center; justify-self: start; width: calc(58 * var(--t)); height: calc(58 * var(--t)); margin: 0;
  filter: drop-shadow(0 0 10px rgba(225, 232, 238, .22));
}
/* The orb is silver on the choice screen, never the brand colour (owner, 27 Oct 2026). */
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-orb circle { fill: #e6eaee; }
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-title, .toggle-card-orb + .toggle-card-title) {
  grid-column: 2; grid-row: 1; align-self: center; min-width: 0; height: auto; min-height: 0; margin: 0;
  font-size: min(calc(30 * var(--t)), 2.1cqw); font-weight: 300; line-height: 1.15; letter-spacing: -.005em;
}
/* The website box has no orb: its title keeps the orb's height round it, so both titles sit on one line across the boxes. */
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-title {
  grid-column: 1 / -1; padding-block: max(0px, calc((var(--gp-orb, 58) * var(--t) - 1.15em) / 2));
}
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-persona {
  grid-column: 1 / -1; grid-row: 2; margin: calc(14 * var(--u)) 0 0; color: #fff; font-size: calc(15 * var(--t)); font-weight: 600; line-height: 1.4; text-wrap: balance;
}
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(#enterAios) .toggle-card-body {
  display: block; grid-column: 1 / -1; grid-row: 3; max-width: calc(400 * var(--t)); margin: calc(4 * var(--u)) 0 0;
  color: rgba(255, 255, 255, .84); font-size: calc(15 * var(--t)); font-weight: 300; line-height: 1.55;
}
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { margin-top: calc(14 * var(--u)); }
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card > div:not([class]) { display: block; grid-column: 1 / -1; grid-row: 4; min-height: 0; }
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-button, #enterAios) {
  grid-column: 1 / -1; grid-row: 5; align-self: end; justify-self: start; display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: max(calc(220 * var(--t)), var(--choice-btn-w, 0px)); height: max(36px, calc(52 * var(--t))); margin: calc(22 * var(--u)) 0 0; padding: 0 calc(24 * var(--t));
  border-radius: calc(10 * var(--t)); font-size: calc(15 * var(--t)); font-weight: 500;
}

/* Landscape: the panel down the right side, the copy over the open photo. The boxes and the attribution sit together in the middle of
   the panel: rows 1 and 4 share the spare height, and the pair is moved down by half the subheading's row under the headline and
   half the difference in padding, so it is centred on the screen (exactly for a one-line subheading); a relative move, so the fit
   never counts it. The screen's own height less its padding (and 2px of slack) holds the logo at the top and the headline at the foot
   while scale.js can still tell it fits. */
@container (orientation: landscape) {
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen {
    --gp-w: min(calc(600 * var(--t)), 46cqw); --gp-px: calc(52 * var(--t)); --gp-top: max(calc(52 * var(--u)), env(safe-area-inset-top, 0px)); --gp-foot: max(calc(72 * var(--u)), env(safe-area-inset-bottom, 0px));
    --gate-photo-pos: 58% 50%;
    padding: var(--gp-top) 0 var(--gp-foot) max(calc(64 * var(--t)), env(safe-area-inset-left, 0px));
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen::before {
    background: linear-gradient(180deg, rgba(13, 17, 21, .55) 0%, rgba(13, 17, 21, .14) 38%, rgba(13, 17, 21, .82) 100%);
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen > .look-gate-strips {
    display: block; position: absolute; top: 0; right: 0; bottom: 0; width: var(--gp-w); z-index: -1; pointer-events: none;
    border-left: 1px solid rgba(255, 255, 255, .16); background: rgba(9, 12, 16, .6);
    -webkit-backdrop-filter: blur(22px) saturate(.8); backdrop-filter: blur(22px) saturate(.8);
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-screen {
    grid-template-columns: minmax(0, 1fr) var(--gp-w); grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) auto; column-gap: 0; align-items: stretch; max-width: none;
    min-height: calc(100cqh - var(--gp-top) - var(--gp-foot) - 2px);
  }
  /* The logo spans the first spare row and the rows of the boxes and the attribution, the headline those two rows and the second spare
     row, so neither adds to the spare rows' share: the spare height is split evenly, whatever the logo's and the headline's sizes. */
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .gate-logo { grid-column: 1; grid-row: 1 / 4; align-self: start; height: calc(66 * var(--u)); max-width: calc(100% - 48 * var(--t)); margin: 0; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-headline {
    grid-column: 1; grid-row: 2 / 5; align-self: end; max-width: calc(700 * var(--t)); margin: 0 calc(48 * var(--t)) 0 0; font-size: min(calc(64 * var(--t)), 5cqw); font-weight: 300; line-height: 1.05; letter-spacing: -.01em;
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-subhead {
    grid-column: 1; grid-row: 5; align-self: start; max-width: none; margin: calc(16 * var(--u)) calc(48 * var(--t)) 0 0; color: rgba(255, 255, 255, .88); font-size: calc(19 * var(--t)); font-weight: 300; line-height: 1.45;
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-cards {
    grid-column: 2; grid-row: 2; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 1fr; gap: calc(28 * var(--u)); width: auto; min-height: 0;
    margin: 0 max(var(--gp-px), env(safe-area-inset-right, 0px)) 0 var(--gp-px);
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-cards, .toggle-poweredby) { position: relative; top: calc((36 * var(--u) + 27.55 * var(--t)) / 2); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-poweredby {
    grid-column: 2; grid-row: 3; align-self: start; flex-direction: column; align-items: center; justify-content: flex-start; gap: calc(8 * var(--u)); width: auto;
    margin: calc(28 * var(--u)) max(var(--gp-px), env(safe-area-inset-right, 0px)) 0 var(--gp-px);
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .attribution { width: 100%; color: rgba(255, 255, 255, .66); text-align: center; }
  /* Both Choose buttons in the highlight colour, with or without the panel. */
  :root[data-look-gate="cinematic"][data-look-gate-buttons="highlight"] #toggleScreen :is(.toggle-card-button, #enterAios) {
    border-color: var(--look-gate-hl); background: var(--look-gate-hl); color: var(--tab-on-label, #fff);
  }
  :root[data-look-gate="cinematic"][data-look-gate-buttons="highlight"] #toggleScreen :is(.toggle-card-button, #enterAios):is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--look-gate-hl) 88%, #000); background: color-mix(in srgb, var(--look-gate-hl) 88%, #000); color: var(--tab-on-label, #fff);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--look-gate-hl) 35%, transparent);
  }
}

/* Narrower landscape screens (small laptops, tablets on their side): the panel takes its widest share, so the titles keep one line. */
@container (orientation: landscape) and (max-width: 1199px) {
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen { --gp-w: 46cqw; }
}
/* Short landscape screens (phones on their side): height is the scarce axis, so the panel is wider, the boxes size to their words, the
   AiOS box leaves out its body copy (the persona line says who it is) and everything is drawn smaller. */
@container (orientation: landscape) and (max-height: 559px) {
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen {
    --gp-w: 54cqw; --gp-px: calc(20 * var(--t)); --gp-orb: 30;
    --gp-top: max(calc(18 * var(--u)), env(safe-area-inset-top, 0px)); --gp-foot: max(calc(18 * var(--u)), env(safe-area-inset-bottom, 0px));
    padding-left: max(calc(28 * var(--t)), env(safe-area-inset-left, 0px));
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .gate-logo { height: calc(30 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-headline { max-width: none; margin-right: calc(24 * var(--t)); font-size: min(calc(34 * var(--t)), 4.6cqw); white-space: normal; }
  :root[data-look-gate="cinematic"][data-look-gate-rule="highlight"] #toggleScreen .toggle-headline::before { width: calc(36 * var(--t)); margin-bottom: calc(10 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-subhead { margin: calc(6 * var(--u)) calc(24 * var(--t)) 0 0; font-size: calc(13 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-cards, .toggle-poweredby) { top: calc((6 * var(--u) + 18.85 * var(--t)) / 2); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-cards { gap: calc(10 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card { min-height: 0; padding: calc(12 * var(--u)) calc(16 * var(--t)); border-radius: calc(14 * var(--t)); column-gap: calc(10 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-orb { width: calc(30 * var(--t)); height: calc(30 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-title, .toggle-card-orb + .toggle-card-title) { font-size: calc(17 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-persona { margin-top: calc(6 * var(--u)); font-size: calc(12 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(#enterAios) .toggle-card-body { max-width: none; font-size: calc(12 * var(--t)); line-height: 1.45; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { margin-top: calc(6 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:has(#enterAios) .toggle-card-body { display: none; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-button, #enterAios) {
    min-width: max(calc(150 * var(--t)), var(--choice-btn-w, 0px)); height: max(30px, calc(36 * var(--t))); margin-top: calc(10 * var(--u)); padding: 0 calc(16 * var(--t)); border-radius: calc(8 * var(--t)); font-size: calc(13 * var(--t));
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-poweredby { gap: calc(4 * var(--u)); margin-top: calc(10 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-poweredby .attr-mark { width: calc(110 * var(--t)); }
}

/* Portrait (phones and upright tablets): the logo at the top, the photo open under it, the headline and subheading, then the panel to
   the foot of the screen with the two boxes stacked and the attribution under them. The boxes' row carries the panel: it reaches out to
   the screen's sides (negative margins equal to the screen's padding) and down past the foot (a padding the same depth as a negative
   margin, so the rows and the fit never count it, and the screen clips it), and the attribution is drawn on top of it, so the glass is
   one piece with no seam. */
@container (orientation: portrait) {
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen {
    --gp-px: max(calc(16 * var(--t)), calc(var(--edge, 24px) - 8px));
    --gp-l: max(var(--edge, 24px), env(safe-area-inset-left, 0px)); --gp-r: max(var(--edge, 24px), env(safe-area-inset-right, 0px));
    --gate-photo-pos: 58% 30%;
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen::before {
    background: linear-gradient(180deg, rgba(13, 17, 21, .5) 0%, rgba(13, 17, 21, .12) 24%, rgba(13, 17, 21, .5) 46%, rgba(13, 17, 21, .86) 100%);
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-screen { grid-template-rows: auto minmax(0, 1fr) auto auto auto auto; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .gate-logo { grid-row: 1; height: calc(42 * var(--u)); margin: 0 0 calc(20 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-headline { grid-row: 3; font-size: min(calc(34 * var(--t)), 9.6cqw); font-weight: 300; line-height: 1.05; }
  :root[data-look-gate="cinematic"][data-look-gate-rule="highlight"] #toggleScreen .toggle-headline::before { width: calc(40 * var(--t)); margin-bottom: calc(16 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-subhead { grid-row: 4; margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--t)); font-weight: 300; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-cards {
    grid-row: 5; align-self: end; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 1fr; gap: calc(16 * var(--u)); min-height: 0;
    width: auto; margin: calc(30 * var(--u)) calc(-1 * var(--gp-r)) -100cqh calc(-1 * var(--gp-l));
    padding: calc(18 * var(--u)) max(var(--gp-px), env(safe-area-inset-right, 0px)) 100cqh max(var(--gp-px), env(safe-area-inset-left, 0px));
    border-top: 1px solid rgba(255, 255, 255, .16); background: rgba(9, 12, 16, .6);
    -webkit-backdrop-filter: blur(22px) saturate(.8); backdrop-filter: blur(22px) saturate(.8);
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card { min-height: calc(208 * var(--u)); padding: calc(18 * var(--u)) calc(18 * var(--t)); border-radius: calc(18 * var(--t)); column-gap: calc(12 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen { --gp-orb: 38; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-orb { width: calc(38 * var(--t)); height: calc(38 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-title, .toggle-card-orb + .toggle-card-title) { font-size: calc(20 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-persona { margin-top: calc(10 * var(--u)); font-size: calc(13 * var(--t)); line-height: 1.38; color: #fff; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(#enterAios) .toggle-card-body { max-width: none; font-size: calc(12.5 * var(--t)); line-height: 1.5; color: rgba(255, 255, 255, .84); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { margin-top: calc(10 * var(--u)); }
  /* The boxes keep real buttons, the width of the box, in place of the arrow circles. */
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-button, #enterAios) {
    justify-self: stretch; width: 100%; min-width: 0; height: max(36px, calc(42 * var(--t))); margin-top: calc(14 * var(--u)); padding: 0 calc(16 * var(--t));
    border: 1px solid rgba(255, 255, 255, .6); background: transparent; color: #fff; font-size: calc(14 * var(--t)); font-weight: 500;
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen #enterAios { border-color: #fff; background: #fff; color: #0B0E14; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-button::after { content: none; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen #enterAios::after {
    content: "\2192"; display: inline; width: auto; height: auto; margin-inline-start: .5em; border: 0; border-radius: 0; background: none; color: inherit; font-size: inherit; box-shadow: none;
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-button, #enterAios):is(:hover, :focus-visible) { box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .8); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-button:is(:hover, :focus-visible) { background: rgba(255, 255, 255, .1); color: #fff; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen #enterAios:is(:hover, :focus-visible) { background: #fff; color: #0B0E14; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen #enterAios:is(:hover, :focus-visible)::after { box-shadow: none; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-poweredby {
    position: relative; grid-row: 6; flex-direction: column; align-items: center; gap: calc(6 * var(--u)); width: auto; margin: calc(16 * var(--u)) 0 0;
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .attribution { color: rgba(255, 255, 255, .66); text-align: center; }
  /* Both Choose buttons in the highlight colour: real buttons on the panel, the arrow circles without it. */
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"][data-look-gate-buttons="highlight"] #toggleScreen :is(.toggle-card-button, #enterAios) {
    border-color: var(--look-gate-hl); background: var(--look-gate-hl); color: var(--tab-on-label, #fff);
  }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"][data-look-gate-buttons="highlight"] #toggleScreen .toggle-card:not(#enterAios) :is(.toggle-card-button, #enterAios):is(:hover, :focus-visible) {
    border-color: color-mix(in srgb, var(--look-gate-hl) 88%, #000); background: color-mix(in srgb, var(--look-gate-hl) 88%, #000);
    box-shadow: 0 10px 24px color-mix(in srgb, var(--look-gate-hl) 35%, transparent);
  }
  :root[data-look-gate="cinematic"][data-look-gate-buttons="highlight"]:not([data-look-gate-panel="glass"]) #toggleScreen :is(.toggle-card-button, #enterAios)::after {
    border-color: var(--look-gate-hl); background: var(--look-gate-hl); color: var(--tab-on-label, #fff);
  }
}

/* Upright tablets: the phone layout with tablet type, and the Choose buttons at their own width, as on a laptop. */
@container (orientation: portrait) and (min-width: 600px) {
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen { --gp-orb: 48; }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .gate-logo { height: calc(52 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-headline { font-size: min(calc(46 * var(--t)), 7cqw); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-subhead { font-size: calc(17 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-cards { gap: calc(20 * var(--u)); padding-top: calc(24 * var(--u)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card { min-height: 0; padding: calc(24 * var(--u)) calc(28 * var(--t)); border-radius: calc(22 * var(--t)); column-gap: calc(14 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-orb { width: calc(48 * var(--t)); height: calc(48 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-title, .toggle-card-orb + .toggle-card-title) { font-size: calc(26 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card-persona { font-size: calc(15 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen .toggle-card:not(#enterAios) .toggle-card-body { max-width: calc(520 * var(--t)); font-size: calc(15 * var(--t)); }
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen :is(.toggle-card-button, #enterAios) {
    justify-self: start; width: auto; min-width: max(calc(220 * var(--t)), var(--choice-btn-w, 0px)); height: max(36px, calc(48 * var(--t))); margin-top: calc(18 * var(--u)); padding: 0 calc(24 * var(--t)); font-size: calc(15 * var(--t));
  }
}

/* The slow zoom: from the photo's landing to about a tenth larger and a little to the left, and back, over 26 seconds each way. Never for
   a visitor who asks for less motion, here or in the AiOS settings. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-look-gate="cinematic"][data-look-gate-panel="glass"] #toggleScreen::after {
    inset: -2%; animation: look-gate-photo 1.1s ease-out both, look-gate-zoom 26s ease-in-out 1.1s infinite alternate;
  }
  @keyframes look-gate-zoom { from { transform: none; } to { transform: scale(1.1) translateX(-2%); } }
}
:root[data-look-gate="cinematic"][data-look-gate-panel="glass"] body.a11y-reduce-motion #toggleScreen::after { inset: 0; animation: none; }

/* Choice screen Film (owner, 23 Oct 2026): the tenant's own film fills the screen (looks.js draws it into the #gateStrips hook, its
   still behind it until it plays), with no tint over it, only a soft shade at the foot for the attribution. The logo, headline and
   subheading are centred over the film and the two choices sit beneath them as two white boxes side by side, so they read as a choice
   at a glance. The AiOS box carries the persona line as a tag on its top edge and the filled button; the website box the outlined
   one. The group sits centred in the screen with the attribution at the foot. No text here is bold. The gate still fits its screen
   with no scroll (scale.js); the film is out of its layout. */
@keyframes look-gate-film-in { from { opacity: 0; } to { opacity: 1; } }
:root[data-look-gate="film"] #toggleScreen { position: relative; isolation: isolate; color: #fff; background: #0B0E14; }
:root[data-look-gate="film"] #toggleScreen > .look-gate-strips { display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #0B0E14; }
:root[data-look-gate="film"] #toggleScreen .look-gate-film { position: absolute; inset: 0; background: #0B0E14 center / cover no-repeat; }
:root[data-look-gate="film"] #toggleScreen .look-gate-film video { display: block; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; }
:root[data-look-gate="film"] #toggleScreen .look-gate-film.is-playing video { opacity: 1; }
:root[data-look-gate="film"] body.a11y-reduce-motion #toggleScreen .look-gate-film video { display: none; }
:root[data-look-gate="film"] #toggleScreen > .look-gate-strips::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 38%); }
/* The group centred in the room above the attribution: equal free space above the logo and below the boxes. */
:root[data-look-gate="film"] #toggleScreen .toggle-screen {
  display: flex; flex-direction: column; align-items: center; text-align: center; 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="film"] #toggleScreen .gate-logo { height: calc(58 * var(--u)); margin: auto 0 calc(18 * var(--u)); filter: brightness(0) invert(1); }
:root[data-look-gate="film"] #toggleScreen .toggle-headline {
  margin: 0; color: #fff; font-family: var(--heading-font, inherit); font-size: min(calc(52 * var(--t)), 6.4cqw); font-weight: 300; line-height: 1.05;
  letter-spacing: .01em; text-align: center; text-wrap: balance; text-shadow: 0 2px 24px rgba(0, 0, 0, .3);
}
:root[data-look-gate="film"] #toggleScreen .toggle-subhead {
  max-width: 46ch; margin: calc(12 * var(--u)) auto 0; color: rgba(255, 255, 255, .92); font-size: calc(18 * var(--t)); font-weight: 400;
  line-height: 1.45; text-align: center; text-wrap: balance; text-shadow: 0 1px 16px rgba(0, 0, 0, .35);
}
/* The two boxes share their rows (title, line, room, button), so both are one height and both buttons sit at the foot. */
:root[data-look-gate="film"] #toggleScreen .toggle-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, min(calc(506 * var(--t)), 44cqw))); grid-template-rows: auto auto 1fr auto;
  justify-content: center; column-gap: calc(28 * var(--t)); row-gap: 0; width: 100%; min-height: calc(272 * var(--u)); margin: calc(40 * var(--u)) 0 auto;
}
:root[data-look-gate="film"] #toggleScreen .toggle-card {
  position: relative; grid-row: 1 / -1; display: grid; grid-template-rows: subgrid; row-gap: 0; justify-items: center; min-width: 0; min-height: 0;
  padding: calc(46 * var(--u)) calc(40 * var(--t)) calc(36 * var(--u)); border: 0; border-radius: calc(8 * var(--t));
  background: #fff; color: #14171C; text-align: center; box-shadow: 0 calc(24 * var(--t)) calc(60 * var(--t)) rgba(0, 10, 30, .35);
}
:root[data-look-gate="film"] #toggleScreen .toggle-card-title {
  grid-row: 1; margin: 0; color: var(--accent); font-family: var(--heading-font, inherit); font-size: calc(34 * var(--t)); font-weight: 300; line-height: 1.05; letter-spacing: .02em;
}
/* The persona line as a tag sitting on the AiOS box's top edge, in its own casing, with the AiOS orb in the tag's rounded start,
   turning as it does on the opening and in the same colour (owner, 23 Oct 2026). The tag and the orb are placed by the box, not by a
   grid row: an absolutely placed grid child with a row would sit in that row instead. scale.js measures where the tag's rounded
   start is (--persona-cx, --persona-cy) and its height, so the orb sits concentric with it; until then the orb stays hidden. The orb
   is placed by left and top only, never by transform, which its turning animation owns. runtime.css hides [hidden] with !important. */
:root[data-look-gate="film"] #toggleScreen .toggle-card-persona {
  position: absolute; grid-area: auto; top: 0; left: 50%; transform: translate(-50%, -50%); margin: 0;
  padding: calc(11 * var(--t)) calc(18 * var(--t)) calc(11 * var(--t)) calc(47 * var(--t));
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #fff); border-radius: 999px; background: #fff; color: var(--accent);
  font-size: calc(14 * var(--t)); font-weight: 400; line-height: 1.2; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 10, 30, .18);
}
:root[data-look-gate="film"] #toggleScreen .toggle-card-persona:not(:empty) { display: block !important; }
:root[data-look-gate="film"] #toggleScreen .toggle-card-orb { display: none; }
:root[data-look-gate="film"] #toggleScreen[style*="--persona-cx"] .toggle-card:has(.toggle-card-persona:not(:empty)) .toggle-card-orb {
  --orb-d: calc(var(--persona-h) - 10px);
  position: absolute; grid-area: auto; z-index: 1; display: block; margin: 0; padding: 0; pointer-events: none;
  left: calc(var(--persona-cx) - var(--orb-d) / 2); top: calc(var(--persona-cy) - var(--orb-d) / 2); width: var(--orb-d); height: var(--orb-d);
}
/* The orb exactly as on the opening, the same dots, colour and motion; only its drawing's empty margin is taken up, so the sphere
   fills the round end of the tag. */
:root[data-look-gate="film"] #toggleScreen .toggle-card-orb svg { display: block; width: 100%; height: 100%; transform: scale(1.42); }
:root[data-look-gate="film"] #toggleScreen .toggle-card-body {
  grid-row: 2; max-width: 38ch; margin: calc(14 * var(--u)) 0 0; color: rgba(20, 23, 28, .72); font-size: calc(16 * var(--t)); font-weight: 400; line-height: 1.55; text-align: center;
}
:root[data-look-gate="film"] #toggleScreen .toggle-card > div:not([class]) { grid-row: 3; min-height: 0; }
/* Both buttons solid in the brand colour (owner, 23 Oct 2026); the button itself lifts on hover and keyboard focus, the box stays. */
:root[data-look-gate="film"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) {
  grid-row: 4; align-self: end; justify-self: stretch; width: 100%; min-width: 0; height: max(36px, calc(52 * var(--t))); margin: calc(24 * var(--u)) 0 0; padding: 0 calc(20 * var(--t));
  border: 1.5px solid var(--accent); border-radius: calc(6 * var(--t)); background: var(--accent); color: #fff;
  font-size: calc(14 * var(--t)); font-weight: 400; letter-spacing: .08em;
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease;
}
:root[data-look-gate="film"] #toggleScreen :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible) {
  background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-3px); box-shadow: 0 calc(14 * var(--t)) calc(26 * var(--t)) -10px color-mix(in srgb, var(--accent) 70%, #000);
}
:root[data-look-gate="film"] #toggleScreen :is(#enterAios, #choiceTraditionalButton):active { transform: translateY(-1px); }
:root[data-look-gate="film"] #toggleScreen .toggle-card :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
:root[data-look-gate="film"] #toggleScreen .toggle-poweredby { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(24 * var(--u)); }
:root[data-look-gate="film"] #toggleScreen .toggle-poweredby .attr-mark { filter: brightness(0) invert(1); }
:root[data-look-gate="film"] #toggleScreen .attribution { color: rgba(255, 255, 255, .8); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look-gate="film"] #toggleScreen > .look-gate-strips { animation: look-gate-film-in 1s ease-out both; }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-look-gate="film"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) { transition: none; }
  :root[data-look-gate="film"] #toggleScreen :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible, :active) { transform: none; }
}
:root[data-look-gate="film"] body.a11y-reduce-motion #toggleScreen :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible, :active) { transform: none; }
/* Upright tablets: the same layout, the boxes a little narrower. */
@container (orientation: portrait) and (min-width: 600px) {
  :root[data-look-gate="film"] #toggleScreen .toggle-cards { grid-template-columns: repeat(2, minmax(0, min(calc(363 * var(--t)), 45.5cqw))); column-gap: calc(20 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card { padding: calc(40 * var(--u)) calc(26 * var(--t)) calc(30 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card-title { font-size: calc(28 * var(--t)); }
}
/* Phones held upright: the boxes stacked, the copy above them, the attribution at the foot. */
@container (orientation: portrait) and (max-width: 599px) {
  :root[data-look-gate="film"] #toggleScreen .gate-logo { height: calc(40 * var(--u)); margin-bottom: calc(12 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-headline { font-size: min(calc(34 * var(--t)), 9.4cqw); }
  :root[data-look-gate="film"] #toggleScreen .toggle-subhead { max-width: 34ch; margin-top: calc(8 * var(--u)); font-size: calc(14 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: auto; row-gap: calc(26 * var(--u)); min-height: 0; margin-top: calc(30 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card { display: flex; flex-direction: column; align-items: center; grid-row: auto; padding: calc(30 * var(--u)) calc(20 * var(--t)) calc(20 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card > * { align-self: stretch; }
  :root[data-look-gate="film"] #toggleScreen .toggle-card-persona { align-self: auto; font-size: calc(12 * var(--t)); padding: calc(9 * var(--t)) calc(14 * var(--t)) calc(9 * var(--t)) calc(39 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen[style*="--persona-cx"] .toggle-card:has(.toggle-card-persona:not(:empty)) .toggle-card-orb { align-self: auto; }
  :root[data-look-gate="film"] #toggleScreen .toggle-card-title { font-size: calc(26 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card-body { max-width: none; margin-top: calc(8 * var(--u)); font-size: calc(13.5 * var(--t)); line-height: 1.5; }
  :root[data-look-gate="film"] #toggleScreen .toggle-card > div:not([class]) { display: none; }
  :root[data-look-gate="film"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) { height: max(34px, calc(44 * var(--t))); margin-top: calc(14 * var(--u)); font-size: calc(12.5 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-poweredby { gap: calc(6 * var(--u)); margin-top: calc(18 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-poweredby .attr-mark { width: calc(120 * var(--t)); height: auto; }
}
/* Phones and small tablets on their side: one headline line, smaller boxes, the AiOS line left out. */
@container (orientation: landscape) and (max-height: 559px) {
  :root[data-look-gate="film"] #toggleScreen .gate-logo { height: calc(22 * var(--u)); margin-bottom: calc(8 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-headline { font-size: min(calc(30 * var(--t)), 4.2cqw); }
  :root[data-look-gate="film"] #toggleScreen .toggle-subhead { margin-top: calc(4 * var(--u)); font-size: calc(13.5 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-cards { grid-template-columns: repeat(2, minmax(0, min(calc(330 * var(--t)), 42cqw))); column-gap: calc(14 * var(--t)); min-height: 0; margin-top: calc(22 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card { padding: calc(20 * var(--u)) calc(18 * var(--t)) calc(14 * var(--u)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card-title { font-size: calc(20 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-card:has(#enterAios) .toggle-card-body { display: none; }
  :root[data-look-gate="film"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { margin-top: calc(6 * var(--u)); font-size: calc(13 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) { height: max(30px, calc(36 * var(--t))); margin-top: calc(10 * var(--u)); font-size: calc(12.5 * var(--t)); }
  :root[data-look-gate="film"] #toggleScreen .toggle-poweredby { gap: calc(5 * var(--u)); margin-top: calc(12 * var(--u)); }
}

/* Choice screen Strips (owner, 19 Oct 2026): columns of the tenant's pictures, tilted and drifting slowly upward under a dark wash
   (looks.js draws them into the #gateStrips hook), the logo, headline and subheading above, the two choices on frosted glass
   below them, the attribution at the foot. The glass is light (white frost, dark words) or dark (black glass, white words):
   look.gate.glass. The AiOS box carries the AiOS orb and the persona line; the classic box carries no mark. Both boxes are
   always the same size and both choose buttons the wider one's width. The pictures sit behind both boxes at once, never behind
   one. The gate still fits its screen with no scroll (scale.js); the pictures are out of its layout. */
@keyframes look-gate-strip-up { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, -50%, 0); } }
@keyframes look-gate-strips-in { from { opacity: 0; } to { opacity: 1; } }
:root[data-look-gate="strips"] #toggleScreen {
  position: relative; isolation: isolate; color: #fff; background: #000; --gcol: 1120;
  --strip-w: 17cqw; --strip-gap: 1.1cqw; --strip-tilt: -5deg; --glass-orb: calc(46 * var(--t));
  --glass-bg: rgba(255, 255, 255, .66); --glass-line: rgba(255, 255, 255, .6); --glass-ink: #0B0B0C; --glass-soft: rgba(11, 11, 12, .7);
  --glass-btn: #0B0B0C; --glass-btn-ink: #fff; --glass-edge: rgba(11, 11, 12, .38); --glass-shadow: rgba(0, 0, 0, .45);
}
:root[data-look-gate="strips"][data-look-gate-glass="dark"] #toggleScreen {
  --glass-bg: rgba(10, 10, 10, .55); --glass-line: rgba(255, 255, 255, .16); --glass-ink: #fff; --glass-soft: rgba(255, 255, 255, .76);
  --glass-btn: #fff; --glass-btn-ink: #0B0B0C; --glass-edge: rgba(255, 255, 255, .5); --glass-shadow: rgba(0, 0, 0, .7);
}
/* The pictures: a layer the size of the screen that clips a tilted field of columns, oversized so no corner ever shows. */
:root[data-look-gate="strips"] #toggleScreen > .look-gate-strips {
  display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: #000;
}
:root[data-look-gate="strips"] #toggleScreen .look-gate-strips-field {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: flex-start; gap: var(--strip-gap);
  width: max-content; height: calc(100cqh + 16cqw); transform: translate(-50%, -50%) rotate(var(--strip-tilt));
}
:root[data-look-gate="strips"] #toggleScreen .look-gate-strip {
  display: flex; flex-direction: column; flex: 0 0 var(--strip-w); width: var(--strip-w);
  animation: look-gate-strip-up 70s linear infinite; animation-delay: calc(var(--strip-i, 0) * -9.7s); will-change: transform;
}
/* Alternate columns sit half a picture lower, so the pictures never line up across the screen, moving or still. */
:root[data-look-gate="strips"] #toggleScreen .look-gate-strip:nth-child(even) { margin-top: calc(var(--strip-w) * -.62); }
/* Each picture keeps its own space below it (not a gap), so half the column is exactly one run and the loop has no seam. */
:root[data-look-gate="strips"] #toggleScreen .look-gate-strip-tile {
  display: block; flex: none; width: 100%; aspect-ratio: 4 / 5; margin: 0 0 var(--strip-gap);
  background: #141414 center / cover no-repeat; border-radius: calc(3 * var(--t));
}
/* A dark wash over every picture, and the black fade only at the foot, where the attribution sits. */
:root[data-look-gate="strips"] #toggleScreen > .look-gate-strips::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) min(22%, 200px)), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
}
:root[data-look-gate="strips"] #toggleScreen .toggle-screen { align-items: center; text-align: center; }
:root[data-look-gate="strips"] #toggleScreen .gate-logo { height: calc(28 * var(--u)); max-width: 80%; margin: 0 0 calc(40 * var(--u)); filter: brightness(0) invert(1); }
:root[data-look-gate="strips"] #toggleScreen .toggle-headline {
  margin: 0; color: #fff; font-family: var(--heading-font, inherit); font-size: min(calc(68 * var(--t)), 5.6cqw); font-weight: 300; line-height: 1.02;
  letter-spacing: -.018em; word-spacing: .06em; text-align: center; text-wrap: balance; text-shadow: 0 2px 28px rgba(0, 0, 0, .35);
}
:root[data-look-gate="strips"] #toggleScreen .toggle-headline .sentence { display: block; }
:root[data-look-gate="strips"] #toggleScreen .toggle-subhead {
  max-width: 46ch; margin: calc(22 * var(--u)) auto 0; color: rgba(255, 255, 255, .88); font-size: calc(19 * var(--t)); font-weight: 400;
  line-height: 1.45; letter-spacing: .005em; text-align: center; text-wrap: balance; text-shadow: 0 1px 18px rgba(0, 0, 0, .4);
}
/* The two boxes: one row of two equal boxes sharing five rows (the orb and title, the persona line, the line, room, the button),
   so a title that wraps in one box moves the lines below it in both, and both buttons sit at the foot. */
:root[data-look-gate="strips"] #toggleScreen .toggle-cards {
  display: grid; grid-template-columns: repeat(2, minmax(0, min(calc(430 * var(--t)), 40cqw))); grid-template-rows: minmax(var(--glass-orb), auto) auto auto 1fr auto;
  justify-content: center; column-gap: calc(20 * var(--t)); row-gap: 0; width: 100%; min-height: 0; margin: calc(48 * var(--u)) 0 0;
}
:root[data-look-gate="strips"] #toggleScreen .toggle-card {
  grid-row: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: subgrid; row-gap: 0; column-gap: calc(14 * var(--t));
  align-items: start; min-width: 0; min-height: 0; padding: calc(28 * var(--u)) calc(28 * var(--t)); border: 0; border-radius: calc(18 * var(--t));
  background: var(--glass-bg); color: var(--glass-ink); text-align: left;
  -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 0 0 0 1px var(--glass-line), 0 30px 60px -30px var(--glass-shadow);
}
:root[data-look-gate="strips"] #toggleScreen .toggle-card-orb {
  display: inline-flex; grid-column: 1; grid-row: 1; align-self: center; width: var(--glass-orb); height: var(--glass-orb); margin: 0; pointer-events: none;
}
:root[data-look-gate="strips"] #toggleScreen .toggle-card-orb svg { transform: scale(1.42); }
:root[data-look-gate="strips"][data-look-gate-glass="dark"] #toggleScreen .toggle-card-orb circle { fill: #fff; }
/* Both title rows are at least the orb's height, so the lines below them start on one row in both boxes. */
:root[data-look-gate="strips"] #toggleScreen .toggle-card-title {
  grid-column: 1 / -1; grid-row: 1; align-self: center; margin: 0;
  color: var(--glass-ink); font-family: var(--heading-font, inherit); font-size: calc(26 * var(--t)); font-weight: 500; line-height: 1.15; letter-spacing: -.012em; text-align: left;
}
:root[data-look-gate="strips"] #toggleScreen .toggle-card-orb + .toggle-card-title { grid-column: 2; }
:root[data-look-gate="strips"] #toggleScreen .toggle-card-persona {
  grid-column: 1 / -1; grid-row: 2; margin: calc(18 * var(--u)) 0 0; color: var(--glass-ink); font-size: calc(15.5 * var(--t)); font-weight: 500; line-height: 1.4; 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="strips"] #toggleScreen .toggle-card-persona:not(:empty) { display: block !important; }
:root[data-look-gate="strips"] #toggleScreen .toggle-card-body {
  grid-column: 1 / -1; grid-row: 3; margin: calc(6 * var(--u)) 0 0; color: var(--glass-soft); font-size: calc(15.5 * var(--t)); line-height: 1.5; text-align: left;
}
/* The classic box has no persona line: its line takes the persona line's row, so the two read across on one row. */
:root[data-look-gate="strips"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { grid-row: 2; margin-top: calc(18 * var(--u)); }
:root[data-look-gate="strips"] #toggleScreen .toggle-card > div:not([class]) { grid-column: 1 / -1; grid-row: 4; min-height: 0; }
/* The choose buttons: the same width (owner, 14 Oct 2026; scale.js measures the wider into --choice-btn-w), AiOS filled, the
   website outlined, both lifting on hover and keyboard focus. */
:root[data-look-gate="strips"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) {
  grid-column: 1 / -1; grid-row: 5; justify-self: start; align-self: end; display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-width: var(--choice-btn-w, 0px); height: max(34px, calc(48 * var(--t))); margin: calc(26 * var(--u)) 0 0; padding: 0 calc(26 * var(--t));
  border-radius: 999px; font-size: calc(15 * var(--t)); font-weight: 500; letter-spacing: .005em; text-transform: none; white-space: nowrap;
  transition: transform .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, background-color .15s, color .15s, border-color .15s;
}
:root[data-look-gate="strips"] #toggleScreen #enterAios { background: var(--glass-btn); border: 1px solid var(--glass-btn); color: var(--glass-btn-ink); }
/* The arrow keeps a clear gap from the words at every size (as on the cinematic gate, owner 15 Oct 2026). */
:root[data-look-gate="strips"] #toggleScreen #enterAios::after { content: "\2192"; margin-inline-start: .5em; }
:root[data-look-gate="strips"] #toggleScreen #choiceTraditionalButton { background: transparent; border: 1px solid var(--glass-edge); color: var(--glass-ink); }
:root[data-look-gate="strips"] #toggleScreen #enterAios:is(:hover, :focus-visible) { background: var(--glass-btn); color: var(--glass-btn-ink); }
:root[data-look-gate="strips"] #toggleScreen #choiceTraditionalButton:is(:hover, :focus-visible) { background: var(--glass-btn); border-color: var(--glass-btn); color: var(--glass-btn-ink); }
:root[data-look-gate="strips"] #toggleScreen :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible) {
  transform: translateY(-3px); box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .65);
}
:root[data-look-gate="strips"] #toggleScreen :is(#enterAios, #choiceTraditionalButton):active { transform: translateY(-1px); }
:root[data-look-gate="strips"] #toggleScreen .toggle-card :focus-visible { outline: 2px solid var(--glass-ink); outline-offset: 3px; }
:root[data-look-gate="strips"] #toggleScreen .toggle-poweredby { display: flex; flex-direction: column; align-items: center; gap: calc(8 * var(--u)); margin-top: calc(44 * var(--u)); }
:root[data-look-gate="strips"] #toggleScreen .toggle-poweredby .attr-mark { filter: brightness(0) invert(1); }
:root[data-look-gate="strips"] #toggleScreen .attribution { color: rgba(255, 255, 255, .74); }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look-gate="strips"] #toggleScreen > .look-gate-strips { animation: look-gate-strips-in 1.2s ease-out both; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-screen > * { animation: look-gate-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-headline { animation-delay: .08s; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-subhead { animation-delay: .16s; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-cards { animation-delay: .24s; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-poweredby { animation-delay: .36s; }
}
/* Less motion: the columns stand still (alternate ones still offset) and nothing lifts. */
@media (prefers-reduced-motion: reduce) {
  :root[data-look-gate="strips"] #toggleScreen .look-gate-strip { animation: none; }
  :root[data-look-gate="strips"] #toggleScreen :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible, :active) { transform: none; }
}
:root[data-look-gate="strips"] body.a11y-reduce-motion #toggleScreen .look-gate-strip { animation: none; }
:root[data-look-gate="strips"] body.a11y-reduce-motion #toggleScreen > .look-gate-strips,
:root[data-look-gate="strips"] body.a11y-reduce-motion #toggleScreen .toggle-screen > * { animation: none; }
:root[data-look-gate="strips"] body.a11y-reduce-motion #toggleScreen :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible, :active) { transform: none; }
/* Upright tablets: the same layout, drawn larger, the columns wider. */
@container (orientation: portrait) and (min-width: 600px) {
  :root[data-look-gate="strips"] #toggleScreen { --strip-w: 25cqw; --strip-gap: 1.6cqw; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-headline { font-size: min(calc(64 * var(--t)), 8.4cqw); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-subhead { max-width: 38ch; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-cards { grid-template-columns: repeat(2, minmax(0, min(calc(410 * var(--t)), 45.5cqw))); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card-title { font-size: calc(24 * var(--t)); }
}
/* Phones held upright: the copy at the top, the pictures open through the middle, the two boxes stacked at the foot, equal in
   height, each button the width of its box. The AiOS line is left out; the persona line stays. */
@container (orientation: portrait) and (max-width: 599px) {
  :root[data-look-gate="strips"] #toggleScreen { --strip-w: 36cqw; --strip-gap: 2.4cqw; }
  /* The copy sits on the pictures at the top of a narrow screen: a soft shade behind it there. */
  :root[data-look-gate="strips"] #toggleScreen > .look-gate-strips::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, .34) 0%, rgba(0, 0, 0, 0) 52%), linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) min(22%, 200px)), linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5));
  }
  :root[data-look-gate="strips"] #toggleScreen .toggle-screen {
    display: flex; flex-direction: column; align-items: center;
    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="strips"] #toggleScreen .gate-logo { height: calc(19 * var(--u)); margin-bottom: calc(26 * var(--u)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-headline { font-size: min(calc(40 * var(--t)), 10.6cqw); line-height: 1.03; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-subhead { max-width: 34ch; margin: calc(12 * var(--u)) auto calc(22 * var(--u)); font-size: calc(15 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-cards { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: 1fr; gap: calc(10 * var(--u)); margin-top: auto; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card { grid-row: auto; grid-template-rows: minmax(var(--glass-orb), auto) auto auto 1fr auto; padding: calc(16 * var(--u)) calc(18 * var(--t)) calc(18 * var(--u)); border-radius: calc(16 * var(--t)); column-gap: calc(12 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen { --glass-orb: calc(38 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card-title { font-size: calc(20 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card-persona { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--t)); line-height: 1.38; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card:has(#enterAios) .toggle-card-body { display: none; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { margin-top: calc(10 * var(--u)); font-size: calc(14 * var(--t)); line-height: 1.38; }
  :root[data-look-gate="strips"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) { justify-self: stretch; width: 100%; min-width: 0; height: max(34px, calc(44 * var(--t))); margin-top: calc(14 * var(--u)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-poweredby { gap: calc(6 * var(--u)); margin-top: calc(18 * var(--u)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-poweredby .attr-mark { width: calc(120 * var(--t)); height: auto; }
}
/* Phones and small tablets on their side: one headline line, smaller boxes, the AiOS line left out. */
@container (orientation: landscape) and (max-height: 559px) {
  :root[data-look-gate="strips"] #toggleScreen { --strip-w: 15cqw; --strip-gap: 1cqw; }
  :root[data-look-gate="strips"] #toggleScreen .gate-logo { height: calc(17 * var(--u)); margin-bottom: calc(12 * var(--u)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-headline { font-size: min(calc(32 * var(--t)), 4.2cqw); line-height: 1.08; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-headline .sentence { display: inline; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-subhead { max-width: 64ch; margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--t)); line-height: 1.4; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-cards { grid-template-columns: repeat(2, minmax(0, min(calc(330 * var(--t)), 42cqw))); gap: calc(14 * var(--t)); margin-top: calc(18 * var(--u)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card { padding: calc(14 * var(--u)) calc(18 * var(--t)); border-radius: calc(14 * var(--t)); column-gap: calc(10 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen { --glass-orb: calc(32 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card-title { font-size: calc(18 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card-persona { margin-top: calc(8 * var(--u)); font-size: calc(13 * var(--t)); line-height: 1.35; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card:has(#enterAios) .toggle-card-body { display: none; }
  :root[data-look-gate="strips"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { margin-top: calc(8 * var(--u)); font-size: calc(13 * var(--t)); line-height: 1.35; }
  :root[data-look-gate="strips"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) { height: max(30px, calc(36 * var(--t))); margin-top: calc(12 * var(--u)); padding: 0 calc(18 * var(--t)); font-size: calc(13.5 * var(--t)); }
  :root[data-look-gate="strips"] #toggleScreen .toggle-poweredby { gap: calc(5 * var(--u)); margin-top: calc(14 * var(--u)); }
}

/* Strips, heavy frost (look.gate.frost "heavy", owner 19 Oct 2026): each picture blurred and a stronger wash, so the pictures read
   as light and movement behind the words rather than as photos. The blur sits on each picture, never on the moving field. */
:root[data-look-gate="strips"][data-look-gate-frost="heavy"] #toggleScreen .look-gate-strip-tile { filter: blur(calc(9 * var(--t))) saturate(.9); }
:root[data-look-gate="strips"][data-look-gate-frost="heavy"]:not([data-look-gate-glass="paper"]) #toggleScreen > .look-gate-strips::after {
  background: linear-gradient(0deg, rgba(0, 0, 0, .9) 0%, rgba(0, 0, 0, 0) min(22%, 200px)), linear-gradient(rgba(0, 0, 0, .62), rgba(0, 0, 0, .62));
}

/* Strips, paper (look.gate.glass "paper", owner 19 Oct 2026): the two choices as letters on the tenant's own paper, folded in
   three like a letter out of its envelope, with a long shadow down and to the right. Opaque, square cornered, dark words. The
   world behind them goes light: the pictures under a pale wash, the headline and subheading in ink. Optional pictures: the
   tenant's letterhead across the top of each letter (gate.letterhead) and a strip of its marks at the foot (gate.letterfoot); the
   letterhead takes the place of the logo above the headline, so the name is not said three times. Same boxes, same rows, same
   equal buttons as the glass. */
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen {
  color: #0B0B0C; background: #EEEDEA;
  --paper: #F3F2EF; --paper-top: #EFEEEA; --paper-mid-a: #FBFBFA; --paper-mid-b: #DCDBD8; --paper-ink: #111111; --paper-soft: rgba(17, 17, 17, .68);
  --glass-ink: #111111; --glass-soft: rgba(17, 17, 17, .68); --glass-btn: #111111; --glass-btn-ink: #fff; --glass-edge: rgba(17, 17, 17, .55);
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen > .look-gate-strips { background: #EEEDEA; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen > .look-gate-strips::after {
  background: linear-gradient(0deg, rgba(240, 239, 235, .96) 0%, rgba(240, 239, 235, 0) min(24%, 220px)), linear-gradient(rgba(240, 239, 235, .5), rgba(240, 239, 235, .5));
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-frost="heavy"] #toggleScreen > .look-gate-strips::after {
  background: linear-gradient(0deg, rgba(240, 239, 235, .97) 0%, rgba(240, 239, 235, 0) min(24%, 220px)), linear-gradient(rgba(240, 239, 235, .56), rgba(240, 239, 235, .56));
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .gate-logo { filter: none; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-letterhead="on"] #toggleScreen .gate-logo { display: none; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-headline {
  color: #0B0B0C; font-size: min(calc(104 * var(--t)), 8.2cqw); font-weight: 400; line-height: .98; letter-spacing: -.035em; word-spacing: 0; text-shadow: none;
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-subhead {
  max-width: 30ch; margin-top: calc(26 * var(--u)); color: rgba(11, 11, 12, .9); font-size: calc(27 * var(--t)); font-weight: 400; line-height: 1.22;
  letter-spacing: -.012em; text-shadow: none;
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-cards {
  grid-template-rows: auto minmax(var(--glass-orb), auto) auto auto 1fr auto auto; column-gap: calc(34 * var(--t)); margin-top: calc(52 * var(--u));
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card {
  padding: calc(26 * var(--u)) calc(30 * var(--t)) calc(24 * var(--u)); border-radius: 0; color: var(--paper-ink);
  background: linear-gradient(180deg, var(--paper-top) 0%, var(--paper-top) 33.2%, var(--paper-mid-a) 33.4%, color-mix(in srgb, var(--paper-mid-a) 55%, var(--paper-mid-b)) 50%, var(--paper-mid-b) 66.5%, var(--paper) 66.7%, var(--paper) 100%);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), calc(18 * var(--t)) calc(26 * var(--t)) calc(34 * var(--t)) calc(-14 * var(--t)) rgba(0, 0, 0, .42), calc(4 * var(--t)) calc(6 * var(--t)) calc(10 * var(--t)) calc(-4 * var(--t)) rgba(0, 0, 0, .14);
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-letterhead="on"] #toggleScreen .toggle-card::before {
  content: ""; grid-column: 1 / -1; grid-row: 1; display: block; height: calc(23 * var(--t)); margin: 0 0 calc(24 * var(--u));
  background: var(--look-gate-letterhead) left center / contain no-repeat;
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-letterfoot="on"] #toggleScreen .toggle-card::after {
  content: ""; grid-column: 1 / -1; grid-row: 7; display: block; height: calc(14 * var(--t)); margin: calc(26 * var(--u)) 0 0;
  background: var(--look-gate-letterfoot) left center / contain no-repeat; opacity: .92;
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card-orb { grid-row: 2; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card-title { grid-row: 2; font-size: calc(23 * var(--t)); font-weight: 400; letter-spacing: -.012em; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card-persona { grid-row: 3; margin-top: calc(16 * var(--u)); font-weight: 500; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card-body { grid-row: 4; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { grid-row: 3; margin-top: calc(16 * var(--u)); }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card > div:not([class]) { grid-row: 5; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) {
  grid-row: 6; border-radius: 0; margin-top: calc(24 * var(--u)); font-weight: 500; letter-spacing: .01em;
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible) { box-shadow: 0 14px 24px -14px rgba(0, 0, 0, .55); }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-poweredby .attr-mark { filter: none; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .attribution { color: rgba(17, 17, 17, .7); }
@container (orientation: portrait) and (min-width: 600px) {
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-headline { font-size: min(calc(92 * var(--t)), 11cqw); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-subhead { font-size: calc(24 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-cards { column-gap: calc(22 * var(--t)); }
}
@container (orientation: portrait) and (max-width: 599px) {
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen > .look-gate-strips::after {
    background: linear-gradient(180deg, rgba(240, 239, 235, .55) 0%, rgba(240, 239, 235, 0) 46%), linear-gradient(0deg, rgba(240, 239, 235, .97) 0%, rgba(240, 239, 235, 0) min(24%, 220px)), linear-gradient(rgba(240, 239, 235, .6), rgba(240, 239, 235, .6));
  }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-headline { font-size: min(calc(56 * var(--t)), 14.6cqw); line-height: .98; }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-subhead { max-width: 28ch; margin: calc(14 * var(--u)) auto calc(20 * var(--u)); font-size: calc(17 * var(--t)); line-height: 1.28; }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-cards { grid-template-rows: none; gap: calc(14 * var(--u)); margin-top: auto; }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card { grid-template-rows: auto minmax(var(--glass-orb), auto) auto auto 1fr auto auto; padding: calc(14 * var(--u)) calc(18 * var(--t)) calc(16 * var(--u)); border-radius: 0;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), calc(10 * var(--t)) calc(16 * var(--t)) calc(22 * var(--t)) calc(-10 * var(--t)) rgba(0, 0, 0, .4); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-letterhead="on"] #toggleScreen .toggle-card::before { height: calc(12 * var(--t)); margin-bottom: calc(12 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-letterfoot="on"] #toggleScreen .toggle-card::after { display: none; }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card-title { font-size: calc(19 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card-persona { margin-top: calc(8 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card:not(:has(#enterAios)) .toggle-card-body { margin-top: calc(8 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) { margin-top: calc(12 * var(--u)); }
}
@container (orientation: landscape) and (max-height: 559px) {
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-headline { font-size: min(calc(40 * var(--t)), 5.4cqw); line-height: 1; }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-subhead { max-width: 60ch; font-size: calc(15 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-cards { margin-top: calc(16 * var(--u)); column-gap: calc(18 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card { padding: calc(12 * var(--u)) calc(16 * var(--t)); border-radius: 0; }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-letterhead="on"] #toggleScreen .toggle-card::before { height: calc(12 * var(--t)); margin-bottom: calc(8 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-letterfoot="on"] #toggleScreen .toggle-card::after { display: none; }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card-title { font-size: calc(17 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen :is(#enterAios, #choiceTraditionalButton) { margin-top: calc(10 * var(--u)); }
}

/* Opening, strips backdrop (look.opening.backdrop "strips", owner 19 Oct 2026): the choice screen's pictures carried on behind the
   opening, frosted almost to the page colour, still drifting, so the opening keeps the gate's life without competing with the
   prompt boxes. Drawn into its own aria-hidden hook (#openingBackdrop); the top bar goes clear over it and the dock keeps its own
   background, as with Drift. */
:root[data-look-opening-backdrop="strips"] #aiosShell:has(#welcomeScreen:not([hidden])) { position: relative; isolation: isolate; background: var(--bg, #fff); }
:root[data-look-opening-backdrop="strips"] #aiosShell:has(#welcomeScreen:not([hidden])) .topbar { background: transparent; }
:root[data-look-opening-backdrop="strips"] #aiosShell:has(#welcomeScreen:not([hidden])) #openingBackdrop {
  display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: var(--bg, #fff);
  --strip-w: 15vw; --strip-gap: 1.2vw; --strip-tilt: -5deg;
}
:root[data-look-opening-backdrop="strips"] #openingBackdrop .look-gate-strips-field {
  position: absolute; left: 50%; top: 50%; display: flex; align-items: flex-start; gap: var(--strip-gap);
  width: max-content; height: calc(100vh + 16vw); transform: translate(-50%, -50%) rotate(var(--strip-tilt));
}
:root[data-look-opening-backdrop="strips"] #openingBackdrop .look-gate-strip {
  display: flex; flex-direction: column; flex: 0 0 var(--strip-w); width: var(--strip-w);
  animation: look-gate-strip-up 110s linear infinite; animation-delay: calc(var(--strip-i, 0) * -13s); will-change: transform;
}
:root[data-look-opening-backdrop="strips"] #openingBackdrop .look-gate-strip:nth-child(even) { margin-top: calc(var(--strip-w) * -.62); }
:root[data-look-opening-backdrop="strips"] #openingBackdrop .look-gate-strip-tile {
  display: block; flex: none; width: 100%; aspect-ratio: 4 / 5; margin: 0 0 var(--strip-gap);
  background: #ddd center / cover no-repeat; border-radius: calc(3 * var(--t)); filter: blur(1.5px) saturate(.85);
}
/* The page colour over the pictures: thickest where the greeting sits and above the dock, thinnest through the boxes' band. */
:root[data-look-opening-backdrop="strips"] #openingBackdrop::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--bg, #fff) 93%, transparent) 0%, color-mix(in srgb, var(--bg, #fff) 87%, transparent) 34%, color-mix(in srgb, var(--bg, #fff) 84%, transparent) 62%, color-mix(in srgb, var(--bg, #fff) 93%, transparent) 100%);
}
@media (max-width: 599px) { :root[data-look-opening-backdrop="strips"] #aiosShell:has(#welcomeScreen:not([hidden])) #openingBackdrop { --strip-w: 34vw; --strip-gap: 2.4vw; } }
@media (prefers-reduced-motion: reduce) { :root[data-look-opening-backdrop="strips"] #openingBackdrop .look-gate-strip { animation: none; } }
:root[data-look-opening-backdrop="strips"] body.a11y-reduce-motion #openingBackdrop .look-gate-strip { animation: none; }

/* Paper letters on a dark world (look.gate.tone "dark", owner 19 Oct 2026): the same letters over a dark wash, the headline and
   subheading in white, like the letter laid on a dark desk. */
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen { background: #0B0B0C; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen > .look-gate-strips { background: #0B0B0C; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen > .look-gate-strips::after {
  background: linear-gradient(0deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, 0) min(24%, 220px)), linear-gradient(rgba(8, 8, 9, .62), rgba(8, 8, 9, .62));
}
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen :is(.toggle-headline, .toggle-subhead) { color: #fff; }
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen .gate-logo,
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen .toggle-poweredby .attr-mark { filter: brightness(0) invert(1); }
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen .attribution { color: rgba(255, 255, 255, .74); }
:root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen .toggle-card {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .06), calc(18 * var(--t)) calc(26 * var(--t)) calc(40 * var(--t)) calc(-10 * var(--t)) rgba(0, 0, 0, .75);
}
@container (orientation: portrait) and (max-width: 599px) {
  :root[data-look-gate="strips"][data-look-gate-glass="paper"][data-look-gate-tone="dark"] #toggleScreen > .look-gate-strips::after {
    background: linear-gradient(180deg, rgba(8, 8, 9, .5) 0%, rgba(8, 8, 9, 0) 46%), linear-gradient(0deg, rgba(8, 8, 9, .92) 0%, rgba(8, 8, 9, 0) min(24%, 220px)), linear-gradient(rgba(8, 8, 9, .58), rgba(8, 8, 9, .58));
  }
  /* Paper letters keep the AiOS line on phones: it is the line that says what AiOS is. */
  :root[data-look-gate="strips"][data-look-gate-glass="paper"] #toggleScreen .toggle-card:has(#enterAios) .toggle-card-body { display: block; margin-top: calc(4 * var(--u)); font-size: calc(13.5 * var(--t)); line-height: 1.38; }
}

/* Opening, marquee backdrop (look.opening.backdrop "marquee" with opening.marquee, owner 19 Oct 2026): the tenant's own sentence
   in very large, faint type, crossing the screen slowly through the band of prompt boxes, showing in the margins and gaps around
   them. Drawn into the opening's aria-hidden hook; still for visitors who ask for less motion. */
@keyframes look-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
:root[data-look-opening-backdrop="marquee"] #aiosShell:has(#welcomeScreen:not([hidden])) { position: relative; isolation: isolate; background: var(--bg, #fff); }
:root[data-look-opening-backdrop="marquee"] #aiosShell:has(#welcomeScreen:not([hidden])) .topbar { background: transparent; }
:root[data-look-opening-backdrop="marquee"] #aiosShell:has(#welcomeScreen:not([hidden])) #openingBackdrop {
  display: block; position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
:root[data-look-opening-backdrop="marquee"] #openingBackdrop .look-opening-marquee {
  position: absolute; left: 0; top: 62%; display: flex; width: max-content; transform: translate3d(0, 0, 0);
  font-family: var(--look-font-heading, var(--heading-font, inherit)); font-size: 30vh; font-weight: 300; line-height: 1; letter-spacing: -.035em;
  white-space: nowrap; color: color-mix(in srgb, var(--ink, #111) 7%, transparent);
  margin-top: -15vh; animation: look-marquee 160s linear infinite; will-change: transform;
}
:root[data-look-opening-backdrop="marquee"] #openingBackdrop .look-opening-marquee span { padding-right: .6em; }
@media (prefers-reduced-motion: reduce) { :root[data-look-opening-backdrop="marquee"] #openingBackdrop .look-opening-marquee { animation: none; } }
:root[data-look-opening-backdrop="marquee"] body.a11y-reduce-motion #openingBackdrop .look-opening-marquee { animation: none; }

/* Opening, paper backdrop (look.opening.backdrop "paper", owner 19 Oct 2026): the whole opening on the tenant's letter paper,
   folded in three like the letters on the choice screen. Colour only; nothing moves. */
:root[data-look-opening-backdrop="paper"] #aiosShell:has(#welcomeScreen:not([hidden])) {
  background: linear-gradient(180deg, #EFEEEA 0%, #EFEEEA 33.2%, #FBFBFA 33.4%, #EEEDEA 50%, #DFDEDB 66.5%, #F3F2EF 66.7%, #F3F2EF 100%);
}
/* Phones held upright only (owner, 19 and 20 Oct 2026): there the boxes fill the middle third and the lighter middle fold sat behind them
   like a white casing, so a phone gets one even paper tone with two fine creases placed in the open paper around the boxes (scale.js
   placePaperFolds sets --paper-fold-1 and -2; the thirds otherwise). Every larger screen keeps the folded paper as designed. */
:root[data-aios-screen=phone][data-look-opening-backdrop="paper"] #aiosShell:has(#welcomeScreen:not([hidden])) {
  background:
    linear-gradient(180deg, transparent calc(var(--paper-fold-1, 33.333%) - 1px), rgba(0, 0, 0, .07) calc(var(--paper-fold-1, 33.333%) - 1px), rgba(0, 0, 0, .07) var(--paper-fold-1, 33.333%), rgba(255, 255, 255, .7) var(--paper-fold-1, 33.333%), rgba(255, 255, 255, .7) calc(var(--paper-fold-1, 33.333%) + 1px), transparent calc(var(--paper-fold-1, 33.333%) + 1px), transparent calc(var(--paper-fold-2, 66.667%) - 1px), rgba(0, 0, 0, .07) calc(var(--paper-fold-2, 66.667%) - 1px), rgba(0, 0, 0, .07) var(--paper-fold-2, 66.667%), rgba(255, 255, 255, .7) var(--paper-fold-2, 66.667%), rgba(255, 255, 255, .7) calc(var(--paper-fold-2, 66.667%) + 1px), transparent calc(var(--paper-fold-2, 66.667%) + 1px)),
    #EFEEEA;
}
:root[data-look-opening-backdrop="paper"] #aiosShell:has(#welcomeScreen:not([hidden])) .topbar { background: transparent; }

/* The tenant's own mark beside its logo in the top bar, inside AiOS (look.header.mark, owner 19 Oct 2026). The same height as the
   logo, a small gap, nothing else moves. */
:root[data-look-header-mark="on"] #aiosShell .topbar .brand-home::before {
  content: ""; flex: none; width: calc(var(--tb-logo, 32) * var(--st, 1px) * 1.1); height: calc(var(--tb-logo, 32) * var(--st, 1px) * 1.1);
  margin-right: calc(var(--tb-logo, 32) * var(--st, 1px) * .28); background: var(--look-header-mark) center / contain no-repeat;
}

/* ---------- Strips choice screen layouts (look.gate.layout, owner 19 Oct 2026) ----------
   The same boxes, words and buttons in four more arrangements. Each still fits its screen with no scroll (scale.js shrinks the
   whole gate together), and every choose button keeps the wider one's width. */

/* Split: the headline very large on the left, the two letters stacked on the right, each tilted a little the other way, the
   website letter tucked under the AiOS letter like a second sheet. */
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-screen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, calc(480 * var(--t))); grid-template-rows: 1fr auto auto 1fr auto;
  column-gap: 6cqw; align-items: start; justify-items: start; max-width: calc(1320 * var(--t)); text-align: left;
}
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .gate-logo { grid-column: 1; grid-row: 1; margin: 0; }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-headline { grid-column: 1; grid-row: 2; text-align: left; font-size: min(calc(132 * var(--t)), 9.6cqw); line-height: .9; letter-spacing: -.045em; }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-subhead { grid-column: 1; grid-row: 3; max-width: 22ch; margin: calc(28 * var(--u)) 0 0; text-align: left; text-wrap: pretty; }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-cards { grid-column: 2; grid-row: 1 / 6; align-self: center; display: flex; flex-direction: column; width: 100%; min-height: 0; margin: 0; }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card { grid-row: auto; grid-template-rows: auto minmax(var(--glass-orb), auto) auto auto auto auto auto; position: relative; z-index: 2; transform: rotate(-1.4deg); }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card:not(:has(#enterAios)) { z-index: 1; margin-top: calc(-6 * var(--u)); transform: translateX(3%) rotate(1.8deg); }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card:not(:has(#enterAios))::after { display: none; }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card > div:not([class]) { display: none; }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-poweredby { grid-column: 1; grid-row: 5; align-items: flex-start; margin-top: calc(24 * var(--u)); }
:root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .attribution { text-align: left; }

/* Letter: one sheet of the tenant's paper holding everything, like a letter out of its envelope: the letterhead, the headline and
   line, then the two choices side by side under a rule, the marks and the attribution at its foot. */
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-screen {
  max-width: calc(860 * var(--t)); padding: calc(40 * var(--u)) calc(56 * var(--t)) calc(28 * var(--u)); align-items: stretch; text-align: left; position: relative;
  background: linear-gradient(180deg, #EFEEEA 0%, #EFEEEA 33.2%, #FBFBFA 33.4%, #EAE9E6 50%, #DCDBD8 66.5%, #F3F2EF 66.7%, #F3F2EF 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .04), calc(24 * var(--t)) calc(34 * var(--t)) calc(46 * var(--t)) calc(-16 * var(--t)) rgba(0, 0, 0, .45);
  color: #111;
}
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-screen::before { content: none; }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"])[data-look-gate-letterhead="on"] #toggleScreen .toggle-screen::before {
  content: ""; order: -1; display: block; height: calc(34 * var(--t)); margin: 0 0 calc(30 * var(--u)); background: var(--look-gate-letterhead) left center / contain no-repeat;
}
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"])[data-look-gate-letterfoot="on"] #toggleScreen .toggle-screen::after {
  content: ""; order: 9; display: block; height: calc(15 * var(--t)); margin: calc(30 * var(--u)) 0 0; background: var(--look-gate-letterfoot) left center / contain no-repeat;
}
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen :is(.toggle-headline, .toggle-subhead) { color: #111; text-align: left; text-shadow: none; }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-headline { font-size: calc(70 * var(--t)); line-height: .96; }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-subhead { max-width: 34ch; margin: calc(14 * var(--u)) 0 0; font-size: calc(21 * var(--t)); }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-cards {
  grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 0; margin-top: calc(34 * var(--u)); padding-top: calc(26 * var(--u));
  border-top: 1px solid rgba(17, 17, 17, .2); width: 100%;
}
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-card { padding: 0 calc(36 * var(--t)) 0 0; background: none; box-shadow: none; transform: none; }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-card:not(:has(#enterAios)) { padding: 0 0 0 calc(36 * var(--t)); border-left: 1px solid rgba(17, 17, 17, .2); }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-card::before, :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-card::after { display: none !important; }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-poweredby { order: 10; align-items: flex-start; margin-top: calc(18 * var(--u)); padding-top: calc(14 * var(--u)); border-top: 1px solid rgba(17, 17, 17, .12); }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-poweredby .attr-mark { filter: none !important; }
:root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .attribution { color: rgba(17, 17, 17, .7) !important; text-align: left; }

/* Mosaic: the pictures still and sharp in a grid that fills the screen, each easing slowly closer, and one plain white sheet over
   the middle holding everything. */
@keyframes look-gate-mosaic-in { from { transform: scale(1); } to { transform: scale(1.08); } }
:root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen > .look-gate-strips { background: #F3F2EF; }
:root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen > .look-gate-strips::after { background: linear-gradient(rgba(0, 0, 0, .12), rgba(0, 0, 0, .12)); }
:root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen .look-gate-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 3px; background: #F3F2EF; }
:root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen .look-gate-mosaic-tile { display: block; overflow: hidden; background: #222 center / cover no-repeat; }
@media (prefers-reduced-motion: no-preference) {
  :root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen .look-gate-mosaic-tile { animation: look-gate-mosaic-in 24s ease-in-out infinite alternate; animation-delay: calc(var(--strip-i, 0) * -3.1s); }
}
:root[data-look-gate="strips"][data-look-gate-layout="mosaic"] body.a11y-reduce-motion #toggleScreen .look-gate-mosaic-tile { animation: none; }
:root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen .toggle-screen { max-width: calc(820 * var(--t)); background: #FFFFFF; box-shadow: 0 calc(30 * var(--t)) calc(70 * var(--t)) calc(-20 * var(--t)) rgba(0, 0, 0, .55); }

/* Index: a band of the pictures moving slowly left across the top, and below it a plain page in the tenant's own register: the
   logo and the line small, the headline as large as the page allows, the two choices as columns under a rule. */
@keyframes look-gate-band { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen { --band: 250; background: #FFFFFF; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen > .look-gate-strips { inset: 0 0 auto 0; height: calc(var(--band) * var(--u)); background: #FFFFFF; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen:not(#_) > .look-gate-strips::after { content: none; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .look-gate-band { position: absolute; inset: 0 auto 0 0; display: flex; gap: 4px; width: max-content; height: 100%; animation: look-gate-band 50s linear infinite; will-change: transform; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .look-gate-band-tile { flex: none; height: 100%; aspect-ratio: 4 / 5; background: #222 center / cover no-repeat; }
@media (prefers-reduced-motion: reduce) { :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .look-gate-band { animation: none; } }
:root[data-look-gate="strips"][data-look-gate-layout="index"] body.a11y-reduce-motion #toggleScreen .look-gate-band { animation: none; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-screen {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "logo sub" "head head" "cards cards" "pw pw";
  align-items: start; max-width: calc(1360 * var(--t)); padding-top: calc((var(--band) + 30) * var(--u)); text-align: left; color: #111;
}
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .gate-logo { grid-area: logo; display: block !important; height: calc(22 * var(--u)); margin: 0; filter: brightness(0) !important; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-subhead { grid-area: sub; justify-self: end; max-width: 30ch; margin: 0; color: #111; font-size: calc(19 * var(--t)); line-height: 1.3; text-align: left; text-shadow: none; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-headline { grid-area: head; justify-self: start; margin: calc(18 * var(--u)) 0 0 -.04em; color: #0B0B0C; font-size: min(calc(176 * var(--t)), 11.6cqw); font-weight: 400; line-height: .86; letter-spacing: -.055em; text-align: left; text-shadow: none; white-space: nowrap; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-cards {
  grid-area: cards; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(48 * var(--t)); justify-content: stretch; width: 100%;
  margin-top: calc(26 * var(--u)); padding-top: calc(20 * var(--u)); border-top: 1px solid #111;
}
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card { padding: 0; background: none; box-shadow: none; transform: none; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card::before, :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card::after { display: none !important; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-poweredby { grid-area: pw; align-items: flex-start; margin-top: calc(22 * var(--u)); }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-poweredby .attr-mark { filter: none !important; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .attribution { color: rgba(17, 17, 17, .7) !important; text-align: left; }

/* Index choices as two doors (owner, 19 Oct 2026: the choice must read as a choice without saying so): two equal white tiles side
   by side, each with the same outline, a soft shadow and a large diagonal arrow in its corner; the AiOS button filled in ink. The whole
   tile is the button; on hover and keyboard focus its button rises and its arrow moves, while the tile stays put. */
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen { --door-on: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyNCAyNCc+PHBhdGggZD0nTTUgMTkgMTkgNU05IDVoMTB2MTAnIGZpbGw9J25vbmUnIHN0cm9rZT0nIzAwMCcgc3Ryb2tlLXdpZHRoPScxLjQnIHN0cm9rZS1saW5lY2FwPSdzcXVhcmUnLz48L3N2Zz4=); }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-cards { column-gap: calc(20 * var(--t)); padding-top: 0; border-top: 0; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card {
  position: relative; padding: calc(26 * var(--u)) calc(30 * var(--t)) calc(26 * var(--u)); border: 1px solid #111; background: #FFFFFF; color: #111;
  box-shadow: 0 calc(18 * var(--t)) calc(36 * var(--t)) calc(-18 * var(--t)) rgba(0, 0, 0, .35);
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease;
}
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card #enterAios { background: #0B0B0C; border-color: #0B0B0C; color: #fff; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card #choiceTraditionalButton { background: #fff; border-color: #111; color: #111; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card .toggle-card-button { transition: margin .2s cubic-bezier(.2, .7, .2, 1), box-shadow .2s ease, background-color .2s ease, color .2s ease; }
/* The door stays put; its button rises (owner, 19 Oct 2026). Margins, not a transform: a transform would make the button the box of its
   own stretched click layer, so the whole door would stop answering the click. */
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible) { transform: none; margin-top: -3px; margin-bottom: 3px; box-shadow: 0 10px 18px -10px rgba(0, 0, 0, .55); }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card #enterAios:is(:hover, :focus-visible) { background: #0B0B0C; color: #fff; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card #choiceTraditionalButton:is(:hover, :focus-visible) { background: #111; color: #fff; }
/* The whole tile answers the click: the button's own layer stretches over its tile. */
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card-button::before { content: ""; position: absolute; inset: 0; z-index: 1; }
/* The arrow in the corner: drawn, not typed, so it is the same in every font. */
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen:not(#_) .toggle-card::after {
  content: "" !important; display: block !important; position: absolute; grid-row: 1 / -1; grid-column: 1 / -1; top: 0; right: 0;
  width: var(--door-arrow); height: var(--door-arrow); margin: 0; opacity: 1; background: currentColor !important;
  -webkit-mask: var(--door-on) center / contain no-repeat; mask: var(--door-on) center / contain no-repeat;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1);
}

:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card { --door-arrow: calc(46 * var(--t)); }
/* The title keeps clear of the arrow: on a narrow tile ("Re: Your Ai Guide" on an iPad) it wrapped under it (review, 19 Oct 2026). */
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card-title { padding-inline-end: calc(var(--door-arrow) + 12 * var(--t)); }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen:not(#_) .toggle-card:has(#enterAios:is(:hover, :focus-visible))::after { transform: translate(4px, -4px); }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen:not(#_) .toggle-card:has(#choiceTraditionalButton:is(:hover, :focus-visible))::after { transform: translate(4px, -4px); }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card:has(:focus-visible) { outline: 2px solid #111; outline-offset: 4px; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card :focus-visible { outline: none; }
@media (prefers-reduced-motion: reduce) {
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen:not(#_) .toggle-card, :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen:not(#_) .toggle-card::after { transition: none; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card .toggle-card-button { transition: none; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card :is(#enterAios, #choiceTraditionalButton):is(:hover, :focus-visible) { margin-top: 0; margin-bottom: 0; }
}

/* Marks (gate.marks, owner 19 Oct 2026): the tenant's brand logos in the very place the line under the headline held, always on
   one line. Every mark picture shares one height, and each takes a share of the row by its own width (set from the picture once it
   loads), so the row fills its width at one height on every screen; the row shows once its pictures are in. Index: the row sits
   where the line sat, top right beside the logo on wider screens and under the headline on upright phones. */
:root[data-look-gate="strips"][data-look-gate-marks="on"] #toggleScreen .toggle-subhead { display: none !important; }
:root[data-look-gate="strips"] #toggleScreen .look-gate-marks { display: flex; flex-wrap: nowrap; align-items: center; gap: calc(16 * var(--t)); width: min(100%, calc(600 * var(--t))); margin: calc(14 * var(--u)) auto 0; padding: 0; list-style: none; opacity: 0; }
:root[data-look-gate="strips"] #toggleScreen .look-gate-marks.is-ready { opacity: 1; transition: opacity .3s ease; }
:root[data-look-gate="strips"] #toggleScreen .look-gate-marks li { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }
:root[data-look-gate="strips"] #toggleScreen .look-gate-marks img { display: block; width: 100%; height: auto; }
:root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .look-gate-marks { grid-area: sub; justify-self: end; align-self: center; margin: 0; }

/* Upright tablets: split stacks like the standard boxes, side by side, still tilted. */
@container (orientation: portrait) and (min-width: 600px) {
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-screen { display: flex; flex-direction: column; align-items: center; text-align: center; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen :is(.toggle-headline, .toggle-subhead) { text-align: center; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-headline { font-size: min(calc(104 * var(--t)), 12.6cqw); }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-cards { flex-direction: row; gap: calc(18 * var(--t)); margin-top: calc(44 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card { flex: 1 1 0; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card:not(:has(#enterAios)) { margin-top: calc(26 * var(--u)); transform: rotate(1.8deg); }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-poweredby { align-items: center; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .attribution { text-align: center; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-screen { max-width: 92cqw; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen { --band: 300; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-headline { font-size: min(calc(130 * var(--t)), 12cqw); }
}
/* Phones held upright. */
@container (orientation: portrait) and (max-width: 599px) {
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-screen { display: flex; flex-direction: column; align-items: center; text-align: center; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen :is(.toggle-headline, .toggle-subhead) { text-align: center; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-headline { font-size: min(calc(56 * var(--t)), 14.6cqw); }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-cards { margin-top: auto; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card { transform: rotate(-1deg); }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card:not(:has(#enterAios)) { margin-top: calc(-4 * var(--u)); transform: translateX(3%) rotate(1.4deg); }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-poweredby { align-items: center; }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .attribution { text-align: center; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-screen { max-width: none; min-height: 0; margin-top: 0; padding: calc(22 * var(--u)) calc(20 * var(--t)) calc(16 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen { justify-content: flex-end; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-card > div:not([class]) { display: none; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"])[data-look-gate-letterhead="on"] #toggleScreen .toggle-screen::before { height: calc(15 * var(--t)); margin-bottom: calc(16 * var(--u)); }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"])[data-look-gate-letterfoot="on"] #toggleScreen .toggle-screen::after { display: none; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-headline { font-size: min(calc(44 * var(--t)), 11.6cqw); }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-subhead { margin: calc(8 * var(--u)) 0 0; font-size: calc(15 * var(--t)); }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-cards { grid-template-columns: minmax(0, 1fr); margin-top: calc(16 * var(--u)); padding-top: calc(14 * var(--u)); gap: 0; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-card { padding: 0; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-card:not(:has(#enterAios)) { padding: calc(14 * var(--u)) 0 0; margin-top: calc(14 * var(--u)); border-left: 0; border-top: 1px solid rgba(17, 17, 17, .2); }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-poweredby { margin-top: calc(14 * var(--u)); padding-top: calc(10 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen .look-gate-mosaic { grid-template-columns: repeat(3, 1fr); }
  /* The sheet keeps to the foot so the pictures show above it: the AiOS line gives way to the persona line here. */
  :root[data-look-gate="strips"][data-look-gate-layout="mosaic"] #toggleScreen .toggle-card:has(#enterAios) .toggle-card-body { display: none !important; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen { --band: 170; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-screen { grid-template-columns: minmax(0, 1fr); grid-template-areas: "logo" "head" "sub" "cards" "pw"; padding-top: calc((var(--band) + 22) * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-headline { margin-top: calc(14 * var(--u)); font-size: min(calc(76 * var(--t)), 21cqw); line-height: .88; white-space: normal; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-subhead { justify-self: start; margin-top: calc(12 * var(--u)); font-size: calc(16 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .look-gate-marks { justify-self: stretch; width: 100%; gap: calc(9 * var(--t)); margin-top: calc(16 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-cards { grid-template-columns: minmax(0, 1fr); margin-top: calc(16 * var(--u)); padding-top: calc(14 * var(--u)); gap: 0; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card { padding: calc(16 * var(--u)) calc(18 * var(--t)) calc(16 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card:not(:has(#enterAios)) { margin-top: calc(10 * var(--u)); border-top: 1px solid #111; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card { --door-arrow: calc(30 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-poweredby { align-items: flex-start; }
}
/* Phones and small tablets on their side. */
@container (orientation: landscape) and (max-height: 559px) {
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-headline { font-size: min(calc(48 * var(--t)), 6.2cqw); }
  :root[data-look-gate="strips"][data-look-gate-layout="split"] #toggleScreen .toggle-card { grid-template-rows: auto auto auto auto auto auto auto; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-screen { max-width: calc(980 * var(--t)); padding: calc(18 * var(--u)) calc(32 * var(--t)) calc(14 * var(--u)); }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"])[data-look-gate-letterhead="on"] #toggleScreen .toggle-screen::before { height: calc(14 * var(--t)); margin-bottom: calc(10 * var(--u)); }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"])[data-look-gate-letterfoot="on"] #toggleScreen .toggle-screen::after { display: none; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-headline { font-size: calc(34 * var(--t)); }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-subhead { margin-top: calc(6 * var(--u)); font-size: calc(14 * var(--t)); max-width: none; }
  :root[data-look-gate="strips"]:is([data-look-gate-layout="letter"], [data-look-gate-layout="mosaic"]) #toggleScreen .toggle-cards { margin-top: calc(12 * var(--u)); padding-top: calc(12 * var(--u)); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen { --band: 120; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-headline { margin-top: calc(6 * var(--u)); font-size: min(calc(96 * var(--t)), 11cqw); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-cards { margin-top: calc(12 * var(--u)); padding-top: 0; }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card { padding: calc(12 * var(--u)) calc(16 * var(--t)); }
  :root[data-look-gate="strips"][data-look-gate-layout="index"] #toggleScreen .toggle-card { --door-arrow: calc(26 * var(--t)); }
}

/* ---------- 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-cta-line="arrow"], [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. arrow draws the arrow alone, with no outline (owner, 23 Oct 2026). 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:is([data-look-cta-line="highlight"], [data-look-cta-line="arrow"]) #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:is([data-look-cta-line="highlight"], [data-look-cta-line="arrow"]) {
  --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); }

/* The persona's name beside each answer in the brand colour (look.answer.name "brand", owner 23 Oct 2026). */
/* In the body font, at its medium weight, which every body font the console offers has: a heading font may come only in light and
   bold, and the name asks for medium. */
:root[data-look-answer-name="brand"] .aios-answer-marker .aios-marker-label { font-family: var(--body-font, inherit); font-weight: 500; color: var(--accent); }
/* And the orb beside it drawn to fill its 30px place, as the gate tag's orb fills its round end (owner, 23 Oct 2026): the orb's own
   drawing leaves a margin round its dots, so the picture is drawn larger by that margin. The place, the dots and the motion stay. */
:root[data-look-answer-name="brand"] .aios-answer-marker .aios-marker-orb .orb svg { transform: scale(1.42); }

/* Faded dots on the canvas (look.canvas.dots "brand", owner 23 Oct 2026): a still field of brand-colour dots in the room either
   side of the column, on the opening and behind the answers alike, fading out towards the column (the prompt boxes, the answers) and
   clear of it, of the top bar and of the message bar, so no word ever sits on a dot. Never on the choice screen, and only on screens
   1024 wide and up: on a phone or an upright tablet the column fills the screen and the dots would be a stray line down each edge.
   The field belongs to the screen, not the scroll, so it stays put while the answers move. */
:root:is([data-look-canvas-dots="brand"], [data-look-canvas-dots="highlight"]) #aiosShell:not([data-device="mobile"]):not([data-device="tablet"]):has(#aiosCanvas:not([hidden])) { isolation: isolate; }
:root:is([data-look-canvas-dots="brand"], [data-look-canvas-dots="highlight"]) #aiosShell:not([data-device="mobile"]):not([data-device="tablet"]):has(#aiosCanvas:not([hidden]))::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 20%, transparent) 1.6px, transparent 2.1px);
  background-size: 18px 18px; background-position: center top;
  -webkit-mask-image:
    linear-gradient(to right, #000 0, rgba(0, 0, 0, .55) calc((100% - var(--col-w)) / 4), transparent calc((100% - var(--col-w)) / 2 - 8px),
      transparent calc((100% + var(--col-w)) / 2 + 8px), rgba(0, 0, 0, .55) calc(100% - (100% - var(--col-w)) / 4), #000 100%),
    linear-gradient(to bottom, transparent 0, transparent 96px, #000 220px, #000 calc(100% - 220px), transparent calc(100% - 140px));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 0, rgba(0, 0, 0, .55) calc((100% - var(--col-w)) / 4), transparent calc((100% - var(--col-w)) / 2 - 8px),
      transparent calc((100% + var(--col-w)) / 2 + 8px), rgba(0, 0, 0, .55) calc(100% - (100% - var(--col-w)) / 4), #000 100%),
    linear-gradient(to bottom, transparent 0, transparent 96px, #000 220px, #000 calc(100% - 220px), transparent calc(100% - 140px));
  mask-composite: intersect;
}
/* highlight (29 Oct 2026): the same field in the tenant's highlight colour (its selected-tab colour, else its brand colour), a little
   stronger, for a tenant whose brand colour is its ink. */
:root[data-look-canvas-dots="highlight"] #aiosShell:not([data-device="mobile"]):not([data-device="tablet"]):has(#aiosCanvas:not([hidden]))::before {
  background-image: radial-gradient(circle, color-mix(in srgb, var(--tab-on-bg, var(--accent)) 34%, transparent) 1.6px, transparent 2.1px);
}

/* ---------- The opening's answer bar under the greeting (look.opening.bar "greeting", owner 29 Oct 2026) ----------
   On the opening only, the answer bar leaves the foot and sits between the welcome line and the prompt boxes, as wide as the boxes;
   the attribution stays at the foot. scale.js marks the shell data-os-bar="greeting" and measures the bar into --os-bar-h before it
   lays the opening out, so the boxes stand clear of the welcome line by the bar's height and a gap either side and the layout counts
   the bar as part of the opening; once the opening is laid out it places the bar in that room (--os-bar-x, --os-bar-y, --os-bar-w).
   Every rule holds only while the canvas has no messages: the second a question is asked the opening clears as it does today and the
   bar is back at the foot, exactly as built. While a phone's keyboard is open on the opening the bar stays where it is, unless the
   keyboard would cover it (a phone on its side), when scale.js raises it to sit just above the keyboard. */
:root[data-look-opening-bar="greeting"] #aiosShell #welcomeScreen { --os-bar-gap: calc(var(--os-head) * 1.3); }
:root[data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) #welcomeScreen #welcomeActions { margin-top: calc(var(--os-bar-h, 0px) + 2 * var(--os-bar-gap)); }
:root[data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) #welcomeScreen:not([data-os-orb="beside"]) #orbWrapperLarge { margin-bottom: 0; }
/* The orb keeps the size it has today (owner, 29 Oct 2026: "the orb is too big on the phone"). With the bar off the foot and boxes
   that show only their titles, the opening has more room to grow into than it does as built, and the orb would grow with it (172px on
   a 390 by 844 phone against 147px today). Here the orb grows with the opening by at most a tenth; the rest of the room goes to the
   boxes and the gaps. Every other opening sizes its orb exactly as built. */
:root[data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) #welcomeScreen { --os-orb-i: calc(var(--g-orb, 120) * min(var(--z), 1.1) * 1px); }
:root[data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) #composer {
  position: absolute; z-index: 5; top: var(--os-bar-y, 0px); left: var(--os-bar-x, 0px); width: var(--os-bar-w, 100%); max-width: none; margin: 0;
}
/* The bar under the greeting is drawn a little taller and rounder than the one at the foot, so it reads as the way in. */
:root[data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) #inputBar { --cmp-h: 54; border-radius: max(14px, calc(18 * var(--st))); }
:root[data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) .dock { border-top-color: transparent; background: none; }
:root[data-aios-kb][data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) .dock { position: static; transform: none; }
/* glow "highlight": a soft glow in the highlight colour round the bar, only while it sits under the greeting (never at the foot). */
:root:is([data-look-opening-glow="highlight"]) { --look-open-hl: var(--tab-on-bg, var(--accent)); }
:root[data-look-opening-bar="greeting"][data-look-opening-glow="highlight"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) #inputBar {
  border-color: color-mix(in srgb, var(--ink, #111) 16%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--look-open-hl) 5%, transparent), 0 14px 38px color-mix(in srgb, var(--look-open-hl) 18%, transparent), 0 3px 10px color-mix(in srgb, var(--look-open-hl) 8%, transparent);
}

/* The orb above the welcome line (look.opening.orb "above", 29 Oct 2026). Where the room is too short for the orb on its own row it
   still moves beside the line, as built. */
:root[data-look-opening-orb="above"] #aiosShell #welcomeScreen:not([data-os-orb="beside"]) #orbWrapperLarge { order: -1; margin: 0 0 var(--os-g1); }
:root[data-look-opening-orb="above"] #aiosShell #welcomeScreen:not([data-os-orb="beside"]) #welcomeHeader { margin-bottom: var(--os-g2); }
:root[data-look-opening-orb="above"][data-look-opening-bar="greeting"] #aiosShell[data-os-bar="greeting"] #aiosCanvas:not(.has-messages) #welcomeScreen #welcomeHeader { margin-bottom: 0; }

/* The welcome line in the light weight (look.type.greeting "light", 29 Oct 2026), at its own size; every other heading as built. */
:root[data-look-greeting="light"] #welcomeHeader { font-weight: 300; letter-spacing: -.018em; }