/* Home: "The well-kept board". Tiles fitted edge to edge on 8px gaps, 10px margins, one 6px radius, filled, never outlined. */
.home body { background: var(--night); color: var(--frost); }
.board-page { display: block; }
.tile { border-radius: var(--r); overflow: hidden; position: relative; }
.t-paper { background: var(--paper); color: var(--ink); }
.t-p2 { background: var(--paper-2); color: var(--ink); }
.t-p3 { background: var(--paper-3); color: var(--ink); }
.t-ice { background: var(--ice); color: var(--ink); }
.t-deep { background: var(--deep); color: var(--frost); }
.t-deep2 { background: var(--deep-2); color: var(--frost); }
.t-lime { background: var(--lime); color: var(--ink); }
.t-amber { background: var(--amber); color: var(--ink); }

/* ---------------- Hero ---------------- */
.hero {
  --band: clamp(120px, 11.8vw, 190px);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: var(--band) 64px minmax(0, 1fr);
  gap: var(--gap);
  padding: var(--m) var(--m) 0;
  height: 100svh;
  min-height: 760px;
  max-height: 1180px;
}
.band { grid-column: 1 / -1; background: var(--paper); color: var(--ink); display: flex; align-items: center; }
.name {
  font-family: var(--font-display); font-weight: 900; letter-spacing: -0.045em; line-height: 0.86;
  white-space: nowrap; font-size: clamp(56px, 7.4vw, 140px); padding: 0 0.1em; display: block;
}
.name-a { color: var(--ink); }
.name-b { color: var(--ink); }
.links { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.link {
  display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 20px;
  text-decoration: none; font-size: var(--step-body); font-weight: 500;
  transition: filter var(--t-hover) var(--ease-out);
}
button.link { border: 0; text-align: left; cursor: pointer; }
.link:hover { filter: brightness(1.06); }
.t-paper.link:hover, .t-ice.link:hover { filter: brightness(0.96); }

.rail-l { grid-column: 1 / 4; display: grid; grid-template-rows: minmax(0, 0.8fr) auto; gap: var(--gap); min-height: 0; }
.photo { margin: 0; background: var(--deep); min-height: 0; }
.photo img { width: 100%; height: 100%; object-fit: cover; }
.live { padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.live-h { font-size: var(--step-body); font-weight: 500; }
.live-note { font-size: var(--step-small); color: var(--soft); margin-bottom: 4px; }
.lr { display: grid; grid-template-columns: 1fr 72px; align-items: center; gap: 10px; font-size: 15px; }
.lr input {
  width: 100%; height: 36px; padding: 0 10px; border: 0; border-radius: 4px; background: var(--paper-2);
  font-size: 16px; text-align: right; font-feature-settings: "tnum" 1;
  transition: background-color var(--t-hover);
}
.lr input:hover { background: var(--paper-3); }
.lr input:focus { background: var(--white); outline: 2px solid var(--ink); outline-offset: 0; }
.lr input[aria-invalid="true"] { background: var(--bad-tint); color: var(--bad); }
.lr-name { grid-template-columns: 72px 1fr; }
.lr-name input { text-align: left; }
.lr-marks { display: grid; gap: 6px; }

.stage { grid-column: 4 / 11; background: var(--deep); min-height: 0; }
.stack3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 600ms var(--ease-out); }
.stage.is-3d .stack3d { opacity: 1; }
.stage.is-3d .mini-card { opacity: 0; visibility: hidden; pointer-events: none; }
.statement {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  background: var(--night); color: var(--frost); padding: 22px 24px 24px;
  font-size: var(--step-statement); line-height: 1.22; letter-spacing: -0.01em; max-width: none;
  border-radius: 0;
}
/* The fallback card (no script / no WebGL): a real, complete card. */
.mini-card {
  position: absolute; left: 50%; top: 6%; transform: translateX(-50%) rotate(-2deg);
  width: min(360px, 58%); background: var(--white); color: var(--ink); border-radius: 4px;
  padding: 22px 22px 18px; transition: opacity 400ms var(--ease-out);
}
.mc-school { font-size: 13px; color: var(--soft); }
.mc-name { font-family: var(--font-display); font-weight: 900; font-size: 26px; letter-spacing: -0.03em; line-height: 1.05; margin: 6px 0 12px; }
.mc-figs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 14px; }
.mc-figs p { background: var(--paper); border-radius: 4px; padding: 8px; display: flex; flex-direction: column; }
.mc-figs b { font-size: 17px; font-weight: 500; }
.mc-figs span { font-size: 13px; color: var(--soft); }
.mc-grade { display: inline-block; }
.mc-grade.flip { animation: flip 360ms var(--ease-out); }
@keyframes flip { from { transform: perspective(200px) rotateX(-90deg); opacity: 0; } to { transform: none; opacity: 1; } }
.mc-bars i::after { transition: transform 300ms var(--ease-out); }
.mc-bars { display: grid; gap: 5px; }
.mc-bars li { display: grid; grid-template-columns: 104px 1fr 28px; align-items: center; gap: 8px; font-size: 13px; }
.mc-bars i { height: 8px; border-radius: 2px; background: var(--paper-2); position: relative; overflow: hidden; }
.mc-bars i::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--v)); background: var(--deep); }
.mc-bars b { font-weight: 500; text-align: right; }

.rail-r { grid-column: 11 / 13; display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: var(--gap); min-height: 0; }
.fact { padding: 14px 16px; font-size: 16px; line-height: 1.3; display: flex; flex-direction: column; justify-content: flex-start; }
.fact b { display: block; font-family: var(--font-display); font-weight: 900; font-size: clamp(20px, 1.7vw, 28px); letter-spacing: -0.02em; line-height: 1; margin-bottom: 6px; }
.act { background: var(--lime); }
.act-a {
  position: absolute; inset: 0; padding: 14px 16px; display: flex; align-items: flex-end; justify-content: space-between;
  color: var(--ink); text-decoration: none; font-weight: 500; font-size: 16px; line-height: 1.25;
  transition: background-color var(--t-hover);
}
.act-a:hover { background: #d6fa63; }
.act-a:active { transform: scale(0.98); }

/* ---------------- Section commons ---------------- */
.h-sec { font-family: var(--font-display); font-weight: 900; font-size: var(--step-head); letter-spacing: -0.035em; line-height: 0.98; }
.h-two { font-family: var(--font-display); font-weight: 900; font-size: var(--step-head); letter-spacing: -0.035em; line-height: 1; }
.h-two span { display: block; }
.h-two .soft { color: var(--frost-soft); }

/* ---------------- Work: book-spine index ---------------- */
.work { padding: clamp(96px, 12vw, 180px) var(--m) 96px; }
.work-top { display: flex; align-items: baseline; gap: 28px; flex-wrap: wrap; margin-bottom: 28px; }
.work-top .h-sec { font-size: clamp(28px, 2.6vw, 40px); }
.work-note { font-size: 18px; color: var(--frost-soft); max-width: 52ch; }
.spines { display: flex; gap: 6px; height: 440px; }
.spine { flex: 1 1 0; min-width: 30px; max-width: 46px; }
.spine a {
  display: flex; flex-direction: row; align-items: center; gap: 12px; height: 100%; padding: 14px 0 12px;
  writing-mode: vertical-rl; text-decoration: none; border-radius: 4px; color: var(--ink);
  font-size: 17px; font-weight: 500; white-space: nowrap;
  transition: background-color var(--t-hover) var(--ease-out), color var(--t-hover);
}
.spine a em { font-style: normal; font-size: 14px; padding: 8px 3px; border-radius: 3px; background: rgba(10, 11, 13, 0.1); }
.spine a:hover, .spine a:focus-visible { background: var(--frost); color: var(--ink); }
.spine.is-live a { background: var(--lime); }
.spine.is-live a em { background: var(--ink); color: var(--lime); }
.k-doc, .s-doc a { background: var(--lime); }
.s-doc a { background: #e4f9a6; }
.k-res, .s-res a { background: var(--ice); }
.k-vid, .s-vid a { background: var(--amber); }
.k-pub, .s-pub a { background: var(--paper-3); }
.k-ops, .s-ops a { background: #9fc3d0; }
.keys { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; font-size: 16px; color: var(--frost-soft); }
.keys li { display: flex; align-items: center; gap: 8px; }
.keys i { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }
.k-doc { background: #e4f9a6; }

/* ---------------- How it works: one card, four fields ---------------- */
.how { display: grid; grid-template-columns: repeat(4, 1fr); }
.field { position: relative; height: 84svh; min-height: 620px; max-height: 900px; padding: 28px; display: flex; flex-direction: column; }
.f-1 { background: var(--paper); color: var(--ink); }
.f-2 { background: var(--ice); color: var(--ink); }
.f-3 { background: var(--deep-2); color: var(--frost); }
.f-4 { background: var(--deep); color: var(--frost); }
.h-field { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.2vw, 34px); letter-spacing: -0.03em; line-height: 1; max-width: 9ch; }
.field .ui-card { position: absolute; top: 34%; left: calc(50% - 134px); width: 268px; transition: transform 150ms var(--ease-out); }
.field:hover .ui-card { transform: translateY(-6px); }
.clause { margin-top: auto; font-size: clamp(19px, 1.6vw, 26px); line-height: 1.2; letter-spacing: -0.01em; max-width: 17ch; }
/* Interface fragments: the product's own look. */
.ui-card { background: var(--white); color: var(--ink); border-radius: 6px; padding: 16px; font-size: 14px; }
.ui-card .uc-cap { font-size: 13px; color: var(--soft); margin-bottom: 10px; }
.ui-card table { width: 100%; border-collapse: collapse; }
.ui-card th { text-align: left; font-weight: 400; color: var(--soft); padding: 5px 0; border-bottom: 1px solid #ecece6; }
.ui-card td { text-align: right; padding: 5px 0; border-bottom: 1px solid #ecece6; font-weight: 500; }
.ui-card ul li { display: flex; justify-content: space-between; padding: 6px 0; border-bottom: 1px solid #ecece6; }
.ui-card ul li span { color: var(--soft); }
.uc-ok { margin-top: 10px; font-size: 13px; color: var(--data); font-weight: 500; }
.uc-design { padding: 18px; }
.uc-school { font-size: 13px; color: var(--soft); }
.uc-name { font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: -0.03em; margin: 4px 0 10px; }
.uc-big { display: flex; align-items: baseline; justify-content: space-between; background: var(--deep); color: var(--frost); border-radius: 4px; padding: 10px 12px; }
.uc-big b { font-family: var(--font-display); font-weight: 900; font-size: 30px; letter-spacing: -0.02em; }
.uc-big span { background: var(--lime); color: var(--ink); border-radius: 3px; padding: 2px 8px; font-weight: 500; }
.uc-hi { font-size: 13px; color: var(--soft); margin: 8px 0; font-family: "Noto Sans Devanagari", "Nirmala UI", "Mangal", var(--font-text); }
.uc-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; align-items: end; height: 56px; }
.uc-bars i { display: block; height: 100%; border-radius: 2px; background: var(--paper-2); position: relative; overflow: hidden; }
.uc-bars i::after { content: ""; position: absolute; inset: 0; transform-origin: bottom; transform: scaleY(var(--v)); background: var(--data); }
.uc-files ul li span { color: var(--ink); font-size: 13px; }
.uc-files ul li b { font-weight: 400; color: var(--soft); font-size: 13px; }

/* ---------------- Marquee (signature) ---------------- */
.marquee { background: var(--paper); color: var(--ink); overflow: hidden; padding: 26px 0 30px; }
.mq-track { display: flex; width: max-content; animation: mq 42s linear infinite; }
.mq-track span { font-family: var(--font-display); font-weight: 900; font-size: clamp(56px, 8vw, 132px); letter-spacing: -0.04em; line-height: 1; white-space: pre; padding-right: 0.2em; }
.marquee:hover .mq-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }

/* ---------------- Showcase: one image across tiles ---------------- */
.mosaic { padding: var(--gap) var(--m) 0; }
.mos-d { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--gap); }
.mos-ph { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.mos { aspect-ratio: 1; border-radius: var(--r); overflow: hidden; position: relative; }
.mos-p span {
  position: absolute; inset: 0; background-image: url(/assets/img/account-book-wide.jpg); background-size: 600% 400%;
  background-position: var(--x) var(--y); transition: transform 500ms var(--ease-out);
}
.mos-ph .mos-p span { background-image: url(/assets/img/account-book-tall.jpg); background-size: 300% 600%; }
.mos-p:hover span { transform: scale(1.08); }
.mos-c { padding: 16px; display: flex; flex-direction: column; justify-content: flex-start; }
.mos-h { font-family: var(--font-display); font-weight: 900; font-size: clamp(26px, 2.6vw, 44px); letter-spacing: -0.03em; line-height: 0.98; }
.mos-f { font-size: clamp(15px, 1.25vw, 19px); line-height: 1.3; }
.mos-a a { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: space-between; padding: 16px; text-decoration: none; color: var(--ink); font-weight: 500; font-size: clamp(16px, 1.3vw, 20px); transition: background-color var(--t-hover); }
.mos-a a:hover { background: #d6fa63; }

/* ---------------- Four designs ---------------- */
.designs { padding: clamp(110px, 12vw, 200px) var(--m) 0; }
.designs .h-sec { margin-bottom: 40px; }
.des-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.des a { display: block; text-decoration: none; color: inherit; }
.des-pic { aspect-ratio: 4 / 5; border-radius: var(--r); overflow: hidden; padding: 18px 18px 0; display: flex; }
.des-pic img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 3px 3px 0 0; transition: transform 400ms var(--ease-out); }
.des a:hover .des-pic img { transform: translateY(-6px); }
.des-name { margin-top: 10px; font-size: 17px; font-weight: 500; color: var(--frost); }
.des-role { font-size: 16px; color: var(--frost-soft); }

/* ---------------- Inside each document ---------------- */
.inside { padding: clamp(110px, 12vw, 200px) var(--m) clamp(110px, 12vw, 180px); }
.in-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.in-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 40px; }
.in-tabs { display: flex; flex-direction: column; gap: 6px; }
.in-tabs button {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; min-height: 64px;
  border: 0; border-radius: var(--r); background: var(--deep); color: var(--frost); text-align: left;
  transition: background-color var(--t-hover);
}
.in-tabs button b { font-weight: 500; font-size: 16px; }
.in-tabs button span { font-size: 14px; color: var(--frost-soft); }
.in-tabs button:hover { background: var(--deep-2); }
.in-tabs button[aria-selected="true"] { background: var(--frost); color: var(--ink); }
.in-tabs button[aria-selected="true"] span { color: var(--soft); }
.in-pan-h { font-size: var(--step-body); font-weight: 500; color: var(--frost-soft); margin-bottom: 14px; }
.html-js .in-pan[hidden] { display: none; }
.in-pan + .in-pan { margin-top: 40px; }
.js .in-pan + .in-pan { margin-top: 0; }
.bands { display: grid; gap: 4px; }
.bands li {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; align-items: center; gap: 20px;
  min-height: 76px; padding: 12px 20px; border-radius: var(--r); background: var(--deep);
}
.bands li:nth-child(even) { background: var(--deep-2); }
.b-fig { font-size: 20px; font-weight: 500; color: var(--lime); }
.bands p { font-size: 18px; font-weight: 500; }
.bands p span { display: block; font-size: 16px; font-weight: 400; color: var(--frost-soft); margin-top: 2px; }
.bands em { font-style: normal; font-size: 16px; color: var(--frost-soft); text-align: right; }
.in-out { margin-top: 18px; }

/* ---------------- Contact ---------------- */
.contact { background: var(--lime); color: var(--ink); padding: 48px var(--m) 64px; margin: 0 var(--m); border-radius: var(--r); overflow: hidden; }
.strip { overflow: hidden; margin: 0 calc(-1 * var(--m)); }
.strip-track { display: flex; gap: 8px; width: max-content; animation: mq 70s linear infinite; }
.strip-track img { height: 150px; width: auto; border-radius: 4px; object-fit: cover; }
.contact .h-sec { margin-top: 72px; }
.qform { margin-top: 40px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.cell { display: flex; border-radius: var(--r); background: #b6e12f; transition: background-color var(--t-hover); min-height: 96px; }
.cell:focus-within { background: #ecffb0; }
.cell input, .cell textarea { flex: 1; border: 0; background: transparent; padding: 0 22px; font-size: 18px; color: var(--ink); text-align: center; outline: none; }
.cell textarea { padding: 22px; text-align: left; resize: vertical; min-height: 96px; }
.cell input::placeholder, .cell textarea::placeholder { color: #3e4a17; }
.cell.wide { grid-column: 1 / -1; }
.send { border: 0; justify-content: center; align-items: center; gap: 10px; background: var(--ink); color: var(--lime); font-size: 18px; font-weight: 500; }
.send:hover { background: #23262b; }
.send:active { transform: scale(0.99); }
.q-small { grid-column: 1 / -1; font-size: 16px; color: #2b3410; }
.q-status { grid-column: 1 / -1; font-size: 16px; font-weight: 500; min-height: 1.5em; }

/* ---------------- Footer ---------------- */
.foot { padding: clamp(96px, 9vw, 140px) var(--m) 24px; }
.blocks { display: block; width: 100%; height: auto; max-height: 40svh; }
.blocks text { font-family: var(--font-display); font-weight: 900; font-size: 236px; letter-spacing: -0.04em; fill: var(--night); }
.foot-cols { display: grid; grid-template-columns: repeat(4, 1fr) 2fr; gap: 24px; margin-top: 56px; font-size: 16px; }
.foot-cols ul { display: grid; gap: 8px; align-content: start; }
.foot-cols b { font-weight: 500; color: var(--frost); }
.foot-cols a, .linkish { color: var(--frost-soft); text-decoration: none; background: none; border: 0; padding: 0; text-align: left; }
.foot-cols a:hover, .linkish:hover { color: var(--frost); }
.foot-contact { display: grid; gap: 8px; color: var(--frost-soft); }
.foot-contact p:first-child { color: var(--frost); }
.foot-last { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 48px; font-size: 14px; color: var(--frost-soft); }
.credits { flex: 1; font-size: 16px; max-width: 64ch; line-height: 1.5; }
.credits a { color: var(--frost-soft); }
.btn.small { min-height: 40px; font-size: 15px; }

/* ---------------- Entrances (hidden state only when script runs) ---------------- */
.js.motion [data-in], .js.motion .reveal { opacity: 0; }

/* ---------------- Tablet ---------------- */
@media (max-width: 1100px) {
  .hero { height: auto; min-height: 0; max-height: none; grid-template-rows: var(--band) auto; }
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link { min-height: 64px; }
  .band { order: 0; } .links { order: 1; } .stage { order: 2; } .rail-l { order: 3; } .rail-r { order: 4; }
  .stage { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 4 / 3; }
  .contact { min-height: 0; }
  .rail-l { grid-column: 1 / 7; grid-template-rows: auto; }
  .photo { aspect-ratio: 4 / 3; }
  .rail-r { grid-column: 7 / -1; grid-template-rows: repeat(5, minmax(72px, auto)); }
  .how { grid-template-columns: repeat(2, 1fr); }
  .spines { display: block; height: auto; line-height: 2.2; }
  .spine { display: inline; max-width: none; }
  .spine a { display: inline; writing-mode: horizontal-tb; padding: 3px 6px; font-size: 16px; margin-right: 6px; white-space: normal; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .spine a em { font-size: 12px; padding: 1px 4px; margin-left: 6px; }
  .des-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
  .foot-contact { grid-column: 1 / -1; }
}

/* ---------------- Phone ---------------- */
@media (max-width: 700px) {
  :root { --gap: 6px; }
  .hero { grid-template-columns: repeat(2, minmax(0, 1fr)); --band: 128px; }
  .name { display: flex; flex-direction: column; justify-content: center; gap: 0.06em; font-size: 22vw; padding: 0 12px; }
  .name-b { font-size: 0.42em; letter-spacing: -0.03em; }
  .links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .link { padding: 14px; font-size: 15px; }
  .stage { aspect-ratio: auto; height: 118vw; }
  .mini-card { width: 74%; top: 5%; }
  .statement { position: absolute; font-size: 6vw; padding: 16px; }
  .rail-l { grid-column: 1 / -1; }
  .rail-l .photo { display: none; }
  .rail-r { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .fact { padding: 12px 14px; font-size: 14px; min-height: 84px; }
  .fact b { font-size: 20px; }
  .act { grid-column: 1 / -1; min-height: 64px; }
  .act-a { font-size: 16px; padding: 14px; align-items: center; }
  .work { padding-top: 96px; }
  .how { grid-template-columns: 1fr; }
  .field { height: auto; min-height: 64svh; padding: 20px; }
  .field .ui-card { position: static; margin-top: 32px; width: 268px; max-width: 100%; }
  .clause { margin-top: 24px; font-size: 22px; order: -1; }
  .f-1 .clause { order: 0; margin-top: 16px; }
  .mos-d { display: none; }
  .mos-ph { display: grid; }
  .mos-wide { grid-column: span 2; aspect-ratio: auto; }
  .mos-h { font-size: 7vw; }
  .mos-f { font-size: 15px; }
  .des-grid { gap: 8px; }
  .des-pic { padding: 10px 10px 0; }
  .des-name { font-size: 14px; }
  .in-top { flex-direction: column; align-items: stretch; margin-bottom: 28px; }
  .in-body { grid-template-columns: 1fr; gap: 16px; }
  .in-tabs { flex-direction: row; position: sticky; top: 0; z-index: 3; background: var(--night); padding: 6px 0; }
  .in-tabs button { flex: 1; min-height: 56px; padding: 8px; }
  .in-tabs button span { display: none; }
  .in-tabs button b { font-size: 14px; }
  .bands li { grid-template-columns: 1fr; gap: 4px; padding: 16px; }
  .bands em { text-align: left; }
  .contact { margin: 0 var(--m); padding: 28px 16px 40px; }
  .strip-track img { height: 110px; }
  .contact .h-sec { margin-top: 40px; font-size: 9vw; }
  .h-two { font-size: 28px; }
  .qform { grid-template-columns: 1fr; }
  .cell { min-height: 60px; }
  .q-small { order: 5; }
  .foot-last { flex-wrap: wrap; }
  .credits { flex-basis: 100%; order: 3; }
}

/* the assistant's launcher steps aside while the hero (which has its own "Ask us" tile) is on screen */
.home .chat-launch { transition: transform 260ms var(--ease-out), opacity 200ms var(--ease-out), background-color var(--t-hover); }
.home .chat-launch.away { opacity: 0; transform: translateY(16px); pointer-events: none; }

.mos-wide { grid-column: span 2; aspect-ratio: auto; }