/*
 * Emporania's look: "Market Hall" (T-010 option 1, chosen; built into the site in T-011). Author: Jeremiah Buttler
 *
 * Loaded last on every page (templates/app.html and base.html, after the page's own sheets), so Atlas's stylesheets stay as
 * they are and Atlas's changes keep porting (register E-3). This file holds:
 *   1. the site-design tokens (--page-bg, --tile-*, the section registry) and the Transit tokens re-coloured, light and dark;
 *   2. the page and section backgrounds with their art (static/art/, each with a -dark twin);
 *   3. the Market Hall identity on Atlas's own regions: the awning-striped bars, stall tiles, the showroom stage,
 *      order-slip inbox rows, the signboard admin tabs;
 *   4. the public pages (header, footer, bands, hero, offerings, FAQ, forms) built for Emporania;
 *   5. phone widths, print and reduced motion.
 * Colours are tokens. --bg keeps Transit's meaning (the white surface of buttons, fields and panels), so the page colour
 * is set here on body from --page-bg and the section tokens, never by changing --bg in the light theme.
 */

/* ------------------------------------------------------------------ 1. tokens (light) */
:root {
  color-scheme: light;
  /* site-design (SD-01 to SD-04) */
  --page-bg: #EAD9C2;
  --page-img: url("../art/bg-public.svg");
  --tile-bg: #FFFFFF;
  --tile-border: #D3BC9A;
  --tile-shadow: 0 1px 2px rgba(60, 30, 10, .10), 0 12px 26px -14px rgba(90, 50, 20, .42);
  --tile-gap: 20px;
  --text: #2B1A12;
  --section-bg-public: #EAD9C2;
  --section-bg-home: #E6DAC8;
  --section-bg-projects: #E8D6C0;
  --section-bg-studio: #E9D3CB;
  --section-bg-requests: #E4E1C3;
  --section-bg-tasks: #E1DCC8;
  --section-bg-timeline: #E5D5CB;
  --section-bg-admin: #E7D7DE;
  --section-bg-band-hero: #E8D3B5;
  --section-bg-band-benefits: #EEDFCB;
  --section-bg-band-how: #E3D5BD;
  --section-bg-band-offerings: #EAD6C6;
  --section-bg-band-faq: #E2D9CB;
  --section-bg-band-cta: #E6CFBC;
  --section-img-public: url("../art/bg-public.svg");
  --section-img-home: url("../art/bg-home.svg");
  --section-img-projects: url("../art/bg-home.svg");
  --section-img-studio: url("../art/bg-studio.svg");
  --section-img-requests: url("../art/bg-requests.svg");
  --section-img-tasks: url("../art/bg-requests.svg");
  --section-img-timeline: url("../art/bg-admin.svg");
  --section-img-admin: url("../art/bg-admin.svg");
  --section-img-band-hero: url("../art/bg-public.svg");
  --section-img-band-benefits: url("../art/bg-scallop.svg");
  --section-img-band-how: url("../art/bg-home.svg");
  --section-img-band-offerings: url("../art/bg-requests.svg");
  --section-img-band-faq: url("../art/bg-scallop.svg");
  --section-img-band-cta: url("../art/bg-public.svg");

  /* Market Hall's own */
  --accent: #B4532A; --accent-ink: #FFFFFF; --accent-hover: #9A431F; --accent-text: #A04820;
  --saffron: #E0A526; --saffron-soft: #F6DFA6; --brass: #A57A2C; --brass-text: #7E5A1A;
  --fill-soft: #FBF4E8; --fill-soft-2: #F4E8D4;   /* fills; --soft keeps Atlas's meaning (muted text, app.css) */
  --bar-bg: #FFF9EE; --bar-line: #D3BC9A;
  --wood-1: #D9B07A; --wood-2: #B98A55; --wood-3: #8E5F34;
  --awn-base: #FFFFFF;
  --btn-dark: #2B1A12; --btn-dark-ink: #FBF1DF;
  --foot-bg: #2B1A12; --foot-ink: #F3E6D8; --foot-muted: #CDB89F; --foot-head: #E0BE85;
  --serif: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --sans: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Transit's names, re-coloured (static/css/app.css keeps the originals) */
  --surface: #FBF4E8;
  --surface-2: #F4E8D4;
  --card: #FFFFFF;
  --ink: #2B1A12;
  --ink-2: #4A3428;
  --muted: #6B5546;
  --line: #E7D9C4;
  --line-strong: #CBB28D;
  --focus: #B4532A;
  --st-live: #2B1A12;
  --st-concepts: #9A8574;
  --st-working: #B4532A;
  --st-waiting: #E0A526;
  --st-building: #2F6E9E;
  --st-completed: #3E7D4F;
  --st-red: #B3261E;
  --st-working-ink: #A04820;
  --st-waiting-ink: #7A4E00;
  --st-building-ink: #25557F;
  --st-completed-ink: #26603F;
  --st-red-ink: #8F2424;
  --slab: #2B1A12;
  --slab-2: #3A261A;
  --slab-ink: #F0C35A;
  --slab-dim: #BFA992;
  --shadow-1: 0 1px 2px rgba(60, 30, 10, .08), 0 1px 1px rgba(60, 30, 10, .05);
  --shadow-2: 0 10px 22px -12px rgba(90, 50, 20, .45), 0 2px 6px rgba(60, 30, 10, .08);
  --shadow-3: 0 24px 48px -18px rgba(60, 30, 10, .55), 0 2px 6px rgba(60, 30, 10, .12);
  --r: 10px;
  --r-lg: 16px;
  --font-sign: var(--serif);
  --font-body: var(--sans);
  --bar-h: 68px;
  --acc: var(--accent);
  --am-menu-surface: var(--tile-bg);
  --am-menu-accent: var(--accent);
}

/* ------------------------------------------------------------------ 1. tokens (dark): the page darker than the tiles */
:root[data-theme="dark"] {
  color-scheme: dark;
  --page-bg: #201814;
  --page-img: url("../art/bg-public-dark.svg");
  --tile-bg: #382C27;
  --tile-border: #584740;
  --tile-shadow: 0 1px 2px rgba(0, 0, 0, .45), 0 14px 28px -14px rgba(0, 0, 0, .75);
  --text: #F3E6D8;
  --section-bg-public: #1B1711;
  --section-bg-home: #1C1812;
  --section-bg-projects: #1D1711;
  --section-bg-studio: #1E1313;
  --section-bg-requests: #1B1A11;
  --section-bg-tasks: #1A1912;
  --section-bg-timeline: #1E1614;
  --section-bg-admin: #201518;
  --section-bg-band-hero: #1F1810;
  --section-bg-band-benefits: #1D1912;
  --section-bg-band-how: #1A1610;
  --section-bg-band-offerings: #1E1611;
  --section-bg-band-faq: #1B1813;
  --section-bg-band-cta: #211712;
  --section-img-public: url("../art/bg-public-dark.svg");
  --section-img-home: url("../art/bg-home-dark.svg");
  --section-img-projects: url("../art/bg-home-dark.svg");
  --section-img-studio: url("../art/bg-studio-dark.svg");
  --section-img-requests: url("../art/bg-requests-dark.svg");
  --section-img-tasks: url("../art/bg-requests-dark.svg");
  --section-img-timeline: url("../art/bg-admin-dark.svg");
  --section-img-admin: url("../art/bg-admin-dark.svg");
  --section-img-band-hero: url("../art/bg-public-dark.svg");
  --section-img-band-benefits: url("../art/bg-scallop-dark.svg");
  --section-img-band-how: url("../art/bg-home-dark.svg");
  --section-img-band-offerings: url("../art/bg-requests-dark.svg");
  --section-img-band-faq: url("../art/bg-scallop-dark.svg");
  --section-img-band-cta: url("../art/bg-public-dark.svg");

  --accent: #B4532A; --accent-ink: #FFFFFF; --accent-hover: #C8613A; --accent-text: #F0A27D;
  --saffron: #E0A526; --saffron-soft: #5A4513; --brass: #C99B4D; --brass-text: #E0BE85;
  --fill-soft: #43352F; --fill-soft-2: #4C3D36;
  --bar-bg: #2A201B; --bar-line: #584740;
  --wood-1: #8C6A44; --wood-2: #6E5034; --wood-3: #4C3622;
  --awn-base: #382C27;
  --btn-dark: #F3E6D8; --btn-dark-ink: #2B1A12;
  --foot-bg: #14100D; --foot-ink: #F3E6D8; --foot-muted: #BFA992;

  --bg: #382C27;
  --surface: #43352F;
  --surface-2: #4C3D36;
  --card: #382C27;
  --ink: #F3E6D8;
  --ink-2: #E2D2C2;
  --muted: #C6B19F;
  --line: #4A3C35;
  --line-strong: #6B584D;
  --focus: #F0A27D;
  --st-live: #F3E6D8;
  --st-concepts: #A8968A;
  --st-working: #B4532A;
  --st-waiting: #E0A526;
  --st-building: #4E8FC4;
  --st-completed: #3E9A5E;
  --st-red: #D9534A;
  --st-working-ink: #F0A27D;
  --st-waiting-ink: #F0CD7C;
  --st-building-ink: #9CC6EE;
  --st-completed-ink: #8FD3A8;
  --st-red-ink: #F2A3A3;
  --slab: #14100D;
  --slab-2: #241A14;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 10px 24px -12px rgba(0, 0, 0, .7);
  --shadow-3: 0 24px 56px -18px rgba(0, 0, 0, .8);
}

/* ------------------------------------------------------------------ 2. the section registry and the page background */
[data-section="public"] { --section-bg: var(--section-bg-public); --section-img: var(--section-img-public); }
[data-section="home"] { --section-bg: var(--section-bg-home); --section-img: var(--section-img-home); }
[data-section="projects"] { --section-bg: var(--section-bg-projects); --section-img: var(--section-img-projects); }
[data-section="studio"] { --section-bg: var(--section-bg-studio); --section-img: var(--section-img-studio); }
[data-section="requests"] { --section-bg: var(--section-bg-requests); --section-img: var(--section-img-requests); }
[data-section="tasks"] { --section-bg: var(--section-bg-tasks); --section-img: var(--section-img-tasks); }
[data-section="timeline"] { --section-bg: var(--section-bg-timeline); --section-img: var(--section-img-timeline); }
[data-section="admin"] { --section-bg: var(--section-bg-admin); --section-img: var(--section-img-admin); }
[data-section="band-hero"] { --section-bg: var(--section-bg-band-hero); --section-img: var(--section-img-band-hero); }
[data-section="band-benefits"] { --section-bg: var(--section-bg-band-benefits); --section-img: var(--section-img-band-benefits); }
[data-section="band-how"] { --section-bg: var(--section-bg-band-how); --section-img: var(--section-img-band-how); }
[data-section="band-offerings"] { --section-bg: var(--section-bg-band-offerings); --section-img: var(--section-img-band-offerings); }
[data-section="band-faq"] { --section-bg: var(--section-bg-band-faq); --section-img: var(--section-img-band-faq); }
[data-section="band-cta"] { --section-bg: var(--section-bg-band-cta); --section-img: var(--section-img-band-cta); }

.shell, .shell-public { background: transparent; }
body {
  color: var(--ink);
  font-family: var(--sans);
  background: var(--section-img, var(--page-img)) center bottom / cover no-repeat, var(--section-bg, var(--page-bg));
  background-attachment: fixed, scroll;
  -webkit-font-smoothing: antialiased;
}
.band { position: relative; background: var(--section-img) center bottom / cover no-repeat, var(--section-bg); }

/* ------------------------------------------------------------------ type */
h1, h2, h3 { font-family: var(--serif); letter-spacing: -.01em; color: var(--ink); }
.pagehead h1, .content > h1, .page-head h1 { font: 700 clamp(2rem, 1.3rem + 2vw, 2.7rem)/1.08 var(--serif); letter-spacing: -.015em; }
a { color: var(--accent-text); text-underline-offset: 3px; }
a:hover { color: var(--accent); }
:focus-visible { outline-color: var(--focus); }
.eyebrow { display: inline-block; margin: 0 0 .35em; font: 600 .98rem var(--sans); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--brass-text); }
.lead { font-size: 1.12rem; color: var(--muted); max-width: 62ch; }
/* signage labels: small caps in the body face instead of Transit's condensed capitals */
.sign, .st-lbl, .st-here__lbl, .netmap__head .sign, .board__title, .adm-path, .adm-mega-head {
  font-family: var(--sans); text-transform: none; font-variant-caps: all-small-caps; letter-spacing: .1em; font-stretch: normal;
}
.panel-title { font: 700 15px/1.25 var(--sans); text-transform: none; letter-spacing: 0; color: var(--brass-text); }
.kbd { background: var(--fill-soft-2); border-color: var(--line-strong); color: var(--muted); border-radius: 6px; }

/* ------------------------------------------------------------------ tiles: white, a warm edge and a resting shadow */
.card, .tile, .ptile, .panel, .wtile, .dcard, .netmap, .pcard, .ticket, .ibrow, .adm-head, .adm-inlist, .dialog, .modal-box,
.help .doc-section, .help .help-toc, .lib-cmp-col, .cmp-view, .station-peek, .mention-list, .dt-design, .dt-option, .st-sheet, .tray-panel {
  background-color: var(--tile-bg);
  border-color: var(--tile-border);
}
.card, .tile, .ptile, .panel, .wtile, .dcard, .netmap, .pcard, .ibrow, .adm-head, .adm-inlist {
  border-style: solid; border-width: 1px; box-shadow: var(--tile-shadow); border-radius: var(--r-lg);
}
.empty { background: var(--tile-bg); border-color: var(--line-strong); color: var(--muted); }
.empty strong { font: 700 1.15rem var(--serif); }
.alert { border-radius: var(--r); }
.table th { font-family: var(--sans); font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--brass-text); background: var(--fill-soft); }
.table tbody tr:hover { background: var(--fill-soft); }

/* ------------------------------------------------------------------ buttons, chips, segments, fields */
.btn { border-radius: 999px; border-width: 1.5px; font-family: var(--sans); transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
.btn:hover:not(:disabled) { border-color: var(--accent); box-shadow: 0 8px 16px -10px rgba(90, 40, 10, .55); }
.btn--primary, .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn--primary:hover:not(:disabled), .btn-primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink); }
.btn--dark { background: var(--btn-dark); border-color: var(--btn-dark); color: var(--btn-dark-ink); }
.btn--dark:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.btn--ok { background: var(--st-completed-ink); border-color: var(--st-completed-ink); color: #FFFFFF; }
:root[data-theme="dark"] .btn--ok { background: #2F7A47; border-color: #2F7A47; }
.btn--lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.chip { border-radius: 999px; border-width: 1.5px; border-color: var(--line-strong); background: var(--tile-bg); }
.chip:hover { border-color: var(--accent); }
.chip[aria-pressed="true"], .chip.on { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.seg { background: var(--fill-soft-2); border-color: var(--line-strong); border-radius: 999px; }
.seg button[aria-pressed="true"], .seg .on, .seg a[aria-current="page"] { background: var(--tile-bg); color: var(--accent-text); box-shadow: 0 1px 3px rgba(60, 30, 10, .25); }
.field input, .field textarea, .field select, input[type="search"], input[type="text"], input[type="email"], input[type="password"], select, textarea {
  border-color: var(--line-strong); border-radius: 12px; background-color: var(--tile-bg); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(180, 83, 42, .25); outline: none; }
.tabs [aria-current="page"]::after, .tabs [aria-selected="true"]::after { background: var(--accent); }
.tabs .count { background: var(--fill-soft-2); color: var(--brass-text); }
.panel-title .count { color: var(--muted); font-variant-caps: normal; letter-spacing: 0; }

/* the awning: the scalloped stripe that says "stall" */
.awning { --pc: var(--accent); position: relative; height: 40px; filter: drop-shadow(0 3px 2px rgba(60, 30, 10, .25)); pointer-events: none; }
.awning::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, var(--pc) 0 28px, color-mix(in srgb, var(--pc) 24%, var(--awn-base)) 28px 56px);
  -webkit-mask: radial-gradient(circle 14px at 14px 24px, #000 13.5px, transparent 14.5px) 0 0 / 28px 40px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 24px no-repeat;
  mask: radial-gradient(circle 14px at 14px 24px, #000 13.5px, transparent 14.5px) 0 0 / 28px 40px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 24px no-repeat;
}
.awning--sm { height: 26px; }
.awning--sm::before {
  background: repeating-linear-gradient(90deg, var(--pc) 0 18px, color-mix(in srgb, var(--pc) 24%, var(--awn-base)) 18px 36px);
  -webkit-mask: radial-gradient(circle 9px at 9px 16px, #000 8.5px, transparent 9.5px) 0 0 / 18px 26px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 16px no-repeat;
  mask: radial-gradient(circle 9px at 9px 16px, #000 8.5px, transparent 9.5px) 0 0 / 18px 26px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 16px no-repeat;
}
.awning--lg { height: 48px; }
.plaque {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 18px; border-radius: 6px; font: 700 12.5px/1.2 var(--serif); letter-spacing: .06em;
  color: #3E2A0F; background: linear-gradient(180deg, #EBCB86, #C79B42); border: 1px solid #8A6420;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 6px -3px rgba(60, 30, 10, .6);
}
.plaque-row { display: flex; justify-content: center; margin-top: 14px; }

/* ------------------------------------------------------------------ 3. the signed-in top bar: a cream bar under an awning stripe */
.topbar { background: var(--bar-bg); backdrop-filter: none; border-bottom: 1px solid var(--bar-line); box-shadow: 0 8px 18px -14px rgba(60, 30, 10, .55); }
.topbar::before, .pub-head::before, .adm-tabs::before {
  content: ""; display: block; height: 6px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 24px, color-mix(in srgb, var(--accent) 22%, var(--awn-base)) 24px 48px);
}
.adm-tabs::before { position: absolute; left: 0; right: 0; top: 0; height: 4px; }
.brand { color: var(--ink); }
.brand:hover { background: var(--fill-soft-2); }
.brand__mark, .brand .logo-mark { flex: none; width: 40px; height: 40px; border-radius: 10px; box-shadow: 0 2px 6px -2px rgba(60, 30, 10, .45); }
.brand__name, .brand .logo-word { font: 700 1.55rem/1 var(--serif); letter-spacing: -.01em; color: var(--ink); }
.switcher { background: var(--tile-bg); border: 1.5px solid var(--line-strong); }
.switcher:hover { border-color: var(--accent); background: var(--tile-bg); }
.nav a { font: 600 15.5px/1 var(--sans); text-transform: none; letter-spacing: 0; color: var(--muted); }
.nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, transparent); }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a::after, .nav a[aria-current="page"]::after {
  left: 50%; right: auto; bottom: 10px; width: 48px; height: 10px; border-radius: 0; transform: translateX(-50%) scaleX(0);
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 3px no-repeat, radial-gradient(circle at 6px 2px, var(--accent) 5px, transparent 5.6px) 0 1px / 12px 9px repeat-x;
}
.nav a[aria-current="page"]::after { transform: translateX(-50%) scaleX(1); }
.nav__count { background: var(--accent); color: #FFFFFF; }
.searchbtn { border: 1.5px solid var(--line-strong); background: var(--tile-bg); border-radius: 999px; color: var(--muted); }
.searchbtn:hover { border-color: var(--accent); }
.iconbtn:hover { background: var(--fill-soft-2); }
.iconbtn .badge, .bar-right .bell-count { background: var(--accent); border-color: var(--bar-bg); }
.adminbtn { height: 44px; padding: 0 16px; border-radius: 999px; background: var(--btn-dark); color: var(--btn-dark-ink); font: 600 14.5px/1 var(--sans); text-transform: none; letter-spacing: 0; }
.adminbtn:hover { filter: none; background: var(--accent); color: #FFFFFF; }
.adminbtn[aria-current="true"] { background: var(--accent); color: #FFFFFF; box-shadow: none; }
.acct .av { box-shadow: 0 0 0 2px var(--bar-bg), 0 0 0 3.5px var(--brass); }
.acct__badge { background: var(--accent); }
.pop, .palette, .dialog, .sheet { background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: 16px; box-shadow: var(--shadow-3); }
.sheet { border-radius: 22px 22px 0 0; }
.pop__title { font: 600 .9rem var(--sans); font-variant-caps: all-small-caps; letter-spacing: .12em; color: var(--brass-text); }
.menu-item { border-radius: 10px; }
.menu-item:hover, .menu-item:focus-visible { background: var(--fill-soft-2); }
.menu-item .i { color: var(--accent-text); }
.scrim { background: rgba(32, 18, 8, .5); }
.toast { background: #2B1A12; color: #FBF1DF; border-radius: 14px; }
.toast button { color: #FFD9A0; }
.theme-switch { background: var(--tile-bg); border: 1px solid var(--tile-border); box-shadow: var(--tile-shadow); }
.theme-switch button[aria-pressed="true"] { background: var(--accent); color: #FFFFFF; }
.tabbar { background: var(--bar-bg); border-top: 1px solid var(--bar-line); }
.tabbar a[aria-current="page"], .tabbar button[aria-current="page"] { color: var(--accent-text); }
.footer { color: var(--muted); }
.footer a { color: var(--muted); }

/* page titles sit on a white tile, never on the art (site-design SD-02) */
.content .pagehead {
  margin: 4px 0 18px; padding: 22px 28px; background: var(--tile-bg); border: 1px solid var(--tile-border); border-radius: var(--r-lg); box-shadow: var(--tile-shadow);
}
.content .pagehead .tabs { margin-bottom: -22px; }

/* the departure board becomes the hall's chalkboard */
.board { background: linear-gradient(180deg, var(--slab-2), var(--slab)); border: 3px solid var(--wood-3); border-radius: var(--r-lg); box-shadow: var(--tile-shadow), inset 0 0 0 1px rgba(255, 255, 255, .06); }
.board__title { color: #FBF1DF; font-size: 1.05rem; }

/* ------------------------------------------------------------------ Mockups (the hall): every project's working design is a stall */
.wtile { position: relative; padding-top: 34px; overflow: visible; }
.wtile::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 34px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: repeating-linear-gradient(90deg, var(--pc, var(--accent)) 0 26px, color-mix(in srgb, var(--pc, var(--accent)) 24%, var(--awn-base)) 26px 52px);
  -webkit-mask: radial-gradient(circle 13px at 13px 21px, #000 12.5px, transparent 13.5px) 0 0 / 26px 34px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 21px no-repeat;
  mask: radial-gradient(circle 13px at 13px 21px, #000 12.5px, transparent 13.5px) 0 0 / 26px 34px repeat-x, linear-gradient(#000, #000) 0 0 / 100% 21px no-repeat;
  filter: drop-shadow(0 3px 2px rgba(60, 30, 10, .25)); pointer-events: none;
}
.wtile__head { position: relative; }
.wtile__title b { font: 700 1.3rem/1.15 var(--serif); }
.wtile__frame { border-radius: 12px; box-shadow: 0 0 0 6px var(--wood-2), 0 0 0 8px var(--wood-3), 0 18px 30px -18px rgba(60, 30, 10, .7); }
.wtile__meta h3 { font-family: var(--serif); }
.dcard { overflow: hidden; }
.dcard__band { background: var(--fill-soft-2); }
.netmap { background: var(--tile-bg); }
.netmap__head { background: var(--fill-soft); border-bottom-color: var(--line); }
.nrow__bullet { font-family: var(--sans); }

/* ------------------------------------------------------------------ the project page */
.pcard, .hub .card { border-radius: var(--r-lg); }
/* Rendered-check fixes (site-design SD-06, 2026-10-24): every tile white, every word at 4.5:1 or better */
.tour-invite { background: var(--tile-bg); animation-name: invite-pop; }   /* slides in without fading: its words read from the first frame */
@keyframes invite-pop { from { transform: translateY(8px) scale(.97); } }
.livepane__when { color: var(--muted); }               /* on a white project card */
.livepane .livepane__when { color: #a1a1aa; }           /* inside the dark live pane */
.track li.off { opacity: 1; }                           /* a step not taken: its dot and line fade, its word stays readable */
.track li.off .hole, .track li.off::before { opacity: .35; }
:root[data-theme="dark"] .st-building .platform__sign .num,
:root[data-theme="dark"] .st-completed .platform__sign .num { color: #111; }

/* ------------------------------------------------------------------ the studio: the showroom */
.studiobar { background: var(--bar-bg); border-bottom: 1px solid var(--bar-line); box-shadow: 0 8px 18px -14px rgba(60, 30, 10, .55); padding-top: 5px; }
.studiobar::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: repeating-linear-gradient(90deg, var(--accent) 0 24px, color-mix(in srgb, var(--accent) 22%, var(--awn-base)) 24px 48px); }
.studiobar__mark { background: transparent; width: 40px; height: 40px; }
.studiobar__mark svg, .studiobar__mark .logo-mark { width: 36px; height: 36px; border-radius: 9px; }
.studiobar__crumbs [aria-current="page"] { font-family: var(--serif); font-size: 15px; }
.cpath a { border-radius: 999px; background: var(--tile-bg); border-color: var(--line-strong); font-family: var(--sans); }
.cpath .is-here a { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.studio .btn, .studiobar .btn, .tbtn, .studio .iconbtn, .studiobar .iconbtn { border-radius: 999px; }
.studio .seg button.on, .studio .seg button[aria-pressed="true"], .tbtn[aria-pressed="true"], .tbtn[aria-expanded="true"] { background: var(--accent); border-color: var(--accent); color: #FFFFFF; }
.tbtn--fs, .studiobar .btn--dark { background: var(--btn-dark); border-color: var(--btn-dark); color: var(--btn-dark-ink); }
.studio .btn--primary { background: var(--accent); border-color: var(--accent); }
.st-toolbar { background: var(--bar-bg); border-bottom-color: var(--bar-line); }
body[data-frame="studio"] { background: var(--section-img-studio) center bottom / cover no-repeat, var(--section-bg-studio); background-attachment: fixed, scroll; }
.studio { background: var(--section-bg-studio); }
.rv-stage { background: var(--section-img-studio) center bottom / cover no-repeat, var(--section-bg-studio); padding: 22px 26px 26px; }
.rv-wrap { border-radius: 12px; box-shadow: 0 0 0 7px var(--wood-2), 0 0 0 10px var(--wood-3), 0 34px 56px -26px rgba(60, 30, 10, .75); }
.studio[data-width="tablet"] .rv-wrap, .studio[data-width="phone"] .rv-wrap { box-shadow: 0 0 0 7px var(--wood-2), 0 0 0 10px var(--wood-3), 0 34px 56px -26px rgba(60, 30, 10, .75); }
.rv-panel { background: var(--tile-bg); border-left-color: var(--tile-border); box-shadow: -14px 0 30px -24px rgba(60, 30, 10, .6); }
.rv-toast-item { background: #2B1A12; color: #FBF1DF; }

/* ------------------------------------------------------------------ the Inbox: every row is an order slip */
.ibrow { position: relative; border-left: 0; padding-left: 26px; }
.ibrow::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; border-radius: var(--r-lg) 0 0 var(--r-lg);
  background: radial-gradient(circle at 0 50%, var(--section-bg, var(--page-bg)) 5px, transparent 5.5px) 0 0 / 14px 16px repeat-y,
              color-mix(in srgb, var(--saffron) 30%, var(--tile-bg));
  border-right: 2px dashed var(--line-strong);
}
.ibrow--approval::before, .ibrow--request::before { background: radial-gradient(circle at 0 50%, var(--section-bg, var(--page-bg)) 5px, transparent 5.5px) 0 0 / 14px 16px repeat-y, color-mix(in srgb, var(--accent) 28%, var(--tile-bg)); }
.ibrow__t { font-family: var(--serif); font-size: 1.05rem; }

/* ------------------------------------------------------------------ the admin console: the tab row is a signboard */
.adm-tabs { background: var(--bar-bg); border-bottom: 1px solid var(--bar-line); padding-top: 4px; }
.adm-tabs-lead { background: var(--btn-dark); color: var(--btn-dark-ink); border-radius: 999px; font-family: var(--sans); text-transform: none; letter-spacing: 0; }
.adm-tab { font-family: var(--sans); text-transform: none; letter-spacing: 0; font-weight: 600; color: var(--muted); border-radius: 12px 12px 0 0; }
.adm-tab:hover { background: var(--fill-soft); color: var(--ink); }
.adm-tab.is-current { background: var(--accent); color: #FFFFFF; border-color: #8F3F1D; border-top-color: #8F3F1D; position: relative; }
.adm-tab.is-current .adm-ic { color: #F6DFA6; }
.adm-tab.is-current::before, .adm-tab.is-current::after { content: ""; position: absolute; top: 5px; width: 4px; height: 4px; border-radius: 50%; background: #F6DFA6; }
.adm-tab.is-current::before { left: 6px; }
.adm-tab.is-current::after { right: 6px; }
.adm-all-btn { border-radius: 12px; background: var(--tile-bg); border-color: var(--line-strong); }
.adm-mega { background: var(--tile-bg); border-color: var(--tile-border); border-radius: 16px; box-shadow: var(--shadow-3); }
.adm-head h1 { font-family: var(--serif); text-transform: none; letter-spacing: -.01em; }
.adm-pill--admin { background: var(--fill-soft-2); color: var(--brass-text); border-color: transparent; }
.adm-inlist-link { border-radius: 10px; }
.adm-inlist-link.is-current { background: var(--accent); color: #FFFFFF; }
.adm-inlist-link.is-current .adm-ic { color: #FFFFFF; }

/* ------------------------------------------------------------------ 4. the public pages */
.pwrap { width: 100%; max-width: 1240px; margin: 0 auto; padding-left: 24px; padding-right: 24px; box-sizing: border-box; }
.pwrap--narrow { max-width: 860px; }
.plain { list-style: none; margin: 0; padding: 0; }
.ta-c { text-align: center; }
.section-gap { margin-top: var(--tile-gap); }
.shell-public { min-height: 100vh; display: flex; flex-direction: column; }
.shell-public .main { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.shell-public .content { flex: 1; }
.shell-public .content.content--bands { display: block; max-width: none; padding: 0; overflow-x: clip; }
.content--bands .btn--primary { width: auto; }

.pub-head { position: sticky; top: 0; z-index: 100; background: var(--bar-bg); border-bottom: 1px solid var(--bar-line); box-shadow: 0 8px 18px -14px rgba(60, 30, 10, .5); }
.pub-head__in { display: flex; align-items: center; gap: 8px; height: var(--bar-h); max-width: 1320px; margin: 0 auto; padding: 0 24px; }
.pub-nav { display: flex; align-items: center; gap: 2px; margin-left: 22px; }
.pub-nav a, .pub-nav__btn { position: relative; display: flex; align-items: center; gap: 6px; height: var(--bar-h); padding: 0 16px; font: 600 15.5px var(--sans); color: var(--muted); text-decoration: none; background: transparent; border: 0; cursor: pointer; }
.pub-nav a:hover, .pub-nav__btn:hover, .pub-nav__btn[aria-expanded="true"], .pub-nav a[aria-current="page"], .pub-nav__btn[aria-current="page"] { color: var(--ink); }
.pub-nav a[aria-current="page"]::after, .pub-nav__btn[aria-current="page"]::after {
  content: ""; position: absolute; left: 50%; bottom: 11px; width: 48px; height: 10px; transform: translateX(-50%);
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 3px no-repeat, radial-gradient(circle at 6px 2px, var(--accent) 5px, transparent 5.6px) 0 1px / 12px 9px repeat-x;
}
.pub-nav .i { width: 14px; height: 14px; }
.pop--off { width: 430px; max-width: calc(100vw - 24px); padding: 10px; }
.pop--off .menu-item { align-items: flex-start; }
.pop--off .menu-item b { display: block; }
.pub-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.pub-signin { white-space: nowrap; display: inline-flex; align-items: center; min-height: 44px; padding: 10px 12px; font-weight: 600; color: var(--muted); text-decoration: none; border-radius: 10px; }
.pub-signin:hover, .pub-signin[aria-current="page"] { color: var(--ink); background: var(--fill-soft-2); }
.pub-burger { display: none; margin-left: auto; width: 44px; height: 44px; }
.pub-sheet .btn { width: 100%; margin-top: 10px; }
.shell-public .pub-head .brand .logo-word { display: inline; }

.band { padding: 64px 0; }
.band__head { max-width: 760px; margin: 0 auto 30px; text-align: center; padding: 22px 28px; }
.band__head h2 { margin-bottom: .2em; }
.band__head .lead { margin: 0 auto; }
.hero { padding: 54px 0 70px; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero__tile { padding: 44px 42px 40px; position: relative; overflow: hidden; }
.hero__tile::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--saffron) 38%, transparent), transparent 70%); pointer-events: none; }
.hero h1 { font-size: clamp(2.3rem, 1.2rem + 3.6vw, 3.9rem); letter-spacing: -.025em; line-height: 1.04; margin-bottom: .4em; }
.hero__actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 22px; }
.hero__note { display: flex; gap: 8px; align-items: center; margin: 20px 0 0; font-size: .92rem; color: var(--muted); }
.hero__note .i { width: 16px; height: 16px; flex: none; }
.window { margin: 0; padding-top: 10px; }
.window .awning { position: relative; z-index: 2; margin: 0 -10px -12px; }
.window__frame { padding: 14px; border-radius: 22px; background: linear-gradient(145deg, var(--wood-1), var(--wood-3) 70%, var(--wood-2)); box-shadow: 0 30px 50px -26px rgba(60, 30, 10, .7), inset 0 0 0 2px rgba(255, 255, 255, .28); }
.window__glass { border-radius: 12px; overflow: hidden; background: #FFFFFF; }
.window__glass img, .feat-tile img { display: block; width: 100%; height: auto; }
.grid2, .grid3, .grid4 { display: grid; gap: var(--tile-gap); }
.grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.benefit { padding: 28px 26px 26px; transition: transform .2s ease; }
.benefit:hover, .offer:hover { transform: translateY(-4px); }
.benefit__ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 16px; color: #FFFFFF; background: linear-gradient(145deg, var(--accent), #8F3F1D); }
.benefit:nth-child(2) .benefit__ic { background: linear-gradient(145deg, #C98E12, #8A6420); }
.benefit:nth-child(3) .benefit__ic { background: linear-gradient(145deg, #5E7F3A, #3D5A22); }
.benefit__ic .i { width: 28px; height: 28px; }
.benefit p, .step p, .offer p, .feat-tile p { color: var(--muted); margin: 0; }
.step { position: relative; padding: 64px 22px 24px; }
.step__sign { position: absolute; left: 22px; top: -4px; width: 64px; padding: 16px 0 8px; text-align: center; font: 700 1.9rem/1 var(--serif); color: #3E2A0F; background: linear-gradient(180deg, #EBCB86, #C79B42); border: 1px solid #8A6420; border-radius: 0 0 12px 12px; box-shadow: 0 8px 14px -8px rgba(60, 30, 10, .7); }
.offer { display: flex; flex-direction: column; padding: 0 0 22px; overflow: hidden; transition: transform .2s ease; }
.offer .awning { margin-bottom: 14px; }
.offer__body { flex: 1; display: flex; flex-direction: column; padding: 0 24px; }
.offer__body p { flex: 1; }
.offer__ic { display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--fill-soft-2); color: var(--accent-text); margin-bottom: 10px; flex: none; }
.offer__ic .i { width: 22px; height: 22px; }
.offer a.more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; font-weight: 700; text-decoration: none; }
.offer a.more:hover { text-decoration: underline; }
.offer a.more .i { width: 14px; height: 14px; transform: rotate(-90deg); }
.faq-list { display: grid; gap: 12px; }
details.faq { padding: 0; }
details.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 22px; font: 700 1.08rem/1.3 var(--serif); }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after { content: "+"; flex: none; font: 400 1.7rem/1 var(--sans); color: var(--accent-text); transition: transform .2s; }
details.faq[open] summary::after { transform: rotate(45deg); }
details.faq .faq__a { padding: 0 22px 18px; color: var(--muted); }
details.faq .faq__a p { margin: 0; }
.faq-group { margin: 26px 0 12px; padding: 12px 22px; font-size: 1.3rem; }
.faq-group:first-child { margin-top: 0; }
.cta-tile { max-width: 900px; margin: 0 auto; padding: 0 0 46px; overflow: hidden; text-align: center; }
.cta-tile .awning { margin-bottom: 30px; height: 52px; }
.cta-tile h2 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.cta-tile p { max-width: 54ch; margin-left: auto; margin-right: auto; padding: 0 22px; color: var(--muted); }
.cta-tile .hero__actions { justify-content: center; }
.page-hero { padding: 36px 0 12px; }
.page-hero__tile { padding: 30px 36px; }
.page-hero__tile h1 { margin-bottom: .2em; font-size: clamp(2rem, 1.3rem + 2.2vw, 3rem); }
.page-hero__tile .lead { margin: 0; }
.pcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 12px; font-size: .9rem; color: var(--muted); }
.pcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-strong); }
.pcrumbs a { color: var(--muted); text-decoration: none; }
.pcrumbs a:hover { color: var(--accent-text); text-decoration: underline; }
.prose { padding: 30px 34px; }
.prose h2 { font-size: 1.35rem; margin-top: 1.2em; }
.prose h2:first-child, .prose .eyebrow + h2 { margin-top: 0; }
.prose p, .prose li { max-width: 72ch; }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose ol li, .prose ul li { margin-bottom: .45em; }
.prose section { margin: 0; }
.checklist { list-style: none; margin: 0; padding: 0 !important; display: grid; gap: 10px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; }
.checklist .i { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--st-completed-ink); }
.feat-tile { padding: 18px 18px 22px; transition: transform .2s; }
.feat-tile img { border-radius: 12px; border: 1px solid var(--line); margin-bottom: 14px; aspect-ratio: 16 / 10; object-fit: cover; object-position: top left; }
.feat-tile h3 { font-size: 1.2rem; }
.searchrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 14px 20px; margin-bottom: var(--tile-gap); }
.searchrow > .i { width: 20px; height: 20px; color: var(--muted); flex: none; }
.searchrow input[type="search"] { flex: 1 1 200px; min-width: 0; min-height: 44px; padding: 0 12px; font-size: 17px; }
.searchrow__count { color: var(--muted); font-weight: 600; font-size: .92rem; }
.feat-group { margin-bottom: var(--tile-gap); padding: 26px 28px; scroll-margin-top: 90px; }
.feat-group h2 { display: flex; align-items: center; gap: 12px; font-size: 1.5rem; margin: 0; }
.feat-group h2 .offer__ic { margin: 0; }
.feat-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 36px; }
.feat-item { padding: 10px 0; border-top: 1px solid var(--line); }
.feat-item b { display: block; }
.feat-item span { color: var(--muted); font-size: .95rem; }
.feat-group__more { margin: 14px 0 0; font-weight: 700; }
.grid-help { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--tile-gap); align-items: start; }
.help-toc { position: sticky; top: 90px; padding: 22px 24px; }
.help-toc h2 { font-size: 1.1rem; }
.help-steps { display: grid; gap: var(--tile-gap); }
.help-steps .prose { scroll-margin-top: 90px; }

/* the sign-in, account and short pages keep Atlas's centred card, on the public background */
.shell-public .content:not(.content--bands) { padding: 44px var(--gutter) 60px; }
.shell-public .content > .card { border-radius: 20px; }
.shell-public .content > .card h1 { font-family: var(--serif); }
.public-mark .logo-mark-large, .login-mark .logo-mark-large { width: 84px; height: 84px; border-radius: 20px; box-shadow: 0 10px 20px -10px rgba(60, 30, 10, .6); }

.pub-foot { margin-top: auto; background: var(--foot-bg); color: var(--foot-ink); padding: 0 0 26px; }
.pub-foot::before { content: ""; display: block; height: 14px; background: repeating-linear-gradient(90deg, var(--accent) 0 28px, #F3E0BC 28px 56px); }
.pub-foot a { color: var(--foot-ink); text-decoration: none; }
.pub-foot a:hover { color: #FFFFFF; text-decoration: underline; }
.pub-foot__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 30px; max-width: 1240px; margin: 0 auto; padding: 40px 24px 26px; box-sizing: border-box; }
.pub-foot h2 { margin: 0 0 12px; font: 600 .98rem var(--sans); font-variant-caps: all-small-caps; letter-spacing: .14em; color: var(--foot-head, #E0BE85); }
.pub-foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.pub-foot li a { display: inline-flex; align-items: center; min-height: 36px; }
.pub-foot .brand { color: var(--foot-ink); margin-bottom: 10px; }
.pub-foot .brand:hover { background: transparent; }
.pub-foot .brand .logo-word { color: var(--foot-ink); }
.pub-foot p { color: var(--foot-muted); max-width: 34ch; font-size: .94rem; }
.pub-foot__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; max-width: 1240px; margin: 0 auto; padding: 18px 24px 0; box-sizing: border-box; border-top: 1px solid rgba(255, 255, 255, .14); font-size: .9rem; color: var(--foot-muted); }
.pub-foot .footer-copyright { color: var(--foot-muted); font-size: .9rem; }
/* standing-rules: the copyright line links to the parent company but stays as dim and small as the notice itself */
.footer .footer-copyright a, .pub-foot .footer-copyright a { color: inherit; font: inherit; text-decoration: none; }
.footer .footer-copyright a:hover, .pub-foot .footer-copyright a:hover { text-decoration: underline; }
.legal-pair { display: inline-flex; gap: 14px; margin-left: auto; }

/* ------------------------------------------------------------------ 5. narrower screens */
@media (max-width: 1560px) {
  .searchbtn { min-width: 0; width: 44px; padding: 0; justify-content: center; }
  .searchbtn .lbl, .searchbtn .kbd { display: none; }
  .nav a { padding: 0 12px; }
}
@media (max-width: 1240px) {
  .topbar .brand .logo-word { display: none; }
  .nav a { padding: 0 10px; }
  .switcher { max-width: 170px; }
  .adminbtn span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .adminbtn { width: 44px; padding: 0; justify-content: center; }
}
@media (max-width: 1023px) {
  :root { --bar-h: 58px; }
  .brand__mark, .brand .logo-mark { width: 34px; height: 34px; }
  .phone-title { font: 700 1.2rem var(--serif); text-transform: none; letter-spacing: 0; flex: 1 1 auto; min-width: 7ch; }
  .switcher { max-width: 132px; flex: 0 1 auto; min-width: 0; }
  .shell-public .brand .logo-word { display: inline; }
  .content .pagehead { padding: 16px 18px; }
  .content > .pagehead .tabs { margin-bottom: -16px; }
  .tabbar a, .tabbar button { font-family: var(--sans); text-transform: none; letter-spacing: 0; }
  .tabbar a[aria-current="page"]::before { content: ""; position: absolute; left: 50%; top: 0; width: 36px; height: 9px; transform: translateX(-50%); background: linear-gradient(var(--accent), var(--accent)) 0 0 / 100% 3px no-repeat, radial-gradient(circle at 6px 2px, var(--accent) 5px, transparent 5.6px) 0 1px / 12px 9px repeat-x; }
  .tabbar a { position: relative; }
  .hero__grid, .grid-help { grid-template-columns: minmax(0, 1fr); }
  .help-toc { position: static; }
  .grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pub-foot__grid { grid-template-columns: 1fr 1fr; }
  .rv-stage { padding: 14px 14px 18px; }
}
@media (max-width: 900px) {
  .pub-nav, .pub-actions { display: none; }
  .pub-burger { display: inline-grid; }
  .grid2, .grid3 { grid-template-columns: minmax(0, 1fr); }
  .feat-list { grid-template-columns: minmax(0, 1fr); }
  .band { padding: 40px 0; }
  .hero { padding: 26px 0 44px; }
  .hero__tile { padding: 28px 22px; }
  .page-hero { padding: 22px 0 6px; }
  .page-hero__tile, .prose { padding: 24px 20px; }
  .ibrow { padding-left: 22px; }
}
@media (max-width: 480px) {
  .switcher__name { display: none; }
  .switcher { padding: 0 8px; }
}
@media (max-width: 640px) {
  .pwrap { padding-left: 16px; padding-right: 16px; }
  .pub-head__in { padding: 0 12px; }
  .grid4 { grid-template-columns: minmax(0, 1fr); }
  .pub-foot__grid { grid-template-columns: minmax(0, 1fr); padding: 30px 16px 20px; }
  .pub-foot__legal { padding: 16px 16px 0; }
  .legal-pair { margin-left: 0; }
  .band__head { padding: 18px 18px; }
  .feat-group { padding: 20px 18px; }
  .searchrow { padding: 12px 14px; }
  .shell-public .content:not(.content--bands) { padding: 28px 16px 40px; }
  .wtile::before { height: 26px; }
  .wtile { padding-top: 26px; }
}

/* ------------------------------------------------------------------ print and motion */
@media print {
  body, .band { background: #FFFFFF !important; color: #000000; }
  .theme-switch, .toasts, .topbar, .pub-head, .tabbar, .studiobar, .scrim, .palette, .sheet, .skip, .pop, .pub-foot::before, .awning, .wtile::before, .adm-tabs { display: none !important; }
  .card, .ptile, .panel, .wtile, .ibrow { box-shadow: none; border-color: #999999; break-inside: avoid; }
}
@media (prefers-reduced-motion: reduce) {
  .benefit, .offer, .feat-tile, .btn { transition: none; }
  .benefit:hover, .offer:hover { transform: none; }
}

/* Answer-first tiles on the public pages (seo-geo-ai-visibility) and the Contact question heading. Author: Jeremiah Buttler */
.answer-tile { margin-bottom: var(--tile-gap, 1.25rem); padding: 1.25rem 1.5rem; }
.answer-tile p { margin: .5rem 0 0; line-height: 1.55; }
.answer-tile h2 { margin-top: 0; }
.contact-q { font-size: 1.1rem; margin: .25rem 0 .75rem; }

/* Phone width: every tab, chip, segmented button and pager button is a 44 by 44 touch target (accessibility). Author: Jeremiah Buttler */
@media (max-width: 767px) {
  .tabs a, .chip, .seg button, .mk-next .btn {
    min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  }
}

/* An admin's menu button is Emporania's own icon (skill aideamaker-menu), so the brand beside it is the wordmark alone, at every
   width: it stays the link home, and the mark is not drawn twice. */
.topbar .brand--word .logo-word { display: inline; }
@media (max-width: 1023px) {
  .topbar .brand--word { padding-left: 2px; }
  .topbar .brand--word .logo-word { font-size: 1.2rem; }
}