/* LendAFile client interface — rebuilt as a clean stylesheet from the supplied boards. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #ffffff;
  --surface-2: #f7f7f8;
  --surface-3: #f0f1f3;
  --text: #121316;
  --muted: #676b73;
  --faint: #969ba3;
  --line: #e2e3e6;
  --line-strong: #cfd1d5;
  --red: #ec1830;
  --red-dark: #c70820;
  --red-soft: #fff0f2;
  --green: #087f5b;
  --green-soft: #e9f8f2;
  --amber: #a15c00;
  --amber-soft: #fff6df;
  --shadow: 0 8px 30px rgba(18, 19, 22, .07);
  --shadow-small: 0 2px 10px rgba(18, 19, 22, .055);
  --radius: 10px;
  --max: 1320px;
  --header-height: 66px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0f13;
  --surface: #12161c;
  --surface-2: #181d24;
  --surface-3: #20262e;
  --text: #f4f5f7;
  --muted: #a4aab3;
  --faint: #747c87;
  --line: #29313a;
  --line-strong: #3a434d;
  --red: #ff3048;
  --red-dark: #e4122d;
  --red-soft: #32151c;
  --green: #54d5ad;
  --green-soft: #112e27;
  --amber: #f0b95b;
  --amber-soft: #302512;
  --shadow: 0 12px 36px rgba(0, 0, 0, .28);
  --shadow-small: 0 3px 14px rgba(0, 0, 0, .2);
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--text); scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}
body.modal-open, body.tool-uploading { overflow: hidden; }
[hidden] { display: none !important; }
img, svg, canvas, video { display: block; max-width: 100%; }
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: none; }
button, input, select, textarea { color: inherit; font: inherit; }
button, .button { cursor: pointer; }
h1, h2, h3, h4, p { margin-top: 0; }
h1, h2, h3, h4 { color: var(--text); line-height: 1.12; letter-spacing: -.035em; }
p { color: var(--muted); }
.sr-only {
  clip: rect(0, 0, 0, 0); clip-path: inset(50%); height: 1px; overflow: hidden;
  position: absolute; white-space: nowrap; width: 1px;
}
.skip-link { background: var(--text); color: var(--bg); left: 12px; padding: 10px 14px; position: fixed; top: -80px; z-index: 2147483647; }
.skip-link:focus { top: 12px; }

/* Header */
.topbar {
  align-items: center;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: 230px minmax(0, 1fr) 230px;
  height: var(--header-height);
  margin: 0 auto;
  max-width: var(--max);
  padding: 0 28px;
  position: sticky;
  top: 0;
  z-index: 1000;
}
.topbar::before, .topbar::after {
  border-bottom: 1px solid var(--line); content: ""; height: var(--header-height); position: absolute; top: 0; width: 100vw;
}
.topbar::before { right: 100%; }
.topbar::after { left: 100%; }
.brand { align-items: center; color: var(--text); display: inline-flex; font-size: 18px; font-weight: 800; gap: 7px; letter-spacing: -.045em; white-space: nowrap; }
.brand img { height: 38px; object-fit: contain; width: 42px; }
.topbar > nav { align-items: stretch; display: flex; gap: 2px; grid-column: 2; height: 100%; justify-content: center; }
.topbar > nav > a, .nav-dropdown-toggle {
  align-items: center; background: none; border: 0; color: var(--text); display: inline-flex; font-size: 12px;
  font-weight: 600; gap: 4px; height: 100%; padding: 0 12px; position: relative; white-space: nowrap;
}
.topbar > nav > a:hover, .nav-dropdown-toggle:hover { color: var(--red); }
.topbar > nav > a[aria-current="page"]::after, .nav-dropdown-toggle.is-current::after {
  background: var(--red); bottom: -1px; content: ""; height: 2px; left: 10px; position: absolute; right: 10px;
}
.nav-sharing-icon { fill: none; height: 15px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 15px; }
.nav-chevron { fill: none; height: 12px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 12px; }
.nav-dropdown { position: relative; }
.nav-dropdown-menu {
  background: var(--surface); border: 1px solid var(--line); border-radius: 9px; box-shadow: var(--shadow); display: none;
  left: 50%; min-width: 310px; padding: 7px; position: absolute; top: calc(100% - 3px); transform: translateX(-50%);
}
.nav-dropdown.is-open .nav-dropdown-menu { display: grid; }
.nav-dropdown-menu a { align-items: center; border-radius: 6px; color: var(--text); display: grid; gap: 10px; grid-template-columns: 32px 1fr auto; padding: 9px; }
.nav-dropdown-menu a:hover { background: var(--surface-2); }
.nav-menu-icon { align-items: center; background: var(--red-soft); border-radius: 6px; color: var(--red); display: flex; height: 32px; justify-content: center; width: 32px; }
.nav-menu-icon svg { fill: none; height: 17px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; width: 17px; }
.nav-menu-copy { display: grid; line-height: 1.25; }
.nav-menu-copy strong { font-size: 12px; }
.nav-menu-copy small { color: var(--muted); font-size:12px; margin-top: 2px; }
.nav-menu-arrow { color: var(--faint); }
.theme-toggle {
  align-self: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; font-size:12px;
  height: 31px; padding: 0 12px; position: absolute; right: 28px; top: 17px;
}
.site-menu-toggle { display: none; }

/* Shared frame and controls */
.shell { margin: 0 auto; max-width: var(--max); min-height: 65vh; padding: 8px 28px 50px; }
.client-breadcrumb { align-items: center; color: var(--muted); display: flex; font-size:12px; gap: 7px; height: 27px; overflow: hidden; white-space: nowrap; }
.client-breadcrumb a { color: var(--red); font-weight: 700; }
.client-breadcrumb span:last-child { overflow: hidden; text-overflow: ellipsis; }
.eyebrow { color: var(--red); display: inline-block; font-size:12px; font-weight: 800; letter-spacing: .045em; text-transform: uppercase; }
.panel, .feature-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-small); }
.button, button[type="submit"], .actions button, .quick-qr-actions button {
  align-items: center; background: var(--red); border: 1px solid var(--red-dark); border-radius: 5px; color: #fff;
  display: inline-flex; font-size: 12px; font-weight: 700; justify-content: center; min-height: 38px; padding: 8px 16px;
}
.button:hover, button[type="submit"]:hover { background: var(--red-dark); }
.button.secondary, button.secondary, .secondary {
  background: var(--surface); border: 1px solid var(--line-strong); color: var(--text);
}
.button.secondary:hover, button.secondary:hover { background: var(--surface-2); }
.button.danger, button.danger { background: var(--red-soft); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); color: var(--red); }
.actions, .hero-actions { align-items: center; display: flex; flex-wrap: wrap; gap: 8px; }
.form-grid, .create-form { display: grid; gap: 11px; }
.field { display: grid; gap: 5px; min-width: 0; position: relative; }
.field > label, label > span { color: var(--text); font-size:12px; font-weight: 650; }
input, select, textarea {
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: 5px; outline: 0;
  padding: 10px 11px; width: 100%;
}
input { min-height: 42px; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 13%, transparent); }
.floating-field { padding-top: 0; }
.floating-field input, .floating-field textarea { padding: 17px 11px 5px; }
.floating-field label {
  color: var(--muted); font-size:12px; left: 11px; pointer-events: none; position: absolute; top: 12px;
  transform-origin: left top; transition: transform .14s, color .14s;
}
.floating-field input:focus + label, .floating-field input:not(:placeholder-shown) + label,
.floating-field textarea:focus + label, .floating-field textarea:not(:placeholder-shown) + label { color: var(--red); transform: translateY(-8px) scale(.78); }
.form-row.two { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.hint { color: var(--muted); font-size:12px; }
.panel-heading h1, .panel-heading h2 { font-size: 27px; margin: 4px 0 6px; }
.panel-heading p { font-size:12px; margin-bottom: 0; }

/* Messages are unmistakable toast cards rather than page sections. */
.alert {
  animation: toast-in .25s ease both; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green);
  border-radius: 7px; box-shadow: 0 16px 45px rgba(0,0,0,.18); color: var(--text); font-size: 12px; max-width: 390px;
  padding: 13px 16px; position: fixed; right: 18px; top: calc(var(--header-height) + 16px); z-index: 2000;
}
.alert-error, .alert-danger { border-left-color: var(--red); }
.alert-info { border-left-color: #1683d8; }
.alert-success { border-left-color: var(--green); }
@keyframes toast-in { from { opacity: 0; transform: translateX(18px); } }

/* Home */
.home-showcase {
  align-items: center; display: grid; gap: 42px; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr);
  min-height: 440px; padding: 28px 18px 42px;
}
.hero-copy { max-width: 690px; }
.home-showcase h1 { font-size: clamp(44px, 5vw, 68px); margin: 8px 0 15px; max-width: 680px; }
.home-showcase .hero-copy > p { font-size: 14px; line-height: 1.65; max-width: 595px; }
.home-showcase .hero-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 19px 0 11px; }
.home-benefits { border: 1px solid var(--line); border-radius: 6px; display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; }
.home-benefits span { background: var(--surface-2); border-right: 1px solid var(--line); color: var(--text); font-size:12px; font-weight: 600; padding: 9px; text-align: center; }
.home-benefits span:last-child { border: 0; }
.hero-stage { min-height: 360px; perspective: 850px; position: relative; }
.hero-canvas { height: 100% !important; inset: 0; position: absolute; width: 100% !important; }
.hero-file-chip, .hero-code-preview {
  background: color-mix(in srgb, var(--surface) 93%, transparent); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: var(--shadow); position: absolute; z-index: 2;
}
.hero-file-chip { align-items: center; display: flex; gap: 8px; padding: 8px 11px; }
.hero-file-chip span { align-items: center; background: var(--red-soft); border-radius: 4px; color: var(--red); display: flex; font-size:12px; font-weight: 800; height: 27px; justify-content: center; width: 28px; }
.hero-file-chip strong { font-size:12px; }
.hero-file-one { left: 2%; top: 14%; transform: rotate(-4deg); }
.hero-file-two { right: 1%; top: 24%; transform: rotate(3deg); }
.hero-code-preview { bottom: 4%; display: grid; min-width: 145px; padding: 11px 14px; right: 5%; }
.hero-code-preview small { color: var(--muted); font-size:12px; font-weight: 700; }
.hero-code-preview strong { font-size: 21px; letter-spacing: .08em; }
.hero-code-preview span { color: var(--green); font-size:12px; }
.hero-code-preview i { background: var(--green); border-radius: 50%; display: inline-block; height: 5px; margin-right: 4px; width: 5px; }
.home-section { border-top: 1px solid var(--line); padding: 30px 0; }
.home-section-heading { align-items: end; display: flex; gap: 30px; justify-content: space-between; margin-bottom: 16px; }
.home-section-heading h2, .home-section-copy h2 { font-size: 26px; margin: 4px 0 0; }
.home-section-heading > p { font-size:12px; margin: 0; max-width: 620px; }
.sharing-choice-grid, .guide-grid, .testimonial-grid { display: grid; gap: 9px; grid-template-columns: repeat(3, 1fr); }
.sharing-choice-grid article, .guide-card, .testimonial-card, .usecase-card { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 17px; }
.sharing-choice-grid article > span { color: var(--red); font-size:12px; font-weight: 800; text-transform: uppercase; }
.sharing-choice-grid h3 { font-size: 17px; margin: 7px 0; }
.sharing-choice-grid p, .guide-card p, .usecase-card p, .testimonial-card p { font-size:12px; }
.home-how, .home-trust { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 28px; grid-template-columns: .8fr 1.2fr; padding: 25px; }
.home-step-list { display: grid; gap: 7px; }
.home-step-list article { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; display: grid; gap: 10px; grid-template-columns: 28px 1fr; padding: 11px; }
.home-step-list article > span { align-items: center; background: var(--red); border-radius: 50%; color: #fff; display: flex; font-size:12px; font-weight: 800; height: 25px; justify-content: center; width: 25px; }
.home-step-list h3 { font-size: 13px; margin: 0 0 3px; }
.home-step-list p { font-size:12px; margin: 0; }
.usecase-bento { display: grid; gap: 9px; grid-template-columns: repeat(4, 1fr); }

/* The two-column tool boards */
.create-experience, .functional-layout, .quick-share-layout {
  align-items: stretch; display: grid; gap: 18px; grid-template-columns: minmax(0, .88fr) minmax(450px, 1.12fr);
}
.functional-intro, .quick-share-intro {
  align-content: center; min-height: 430px; overflow: hidden; padding: 34px 44% 34px 12px; position: relative;
}
.functional-intro::after, .quick-share-intro::after, .content-page > .shell > .hero::after, .contact-intro-panel::after {
  background: var(--red-soft) url('logo.svg') center / 68% auto no-repeat; border-radius: 42% 58% 48% 52% / 56% 42% 58% 44%;
  content: ""; filter: drop-shadow(0 18px 22px rgba(135,0,19,.16)); height: 245px; position: absolute; right: 1%; top: 50%; transform: translateY(-50%) rotate(-5deg); width: 40%;
}
.functional-intro h1, .quick-share-intro h1 { font-size: clamp(40px, 4.7vw, 60px); margin: 7px 0 13px; }
.functional-intro > p, .quick-share-intro > p { font-size: 13px; line-height: 1.65; }
.functional-facts, .quick-facts { display: grid; gap: 7px; grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); margin-top: 21px; }
.functional-facts > div, .quick-facts > span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; display: grid; padding: 10px; }
.functional-facts small, .quick-facts small { color: var(--muted); font-size:12px; }
.functional-facts strong, .quick-facts strong { font-size:12px; }
.functional-card, .quick-upload-card { align-content: center; min-height: 430px; padding: 28px; }
.create-fields { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.create-code-field { grid-column: 1 / -1; }
.create-summary, .quick-price-note {
  align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px;
  display: flex; justify-content: space-between; padding: 10px 12px;
}
.create-summary > div, .quick-price-note { font-size:12px; }
.create-summary > div { display: grid; }
.create-summary span, .quick-price-note span { color: var(--muted); font-size:12px; }
.create-footnote { font-size:12px; margin: -2px 0 0; }
.create-submit { width: 100%; }
.upload-dropzone input[type="file"] { clip: rect(0 0 0 0); height: 1px; opacity: 0; overflow: hidden; position: absolute; width: 1px; }
.upload-dropzone label {
  align-items: center; background: var(--surface-2); border: 1px dashed color-mix(in srgb, var(--red) 65%, var(--line));
  border-radius: 7px; cursor: pointer; display: flex; flex-direction: column; justify-content: center; min-height: 145px; padding: 18px; text-align: center;
}
.upload-dropzone label::before { background: var(--red-soft); border-radius: 50%; color: var(--red); content: "↑"; display: grid; font-size: 20px; height: 37px; margin-bottom: 8px; place-items: center; width: 37px; }
.upload-dropzone label strong { font-size: 13px; }
.upload-dropzone label span, .upload-dropzone label em { color: var(--muted); font-size:12px; font-style: normal; }
.quick-share-form > button { width: 100%; }
.quick-explainer { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.quick-explainer article { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; padding: 14px; }
.quick-explainer article > span { align-items: center; background: var(--red); border-radius: 50%; color: #fff; display: flex; font-size:12px; font-weight: 800; height: 24px; justify-content: center; width: 24px; }
.quick-explainer h2 { font-size: 13px; margin: 8px 0 3px; }
.quick-explainer p { font-size:12px; margin: 0; }
.quick-upload-progress > span { background: var(--surface-3); border-radius: 20px; display: block; height: 5px; overflow: hidden; }
.quick-upload-progress i { background: var(--red); display: block; height: 100%; width: 0; }
.quick-upload-progress strong { font-size:12px; }

/* Content, resource, guide and policy boards */
.content-page > .shell > .hero {
  align-content: center; min-height: 265px; overflow: hidden; padding: 30px 39% 32px 12px; position: relative;
}
.content-page > .shell > .hero::after { height: 220px; right: 4%; width: 29%; }
.content-page > .shell > .hero h1 { font-size: clamp(39px, 4.5vw, 58px); margin: 7px 0 12px; }
.content-page > .shell > .hero p { font-size: 12px; line-height: 1.65; max-width: 700px; }
.seo-section { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; margin-top: 9px; padding: 18px; }
.seo-section h2 { font-size: 21px; margin: 3px 0 10px; }
.seo-section h3 { font-size: 14px; }
.seo-section p, .seo-section li { color: var(--muted); font-size:12px; }
.feature-grid { display: grid; gap: 8px; grid-template-columns: repeat(3, 1fr); }
.feature-card { box-shadow: none; min-width: 0; padding: 14px; }
.feature-card strong { color: var(--text); font-size: 13px; }
.feature-card p { font-size:12px; margin: 5px 0 0; }
.resource-card:hover { border-color: var(--red); }
.resource-priority-clusters .feature-grid { grid-template-columns: repeat(4, 1fr); }
.blog-index .feature-grid { grid-template-columns: repeat(3, 1fr); }
.reference-search-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 8px; margin-bottom: 9px; padding: 10px; }
.reference-search { align-items: center; display: grid; gap: 8px; grid-template-columns: auto minmax(0, 1fr) auto; }
.reference-search > span { color: var(--muted); font-size: 17px; padding-left: 5px; }
.reference-filter-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.reference-filter-chips button { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size:12px; min-height: 27px; padding: 4px 10px; }
.reference-filter-chips button.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.faq-list { display: grid; gap: 6px; margin: 0 auto; max-width: 1040px; }
.faq-list details { background: var(--surface); border: 1px solid var(--line); border-radius: 7px; }
.faq-list summary { cursor: pointer; list-style: none; padding: 13px 15px; position: relative; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { color: var(--red); content: "+"; font-size: 18px; position: absolute; right: 15px; top: 9px; }
.faq-list details[open] summary::after { content: "−"; }
.faq-list h2 { font-size: 13px; letter-spacing: -.01em; margin: 0; padding-right: 24px; }
.faq-list details > p { font-size:12px; margin: 0; padding: 0 15px 13px; }
.policy-page .hero::after, .safety-page .hero::after { display: none; }
.policy-page > .shell > .hero, .safety-page > .shell > .hero { max-width: 800px; min-height: 190px; padding-right: 12px; }

/* Contact */
.contact-layout { display: grid; gap: 18px; grid-template-columns: .88fr 1.12fr; }
.contact-intro-panel { align-content: center; min-height: 430px; overflow: hidden; padding: 32px 43% 32px 12px; position: relative; }
.contact-panel { min-height: 430px; padding: 28px; }
.contact-panel form button { width: 100%; }
.contact-page .functional-facts { grid-template-columns: repeat(2, 1fr); }

/* Join room is a full reference-style page when open. */
.modal-backdrop { display: none; }
.modal-backdrop.is-open { display: flex; }
.join-modal-backdrop {
  align-items: flex-start; background: var(--bg); inset: var(--header-height) 0 0; overflow: auto; padding: 55px 20px;
  position: fixed; z-index: 1200;
}
.join-modal {
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: grid;
  gap: 24px; grid-template-columns: .9fr 1.1fr; margin: auto; max-width: 960px; min-height: 410px; overflow: hidden; padding: 44px; position: relative; width: 100%;
}
.join-modal::after { align-self: stretch; background: var(--red-soft) url('logo.svg') center / 60% auto no-repeat; border-radius: 9px; content: ""; grid-column: 2; grid-row: 1 / 3; }
.join-modal .panel-heading, .join-modal .join-form { grid-column: 1; }
.join-modal .panel-heading { align-self: end; }
.join-modal .panel-heading h2 { font-size: 34px; }
.join-modal .join-form { align-self: start; }
.modal-close { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; color: var(--text); display: flex; font-size: 13px; height: 29px; justify-content: center; position: absolute; right: 13px; top: 13px; width: 29px; z-index: 2; }

/* Active room and generated result pages */
.room-header-modern { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; display: grid; gap: 14px; grid-template-columns: 1fr auto; margin-bottom: 9px; padding: 15px 17px; }
.room-heading-copy h1 { font-size: 25px; margin: 3px 0; }
.room-heading-copy p { font-size:12px; margin: 0; }
.room-header-actions { align-items: center; display: flex; gap: 8px; }
.room-code-card { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; display: grid; padding: 8px 11px; }
.room-code-card small, .room-timer-label { color: var(--muted); font-size:12px; }
.room-code-card strong, .live-timer { color: var(--red); font-weight: 800; }
.workspace-grid { display: grid; gap: 9px; grid-template-columns: minmax(315px, .72fr) minmax(0, 1.28fr); }
.storage-panel, .contents-panel { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.storage-forms { display: grid; gap: 8px; }
.upload-box, .text-box { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: 12px; }
.room-page .upload-dropzone label { min-height: 125px; }
.files-grid, .text-grid, .people-list, .content-list { display: grid; gap: 6px; }
.file-card, .text-card, .member-card { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; padding: 10px; }
.file-card { align-items: center; display: grid; gap: 9px; grid-template-columns: minmax(0, 1fr) auto; }
.file-name { color: var(--text); font-size:12px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { color: var(--muted); font-size:12px; }
.room-tabs, .contents-tabs { border-bottom: 1px solid var(--line); display: flex; gap: 3px; margin-bottom: 10px; }
.room-tabs button, .contents-tabs button { background: none; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size:12px; padding: 8px 10px; }
.room-tabs button.is-active, .contents-tabs button.is-active { border-bottom-color: var(--red); color: var(--text); }
.quick-share-result, .quick-request-result { margin: 20px auto; max-width: 1050px; padding: 22px; }
.quick-result-top { align-items: flex-start; display: flex; gap: 20px; justify-content: space-between; }
.quick-result-top h1 { font-size: 32px; margin: 5px 0; }
.quick-expiry { background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; display: grid; min-width: 110px; padding: 9px 11px; }
.quick-expiry small { color: var(--muted); font-size:12px; }
.quick-link-row { display: grid; gap: 7px; grid-template-columns: 1fr auto; margin: 14px 0; }
.quick-result-grid { display: grid; gap: 14px; grid-template-columns: 300px 1fr; }
.quick-qr-card, .quick-owner-tools { background: var(--surface-2); border: 1px solid var(--line); border-radius: 7px; padding: 12px; }
.room-qr-code { background: #fff; border-radius: 5px; padding: 10px; }
.quick-qr-actions { display: grid; gap: 6px; grid-template-columns: 1fr 1fr; margin-top: 8px; }
.quick-result-file-list { display: grid; gap: 5px; margin: 9px 0; }
.quick-result-file-list > span { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; display: flex; font-size:12px; justify-content: space-between; padding: 8px; }
.quick-result-file-list small { color: var(--muted); }

/* Upload progress, persistent toasts and generic overlays */
.tool-upload-overlay {
  align-items: center; background: rgba(7, 9, 12, .72); display: flex; inset: 0; justify-content: center; padding: 18px; position: fixed; z-index: 2100;
}
.tool-upload-spinner-card { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); max-width: 430px; padding: 24px; width: 100%; }
.upload-spinner-state { align-items: center; display: flex; gap: 18px; }
.upload-spinner-ring {
  align-items: center; background: conic-gradient(var(--red) calc(var(--upload-progress) * 1%), var(--surface-3) 0); border-radius: 50%; display: flex;
  aspect-ratio: 1 / 1; box-sizing: border-box; flex: 0 0 112px; height: 112px; justify-content: center; max-height: 112px; max-width: 112px; min-height: 112px; min-width: 112px; position: relative; width: 112px;
}
.upload-spinner-ring::before { background: var(--surface); border-radius: 50%; content: ""; inset: 7px; position: absolute; }
.upload-spinner-center { display: grid; position: relative; text-align: center; z-index: 1; }
.upload-spinner-center strong { font-size: 20px; }
.upload-spinner-center span, .upload-spinner-center small, .upload-spinner-copy span { color: var(--muted); font-size:12px; }
.client-toast-container { bottom: 14px; display: grid; gap: 7px; max-width: min(390px, calc(100vw - 24px)); position: fixed; right: 14px; z-index: 2200; }
.client-toast { align-items: center; background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 7px; box-shadow: var(--shadow); color: var(--text); display: grid; gap: 11px; grid-template-columns: 1fr auto; opacity: 0; padding: 12px; transform: translateY(8px); transition: .2s ease; }
.client-toast.show { opacity: 1; transform: none; }
.client-toast-error { border-left-color: var(--red); }
.client-toast > span { display: grid; }
.client-toast small { color: var(--muted); }
.client-toast button { background: none; border: 0; color: var(--muted); font-size: 20px; }

/* Checkout: keep host shell and embedded Paddle legible in both themes. */
.checkout-flow { display: grid; gap: 18px; grid-template-columns: .78fr 1.22fr; }
.checkout-story, .paddle-checkout-shell { background: var(--surface); border: 1px solid var(--line); border-radius: 9px; padding: 24px; }
.paddle-checkout-shell { color: var(--text); }
.paddle-checkout-shell iframe { background: var(--surface); border-radius: 6px; color-scheme: light dark; min-height: 430px; width: 100%; }
.paddle-checkout-shell button, .checkout-flow button { margin-top: 14px; }
:root[data-theme="dark"] .paddle-checkout-shell iframe { background: #fff; color-scheme: light; }

/* Footer */
.footer { background: var(--surface); border-top: 1px solid var(--line); padding: 28px 28px 16px; }
.footer-inner { display: grid; gap: 34px; grid-template-columns: 1.3fr repeat(3, 1fr); margin: 0 auto; max-width: calc(var(--max) - 56px); }
.footer-brand p { font-size:12px; max-width: 300px; }
.footer-cta { font-size:12px; font-weight: 700; }
.footer-group { align-content: start; display: grid; gap: 5px; }
.footer-group strong { color: var(--text); font-size:12px; margin-bottom: 3px; }
.footer-group a { color: var(--muted); font-size:12px; }
.footer-group a:hover { color: var(--red); }
.footer-bottom { border-top: 1px solid var(--line); color: var(--muted); display: flex; font-size:12px; justify-content: space-between; margin: 20px auto 0; max-width: calc(var(--max) - 56px); padding-top: 12px; }

@media (max-width: 980px) {
  .topbar { grid-template-columns: 180px minmax(0, 1fr) 100px; padding: 0 18px; }
  .topbar > nav > a, .nav-dropdown-toggle { padding: 0 8px; }
  .theme-toggle { right: 18px; }
  .home-showcase { gap: 18px; grid-template-columns: 1fr 390px; }
  .home-showcase .hero-actions { grid-template-columns: 1fr 1fr; }
  .functional-intro, .quick-share-intro { padding-right: 38%; }
  .resource-priority-clusters .feature-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  :root { --header-height: 56px; }
  .topbar { grid-template-columns: 1fr auto; height: auto; min-height: var(--header-height); padding: 0 13px; }
  .topbar::before, .topbar::after { height: var(--header-height); }
  .brand { font-size: 17px; }
  .brand img { height: 33px; width: 37px; }
  .site-menu-toggle { align-content: center; background: none; border: 0; display: grid; gap: 4px; height: 40px; justify-content: center; padding: 8px; width: 40px; }
  .site-menu-toggle span { background: var(--text); border-radius: 2px; display: block; height: 2px; transition: .2s; width: 20px; }
  .site-menu-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .site-menu-toggle.is-open span:nth-child(2) { opacity: 0; }
  .site-menu-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .topbar > nav { background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); display: none; grid-column: 1 / -1; height: auto; margin: 0 0 10px; max-height: calc(100dvh - 75px); overflow: auto; padding: 7px; }
  .topbar > nav.is-open { display: grid; }
  .topbar > nav > a, .nav-dropdown-toggle { border-radius: 5px; height: 40px; justify-content: flex-start; padding: 0 10px; width: 100%; }
  .topbar > nav > a[aria-current="page"]::after, .nav-dropdown-toggle.is-current::after { bottom: 7px; left: 0; right: auto; top: 7px; width: 2px; height: auto; }
  .nav-dropdown-menu { box-shadow: none; left: 0; margin: 0 0 5px 8px; min-width: 0; position: relative; top: 0; transform: none; width: calc(100% - 8px); }
  .theme-toggle { justify-self: start; margin: 5px 10px; position: static; }
  .shell { padding: 7px 12px 34px; }
  .home-showcase { grid-template-columns: 1fr; min-height: 0; padding: 14px 0 24px; }
  .hero-copy { order: 1; }
  .hero-stage { min-height: 285px; order: 2; }
  .home-showcase h1 { font-size: 43px; }
  .home-how, .home-trust { grid-template-columns: 1fr; }
  .usecase-bento { grid-template-columns: 1fr 1fr; }
  .create-experience, .functional-layout, .quick-share-layout, .contact-layout { grid-template-columns: 1fr; }
  .functional-intro, .quick-share-intro, .contact-intro-panel { min-height: 320px; order: 1; padding: 25px 40% 25px 2px; }
  .functional-card, .quick-upload-card, .contact-panel { min-height: 0; order: 2; padding: 20px; }
  .functional-intro::after, .quick-share-intro::after, .contact-intro-panel::after { height: 190px; width: 37%; }
  .content-page > .shell > .hero { min-height: 280px; padding: 22px 40% 22px 2px; }
  .content-page > .shell > .hero::after { height: 185px; right: 0; width: 37%; }
  .feature-grid, .resource-priority-clusters .feature-grid, .blog-index .feature-grid { grid-template-columns: 1fr 1fr; }
  .workspace-grid { grid-template-columns: 1fr; }
  .checkout-flow { grid-template-columns: 1fr; }
  .join-modal-backdrop { inset: var(--header-height) 0 0; padding: 18px 12px; }
  .join-modal { grid-template-columns: 1fr; min-height: 0; padding: 24px; }
  .join-modal::after { grid-column: 1; grid-row: auto; min-height: 220px; order: 3; }
  .footer-inner { gap: 23px; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  body { font-size: 13px; }
  .client-breadcrumb { height: 25px; }
  .home-showcase h1 { font-size: 36px; }
  .home-showcase .hero-actions { grid-template-columns: 1fr; }
  .hero-stage { min-height: 225px; }
  .hero-file-one { left: 0; }
  .hero-file-two { right: 0; }
  .home-benefits, .sharing-choice-grid, .guide-grid, .testimonial-grid, .usecase-bento { grid-template-columns: 1fr; }
  .home-benefits span { border-bottom: 1px solid var(--line); border-right: 0; }
  .home-section-heading { align-items: start; display: grid; gap: 9px; }
  .functional-intro, .quick-share-intro, .contact-intro-panel { min-height: 0; padding: 18px 2px 210px; }
  .functional-intro::after, .quick-share-intro::after, .contact-intro-panel::after { bottom: 5px; height: 185px; left: 50%; right: auto; top: auto; transform: translateX(-50%) rotate(-5deg); width: 75%; }
  .functional-intro h1, .quick-share-intro h1 { font-size: 38px; }
  .create-fields { grid-template-columns: 1fr; }
  .form-row.two { grid-template-columns: 1fr; }
  .create-code-field { grid-column: auto; }
  .functional-facts, .quick-facts, .quick-explainer { grid-template-columns: 1fr; }
  .content-page > .shell > .hero { min-height: 0; padding: 18px 2px 210px; }
  .content-page > .shell > .hero::after { bottom: 5px; height: 185px; left: 50%; right: auto; top: auto; transform: translateX(-50%) rotate(-5deg); width: 75%; }
  .content-page > .shell > .hero h1 { font-size: 37px; }
  .policy-page > .shell > .hero, .safety-page > .shell > .hero { padding-bottom: 18px; }
  .feature-grid, .resource-priority-clusters .feature-grid, .blog-index .feature-grid { grid-template-columns: 1fr; }
  .seo-section { padding: 14px; }
  .reference-search { grid-template-columns: auto minmax(0, 1fr); }
  .reference-search > button { grid-column: 1 / -1; }
  .room-header-modern { align-items: stretch; grid-template-columns: 1fr; }
  .room-header-actions { align-items: stretch; display: grid; }
  .quick-result-top { display: grid; }
  .quick-expiry { width: 100%; }
  .quick-link-row, .quick-result-grid { grid-template-columns: 1fr; }
  .join-modal::after { min-height: 180px; }
  .upload-spinner-state { align-items: center; flex-direction: column; text-align: center; }
  .alert { left: 10px; max-width: none; right: 10px; }
  .client-toast-container { bottom: 10px; left: 10px; max-width: none; right: 10px; }
  .footer { padding-left: 14px; padding-right: 14px; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
  .footer-bottom { display: grid; gap: 4px; }
}

/* Reference-faithful Quick Share / Quick Request result screens */
.quick-ready-page { display: grid; gap: 14px; margin: 22px auto 46px; max-width: 1240px; padding: 0; width: 100%; }
.quick-ready-page.panel { background: transparent; border: 0; box-shadow: none; }
.quick-ready-status { align-items: center; display: grid; gap: 16px; grid-template-columns: auto 1fr auto; padding: 22px 26px; }
.quick-ready-check { align-items: center; background: color-mix(in srgb,#11b981 16%,var(--surface)); border: 1px solid color-mix(in srgb,#11b981 35%,var(--line)); border-radius: 15px; color: #0ab981; display: flex; font-size: 24px; font-weight: 900; height: 54px; justify-content: center; width: 54px; }
.quick-ready-status h1 { font-size: clamp(28px,3vw,42px); margin: 3px 0 2px; }
.quick-ready-status p { margin: 0; }
.quick-ready-link { align-items: center; display: grid; gap: 12px; grid-template-columns: 74px minmax(0,1fr) auto auto; padding: 14px 18px; }
.quick-ready-link img { height: 52px; object-fit: contain; width: 70px; }
.quick-ready-link input { height: 48px; min-width: 0; }
.quick-ready-link button { min-height: 48px; min-width: 128px; }
.quick-ready-body { display: grid; gap: 14px; grid-template-columns: minmax(250px,.42fr) minmax(0,1.58fr); }
.quick-ready-qr { display: grid; gap: 14px; padding: 22px; place-items: center; text-align: center; }
.quick-ready-qr h2 { font-size: 17px; margin: 0; justify-self: start; }
.quick-ready-qr .room-qr-code { background: #fff; border-radius: 10px; padding: 10px; width: min(100%,250px); }
.quick-ready-qr .room-qr-code canvas,.quick-ready-qr .room-qr-code img { height: auto!important; max-width: 100%; width: 100%!important; }
.quick-ready-qr .quick-qr-actions { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; width: 100%; }
.quick-ready-content { display: grid; gap: 14px; }
.quick-files-card,.quick-send-room,.quick-request-actions { padding: 22px; }
.quick-card-heading { align-items: center; display: flex; gap: 16px; justify-content: space-between; margin-bottom: 16px; }
.quick-card-heading span { color: var(--muted); font-size: 13px; font-weight: 800; text-transform: uppercase; }
.quick-card-heading h2 { font-size: 25px; margin: 2px 0 0; }
.quick-result-file-list { display: grid; gap: 8px; }
.quick-result-file-list > span { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; display: grid; gap: 12px; grid-template-columns: 42px minmax(0,1fr) auto; padding: 10px 12px; }
.quick-result-file-list i { align-items: center; background: var(--red-soft); border-radius: 7px; color: var(--red); display: flex; font-size:12px; font-style: normal; font-weight: 900; height: 34px; justify-content: center; }
.quick-result-file-list b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.quick-send-room label { display: grid; gap: 5px; }
.quick-send-room label > span:not(.quick-send-controls) { color: var(--muted); font-size: 13px; }
.quick-send-controls { display: grid; gap: 10px; grid-template-columns: 1fr auto; margin-top: 10px; }
.quick-danger-zone { align-items: center; background: color-mix(in srgb,var(--red-soft) 74%,var(--surface)); border: 1px solid color-mix(in srgb,var(--red) 45%,var(--line)); border-radius: 11px; display: flex; justify-content: space-between; padding: 15px 18px; }
.quick-danger-zone span { display: grid; gap: 2px; }
.quick-danger-zone strong { color: var(--red); }
.quick-danger-zone small { color: var(--muted); }
.quick-ready-note { background: var(--surface-2); border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: 13px; margin: 0; padding: 12px 15px; }
.request-ready-steps { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); margin-top: 20px; }
.request-ready-steps > span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; display: grid; gap: 5px; padding: 14px; }
.request-ready-steps i { align-items: center; background: var(--red); border-radius: 50%; color: #fff; display: flex; font-size:12px; font-style: normal; height: 23px; justify-content: center; width: 23px; }
.request-ready-steps small { color: var(--muted); }
.quick-request-actions { align-items: center; display: flex; gap: 10px; }

/* Payment layout based on the supplied desktop and mobile references */
.payment-page .payment-reference-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(270px,.72fr) minmax(500px,1.35fr) minmax(230px,.58fr); margin: 28px auto 55px; max-width: 1380px; width: 100%; }
.payment-summary-card { padding: 28px; }
.payment-summary-card h1 { font-family: var(--display); font-size: clamp(31px,3vw,44px); line-height: 1.02; margin: 9px 0 15px; }
.payment-summary-card > p,.payment-summary-card > small { color: var(--muted); }
.payment-summary-visual { background: linear-gradient(145deg,var(--surface-2),color-mix(in srgb,var(--red-soft) 42%,var(--surface))); border: 1px solid var(--line); border-radius: 13px; margin: 24px 0 18px; overflow: hidden; padding: 20px; }
.payment-summary-visual > div { align-items: center; display: grid; grid-template-columns: 1fr 118px; min-height: 120px; }
.payment-summary-visual > div strong { font-family: var(--display); font-size: 24px; line-height: 1.05; }
.payment-summary-visual img { height: 112px; object-fit: contain; width: 118px; }
.payment-summary-visual dl { border-top: 1px solid var(--line); margin: 8px 0 0; }
.payment-summary-visual dl > div { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; padding: 12px 0; }
.payment-summary-visual dt { color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; }
.payment-summary-visual dd { color: var(--red); font-size: 17px; font-weight: 900; margin: 0; }
.payment-page .checkout-flow { min-width: 0; }
.payment-page .payment-panel { min-height: 580px; padding: 0 20px 24px; }
.payment-panel-heading { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin: 0 -20px 18px; padding: 17px 20px; }
.payment-panel-heading span { color: var(--muted); font-size: 12px; }
.payment-page .paddle-checkout { margin-top: 12px; min-height: 500px; width: 100%; }
.payment-page .paddle-checkout iframe { border-radius: 8px; display: block; width: 100%!important; }
.payment-assurance { display: grid; gap: 18px; padding-top: 42px; }
.payment-assurance-card { display: grid; gap: 12px; grid-template-columns: 34px 1fr; }
.payment-assurance-card i { align-items: center; border: 2px solid #0db89b; border-radius: 50%; color: #0db89b; display: flex; font-style: normal; font-weight: 900; height: 30px; justify-content: center; width: 30px; }
.payment-assurance-card strong { display: block; margin: 4px 0 5px; }
.payment-assurance-card p,.payment-assurance-card ol { color: var(--muted); font-size: 13px; line-height: 1.65; margin: 0; padding-left: 18px; }
.payment-assurance-card p { padding-left: 0; }
.payment-status-button { text-align: center; width: 100%; }
.payment-back-link { color: var(--red); font-weight: 850; margin-top: 22px; }

/* Room feedback toast and dialog */
.feedback-open { overflow: hidden; }
.feedback-toast-wrap { bottom: 22px; position: fixed; right: 22px; z-index: 1250; }
.feedback-request-toast { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; box-shadow: 0 18px 55px rgba(0,0,0,.28); color: var(--text); display: flex; gap: 12px; max-width: 350px; opacity: 0; padding: 13px 16px; pointer-events: none; text-align: left; transform: translateY(18px); transition: .25s ease; }
.feedback-request-toast.show { opacity: 1; pointer-events: auto; transform: none; }
.feedback-request-icon { align-items: center; background: var(--red-soft); border-radius: 10px; display: flex; font-size: 22px; height: 42px; justify-content: center; width: 42px; }
.feedback-request-toast .toast-body { display: grid; gap: 2px; }
.feedback-request-toast .toast-body span { color: var(--muted); font-size: 12px; }
.feedback-modal-backdrop { align-items: center; background: rgba(6,9,13,.74); inset: 0; justify-content: center; padding: 20px; position: fixed; z-index: 1400; }
.feedback-modal-backdrop.is-open { display: flex; }
.feedback-modal { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 30px 90px rgba(0,0,0,.42); max-height: calc(100vh - 40px); max-width: 620px; overflow: auto; padding: 30px; position: relative; width: 100%; }
.feedback-modal::before { background: linear-gradient(90deg,var(--red),#ff7583); content: ''; height: 4px; inset: 0 0 auto; position: absolute; }
.feedback-modal .modal-close { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 50%; color: var(--text); display: flex; font-size: 23px; height: 38px; justify-content: center; padding: 0; position: absolute; right: 18px; top: 18px; width: 38px; }
.feedback-modal h2 { font-family: var(--display); font-size: 32px; margin: 7px 46px 8px 0; }
.feedback-intro { color: var(--muted); margin: 0 0 20px; }
.feedback-person-fields { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.feedback-rating-field { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 11px; display: grid; gap: 5px; grid-template-columns: 1fr auto; padding: 13px 15px; }
.feedback-rating-label { font-size: 13px; font-weight: 850; }
.star-rating { display: flex; gap: 3px; grid-column: 1; }
.rating-star { background: transparent!important; border: 0!important; color: color-mix(in srgb,var(--muted) 35%,transparent); font-size: 31px; line-height: 1; min-height: 36px; min-width: 34px; padding: 0!important; }
.rating-star.is-filled { color: #ffb21d; }
.rating-star:hover { transform: translateY(-2px) scale(1.08); }
.rating-value { color: var(--red); font-size: 13px; font-weight: 850; grid-column: 2; grid-row: 1 / span 2; }
.feedback-modal textarea { min-height: 125px; resize: vertical; }
.feedback-form-status { display: none; margin: 0; }
.feedback-form-status.is-error { background: var(--red-soft); border: 1px solid color-mix(in srgb,var(--red) 35%,var(--line)); border-radius: 8px; color: var(--red); display: block; padding: 10px 12px; }

@media (max-width: 1120px) {
  .payment-page .payment-reference-layout { grid-template-columns: minmax(250px,.7fr) minmax(480px,1.3fr); }
  .payment-assurance { grid-column: 1 / -1; grid-template-columns: auto 1fr 1fr auto; padding: 0; }
}
@media (max-width: 820px) {
  .quick-ready-body,.payment-page .payment-reference-layout { grid-template-columns: 1fr; }
  .quick-ready-status { grid-template-columns: auto 1fr; }
  .quick-ready-status .quick-expiry { grid-column: 1 / -1; width: 100%; }
  .quick-ready-link { grid-template-columns: 56px 1fr; }
  .quick-ready-link button { min-width: 0; width: 100%; }
  .request-ready-steps { grid-template-columns: 1fr; }
  .payment-assurance { grid-column: auto; grid-template-columns: 1fr; }
  .payment-page .payment-panel { min-height: 540px; }
}
@media (max-width: 560px) {
  .quick-ready-page.quick-share-result,.quick-ready-page.quick-request-result { padding: 0; }
  .quick-ready-status { padding: 17px; }
  .quick-ready-check { height: 44px; width: 44px; }
  .quick-ready-link { grid-template-columns: 1fr 1fr; padding: 12px; }
  .quick-ready-link img { display: none; }
  .quick-ready-link input { grid-column: 1 / -1; }
  .quick-ready-body { display: flex; flex-direction: column; }
  .quick-ready-content { order: -1; }
  .quick-ready-qr,.quick-files-card,.quick-send-room,.quick-request-actions { padding: 16px; }
  .quick-card-heading { align-items: stretch; flex-direction: column; }
  .quick-send-controls { grid-template-columns: 1fr; }
  .quick-danger-zone { align-items: stretch; flex-direction: column; gap: 12px; }
  .quick-danger-zone button { width: 100%; }
  .payment-summary-card { padding: 20px; }
  .payment-page .payment-panel { min-height: 500px; padding-inline: 10px; }
  .payment-panel-heading { margin-inline: -10px; padding-inline: 13px; }
  .feedback-toast-wrap { bottom: 12px; left: 12px; right: 12px; }
  .feedback-request-toast { max-width: none; width: 100%; }
  .feedback-modal { padding: 24px 17px 18px; }
  .feedback-person-fields { grid-template-columns: 1fr; }
}

/* Homepage board: measurements and composition follow 01-home.jpg. */
.home-page .topbar { grid-template-columns: 205px 1fr 205px; max-width: 1536px; padding-inline: 56px; }
.home-page .topbar .brand { color: var(--red); font-size: 21px; font-weight: 800; letter-spacing: -.04em; }
.home-page .topbar .brand img { display: none; }
.home-page .topbar > nav { gap: 11px; }
.home-page .topbar > nav > a, .home-page .nav-dropdown-toggle { font-size:12px; font-weight: 600; padding-inline: 10px; }
.home-page .shell { max-width: 1536px; padding: 8px 56px 0; }
.home-page .client-breadcrumb { margin-bottom: 2px; }
.home-reference-hero {
  display: grid;
  gap: 10px 26px;
  grid-template-areas:
    "copy drop art"
    "tools drop art"
    "benefits join art";
  grid-template-columns: minmax(460px, 1.25fr) minmax(315px, .68fr) minmax(300px, .72fr);
  grid-template-rows: auto auto auto;
  min-height: 350px;
  padding: 8px 0 24px;
}
.home-hero-copy { align-self: end; grid-area: copy; }
.home-hero-copy h1 { font-size: clamp(40px, 3.3vw, 52px); letter-spacing: -.055em; line-height: .94; margin: 0 0 13px; }
.home-hero-copy p { font-size:12px; line-height: 1.55;; margin: 0; }
.home-drop-panel {
  align-items: center; align-self: end; background: var(--surface); border: 1px dashed var(--red); border-radius: 7px;
  color: var(--text); display: flex; flex-direction: column; grid-area: drop; justify-content: center; min-height: 190px;
  padding: 18px; text-align: center;
}
.home-drop-panel:hover { background: var(--red-soft); }
.home-upload-icon { color: var(--red); height: 40px; margin-bottom: 4px; width: 40px; }
.home-upload-icon svg { fill: none; height: 100%; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; width: 100%; }
.home-drop-panel strong { font-size: 12px; }
.home-drop-panel > span:not(.home-upload-icon) { color: var(--muted); font-size:12px; }
.home-drop-panel b { color: var(--red); }
.home-drop-panel small { color: var(--muted); font-size:12px; margin-top: 11px;; }
.home-drop-panel small::before { content: "• "; color: var(--green); }
.home-folder-wrap { align-self: center;; grid-area: art; min-height: 270px; position: relative; }
.home-folder-wrap img { filter: drop-shadow(0 16px 24px rgba(66, 0, 9, .18)); height: 300px; left: 50%; max-width: none; object-fit: contain; position: absolute; top: 50%; transform: translate(-50%, -50%); width: 340px; }
.home-tool-row { display: grid; gap: 7px; grid-area: tools; grid-template-columns: repeat(3, 1fr); }
.home-tool-row > a {
  align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; color: var(--text);
  display: grid; gap: 8px; grid-template-columns: 34px minmax(0, 1fr) auto; min-height: 64px; padding: 8px;
}
.home-tool-row > a:hover { border-color: var(--red); }
.home-card-icon, .band-icon { align-items: center; background: var(--red); border-radius: 5px; color: #fff; display: flex; font-size: 18px; height: 34px; justify-content: center; width: 34px; }
.home-tool-row > a > span:nth-child(2) { display: grid; line-height: 1.25; }
.home-tool-row strong { font-size:12px; }
.home-tool-row small { color: var(--muted); font-size:12px; }
.home-tool-row > a > b { color: var(--muted); font-size: 15px; }
.home-benefit-row { border: 1px solid var(--line); border-radius: 6px; display: grid; grid-area: benefits; grid-template-columns: repeat(3, 1fr); overflow: hidden; }
.home-benefit-row > span { align-items: center; background: var(--surface); border-right: 1px solid var(--line); display: grid; gap: 1px 8px; grid-template-columns: 28px 1fr; padding: 8px 10px; }
.home-benefit-row > span:last-child { border-right: 0; }
.home-benefit-row b { color: var(--text); font-size: 17px; grid-row: 1 / 3; }
.home-benefit-row strong { font-size:12px; }
.home-benefit-row small { color: var(--muted); font-size:12px; }
.home-join-card { align-self: start; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; display: grid; gap: 6px; grid-area: join; grid-template-columns: 1fr auto; padding: 9px; }
.home-join-card > div { display: grid; grid-column: 1 / -1; }
.home-join-card > div strong { font-size:12px; }
.home-join-card > div small { color: var(--muted); font-size:12px; }
.home-join-card label { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 4px; display: grid; grid-template-columns: 24px 1fr; min-width: 0; }
.home-join-card label > span { border-right: 1px solid var(--line); color: var(--muted); font-size:12px; padding: 6px; text-align: center; }
.home-join-card input { background: transparent; border: 0; box-shadow: none; font-size:12px; min-height: 30px; padding: 5px 7px; }
.home-join-card button { font-size:12px; min-height: 30px; padding: 5px 13px; }

.home-reference-band { border-top: 1px solid var(--line); display: grid; }
.home-information-band { grid-template-columns: 1.05fr 1.05fr 1fr 1fr; padding: 17px 0 16px; }
.home-information-band > article { border-right: 1px solid var(--line); padding: 0 24px; }
.home-information-band > article:first-child { padding-left: 0; }
.home-information-band > article:last-child { border-right: 0; padding-right: 0; }
.home-reference-band h2 { font-size: 12px; letter-spacing: -.02em; margin-bottom: 9px; }
.home-methods > a { align-items: center; color: var(--text); display: grid; gap: 8px; grid-template-columns: 27px 1fr auto; margin: 7px 0; }
.home-methods .band-icon { background: var(--red-soft); color: var(--red); font-size: 14px; height: 27px; width: 27px; }
.home-methods a > span:nth-child(2) { display: grid; }
.home-methods strong, .home-steps strong { font-size:12px; }
.home-methods small, .home-steps small { color: var(--muted); font-size:12px; line-height: 1.3; }
.home-methods a > b { color: var(--muted); }
.home-steps > div { align-items: center; display: grid; gap: 7px; grid-template-columns: 22px 22px 1fr; margin: 7px 0; }
.home-steps > div > span { align-items: center; background: var(--surface-3); border-radius: 50%; display: flex; font-size:12px; height: 22px; justify-content: center; width: 22px; }
.home-steps .step-icon { color: var(--red); font-size: 14px; }
.home-steps p { display: grid; margin: 0; }
.home-real-use ul, .home-security ul { display: grid; gap: 7px; list-style: none; margin: 0; padding: 0; }
.home-real-use li { color: var(--text); font-size:12px; }
.home-real-use li span { color: var(--red); display: inline-block; font-size: 12px; margin-right: 7px; width: 16px; }
.home-security p { font-size:12px; line-height: 1.5; margin-bottom: 7px; }
.home-security li { color: var(--muted); font-size:12px; }
.home-security li::before { color: #0dbb90; content: "✓"; margin-right: 6px; }

.home-bottom-band { gap: 18px; grid-template-columns: 1.5fr 1fr .9fr; padding: 16px 0 19px; }
.home-bottom-band > article:not(:last-child) { border-right: 1px solid var(--line); padding-right: 18px; }
.home-bottom-band header { align-items: center; display: flex; justify-content: space-between; }
.home-bottom-band header a { color: var(--red); font-size:12px; font-weight: 700; }
.home-guides-preview > div { display: grid; gap: 7px; grid-template-columns: repeat(3, 1fr); }
.home-guides-preview > div > a { background: var(--surface); border: 1px solid var(--line); border-radius: 5px; color: var(--text); display: grid; grid-template-columns: 20px 1fr; padding: 8px; }
.home-guides-preview a > span { color: var(--red); font-size: 15px; grid-row: 1 / 3; }
.home-guides-preview strong { font-size:12px; }
.home-guides-preview small { color: var(--muted); font-size:12px; }
.home-faq-list { border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.home-faq-list section { border-bottom: 1px solid var(--line); }
.home-faq-list section:last-child { border-bottom: 0; }
.home-faq-list button { align-items: center; background: var(--surface); border: 0; border-radius: 0; color: var(--text); display: flex; font-size:12px; font-weight: 500; justify-content: space-between; min-height: 0; padding: 5px 7px; text-align: left; width: 100%; }
.home-faq-list button:hover { background: var(--surface-2); }
.home-faq-list button b { color: var(--muted); transition: transform .2s ease; }
.home-faq-list button[aria-expanded="true"] b { color: var(--red); transform: rotate(180deg); }
.home-faq-list p { animation: home-answer-in .2s ease both; background: var(--surface-2); color: var(--muted); font-size:12px; line-height: 1.45; margin: 0; padding: 3px 18px 7px 7px; }
.home-ready-card { background: linear-gradient(135deg, var(--red-soft), color-mix(in srgb, var(--red) 17%, var(--surface))); border: 1px solid color-mix(in srgb, var(--red) 24%, var(--line)); border-radius: 6px; padding: 13px 18px; }
.home-ready-card h2 { font-size: 13px; }
.home-ready-card p { font-size:12px; }
.home-ready-card .button { font-size:12px; min-height: 29px; }

.footer { padding-top: 22px; }
.footer-inner { gap: 24px; grid-template-columns: 1.35fr repeat(4, .72fr) 1.15fr; max-width: 1424px; }
.footer-brand .brand { color: var(--red); }
.footer-brand .brand small { font-size: .55em; }
.footer-socials { display: flex; gap: 7px; margin-top: 10px; }
.footer-socials span { align-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--text); display: flex; font-size:12px; height: 25px; justify-content: center; width: 25px; }
.footer-newsletter { align-content: start; display: grid; }
.footer-newsletter > strong { font-size:12px; }
.footer-newsletter > p { font-size:12px; margin: 5px 0 8px; }
.footer-newsletter > div { display: grid; grid-template-columns: 1fr auto; }
.footer-newsletter input { border-radius: 4px 0 0 4px; font-size:12px; min-height: 29px; padding: 5px 7px; }
.footer-newsletter button { border-radius: 0 4px 4px 0; font-size:12px; min-height: 29px; padding: 5px 9px; }
.footer-bottom select { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; color: var(--muted); font-size:12px; padding: 4px 26px 4px 8px; }

@media (max-width: 1050px) and (min-width: 861px) {
  .home-page .topbar, .home-page .shell { padding-inline: 28px; }
  .home-reference-hero { grid-template-columns: minmax(380px, 1.2fr) minmax(280px, .75fr) minmax(240px, .65fr); }
  .home-folder-wrap img { width: 290px; }
  .home-information-band > article { padding-inline: 14px; }
}

@media (max-width: 860px) {
  .home-page .topbar { grid-template-columns: 1fr auto; padding-inline: 12px; }
  .home-page .topbar .brand { font-size: 18px; }
  .home-page .shell { max-width: 390px; padding: 6px 12px 0; }
  .home-reference-hero {
    gap: 9px; grid-template-areas: "copy" "drop" "tools" "benefits" "join"; grid-template-columns: 1fr;
    grid-template-rows: auto; min-height: 0; padding: 6px 0 13px;
  }
  .home-hero-copy h1 { font-size: 34px; line-height: .94; margin-bottom: 11px; }
  .home-hero-copy p { font-size:12px; }
  .home-drop-panel { min-height: 164px; }
  .home-folder-wrap { display: none; }
  .home-tool-row { gap: 5px; grid-template-columns: 1fr; }
  .home-tool-row > a { min-height: 47px; }
  .home-benefit-row { gap: 5px; grid-template-columns: 1fr; }
  .home-benefit-row > span { border: 1px solid var(--line); border-radius: 5px; min-height: 43px; }
  .home-join-card { margin-top: 12px; }
  .home-information-band { grid-template-columns: 1fr; padding-block: 12px; }
  .home-information-band > article, .home-information-band > article:first-child, .home-information-band > article:last-child { border-bottom: 1px solid var(--line); border-right: 0; padding: 12px 2px; }
  .home-information-band > article:last-child { border-bottom: 0; }
  .home-reference-band h2 { font-size:12px; }
  .home-methods strong, .home-steps strong { font-size:12px; }
  .home-methods small, .home-steps small, .home-real-use li, .home-security p, .home-security li { font-size:12px; }
  .home-bottom-band { grid-template-columns: 1fr; }
  .home-bottom-band > article:not(:last-child) { border-bottom: 1px solid var(--line); border-right: 0; padding: 0 0 13px; }
  .home-guides-preview > div { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand, .footer-newsletter { grid-column: 1 / -1; }
}

/* Calm interaction and motion for the reference homepage. */
.home-reveal { opacity: 0; transform: translateY(10px); transition: opacity .46s ease var(--reveal-delay, 0ms), transform .46s cubic-bezier(.2,.72,.25,1) var(--reveal-delay, 0ms); }
.home-reveal.is-visible { opacity: 1; transform: translateY(0); }
.home-tool-row > a, .home-methods > a, .home-guides-preview > div > a, .home-ready-card, .home-drop-panel { transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.home-tool-row > a:hover, .home-guides-preview > div > a:hover { box-shadow: 0 7px 18px rgba(18,19,22,.09); transform: translateY(-3px); }
:root[data-theme="dark"] .home-tool-row > a:hover, :root[data-theme="dark"] .home-guides-preview > div > a:hover { box-shadow: 0 9px 22px rgba(0,0,0,.32); }
.home-tool-row > a > b, .home-methods > a > b { transition: color .18s ease, transform .18s ease; }
.home-tool-row > a:hover > b, .home-methods > a:hover > b { color: var(--red); transform: translateX(3px); }
.home-card-icon, .band-icon { transition: transform .22s cubic-bezier(.2,.8,.25,1.25); }
.home-tool-row > a:hover .home-card-icon, .home-methods > a:hover .band-icon { transform: scale(1.08) rotate(-4deg); }
.home-drop-panel { overflow: hidden; position: relative; }
.home-drop-panel::after { background: linear-gradient(105deg, transparent 25%, color-mix(in srgb, var(--red) 10%, transparent) 50%, transparent 75%); content: ""; inset: 0; pointer-events: none; position: absolute; transform: translateX(-110%); }
.home-drop-panel:hover { box-shadow: 0 9px 24px color-mix(in srgb, var(--red) 12%, transparent); transform: translateY(-2px); }
.home-drop-panel:hover::after { animation: home-shine .8s ease; }
.home-upload-icon { animation: home-upload-float 2.8s ease-in-out infinite; }
.home-folder-wrap img { transform: translate(calc(-50% + var(--folder-x, 0px)), calc(-50% + var(--folder-y, 0px))); transition: transform .18s ease-out; }
.home-folder-wrap::after { background: radial-gradient(ellipse, rgba(118,0,18,.2), transparent 68%); bottom: 14px; content: ""; filter: blur(4px); height: 24px; left: 14%; position: absolute; right: 14%; transform: translateX(var(--folder-x, 0px)); transition: transform .18s ease-out; }
.home-benefit-row > span { transition: background-color .18s ease; }
.home-benefit-row > span:hover { background: var(--red-soft); }
.home-benefit-row > span:hover b { animation: home-icon-pop .34s ease; color: var(--red); }
.home-ready-card:hover { border-color: color-mix(in srgb, var(--red) 55%, var(--line)); transform: translateY(-2px); }
.home-ready-card .button { overflow: hidden; position: relative; }
.home-ready-card .button::after { background: rgba(255,255,255,.28); content: ""; height: 160%; left: -35%; position: absolute; top: -30%; transform: rotate(18deg); transition: left .45s ease; width: 18px; }
.home-ready-card .button:hover::after { left: 115%; }
.home-faq-list section:has(button[aria-expanded="true"]) { background: var(--surface-2); }
@keyframes home-upload-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes home-shine { to { transform: translateX(110%); } }
@keyframes home-icon-pop { 50% { transform: scale(1.16) rotate(-5deg); } }
@keyframes home-answer-in { from { opacity: 0; transform: translateY(-3px); } }

@media (prefers-reduced-motion: reduce) {
  .home-reveal, .home-reveal.is-visible, .home-folder-wrap img, .home-folder-wrap::after, .home-upload-icon,
  .home-tool-row > a, .home-methods > a, .home-ready-card, .home-drop-panel, .home-card-icon, .band-icon {
    animation: none !important; transform: none !important; transition: none !important;
  }
}

/* Share menu: visual tool picker on desktop, compact navigation on mobile. */
@media (min-width: 861px) {
  .nav-dropdown-menu {
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    left: 50%;
    min-width: 690px;
    padding: 12px;
    transform: translateX(-40%);
  }
  .nav-dropdown-menu a {
    align-content: start;
    min-height: 142px;
    padding: 15px 13px;
    text-align: left;
    grid-template-columns: 1fr;
    grid-template-rows: 50px auto;
  }
  .nav-menu-icon { border-radius: 10px; height: 48px; width: 48px; }
  .nav-menu-icon svg { height: 25px; width: 25px; }
  .nav-menu-copy { display: grid; gap: 5px; }
  .nav-menu-copy strong { font-size: 13px; }
  .nav-menu-copy small { color: var(--muted); font-size:12px; line-height: 1.45; }
  .nav-menu-arrow { display: none; }
}

.request-name-preview {
  background: color-mix(in srgb, var(--red-soft) 62%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line));
  border-radius: 8px;
  display: grid;
  gap: 3px;
  padding: 10px 13px;
}
.request-name-preview small { color: var(--muted); font-size:12px; }
.request-name-preview strong { font-size: 13px; overflow-wrap: anywhere; }

.reference-search-clear { min-height: 34px; min-width: 62px; padding: 7px 12px; }
.reference-results-status { color: var(--muted); font-size:12px; margin: 1px 3px 0; }
.reference-empty { margin: 16px 0; padding: 28px; text-align: center; }
.reference-empty strong { display: block; font-size: 18px; margin-bottom: 5px; }
.reference-empty p { color: var(--muted); margin: 0 0 14px; }

/* Contact reference board */
.contact-reference-hero { align-items: center; display: grid; gap: 34px; grid-template-columns: minmax(0, 1fr) minmax(260px, .75fr); min-height: 250px; padding: 24px 20px 30px; }
.contact-reference-hero h1 { font-size: clamp(36px, 5vw, 66px); letter-spacing: -.055em; line-height: .96; margin: 9px 0 14px; }
.contact-reference-hero p { color: var(--muted); font-size: 15px; max-width: 570px; }
.contact-reference-hero img { filter: drop-shadow(0 24px 28px rgba(142, 10, 31, .18)); justify-self: center; max-height: 260px; object-fit: contain; width: 100%; }
.contact-page .contact-layout { align-items: stretch; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); }
.contact-page .contact-intro-panel { background: linear-gradient(145deg, color-mix(in srgb, var(--red-soft) 74%, var(--surface)), var(--surface)); min-height: 460px; overflow: hidden; padding: 34px 32px 220px; position: relative; }
.contact-page .contact-intro-panel::after { background: url('ui-contact.png') center / contain no-repeat; bottom: 18px; content: ''; height: 210px; left: 10%; position: absolute; width: 80%; }
.contact-page .contact-intro-panel h1 { font-size: clamp(30px, 4vw, 48px); letter-spacing: -.045em; line-height: 1; }
.contact-page .contact-panel { padding: clamp(22px, 3vw, 34px); }
.contact-resource-grid { display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); margin-top: 16px; }
.contact-resource-grid > a { color: var(--text); display: grid; gap: 7px; padding: 20px; transition: transform .2s ease, border-color .2s ease; }
.contact-resource-grid > a:hover { border-color: color-mix(in srgb, var(--red) 35%, var(--line)); transform: translateY(-3px); }
.contact-resource-grid strong { font-size: 16px; }
.contact-resource-grid small { color: var(--muted); line-height: 1.55; }
@media (max-width: 860px) {
  .contact-reference-hero, .contact-page .contact-layout { grid-template-columns: 1fr; }
  .contact-reference-hero { padding-inline: 0; }
  .contact-reference-hero img { grid-row: 2; max-height: 190px; }
  .contact-page .contact-intro-panel { min-height: 390px; }
  .contact-resource-grid { grid-template-columns: 1fr; }
}

/* ================================================================
   Reference boards 02–12: spacious, scrollable client page system
   ================================================================ */
.content-page .topbar, .functional-page .topbar { max-width: 1560px; padding-inline: 48px; }
.content-page .shell, .functional-page .shell { max-width: 1480px; padding: 12px 48px 72px; }
.content-page .topbar.is-scrolled, .functional-page .topbar.is-scrolled { background: color-mix(in srgb,var(--surface) 97%,transparent); box-shadow: 0 8px 25px rgba(18,19,22,.08); }
.client-page-progress { background: linear-gradient(90deg,var(--red-dark),var(--red),#ff6879); height: 2px; left: 0; position: fixed; top: 0; transition: width .08s linear; z-index: 2400; }
.client-reveal { opacity: 0; transform: translateY(14px); transition: opacity .48s ease var(--client-delay,0ms), transform .48s cubic-bezier(.2,.72,.25,1) var(--client-delay,0ms); }
.client-reveal.is-visible { opacity: 1; transform: none; }

/* Shared content-page hero */
.content-page > .shell > .hero { align-content: center; min-height: 390px; padding: 54px 44% 54px 8px; }
.content-page > .shell > .hero h1 { font-size: clamp(46px,4.2vw,66px); letter-spacing: -.055em; line-height: .98; margin-bottom: 18px; text-wrap: balance; }
.content-page > .shell > .hero p { font-size: 15px; line-height: 1.7; max-width: 760px; text-wrap: pretty; }
.content-page > .shell > .hero::after { background-color: transparent; background-image: url('ui-help-folder.png'); background-size: contain; border-radius: 0; filter: drop-shadow(0 20px 28px rgba(115,0,17,.16)); height: 330px; right: 5%; transform: translateY(-50%); transition: transform .35s ease; width: 34%; }
.content-page > .shell > .hero:hover::after { transform: translateY(-52%) rotate(-2deg) scale(1.02); }
.about-page > .shell > .hero::after { background-image: url('home-folder.png'); }
.guide-page > .shell > .hero::after, .safety-page > .shell > .hero::after { background-image: url('ui-room-key.png'); display: block; }
.policy-page > .shell > .hero::after { background-image: url('ui-room-key.png'); display: block; opacity: .82; }
.policy-page > .shell > .hero, .safety-page > .shell > .hero { max-width: none; min-height: 330px; padding: 44px 40% 44px 8px; }

.content-page .seo-section { border-radius: 10px; box-shadow: var(--shadow-small); margin-top: 18px; padding: 28px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.content-page .seo-section:hover { border-color: color-mix(in srgb,var(--red) 18%,var(--line)); box-shadow: var(--shadow); }
.content-page .seo-section h2 { font-size: 27px; margin-bottom: 15px; }
.content-page .seo-section h3 { font-size: 18px; }
.content-page .seo-section p, .content-page .seo-section li { font-size: 14px; line-height: 1.75; }
.content-columns { display: grid; gap: 24px; grid-template-columns: repeat(2,minmax(0,1fr)); }
.content-columns p { margin-bottom: 0; }
.content-page .feature-grid { gap: 14px; }
.content-page .feature-card { border-radius: 8px; padding: 20px; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.content-page .feature-card:hover { border-color: color-mix(in srgb,var(--red) 35%,var(--line)); box-shadow: 0 10px 25px rgba(18,19,22,.08); transform: translateY(-3px); }
.content-page .feature-card strong { font-size: 16px; }
.content-page .feature-card p { font-size: 13px; line-height: 1.65; }

/* Resources board */
.resources-page > .shell > .hero { min-height: 330px; padding-right: 46%; }
.resources-page .reference-search-panel, .blog-index-page .reference-search-panel, .faq-page .reference-search-panel { border-radius: 10px; margin: 0 0 18px; padding: 14px; }
.resources-page .reference-search input, .blog-index-page .reference-search input, .faq-page .reference-search input { font-size: 14px; min-height: 46px; }
.resources-page .reference-filter-chips button, .blog-index-page .reference-filter-chips button, .faq-page .reference-filter-chips button { font-size:12px; min-height: 33px; padding: 6px 13px; transition: transform .18s ease,background-color .18s ease; }
.reference-filter-chips button:hover { transform: translateY(-1px); }
.resources-page .resource-intro { background: linear-gradient(135deg,var(--surface),var(--surface-2)) !important; }
.resources-page .resource-priority-clusters .feature-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
.resources-page .topic-cluster-card ul { display: grid; gap: 9px; list-style: none; margin: 14px 0 0; padding: 0; }
.resources-page .topic-cluster-card a { color: var(--muted); font-size: 12px; }
.resources-page .topic-cluster-card a:hover { color: var(--red); }
.resources-page .resource-group > .feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.resources-page .resource-card { position: relative; }
.resources-page .resource-card::after { color: var(--red); content: "→"; opacity: 0; position: absolute; right: 14px; top: 14px; transform: translateX(-4px); transition: .2s ease; }
.resources-page .resource-card:hover::after { opacity: 1; transform: none; }
.conversion-cta { align-items: center; background: linear-gradient(135deg,var(--red-soft),var(--surface)) !important; display: flex; justify-content: space-between; }

/* About and unpictured legal/safety pages */
.about-page .about-overview .content-columns { grid-template-columns: repeat(2,minmax(0,1fr)); }
.about-page .about-principles, .about-page .about-room-codes, .about-page .about-facts { background: var(--surface-2) !important; }
.about-page .about-principles .feature-card, .about-page .about-room-codes .feature-card, .about-page .about-facts .feature-card { background: var(--surface); }
.policy-page .seo-section, .safety-page .seo-section { margin-inline: auto; max-width: 1080px; }
.policy-page .seo-section h2::before, .safety-page .seo-section h2::before { color: var(--red); content: "●"; font-size:12px; margin-right: 10px; vertical-align: middle; }

/* FAQ board */
.faq-page > .shell > .hero { min-height: 340px; padding-right: 43%; }
.faq-page .hero-actions { display: none; }
.faq-page .seo-section { background: linear-gradient(135deg,var(--surface-2),var(--surface)) !important; }
.faq-page .faq-list { gap: 9px; max-width: 1120px; }
.faq-page .faq-list details { overflow: hidden; transition: border-color .2s ease,box-shadow .2s ease; }
.faq-page .faq-list details:hover, .faq-page .faq-list details[open] { border-color: color-mix(in srgb,var(--red) 40%,var(--line)); box-shadow: var(--shadow-small); }
.faq-page .faq-list summary { min-height: 58px; padding: 18px 20px; }
.faq-page .faq-list summary h2 { font-size: 15px; }
.faq-page .faq-list details > p { font-size: 13px; line-height: 1.7; padding: 0 20px 20px; }

/* Blog board and long articles */
.blog-index-page > .shell > .hero { min-height: 350px; }
.blog-index-page .blog-index .feature-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.blog-index-page .resource-card { min-height: 190px; }
.blog-index-page .article-category { color: var(--red); font-size:12px; font-weight: 800; text-transform: uppercase; }
.blog-index-page .resource-card small { color: var(--red); display: block; font-size:12px; margin-top: 16px; }
.content-page > .shell > article { margin: 0 auto; max-width: 1180px; }
.content-page > .shell > article > .hero { margin-inline: calc((1180px - min(100%,1180px)) / -2); }

/* Create Room board */
.create-room-page .create-experience { gap: 44px; grid-template-columns: minmax(0,.9fr) minmax(520px,1.1fr); }
.create-room-page .functional-intro { min-height: 590px; padding: 46px 45% 46px 8px; }
.create-room-page .functional-intro::after { background: transparent url('ui-room-key.png') center/contain no-repeat; border-radius: 0; filter: drop-shadow(0 22px 28px rgba(110,0,17,.16)); height: 285px; right: 0; width: 42%; }
.create-room-page .functional-intro h1 { font-size: clamp(48px,4.4vw,66px); }
.create-room-page .functional-card { border-radius: 12px; min-height: 590px; padding: 36px; }
.create-room-page .create-fields { gap: 14px; }
.create-room-page input { min-height: 48px; }
.create-room-page .create-summary { min-height: 66px; padding: 13px 16px; }
.create-room-page .create-submit { min-height: 46px; }

/* Quick Share and Quick Request creation boards */
.quick-share-page .quick-share-layout, .quick-request-page .quick-share-layout { gap: 34px; grid-template-columns: minmax(0,.78fr) minmax(540px,1.22fr); }
.quick-share-page .quick-share-intro, .quick-request-page .quick-share-intro { min-height: 570px; padding: 44px 8px 300px; }
.quick-share-page .quick-share-intro::after, .quick-request-page .quick-share-intro::after { background: transparent url('ui-quick-share.png') center/contain no-repeat; border-radius: 0; bottom: 10px; filter: drop-shadow(0 20px 26px rgba(110,0,16,.16)); height: 280px; left: 50%; right: auto; top: auto; transform: translateX(-50%); width: 92%; }
.quick-share-page .quick-share-intro h1, .quick-request-page .quick-share-intro h1 { font-size: clamp(48px,4.5vw,68px); }
.quick-share-page .quick-upload-card, .quick-request-page .quick-upload-card { border-radius: 12px; min-height: 570px; padding: 34px; }
.quick-share-page .upload-dropzone label { min-height: 205px; transition: background-color .2s ease,border-color .2s ease,transform .2s ease; }
.quick-share-page .upload-dropzone label:hover { background: var(--red-soft); border-color: var(--red); transform: translateY(-2px); }
.quick-share-page .quick-explainer, .quick-request-page .quick-explainer { gap: 14px; margin-top: 26px; }
.quick-share-page .quick-explainer article, .quick-request-page .quick-explainer article { min-height: 145px; padding: 22px; transition: border-color .2s ease,transform .2s ease; }
.quick-share-page .quick-explainer article:hover, .quick-request-page .quick-explainer article:hover { border-color: var(--red); transform: translateY(-3px); }
.quick-share-page .quick-explainer h2, .quick-request-page .quick-explainer h2 { font-size: 18px; }
.quick-share-page .quick-explainer p, .quick-request-page .quick-explainer p { font-size: 13px; line-height: 1.6; }

/* Generated Quick Share / Quick Request result boards */
.quick-share-result, .quick-request-result { border-radius: 12px; margin: 28px auto; max-width: 1180px; padding: 30px; }
.quick-result-top { align-items: center; }
.quick-result-top h1 { font-size: 40px; }
.quick-expiry { min-width: 145px; padding: 14px 17px; text-align: center; }
.quick-expiry strong { color: var(--green); font-size: 20px; }
.quick-link-row { background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px; }
.quick-result-grid { grid-template-columns: 340px 1fr; }
.quick-qr-card, .quick-owner-tools { border-radius: 9px; padding: 18px; }
.quick-owner-tools { display: grid; gap: 13px; }

/* Contact board */
.contact-page .contact-layout { gap: 36px; grid-template-columns: minmax(0,.83fr) minmax(560px,1.17fr); }
.contact-page .contact-intro-panel { min-height: 560px; padding: 48px 8px 300px; }
.contact-page .contact-intro-panel::after { background: transparent url('ui-contact.png') center/contain no-repeat; border-radius: 0; bottom: 12px; filter: drop-shadow(0 22px 28px rgba(110,0,16,.15)); height: 285px; left: 50%; right: auto; top: auto; transform: translateX(-50%); width: 88%; }
.contact-page .contact-intro-panel h1 { font-size: clamp(48px,4.2vw,64px); }
.contact-page .contact-panel { border-radius: 12px; min-height: 560px; padding: 36px; }
.contact-page .form-row.two { display: grid; gap: 14px; grid-template-columns: 1fr 1fr; }
.contact-page textarea { min-height: 180px; }
.contact-page .actions button { min-height: 46px; width: 100%; }

/* Join Room full-page modal */
.join-modal-backdrop { padding: 48px 24px; }
.join-modal { gap: 40px; grid-template-columns: minmax(420px,.9fr) minmax(480px,1.1fr); max-width: 1180px; min-height: 560px; padding: 50px; }
.join-modal::after { background: transparent url('ui-room-key.png') center/contain no-repeat; border-radius: 10px; filter: drop-shadow(0 22px 30px rgba(110,0,16,.17)); }
.join-modal .panel-heading h2 { font-size: 48px; }
.join-modal .panel-heading p { font-size: 14px; line-height: 1.65; }
.join-modal .join-form input, .join-modal .join-form button { min-height: 48px; }

/* Active room board */
.room-page .room-header-modern { border-radius: 11px; margin: 12px 0 16px; min-height: 135px; padding: 24px; }
.room-page .room-heading-copy h1 { font-size: 34px; }
.room-page .workspace-grid { gap: 16px; grid-template-columns: minmax(340px,.72fr) minmax(0,1.28fr); }
.room-page .storage-panel, .room-page .contents-panel { border-radius: 10px; padding: 20px; }
.room-page .upload-box, .room-page .text-box { padding: 17px; }
.room-page .file-card, .room-page .text-card { min-height: 58px; padding: 13px; transition: border-color .18s ease,transform .18s ease; }
.room-page .file-card:hover, .room-page .text-card:hover { border-color: var(--red); transform: translateY(-1px); }
.room-page .file-name { font-size: 13px; }
.room-page .file-meta { font-size:12px; }

/* Checkout boards */
.payment-page .checkout-page { display: grid; gap: 34px; grid-template-columns: minmax(360px,.68fr) minmax(620px,1.32fr); margin: 24px auto; max-width: 1280px; }
.payment-page .checkout-story { min-height: 610px; padding: 38px; }
.payment-page .checkout-story::after { background: transparent url('ui-room-key.png') center/contain no-repeat; height: 245px; right: 5%; width: 90%; }
.payment-page .checkout-story h1 { font-size: 44px; }
.payment-page .checkout-flow { display: block; }
.payment-page .checkout-heading { margin-bottom: 16px; }
.payment-page .payment-panel { border-radius: 12px; min-height: 520px; padding: 28px; }
.payment-page .paddle-checkout { background: var(--surface); border-radius: 8px; color: var(--text); min-height: 440px; }
.payment-page .payment-panel > .button.secondary { margin-top: 18px; width: 100%; }
:root[data-theme="dark"] .payment-page .paddle-checkout iframe { background: #fff !important; color-scheme: light !important; }

/* Shared focus, motion and card behavior */
.content-page a:focus-visible, .functional-page a:focus-visible, .content-page button:focus-visible, .functional-page button:focus-visible,
.content-page input:focus-visible, .functional-page input:focus-visible, .content-page textarea:focus-visible, .functional-page textarea:focus-visible {
  outline: 3px solid color-mix(in srgb,var(--red) 28%,transparent); outline-offset: 2px;
}

@media (max-width: 1050px) {
  .content-page .topbar, .functional-page .topbar, .content-page .shell, .functional-page .shell { padding-inline: 24px; }
  .content-page > .shell > .hero { padding-right: 40%; }
  .resources-page .resource-priority-clusters .feature-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .create-room-page .create-experience, .quick-share-page .quick-share-layout, .quick-request-page .quick-share-layout, .contact-page .contact-layout { gap: 24px; grid-template-columns: minmax(0,.8fr) minmax(460px,1.2fr); }
  .payment-page .checkout-page { grid-template-columns: 340px 1fr; }
}

@media (max-width: 860px) {
  .content-page .topbar, .functional-page .topbar { padding-inline: 13px; }
  .content-page .shell, .functional-page .shell { max-width: none; padding: 8px 16px 48px; }
  .content-page > .shell > .hero, .resources-page > .shell > .hero, .faq-page > .shell > .hero, .policy-page > .shell > .hero, .safety-page > .shell > .hero { min-height: 0; padding: 32px 2px 300px; }
  .content-page > .shell > .hero::after { bottom: 18px; height: 250px; left: 50%; right: auto; top: auto; transform: translateX(-50%); width: min(82%,390px); }
  .content-page > .shell > .hero:hover::after { transform: translateX(-50%); }
  .content-page > .shell > .hero h1 { font-size: clamp(38px,9vw,52px); }
  .content-page .seo-section { padding: 22px; }
  .content-columns, .about-page .about-overview .content-columns { grid-template-columns: 1fr; }
  .content-page .feature-grid, .resources-page .resource-priority-clusters .feature-grid, .resources-page .resource-group > .feature-grid, .blog-index-page .blog-index .feature-grid { grid-template-columns: 1fr; }
  .conversion-cta { align-items: stretch; display: grid; }
  .create-room-page .create-experience, .quick-share-page .quick-share-layout, .quick-request-page .quick-share-layout, .contact-page .contact-layout { grid-template-columns: 1fr; }
  .create-room-page .functional-intro, .quick-share-page .quick-share-intro, .quick-request-page .quick-share-intro, .contact-page .contact-intro-panel { min-height: 0; order: 1; padding: 32px 2px 280px; }
  .create-room-page .functional-card, .quick-share-page .quick-upload-card, .quick-request-page .quick-upload-card, .contact-page .contact-panel { min-height: 0; order: 2; padding: 24px; }
  .create-room-page .functional-intro::after, .quick-share-page .quick-share-intro::after, .quick-request-page .quick-share-intro::after, .contact-page .contact-intro-panel::after { bottom: 10px; height: 250px; left: 50%; right: auto; top: auto; transform: translateX(-50%); width: min(84%,390px); }
  .create-room-page .functional-intro h1, .quick-share-page .quick-share-intro h1, .quick-request-page .quick-share-intro h1, .contact-page .contact-intro-panel h1 { font-size: clamp(38px,9vw,50px); }
  .quick-share-page .quick-explainer, .quick-request-page .quick-explainer { grid-template-columns: 1fr; }
  .quick-share-page .quick-explainer article, .quick-request-page .quick-explainer article { min-height: 0; }
  .quick-result-grid { grid-template-columns: 1fr; }
  .contact-page .form-row.two { grid-template-columns: 1fr; }
  .join-modal { grid-template-columns: 1fr; max-width: 620px; min-height: 0; padding: 28px; }
  .join-modal::after { grid-column: 1; grid-row: auto; min-height: 260px; }
  .room-page .workspace-grid { grid-template-columns: 1fr; }
  .payment-page .checkout-page { grid-template-columns: 1fr; margin: 12px auto; }
  .payment-page .checkout-story { min-height: 0; padding: 26px 26px 260px; }
  .payment-page .checkout-story::after { bottom: 8px; height: 230px; left: 50%; right: auto; top: auto; transform: translateX(-50%); }
}

@media (max-width: 560px) {
  .content-page .shell, .functional-page .shell { padding-inline: 12px; }
  .content-page > .shell > .hero, .resources-page > .shell > .hero, .faq-page > .shell > .hero { padding-bottom: 235px; }
  .content-page > .shell > .hero::after { height: 210px; }
  .content-page .seo-section { padding: 18px 15px; }
  .content-page .seo-section h2 { font-size: 23px; }
  .content-page .seo-section p, .content-page .seo-section li { font-size: 13px; }
  .create-room-page .functional-intro, .quick-share-page .quick-share-intro, .quick-request-page .quick-share-intro, .contact-page .contact-intro-panel { padding-bottom: 230px; }
  .create-room-page .functional-intro::after, .quick-share-page .quick-share-intro::after, .quick-request-page .quick-share-intro::after, .contact-page .contact-intro-panel::after { height: 210px; }
  .create-room-page .functional-card, .quick-share-page .quick-upload-card, .quick-request-page .quick-upload-card, .contact-page .contact-panel { padding: 19px 15px; }
  .quick-share-result, .quick-request-result { padding: 18px 14px; }
  .quick-result-top h1 { font-size: 31px; }
  .room-page .room-header-modern, .room-page .storage-panel, .room-page .contents-panel { padding: 15px; }
  .payment-page .checkout-story, .payment-page .payment-panel { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .client-reveal, .client-reveal.is-visible, .content-page > .shell > .hero::after, .content-page .seo-section,
  .content-page .feature-card, .quick-share-page .quick-explainer article, .quick-request-page .quick-explainer article,
  .room-page .file-card, .room-page .text-card { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* Readable homepage scale: preserve the reference structure without compressing it into one screen. */
.home-reference-hero { gap: 18px 34px; min-height: 500px; padding-block: 28px 42px; }
.home-hero-copy h1 { font-size: clamp(48px, 4vw, 64px); margin-bottom: 20px; }
.home-hero-copy p { font-size: 14px; line-height: 1.65; }
.home-drop-panel { min-height: 230px; padding: 24px; }
.home-upload-icon { height: 48px; width: 48px; }
.home-drop-panel strong { font-size: 15px; }
.home-drop-panel > span:not(.home-upload-icon) { font-size: 12px; }
.home-drop-panel small { font-size:12px; margin-top: 15px; }
.home-folder-wrap { min-height: 340px; }
.home-folder-wrap img { height: 370px; width: 410px; }
.home-tool-row { gap: 10px; }
.home-tool-row > a { gap: 10px; grid-template-columns: 42px minmax(0,1fr) auto; min-height: 82px; padding: 11px; }
.home-card-icon { height: 42px; width: 42px; }
.home-tool-row strong { font-size: 12px; }
.home-tool-row small { font-size:12px; line-height: 1.35; }
.home-benefit-row > span { gap: 2px 10px; grid-template-columns: 34px 1fr; min-height: 64px; padding: 10px 13px; }
.home-benefit-row b { font-size: 20px; }
.home-benefit-row strong { font-size:12px; }
.home-benefit-row small { font-size:12px; }
.home-join-card { gap: 8px; padding: 11px; }
.home-join-card > div strong { font-size: 12px; }
.home-join-card > div small { font-size:12px; }
.home-join-card input, .home-join-card button { font-size:12px; min-height: 36px; }

.home-information-band { padding-block: 34px; }
.home-information-band > article { padding-inline: 30px; }
.home-reference-band h2 { font-size: 17px; margin-bottom: 16px; }
.home-methods > a { gap: 11px; grid-template-columns: 34px 1fr auto; margin: 12px 0; }
.home-methods .band-icon { height: 34px; width: 34px; }
.home-methods strong, .home-steps strong { font-size:12px; }
.home-methods small, .home-steps small { font-size:12px; line-height: 1.45; }
.home-steps > div { gap: 10px; grid-template-columns: 27px 28px 1fr; margin: 12px 0; }
.home-steps > div > span { font-size:12px; height: 27px; width: 27px; }
.home-steps .step-icon { font-size: 17px; }
.home-real-use ul, .home-security ul { gap: 12px; }
.home-real-use li { font-size:12px; line-height: 1.45; }
.home-real-use li span { font-size: 15px; width: 19px; }
.home-security p { font-size:12px; line-height: 1.6; margin-bottom: 12px; }
.home-security li { font-size:12px; }

/* Larger homepage information icons for quicker visual scanning. */
.home-methods > a { grid-template-columns: 44px 1fr auto; }
.home-methods .band-icon { font-size: 21px; height: 44px; width: 44px; }
.home-steps > div { grid-template-columns: 36px 36px 1fr; }
.home-steps > div > span { font-size:12px; height: 36px; width: 36px; }
.home-steps .step-icon { font-size: 23px; text-align: center; }
.home-real-use li span { font-size: 21px; margin-right: 9px; width: 27px; }
.home-security li::before { display: inline-block; font-size: 16px; margin-right: 8px; width: 15px; }

.home-bottom-band { align-items: stretch; gap: 24px; padding-block: 30px 36px; }
.home-bottom-band > article:not(:last-child) { padding-right: 24px; }
.home-bottom-band header a, .home-bottom-band header > span { color: var(--red); font-size:12px; font-weight: 700; }
.home-guides-preview > div { gap: 9px; }
.home-guides-preview > div > a { gap: 7px; grid-template-columns: 26px 1fr; min-height: 90px; padding: 12px; }
.home-guides-preview a > span { font-size: 18px; }
.home-guides-preview strong { font-size:12px; line-height: 1.35; }
.home-guides-preview small { font-size:12px; line-height: 1.4; }
.home-faq-list button { font-size:12px; min-height: 31px; padding: 7px 9px; }
.home-faq-list p { font-size:12px; padding: 5px 22px 9px 9px; }

.home-review-card { background: linear-gradient(145deg, var(--surface), var(--red-soft)); border: 1px solid color-mix(in srgb, var(--red) 22%, var(--line)); border-radius: 7px; display: flex; flex-direction: column; min-height: 100%; padding: 16px 18px; }
.home-review-card header { margin-bottom: 7px; }
.home-review-card header h2 { margin: 0; }
.home-review-card header > span { color: var(--green); font-size:12px; font-weight: 700; text-transform: uppercase; }
.home-review-stage { display: grid; flex: 1; }
.home-review-slide { animation: home-review-in .3s ease both; display: flex; flex-direction: column; justify-content: center; margin: 0; min-height: 112px; }
.home-review-stars { color: #f0a500; font-size: 13px; letter-spacing: 1px; }
.home-review-slide blockquote { color: var(--text); font-size:12px; font-weight: 600; line-height: 1.5; margin: 8px 0 12px; }
.home-review-slide figcaption { display: grid; }
.home-review-slide figcaption strong { font-size:12px; }
.home-review-slide figcaption span { color: var(--muted); font-size:12px; }
.home-review-controls { align-items: center; display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.home-review-controls button { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 50%; color: var(--text); display: flex; font-size:12px; height: 27px; justify-content: center; min-height: 0; padding: 0; width: 27px; }
.home-review-controls button:hover { border-color: var(--red); color: var(--red); }
.home-review-controls span { color: var(--muted); font-size:12px; }
@keyframes home-review-in { from { opacity: 0; transform: translateX(8px); } }

.footer-group strong, .footer-newsletter > strong { font-size: 12px; }
.footer-group a { font-size:12px; }
.footer-brand p, .footer-newsletter > p { font-size:12px; line-height: 1.55; }
.footer-newsletter input, .footer-newsletter button { font-size:12px; min-height: 34px; }
.footer-bottom { font-size:12px; }

@media (max-width: 1100px) and (min-width: 861px) {
  .home-reference-hero { gap: 16px 22px; grid-template-columns: minmax(370px,1.12fr) minmax(275px,.76fr) minmax(230px,.62fr); }
  .home-hero-copy h1 { font-size: 46px; }
  .home-folder-wrap img { height: 310px; width: 340px; }
  .home-information-band > article { padding-inline: 18px; }
}

@media (max-width: 860px) {
  .home-page .shell { max-width: none; padding: 10px 18px 0; }
  .home-reference-hero { gap: 12px; min-height: 0; padding-block: 18px 28px; }
  .home-hero-copy h1 { font-size: clamp(38px, 10vw, 52px); }
  .home-hero-copy p { font-size: 13px; }
  .home-drop-panel { min-height: 190px; }
  .home-tool-row > a { min-height: 64px; }
  .home-information-band { padding-block: 18px; }
  .home-information-band > article, .home-information-band > article:first-child, .home-information-band > article:last-child { padding-block: 24px; }
  .home-reference-band h2 { font-size: 16px; }
  .home-methods strong, .home-steps strong { font-size: 12px; }
  .home-methods small, .home-steps small, .home-real-use li, .home-security p, .home-security li { font-size:12px; }

  .home-bottom-band { padding-block: 22px 30px; }
  .home-bottom-band > article:not(:last-child) { padding-bottom: 22px; }
  .home-guides-preview > div > a { min-height: 72px; }
  .home-faq-list button { font-size:12px; min-height: 38px; }
  .home-review-slide { min-height: 130px; }
}

/* Final interaction polish. */
.home-page { isolation: isolate; }
.home-page .topbar { transition: background-color .22s ease, box-shadow .22s ease; }
.home-page .topbar.is-scrolled { background: color-mix(in srgb, var(--surface) 97%, transparent); box-shadow: 0 8px 24px rgba(18,19,22,.07); }
:root[data-theme="dark"] .home-page .topbar.is-scrolled { box-shadow: 0 9px 28px rgba(0,0,0,.3); }
.home-scroll-progress { background: linear-gradient(90deg, var(--red-dark), var(--red), #ff6879); height: 2px; left: 0; pointer-events: none; position: fixed; top: 0; width: var(--page-progress, 0%); z-index: 2200; }
.home-reference-hero { isolation: isolate; position: relative; }
.home-reference-hero::before { background: radial-gradient(circle, color-mix(in srgb, var(--red) 8%, transparent), transparent 68%); content: ""; height: 520px; pointer-events: none; position: absolute; right: -90px; top: -95px; width: 620px; z-index: -1; }
.home-hero-copy h1 { text-wrap: balance; }
.home-hero-copy p { max-width: 620px; text-wrap: pretty; }
.home-tool-row > a { overflow: hidden; position: relative; }
.home-tool-row > a::after { background: var(--red); bottom: 0; content: ""; height: 2px; left: 0; position: absolute; transform: scaleX(0); transform-origin: left; transition: transform .24s ease; width: 100%; }
.home-tool-row > a:hover::after, .home-tool-row > a:focus-visible::after { transform: scaleX(1); }
.home-information-band > article { border-radius: 7px; transition: background-color .2s ease, transform .2s ease; }
.home-information-band > article:hover { background: color-mix(in srgb, var(--red-soft) 42%, transparent); transform: translateY(-2px); }
.home-information-band > article:first-child { padding-left: 14px; }
.home-information-band > article:last-child { padding-right: 14px; }
.home-methods > a { border-radius: 6px; padding: 3px; }
.home-methods > a:hover { background: var(--surface); }
.home-guides-preview > div > a { position: relative; }
.home-guides-preview > div > a::after { color: var(--red); content: "↗"; opacity: 0; position: absolute; right: 8px; top: 7px; transform: translate(-3px,3px); transition: opacity .2s ease, transform .2s ease; }
.home-guides-preview > div > a:hover::after { opacity: 1; transform: none; }
.home-review-card { overflow: hidden; position: relative; transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease; }
.home-review-card::before { color: color-mix(in srgb, var(--red) 15%, transparent); content: "“"; font-family: Georgia, serif; font-size: 108px; line-height: 1; pointer-events: none; position: absolute; right: 9px; top: -15px; }
.home-review-card:hover { border-color: color-mix(in srgb, var(--red) 45%, var(--line)); box-shadow: 0 12px 28px color-mix(in srgb, var(--red) 10%, transparent); transform: translateY(-2px); }
.home-review-stage, .home-review-controls, .home-review-card header { position: relative; z-index: 1; }
.home-review-stars { filter: drop-shadow(0 1px 3px rgba(240,165,0,.18)); }
.home-faq-list section { transition: background-color .18s ease; }
.home-faq-list button { transition: color .18s ease, padding-left .18s ease; }
.home-faq-list button:hover { color: var(--red); padding-left: 12px; }
.home-page a:focus-visible, .home-page button:focus-visible, .home-page input:focus-visible, .home-page select:focus-visible { outline: 3px solid color-mix(in srgb, var(--red) 30%, transparent); outline-offset: 2px; }
.home-page .footer { position: relative; }
.home-page .footer::before { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--red) 45%, var(--line)), transparent); content: ""; height: 1px; left: 10%; position: absolute; right: 10%; top: -1px; }

@media (max-width: 860px) {
  .home-reference-hero::before { height: 390px; right: -210px; top: -40px; width: 430px; }
  .home-information-band > article:hover { transform: none; }
  .home-information-band > article:first-child, .home-information-band > article:last-child { padding-inline: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .home-scroll-progress, .home-page .topbar, .home-information-band > article, .home-review-card, .home-tool-row > a::after { transition: none !important; }
}

/* Final reference-board refinements */
.about-page .seo-section { overflow: hidden; position: relative; }
.about-page .seo-section::after { background: linear-gradient(135deg, var(--red), transparent); content: ''; height: 2px; left: 0; opacity: .65; position: absolute; top: 0; width: 86px; }
.about-page .seo-section:nth-of-type(even) { background: linear-gradient(135deg, color-mix(in srgb, var(--red-soft) 58%, var(--surface)), var(--surface)); }
.about-page .feature-card { overflow: hidden; padding-top: 54px; position: relative; }
.about-page .feature-card::before { align-items: center; background: var(--red-soft); border-radius: 10px; color: var(--red); content: '\2713'; display: flex; font-size: 17px; font-weight: 900; height: 34px; justify-content: center; left: 18px; position: absolute; top: 14px; width: 34px; }
.about-page .feature-card:nth-child(2)::before { color: var(--teal); content: '\25C7'; }
.about-page .feature-card:nth-child(3)::before { content: '\23F1'; }
.about-page .feature-card:hover { border-color: color-mix(in srgb, var(--red) 38%, var(--line)); box-shadow: 0 15px 30px color-mix(in srgb, var(--red) 8%, transparent); transform: translateY(-3px); }

.contact-page .contact-layout { align-items: stretch; grid-template-columns: minmax(300px,.72fr) minmax(0,1.28fr); }
.contact-page .contact-intro-panel { background: linear-gradient(145deg, color-mix(in srgb, var(--red-soft) 72%, var(--surface)), var(--surface)); min-height: 480px; padding: 34px 30px 220px; }
.contact-page .contact-intro-panel h1 { font-size: clamp(32px,4vw,48px); }
.contact-page .contact-intro-panel::after { height: 205px; width: 74%; }

.payment-page .checkout-page { align-items: start; }
.payment-page .checkout-story { background: linear-gradient(150deg, color-mix(in srgb, var(--red-soft) 62%, var(--surface)), var(--surface)); overflow: hidden; position: sticky; top: 94px; }
.payment-page .checkout-story::after { bottom: 20px; }
.payment-page .payment-panel { overflow: visible; }
.payment-page .checkout-loading { margin-bottom: 16px; }
.payment-page .paddle-checkout { background: transparent; color-scheme: light; min-height: 520px; }
:root[data-theme="dark"] .payment-page .paddle-checkout,
:root[data-theme="dark"] .payment-page .paddle-checkout iframe { background: transparent !important; color-scheme: dark !important; }
.payment-page .payment-panel > .button.secondary { margin-top: 24px; min-height: 44px; }

@media (max-width: 860px) {
  .contact-page .contact-layout { grid-template-columns: 1fr; }
  .contact-page .contact-intro-panel { min-height: 400px; padding-bottom: 220px; }
  .payment-page .checkout-story { position: relative; top: 0; }
  .create-room-page .functional-card, .quick-share-page .quick-upload-card, .quick-request-page .quick-upload-card, .contact-page .contact-panel { order: 1; }
  .create-room-page .functional-intro, .quick-share-page .quick-share-intro, .quick-request-page .quick-share-intro, .contact-page .contact-intro-panel { order: 2; }
}

.table-wrap { border: 1px solid var(--line); border-radius: 9px; margin: 18px 0 24px; overflow-x: auto; }
.table-wrap caption { color: var(--muted); font-size: 13px; line-height: 1.5; padding: 12px 14px; text-align: left; }
.article-byline { color: var(--muted); font-size: 14px; margin-top: 18px; }
.comparison-table table { border-collapse: collapse; min-width: 680px; width: 100%; }
.comparison-table th, .comparison-table td { border-bottom: 1px solid var(--line); padding: 14px 16px; text-align: left; vertical-align: top; }
.comparison-table th { background: var(--surface-2); color: var(--text); font-size:12px; letter-spacing: .025em; text-transform: uppercase; }
.comparison-table td { color: var(--muted); font-size: 12px; line-height: 1.55; }
.comparison-table tr:last-child td { border-bottom: 0; }
.comparison-table tbody tr:hover { background: color-mix(in srgb, var(--red-soft) 42%, transparent); }
.floating-field select { min-height: 50px; padding: 18px 11px 5px; }
.floating-field select + label { color: var(--red); transform: translateY(-8px) scale(.78); }

@media (min-width: 861px) {
  .blog-index-page .blog-index .resource-card:first-child { background: linear-gradient(135deg, var(--surface), color-mix(in srgb, var(--red-soft) 70%, var(--surface))); grid-column: span 2; min-height: 245px; padding: 30px 42% 28px 28px; position: relative; }
  .blog-index-page .blog-index .resource-card:first-child::after { background: url('ui-help-folder.png') center / contain no-repeat; bottom: 12px; content: ''; position: absolute; right: 4%; top: 12px; width: 34%; }
  .blog-index-page .blog-index .resource-card:first-child strong { font-size: 24px; line-height: 1.15; }
}

/* Stable section flow: illustrations stay inside their own sections. */
.content-page .shell > section,
.functional-page .shell > section,
.content-page .shell > article,
.functional-page .shell > article { clear: both; isolation: isolate; max-width: 100%; position: relative; }
.content-page .shell > section + section,
.functional-page .shell > section + section { margin-top: 18px; }
.create-experience, .functional-layout, .quick-share-layout, .workspace-grid, .checkout-page,
.feature-grid, .content-columns, .quick-result-grid { min-width: 0; }
.create-experience > *, .functional-layout > *, .quick-share-layout > *, .workspace-grid > *,
.checkout-page > *, .feature-grid > *, .content-columns > *, .quick-result-grid > * { min-width: 0; }
.functional-intro, .quick-share-intro, .contact-intro-panel,
.content-page > .shell > .hero, .checkout-story { contain: layout paint; }
.functional-intro::after, .quick-share-intro::after, .contact-intro-panel::after,
.content-page > .shell > .hero::after, .checkout-story::after { pointer-events: none; z-index: 0; }
.functional-intro > *, .quick-share-intro > *, .contact-intro-panel > *,
.content-page > .shell > .hero > *, .checkout-story > * { position: relative; z-index: 1; }
.panel, .seo-section, .feature-card { overflow-wrap: anywhere; }

/* Keep the active Share marker attached to Share itself. */
.nav-dropdown-toggle.is-current::after { display: none !important; }
.nav-dropdown::after { background: var(--red); bottom: -1px; content: ''; height: 2px; left: 10px; opacity: 0; position: absolute; right: 10px; transform: scaleX(.45); transition: opacity .18s ease, transform .18s ease; }
.nav-dropdown.is-current::after, .nav-dropdown:hover::after, .nav-dropdown:focus-within::after { opacity: 1; transform: scaleX(1); }

/* Dedicated Join Room page */
.join-room-layout { align-items: stretch; display: grid; gap: 24px; grid-template-columns: minmax(430px,.82fr) minmax(0,1.18fr); margin: 26px 0 18px; }
.join-room-copy { align-content: center; display: grid; padding: 24px 10px; }
.join-room-copy > h1 { font-size: clamp(48px,5vw,70px); letter-spacing: -.06em; line-height: .96; margin: 9px 0 16px; }
.join-room-copy > p { font-size: 14px; line-height: 1.65; max-width: 600px; }
.join-room-form-card { margin-top: 20px; max-width: 610px; padding: 24px; }
.join-room-form-card button { width: 100%; }
.join-protection-note, .join-secure-note { color: var(--muted); font-size:12px; }
.join-secure-note { color: var(--green); text-align: center; }
.join-room-visual { align-items: center; background: radial-gradient(circle at 50% 44%, var(--red-soft), var(--surface) 66%); display: grid; grid-template-columns: minmax(0,1fr) 170px; min-height: 520px; overflow: hidden; padding: 30px; }
.join-room-visual img { filter: drop-shadow(0 28px 30px rgba(118,0,18,.2)); max-height: 430px; object-fit: contain; width: 100%; }
.join-example { background: color-mix(in srgb,var(--surface) 90%,transparent); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); display: grid; gap: 7px; padding: 20px; text-align: center; }
.join-example small, .join-example span { color: var(--muted); font-size:12px; }
.join-example strong { color: var(--red); font-size: 30px; letter-spacing: .05em; }
.join-help-grid { display: grid; gap: 14px; grid-template-columns: 1.1fr 1fr 1fr; }
.join-help-grid > article { padding: 24px; }
.join-help-grid h2 { font-size: 20px; margin: 8px 0; }
.join-help-grid p { font-size: 12px; line-height: 1.65; }
.join-help-grid ol { display: grid; gap: 13px; list-style: none; margin: 16px 0 0; padding: 0; }
.join-help-grid li { display: grid; gap: 2px; padding-left: 34px; position: relative; }
.join-help-grid li::before { align-items: center; background: var(--red-soft); border-radius: 50%; color: var(--red); content: counter(list-item); display: flex; font-size:12px; font-weight: 800; height: 24px; justify-content: center; left: 0; position: absolute; top: 1px; width: 24px; }
.join-help-grid li small { color: var(--muted); }
.join-faq-row { display: grid; grid-template-columns: repeat(3,1fr); overflow: hidden; padding: 0; }
.join-faq-row details { padding: 18px; }
.join-faq-row details + details { border-left: 1px solid var(--line); }
.join-faq-row summary { cursor: pointer; font-size: 12px; font-weight: 700; }
.join-faq-row p { font-size:12px; margin: 10px 0 0; }

@media (max-width: 860px) {
  .content-page .shell > section + section, .functional-page .shell > section + section { margin-top: 14px; }
  .nav-dropdown::after { bottom: 7px; height: auto; left: 0; right: auto; top: 7px; width: 2px; }
  .join-room-layout { grid-template-columns: 1fr; margin-top: 12px; }
  .join-room-copy { padding: 20px 0 0; }
  .join-room-copy > h1 { font-size: clamp(40px,11vw,56px); }
  .join-room-form-card { max-width: none; order: 1; }
  .join-room-visual { grid-template-columns: 1fr; min-height: 390px; padding: 20px; }
  .join-room-visual img { max-height: 270px; }
  .join-example { justify-self: center; max-width: 240px; width: 100%; }
  .join-help-grid, .join-faq-row { grid-template-columns: 1fr; }
  .join-faq-row details + details { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 560px) {
  .content-page .shell > section + section, .functional-page .shell > section + section { margin-top: 12px; }
  .join-room-form-card, .join-help-grid > article { padding: 18px 15px; }
  .join-room-visual { min-height: 330px; }
}

/* Spacing corrections for guide, Help Center, Blog and FAQ content. */
.guide-page .seo-section, .resources-page .seo-section, .blog-index-page .seo-section, .faq-page .seo-section { margin-block: 22px; }
.guide-page .faq-list, .faq-page .faq-list { gap: 12px; margin-block: 22px; max-width: none; }
.guide-page .faq-list > article { display: grid; gap: 9px; min-height: 104px; padding: 22px 24px; }
.guide-page .faq-list > article h2 { font-size: 16px; line-height: 1.35; margin: 0; }
.guide-page .faq-list > article p { font-size: 13px; line-height: 1.65; margin: 0; }
.related-topic-links .feature-grid { gap: 16px; }
.related-topic-links .resource-card { align-content: start; display: grid; gap: 14px; min-height: 128px; padding: 25px; }
.related-topic-links .resource-card strong { display: block; font-size: 17px; line-height: 1.35; }
.related-topic-links .resource-card span { align-self: end; color: var(--red); display: block; font-size: 12px; font-weight: 700; }
.blog-index-page .reference-search-panel, .faq-page .reference-search-panel { gap: 14px; margin-block: 22px 28px; padding: 20px; }
.blog-index-page .reference-filter-chips, .faq-page .reference-filter-chips { gap: 9px; }
.blog-index-page .reference-results-status, .faq-page .reference-results-status { margin: 2px 4px 0; }
.blog-index-page .blog-index { margin-top: 28px; padding: 28px; }
.faq-page .faq-list details { margin: 0; }
.faq-page .faq-list summary { padding: 21px 24px; }
.faq-page .faq-list details > p { padding: 0 24px 23px; }

/* Form breathing room requested on Create Room. */
.create-room-page .create-panel .panel-heading { margin-bottom: 28px; }
.create-room-page .create-fields { padding-top: 4px; }

/* Quick Share and Quick Request creation/result boards. */
.quick-share-page .quick-share-layout, .quick-request-page .quick-share-layout { align-items: stretch; margin-block: 24px; }
.quick-share-page .quick-upload-card .panel-heading, .quick-request-page .quick-upload-card .panel-heading { margin-bottom: 24px; }
.quick-share-page .quick-upload-card form, .quick-request-page .quick-upload-card form { gap: 16px; }
.quick-share-page .quick-explainer, .quick-request-page .quick-explainer { margin-block: 22px 34px; }
.quick-share-result, .quick-request-result { box-shadow: var(--shadow); margin: 28px 0 44px; max-width: none; padding: 34px; width: 100%; }
.quick-result-top { border-bottom: 1px solid var(--line); gap: 24px; margin-bottom: 18px; padding-bottom: 22px; }
.quick-link-row { align-items: center; display: grid; gap: 12px; grid-template-columns: minmax(0,1fr) auto; margin-bottom: 18px; padding: 13px; }
.quick-link-row::before { background: var(--red-soft) url('ui-quick-share.png') center / 88px auto no-repeat; border-radius: 8px; content: ''; display: block; height: 52px; width: 78px; }
.quick-link-row { grid-template-columns: 78px minmax(0,1fr) auto; }
.quick-link-row input { min-height: 46px; }
.quick-link-row button { min-height: 46px; min-width: 128px; }
.quick-result-grid { align-items: stretch; gap: 18px; grid-template-columns: minmax(290px,.36fr) minmax(0,1fr); }
.quick-qr-card { align-content: center; display: grid; }
.quick-qr-card .room-qr-code { margin-inline: auto; }
.quick-owner-tools { align-content: start; gap: 20px; padding: 24px; }
.quick-result-file-list { gap: 8px; }
.quick-result-file-list > span { min-height: 48px; padding: 11px 13px; }
.quick-send-room { border-top: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: minmax(0,1fr) auto; padding-top: 20px; }
.quick-send-room label { grid-column: 1 / -1; }
.quick-owner-tools > form:last-child { background: color-mix(in srgb,var(--red-soft) 64%,var(--surface)); border: 1px solid color-mix(in srgb,var(--red) 35%,var(--line)); border-radius: 8px; margin-top: auto; padding: 16px; }
.quick-owner-tools > form:last-child::before { color: var(--red); content: 'Danger zone'; display: block; font-size:12px; font-weight: 800; margin-bottom: 9px; text-transform: uppercase; }

/* Active Room board: people, upload tools, and contents stay in distinct columns. */
.room-page .room-shell-modern { margin-bottom: 42px; }
.room-page .workspace-grid { align-items: start; grid-template-columns: minmax(210px,.42fr) minmax(320px,.68fr) minmax(0,1.3fr); }
.room-page .participants-panel, .room-page .storage-panel, .room-page .contents-panel { min-height: 520px; }
.participants-panel { padding: 20px; }
.participant-list { display: grid; gap: 8px; margin: 18px 0; }
.participant-row { align-items: center; border-bottom: 1px solid var(--line); display: grid; gap: 10px; grid-template-columns: 38px minmax(0,1fr) 9px; padding: 9px 0; }
.participant-row:last-child { border-bottom: 0; }
.participant-avatar { align-items: center; background: var(--red-soft); border-radius: 50%; color: var(--red); display: flex; font-size: 13px; font-weight: 800; height: 36px; justify-content: center; width: 36px; }
.participant-row > span:nth-child(2) { display: grid; }
.participant-row strong { font-size: 12px; }
.participant-row small { color: var(--muted); font-size:12px; }
.participant-row i { background: var(--faint); border-radius: 50%; height: 7px; width: 7px; }
.participant-row i.is-online { background: var(--green); box-shadow: 0 0 0 3px color-mix(in srgb,var(--green) 15%,transparent); }
.participant-copy-link { margin-top: 10px; width: 100%; }
.room-page .storage-forms { display: grid; gap: 14px; }
.room-page .contents-panel .panel-heading { border-bottom: 1px solid var(--line); margin-bottom: 16px; padding-bottom: 16px; }
.room-page .files, .room-page .text-list { display: grid; gap: 10px; }

@media (max-width: 1180px) {
  .room-page .workspace-grid { grid-template-columns: minmax(200px,.45fr) minmax(320px,.75fr) minmax(0,1fr); }
}
@media (max-width: 980px) {
  .room-page .workspace-grid { grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr); }
  .room-page .participants-panel { grid-column: 1; }
  .room-page .storage-panel { grid-column: 1; }
  .room-page .contents-panel { grid-column: 2; grid-row: 1 / span 2; }
}
@media (max-width: 860px) {
  .guide-page .seo-section, .resources-page .seo-section, .blog-index-page .seo-section, .faq-page .seo-section { margin-block: 15px; }
  .guide-page .faq-list > article { min-height: 0; padding: 18px; }
  .related-topic-links .feature-grid { gap: 11px; }
  .related-topic-links .resource-card { min-height: 0; padding: 19px; }
  .blog-index-page .reference-search-panel, .faq-page .reference-search-panel { margin-block: 16px 22px; padding: 15px; }
  .quick-share-result, .quick-request-result { margin-top: 16px; padding: 22px; }
  .quick-result-grid { grid-template-columns: 1fr; }
  .room-page .workspace-grid { display: grid; grid-template-columns: 1fr; }
  .room-page .storage-panel { grid-column: 1; grid-row: 1; }
  .room-page .contents-panel { grid-column: 1; grid-row: 2; }
  .room-page .participants-panel { grid-column: 1; grid-row: 3; }
  .room-page .participants-panel, .room-page .storage-panel, .room-page .contents-panel { min-height: 0; }
}
@media (max-width: 560px) {
  .quick-share-result, .quick-request-result { padding: 17px 14px; }
  .quick-result-top { align-items: stretch; grid-template-columns: 1fr; }
  .quick-expiry { width: 100%; }
  .quick-link-row, .quick-send-room { grid-template-columns: 1fr; }
  .quick-link-row::before { height: 54px; width: 100%; }
  .quick-link-row button, .quick-send-room button { width: 100%; }
}

/* Final cascade guards for the rebuilt transactional screens. */
body .quick-ready-page.quick-share-result,
body .quick-ready-page.quick-request-result { background: transparent; border: 0; box-shadow: none; display: grid; gap: 14px; margin: 22px auto 46px; max-width: 1240px; padding: 0; width: 100%; }
body.payment-page .checkout-page.payment-reference-layout { align-items: start; display: grid; gap: 24px; grid-template-columns: minmax(270px,.72fr) minmax(500px,1.35fr) minmax(230px,.58fr); margin: 28px auto 55px; max-width: 1380px; width: 100%; }
body.payment-page .payment-reference-layout .checkout-flow { min-width: 0; width: 100%; }
body.payment-page .payment-reference-layout .payment-panel { min-height: 580px; padding: 0 20px 24px; width: 100%; }
.chat-route-suggestion { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; bottom: 92px; box-shadow: 0 20px 60px rgba(0,0,0,.28); color: var(--text); display: grid; gap: 12px; grid-template-columns: minmax(0,1fr) auto auto; max-width: 440px; opacity: 0; padding: 15px; position: fixed; right: 22px; transform: translateY(14px); transition: opacity .22s ease, transform .22s ease; width: calc(100% - 44px); z-index: 2147481999; }
.chat-route-suggestion.show { opacity: 1; transform: none; }
.chat-route-suggestion > span { display: grid; gap: 3px; }
.chat-route-suggestion small { color: var(--muted); line-height: 1.35; }
.chat-route-suggestion .button { min-height: 40px; padding: 9px 16px; }
.chat-route-dismiss { align-items: center; background: transparent!important; border: 0!important; color: var(--muted)!important; display: flex; font-size: 23px; height: 34px; justify-content: center; min-height: 0!important; padding: 0!important; width: 30px; }
@media (max-width: 1120px) {
  body.payment-page .checkout-page.payment-reference-layout { grid-template-columns: minmax(250px,.7fr) minmax(480px,1.3fr); }
}
@media (max-width: 820px) {
  body.payment-page .checkout-page.payment-reference-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  body .quick-ready-page.quick-share-result,body .quick-ready-page.quick-request-result { margin-top: 14px; padding: 0; }
  body.payment-page .payment-reference-layout .payment-panel { min-height: 500px; padding-inline: 10px; }
  .chat-route-suggestion { bottom: 82px; grid-template-columns: 1fr auto; left: 12px; right: 12px; width: auto; }
  .chat-route-suggestion .button { grid-column: 1 / -1; grid-row: 2; width: 100%; }
  .chat-route-dismiss { grid-column: 2; grid-row: 1; }
}

/* Contact form rhythm: separate the explanatory copy from the first field row. */
.contact-page .contact-panel .panel-heading{margin-bottom:22px}
.contact-page .contact-panel form{gap:16px}

/* Room controls and Paddle theme corrections. */
.room-page .file-card{grid-template-columns:18px minmax(0,1fr) auto;column-gap:14px}
.room-page .file-card:not(:has(.room-file-select)){grid-template-columns:minmax(0,1fr) auto}
.room-page .room-file-select{display:grid;place-items:center;width:18px;min-width:18px;margin:0}
.room-page .room-file-select input,.room-page .room-select-all input{appearance:none;width:15px;min-width:15px;height:15px;min-height:15px;margin:0;padding:0;border:1px solid var(--line);border-radius:4px;background:var(--surface-2)}
.room-page .room-file-select input:checked,.room-page .room-select-all input:checked{border-color:var(--red);background:var(--red)}
.room-page .room-file-select input:checked:after,.room-page .room-select-all input:checked:after{content:'✓';display:grid;place-items:center;color:#fff;font-size:12px;line-height:13px}
.room-page .file-card>.actions,.room-page .text-actions,.room-page .room-bulk-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.room-page .file-card>.actions{justify-content:flex-end;margin-left:8px}
.room-page .file-card>.actions form,.room-page .text-actions form{display:inline-flex;margin:0}
.room-page .file-card>.actions .button,.room-page .file-card>.actions button,.room-page .text-actions .button,.room-page .text-actions button,.room-page .room-bulk-actions .button{min-height:32px;padding:7px 11px;font-size:12px}
.room-page .room-select-all{display:inline-flex;align-items:center;gap:6px;margin-right:4px;font-size:12px}
.payment-page .paddle-checkout iframe{background:var(--surface)!important;color-scheme:light!important}
:root[data-theme='dark'] .payment-page .paddle-checkout iframe,:root[data-theme='dark'] .paddle-checkout-shell iframe{background:var(--surface)!important;color-scheme:dark!important}
@media(max-width:700px){.room-page .file-card,.room-page .file-card:not(:has(.room-file-select)){grid-template-columns:18px minmax(0,1fr)}.room-page .file-card>.actions{grid-column:2;justify-content:flex-start;margin-left:0}}

/* Shared room content reads like a conversation. */
.room-page .text-list,.room-page .files{align-items:start}
.room-page .chat-bubble{position:relative;width:fit-content;max-width:min(88%,680px);min-height:0;padding:12px 12px 10px;border:0;border-radius:14px;box-shadow:0 7px 20px rgba(7,12,20,.09);transform:none}
.room-page .chat-bubble:hover{transform:none}
.room-page .chat-bubble.is-own{justify-self:end;background:var(--surface-2);border:1px solid var(--line);border-bottom-right-radius:4px}
.room-page .chat-bubble.is-received{justify-self:start;color:#fff;background:var(--red);border-bottom-left-radius:4px}
.room-page .chat-bubble .content-row{display:grid;gap:10px}
.room-page .chat-bubble .bubble-body{min-width:0}
.room-page .bubble-meta{margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:750;line-height:1.35}
.room-page .is-received .bubble-meta,.room-page .is-received .file-meta{color:rgba(255,255,255,.78)}
.room-page .chat-bubble .text-copy-source{margin:0;color:inherit;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.55}
.room-page .chat-bubble.is-received .file-name{color:#fff}
.room-page .chat-bubble .text-actions,.room-page .chat-bubble .bubble-actions{display:flex;align-items:center;align-self:end;justify-content:flex-end;gap:7px;margin:8px 0 0}
.room-page .chat-bubble .text-actions form,.room-page .chat-bubble .bubble-actions form{display:inline-flex;margin:0}
.room-page .bubble-action,.room-page .chat-bubble .bubble-action{display:inline-grid;place-items:center;width:30px;min-width:30px;height:30px;min-height:30px;margin:0;padding:0;color:var(--text);border:1px solid var(--line);border-radius:999px;background:var(--surface);box-shadow:none;cursor:pointer}
.room-page .chat-bubble .text-actions button.bubble-action,.room-page .chat-bubble .bubble-actions button.bubble-action{width:30px;min-width:30px;height:30px;min-height:30px;padding:0}
.room-page .bubble-action:hover{color:var(--red);border-color:var(--red);transform:translateY(-1px)}
.room-page .is-received .bubble-action{color:#fff;border-color:rgba(255,255,255,.38);background:rgba(20,20,24,.2)}
.room-page .is-received .bubble-action:hover{border-color:#fff;background:rgba(20,20,24,.35)}
.room-page .bubble-action.is-danger{color:var(--red)}
.room-page .bubble-action.is-confirmed{color:var(--green);border-color:var(--green)}
.room-page .is-received .bubble-action.is-danger{color:#fff}
.room-page .is-received .bubble-action.is-confirmed{color:#fff;border-color:#fff;background:rgba(20,20,24,.35)}
.room-page .bubble-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.room-page .file-card.chat-bubble{grid-template-columns:18px minmax(0,1fr);align-items:start}
.room-page .file-card.chat-bubble:not(:has(.room-file-select)){grid-template-columns:minmax(0,1fr)}
.room-page .file-card.chat-bubble>.bubble-actions{grid-column:1/-1;justify-content:flex-end;margin-left:0}
.room-page .file-card.chat-bubble:has(.room-file-select)>.bubble-actions{grid-column:2}
.room-page .is-received .room-file-select input{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.12)}
.room-page #text-section>.section-label{margin-bottom:12px}
.room-page #files-section{margin-top:18px}
.room-page .room-files-toolbar{margin-bottom:12px}
@media(max-width:700px){.room-page .chat-bubble{width:fit-content;max-width:94%}.room-page .file-card.chat-bubble,.room-page .file-card.chat-bubble:not(:has(.room-file-select)){grid-template-columns:18px minmax(0,1fr)}.room-page .file-card.chat-bubble:not(:has(.room-file-select)){grid-template-columns:minmax(0,1fr)}.room-page .file-card.chat-bubble>.bubble-actions{grid-column:1/-1;justify-content:flex-end}.room-page .file-card.chat-bubble:has(.room-file-select)>.bubble-actions{grid-column:2}}

/* Room chat composer, participant colors, and project-wide readable type. */
body { font-size: 12px; }
body :where(p, a, button, input, textarea, select, label, small, span, code, pre, li) { font-size: 12px; }
body :where(h1, h2, h3, h4, h5, h6), .panel-heading h2, .room-heading-copy h1, .quick-ready-status h1, .quick-card-heading h2 { font-size: 16px !important; line-height: 1.3; }
.brand { font-size: 16px; }

.room-page .workspace-grid { align-items: stretch; grid-template-columns: minmax(220px,280px) minmax(0,1fr); grid-template-rows: minmax(480px,auto) auto; }
.room-page .participants-panel { grid-column: 1; grid-row: 1 / span 2; }
.room-page .contents-panel { display: flex; flex-direction: column; grid-column: 2; grid-row: 1; min-height: 520px; }
.room-page .room-composer-panel { background: transparent; border: 0; bottom: 10px; box-shadow: none; grid-column: 2; grid-row: 2; min-height: 0; padding: 0; position: sticky; z-index: 8; }
.room-page .room-composer-panel > .panel-heading { display: none; }
.room-page .storage-forms { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: 0 14px 35px rgba(15,18,24,.14); display: grid; gap: 4px; grid-template-columns: 54px minmax(0,1fr); padding: 7px; }
.room-page .room-attachment-form { align-content: center; background: transparent; border: 0; display: grid; min-width: 0; padding: 0; }
.room-page .room-attachment-form .tool-card-title,
.room-page .room-attachment-form > .actions { display: none; }
.room-page .room-attachment-form .upload-dropzone { margin: 0; }
.room-page .room-attachment-form .upload-dropzone label { align-items: center; background: transparent; border: 0; display: flex; justify-content: center; min-height: 50px; padding: 0; }
.room-page .room-attachment-form .upload-dropzone label::before { display: none; }
.room-page .room-attachment-form .upload-dropzone label > strong,
.room-page .room-attachment-form .upload-dropzone label > span:not(.composer-attach-icon),
.room-page .room-attachment-form .selected-files { display: none; }
.composer-attach-icon { align-items: center; background: var(--red-soft); border-radius: 50%; color: var(--red); display: flex; height: 42px; justify-content: center; transition: background .2s ease,color .2s ease,transform .2s ease; width: 42px; }
.composer-attach-icon svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 2; width: 20px; }
.composer-attach-icon.has-files,.composer-attach-icon.is-uploading { animation: composer-pulse .8s ease-in-out infinite alternate; background: var(--red); color: #fff; }
.composer-attach-icon.is-complete { animation: none; background: var(--green); color: transparent; position: relative; }
.composer-attach-icon.is-complete::after { color: #fff; content: '\2713'; font-size: 19px; font-weight: 900; position: absolute; }
@keyframes composer-pulse { to { transform: scale(.9); opacity: .75; } }
.room-page .text-box { align-items: center; background: var(--surface-2); border: 1px solid var(--line); border-radius: 13px; display: grid; gap: 7px; grid-template-columns: minmax(0,1fr) auto; padding: 4px; }
.room-page .text-box .tool-card-title { display: none; }
.room-page .text-box .field { margin: 0; }
.room-page .text-box textarea { background: transparent; border: 0; box-shadow: none; line-height: 1.45; min-height: 46px; padding: 14px 11px 7px; resize: none; }
.room-page .text-box textarea:focus { border: 0; box-shadow: none; }
.room-page .text-box > .actions { margin: 0; }
.room-page .text-box > .actions button { border-radius: 999px; height: 40px; min-height: 40px; padding: 8px 16px; }
.room-page .storage-forms { position: relative; }
.room-page .room-attachment-form.is-uploading { align-content: center; min-height: 0; }
.room-page .upload-spinner-state[hidden] { display: none !important; }
.room-page .upload-spinner-state:not([hidden]) { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; bottom: calc(100% + 10px); box-shadow: 0 12px 28px rgba(0,0,0,.18); display: grid; gap: 8px; left: 0; padding: 12px 14px; position: absolute; right: 0; text-align: left; z-index: 10; }
.room-page .upload-spinner-copy { display: flex; gap: 12px; justify-content: space-between; max-width: none; min-width: 0; }
.room-page .upload-spinner-copy > strong { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-page .upload-spinner-copy .upload-progress-text { color: var(--muted); flex: 0 0 auto; }
.room-page .upload-spinner-ring { aspect-ratio: auto; background: transparent; border-radius: 0; display: block; height: 34px; overflow: visible; position: relative; width: 100%; }
.room-page .upload-spinner-ring::before { background: var(--surface-3); border: 0; border-radius: 999px; bottom: 0; content: ''; height: 8px; inset: auto 0 0; position: absolute; }
.room-page .upload-spinner-ring::after { animation: none; background: linear-gradient(90deg,var(--red-dark),var(--red),#ff6879); border: 0; border-radius: 999px; bottom: 0; content: ''; height: 8px; inset: auto auto 0 0; position: absolute; transition: width .18s ease; width: calc(var(--upload-progress) * 1%); }
.room-page .upload-spinner-center { align-items: center; display: flex; flex-direction: row; gap: 10px; justify-content: flex-end; max-width: none; position: static; width: 100%; }
.room-page .upload-spinner-center strong, .room-page .upload-spinner-center span, .room-page .upload-spinner-center small { color: var(--muted); font-size: 12px; font-weight: 750; line-height: 1.3; }
.room-page .upload-spinner-center strong { color: var(--red); font-variant-numeric: tabular-nums; order: 3; }
/* Room uploads appear immediately in the conversation; progress overlays the pending file card. */
.room-page .room-attachment-form > .upload-spinner-state { display: none !important; }
.room-page .file-card.is-pending-upload { min-width: min(100%, 320px); overflow: hidden; isolation: isolate; }
.room-page .file-card.is-pending-upload > .bubble-body { opacity: .32; }
.room-page .room-upload-card-overlay { align-content: center; background: color-mix(in srgb, var(--surface) 84%, transparent); display: grid; gap: 9px; inset: 0; padding: 12px 14px; position: absolute; z-index: 4; }
.room-page .room-upload-card-status { align-items: center; display: flex; gap: 10px; justify-content: space-between; min-width: 0; }
.room-page .room-upload-card-status strong { color: var(--red); flex: 0 0 auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.room-page .room-upload-card-status span { color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-page .room-upload-card-track { background: var(--surface-3); border-radius: 999px; display: block; height: 8px; overflow: hidden; width: 100%; }
.room-page .room-upload-card-track i { background: linear-gradient(90deg, var(--red-dark), var(--red), #ff6879); border-radius: inherit; display: block; height: 100%; transition: width .16s ease; width: 0; }
.room-page .file-card.is-upload-failed .room-upload-card-overlay { background: color-mix(in srgb, var(--redsoft) 90%, transparent); }
.room-page .file-card.is-upload-failed .room-upload-card-track i { background: var(--red); }

.participant-avatar { background: color-mix(in srgb,var(--member-color,var(--red)) 15%,var(--surface)); color: var(--member-color,var(--red)); }
.participant-colors { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 12px; }
.participant-colors summary { color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 750; }
.participant-color-list { display: grid; gap: 7px; margin-top: 10px; }
.participant-colors form { margin: 0; }
.participant-colors label { align-items: center; display: grid; gap: 8px; grid-template-columns: minmax(0,1fr) 38px; }
.participant-colors label > span { align-items: center; display: flex; gap: 7px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.participant-colors label i { border: 2px solid var(--surface); border-radius: 50%; box-shadow: 0 0 0 1px var(--line); flex: 0 0 13px; height: 13px; width: 13px; }
.participant-colors input[type='color'] { border: 1px solid var(--line); border-radius: 7px; cursor: pointer; height: 30px; min-height: 30px; padding: 2px; width: 38px; }

.room-page .chat-bubble { display: grid !important; opacity: 1 !important; padding: 12px 12px 11px; visibility: visible !important; }
.room-page .chat-bubble.is-own { background: #111318; border-color: #292d36; color: #fff; }
.room-page .chat-bubble.is-own .file-name { color: #fff; }
.room-page .chat-bubble.is-own .bubble-meta,
.room-page .chat-bubble.is-own .file-meta { color: rgba(255,255,255,.72); }
.room-page .chat-bubble.is-received { background: var(--member-color,#7f1d1d); color: #fff; }
.room-page .chat-bubble .content-row { display: block; }
.room-page .chat-bubble .bubble-body { padding-top: 30px; }
.room-page .chat-bubble .bubble-actions,
.room-page .chat-bubble .text-actions { margin: 0; position: absolute; right: 9px; top: 8px; z-index: 2; }
.room-page .chat-bubble .bubble-meta { left: 12px; margin: 0; max-width: calc(100% - 142px); overflow: hidden; position: absolute; text-overflow: ellipsis; top: 15px; white-space: nowrap; }
.room-page .file-card.chat-bubble,
.room-page .file-card.chat-bubble:not(:has(.room-file-select)) { grid-template-columns: minmax(0,1fr); padding-left: 12px; }
.room-page .file-card.chat-bubble:has(.room-file-select) { grid-template-columns: 18px minmax(0,1fr); }
.room-page .file-card.chat-bubble:has(.room-file-select) .bubble-meta { left: 42px; }
.room-page .file-card.chat-bubble > .bubble-actions,
.room-page .file-card.chat-bubble:has(.room-file-select) > .bubble-actions { grid-column: auto; }
.room-page .is-own .bubble-action { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff; }

.quick-download-page .shell, .request-upload-page .shell { display: block; max-width: 1180px; min-height: calc(100dvh - var(--header-height) - 120px); padding-block: clamp(24px,6vh,70px); width: 100%; }
.quick-download-card, .request-uploader, .quick-expired { box-sizing: border-box; margin: 0 auto; max-width: 720px; min-height: 420px; padding: clamp(28px,6vw,60px); width: min(100%,720px); }
.quick-download-card, .request-uploader { align-content: center; display: grid; gap: 16px; text-align: center; }
.quick-download-card h1, .request-uploader h1, .quick-expired h1 { font-size: 16px !important; margin: 0; }
.quick-download-card > p, .request-uploader > p { margin: 0 auto; max-width: 560px; }
.quick-download-meta { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0; }
.quick-download-meta > span { background: var(--surface-2); border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; }
.request-upload-form { margin: 4px auto 0; max-width: 520px; width: 100%; }
.request-upload-actions { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.request-uploader > small,.quick-download-card > small { color: var(--muted); }

@media (max-width: 860px) {
  .room-page .workspace-grid { grid-template-columns: 1fr; grid-template-rows: auto; }
  .room-page .contents-panel { grid-column: 1; grid-row: 1; min-height: 52dvh; }
  .room-page .storage-panel { bottom: 6px; grid-column: 1; grid-row: 2; }
  .room-page .participants-panel { grid-column: 1; grid-row: 3; }
}
@media (max-width: 560px) {
  body { font-size: 12px; }
  .room-page .chat-bubble { max-width: 100%; min-width: min(100%,280px); }
  .room-page .storage-forms { grid-template-columns: 68px minmax(0,1fr); }
  .room-page .room-attachment-form .selected-files { max-width: 58px; }
  .room-page .chat-bubble .bubble-action { height: 28px; min-height: 28px; min-width: 28px; width: 28px; }
  .room-page .chat-bubble .bubble-meta { max-width: calc(100% - 132px); }
  .quick-download-page .shell, .request-upload-page .shell { min-height: auto; padding: 14px 12px 28px; }
  .quick-download-card, .request-uploader, .quick-expired { max-width: none; padding: 24px 16px; width: 100%; }
  .request-upload-actions { grid-template-columns: 1fr; }
  .quick-download-button, .request-upload-actions button { width: 100%; }
}

/* Keep the mobile Room composer fully inside the viewport. */
.room-page .workspace-grid,.room-page .contents-panel,.room-page .room-composer-panel,.room-page .storage-forms,.room-page .text-box,.room-page .text-box .field{box-sizing:border-box;max-width:100%;min-width:0;width:100%}
.room-page .text-box textarea{box-sizing:border-box;min-width:0;width:100%}
@media(max-width:560px){
  .room-page .storage-forms{grid-template-columns:54px minmax(0,1fr)}
  .room-page .text-box{grid-template-columns:minmax(0,1fr) 52px}
  .room-page .text-box>.actions{min-width:0;width:52px}
  .room-page .text-box>.actions button{min-width:52px;padding:8px 7px;width:52px}
}
.room-page .text-box{display:block;padding:4px 62px 4px 4px;position:relative}
.room-page .text-box>.actions{display:block;margin:0;position:absolute;right:6px;top:50%;transform:translateY(-50%);width:52px}
.room-page .text-box>.actions button{min-width:52px;padding:8px 7px;width:52px}
@media(max-width:560px){.room-page .text-box{display:block;padding-right:62px}.room-page .text-box>.actions{right:5px;width:52px}}
.room-page .storage-forms{display:flex;gap:4px;overflow:hidden}
.room-page .room-attachment-form{flex:0 0 54px;width:54px}
.room-page .text-box{flex:1 1 0;max-width:none;min-width:0;overflow:hidden;width:auto}
.room-page .room-shell-modern{box-sizing:border-box;max-width:100%;min-width:0;overflow:hidden;width:100%}
@media(max-width:560px){
  .room-page .room-header-modern{max-width:100%;min-width:0;overflow:hidden;width:100%}
  .room-page .room-header-actions{grid-template-columns:repeat(2,minmax(0,1fr));min-width:0;width:100%}
  .room-page .room-header-actions>*{box-sizing:border-box;min-width:0;width:100%}
  .room-page .workspace-grid,.room-page .workspace-grid>*{max-width:100%;min-width:0;width:100%}
  .room-page .room-code-card .actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
  .room-page .room-code-card .actions>*{box-sizing:border-box;min-width:0;width:100%}
}
/* Final readable type scale and joined homepage room credentials. */
body{font-size:12px!important}
body :where(p,a,button,input,textarea,select,label,small,li,td,th,dt,dd,time,em,code,pre){font-size:12px!important}
body :where(h1,h2,h3,h4,h5,h6),body :where(h1,h2,h3,h4,h5,h6) *{font-size:16px!important}
table th,.comparison-table th{text-transform:capitalize!important;letter-spacing:normal}
.home-join-card>.home-join-copy{display:grid;grid-column:1/-1}
.home-join-card>.home-join-fields{display:grid;grid-column:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;min-width:0}
.home-join-fields label{min-width:0;border-radius:0}
.home-join-fields .home-join-code{border-radius:7px 0 0 7px}
.home-join-fields .home-join-name{border-left:0;border-radius:0 7px 7px 0}
.home-join-fields label>span{display:grid;place-items:center}
.home-join-fields svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.room-page .participant-avatar{background:var(--member-color,var(--red));color:#fff}
@media(max-width:560px){
  .home-join-card{grid-template-columns:1fr}
  .home-join-card>.home-join-fields{grid-column:1}
  .home-join-card>button{grid-column:1;width:100%}
}
/* Quick Share selected-file state. The label remains the native file-input trigger. */
.quick-share-page .upload-dropzone label[data-quick-file-label]::before{display:none}
.quick-file-state-icon{display:grid;place-items:center;width:52px;height:52px;margin-bottom:10px;color:var(--red);border-radius:14px;background:var(--red-soft);transition:transform .18s ease,background .18s ease,color .18s ease}
.quick-file-state-icon svg{width:27px;height:27px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.quick-file-selected-icon{display:none}
.quick-share-page [data-quick-file-label].has-files{border-style:solid;border-color:var(--green);background:color-mix(in srgb,var(--green) 8%,var(--surface-2))}
.quick-share-page [data-quick-file-label].has-files .quick-file-state-icon{color:#fff;background:var(--green);transform:scale(1.04)}
.quick-share-page [data-quick-file-label].has-files .quick-file-empty-icon{display:none}
.quick-share-page [data-quick-file-label].has-files .quick-file-selected-icon{display:block}
.quick-share-page [data-quick-file-label].has-files [data-quick-file-name]{color:var(--text);font-weight:750}

/* One chronological room chat with its composer inside the content panel. */
.room-page .workspace-grid{align-items:stretch;grid-template-columns:minmax(220px,280px) minmax(0,1fr);grid-template-rows:auto}
.room-page .participants-panel{grid-column:1;grid-row:1;min-height:620px}
.room-page .contents-panel{display:flex;grid-column:2;grid-row:1;flex-direction:column;min-height:620px;overflow:hidden}
.room-page .contents-panel>.panel-heading{align-items:flex-start;flex:0 0 auto}
.room-content-header-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-left:auto}
.room-content-header-actions form{display:flex;margin:0}
.room-content-header-actions [data-download-all]{min-height:34px;white-space:nowrap}
.room-chat-scroll{flex:1 1 auto;min-height:360px;max-height:min(64dvh,720px);padding:4px 6px 18px;overflow-anchor:none;overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable}
.room-chat-stream{display:flex;flex-direction:column;gap:12px;min-height:100%}
.room-page #text-section,.room-page #files-section{display:none!important}
.room-page .room-composer-panel{position:sticky;right:auto;bottom:0;left:auto;z-index:8;flex:0 0 auto;width:100%;min-height:0;margin:0;padding:10px 0 0;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--surface);box-shadow:0 -12px 24px color-mix(in srgb,var(--surface) 88%,transparent)}
.room-page .room-composer-panel>.panel-heading{display:none}
.room-page .room-composer-panel .storage-forms{width:100%}
.room-page .room-chat-stream .chat-bubble{display:block!important;align-self:flex-start;justify-self:auto;width:auto;min-width:240px;max-width:min(76%,680px);margin:0;padding:11px 12px;border-radius:14px}
.room-page .room-chat-stream .chat-bubble.is-own{align-self:flex-end;border-bottom-right-radius:4px}
.room-page .room-chat-stream .chat-bubble.is-received{align-self:flex-start;border-bottom-left-radius:4px}
.room-page .room-chat-stream .chat-bubble .content-row{display:block}
.room-page .room-chat-stream .chat-bubble .bubble-body{display:flex;flex-direction:column;min-width:0;padding-top:34px}
.room-page .room-chat-stream .chat-bubble .text-copy-source{order:1;min-width:0;margin:0;overflow-wrap:anywhere}
.room-page .room-chat-stream .chat-bubble .file-name{order:1;padding-right:4px;overflow-wrap:anywhere}
.room-page .room-chat-stream .chat-bubble .file-meta{order:2;margin-top:3px}
.room-page .room-chat-stream .chat-bubble .bubble-meta{position:static;order:3;display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:none;margin:9px 0 0;padding-top:8px;overflow:visible;border-top:1px solid color-mix(in srgb,currentColor 18%,transparent);font-weight:650;line-height:1.3;white-space:normal}
.room-page .room-chat-stream .chat-bubble .bubble-meta strong,.room-page .room-chat-stream .chat-bubble .bubble-meta time{min-width:0;color:inherit;font-size:12px;font-weight:650}
.room-page .room-chat-stream .chat-bubble .bubble-meta time{opacity:.72;text-align:right;white-space:nowrap}
.room-page .room-chat-stream .chat-bubble .text-actions,.room-page .room-chat-stream .chat-bubble .bubble-actions{position:absolute;top:8px;right:9px;display:flex;gap:6px;margin:0}
.room-page .room-chat-stream .room-file-select{display:none!important}
@media(max-width:900px){
  .room-page .workspace-grid{grid-template-columns:1fr}
  .room-page .contents-panel{grid-column:1;grid-row:1;min-height:68dvh}
  .room-page .participants-panel{grid-column:1;grid-row:2;min-height:0}
  .room-chat-scroll{max-height:none}
}
@media(max-width:560px){
  .room-content-header-actions{align-items:flex-end;flex-direction:column;gap:6px}
  .room-page .room-chat-stream .chat-bubble{min-width:210px;max-width:92%}
  .room-page .room-chat-stream .chat-bubble .bubble-meta{align-items:flex-start;flex-direction:column;gap:3px}
  .room-page .room-chat-stream .chat-bubble .bubble-meta time{text-align:left}
}
@media(max-width:560px){
  .room-page .contents-panel>.panel-heading{align-items:stretch;flex-direction:column;gap:10px}
  .room-content-header-actions{align-items:center;flex-direction:row;justify-content:space-between;margin-left:0;min-width:0;width:100%}
  .room-content-header-actions .live-status{min-width:0}
  .room-content-header-actions form{flex:0 0 auto}
  .room-chat-scroll{padding-inline:0}
  .room-page .room-chat-stream .chat-bubble{min-width:min(210px,94%)}
}
/* Room entry, participant text colors, and paste-friendly request surfaces. */
.room-page .access-gate.join-gate{
  box-sizing:border-box;
  display:grid;
  gap:20px;
  width:min(100%,720px)!important;
  max-width:720px!important;
  margin:32px auto!important;
  padding:30px!important;
  overflow:hidden;
  border-radius:18px;
  text-align:left;
}
.room-page .access-gate.join-gate:before{height:4px}
.access-gate-head{display:flex;align-items:center;gap:15px}
.access-gate-head>div{min-width:0}
.room-page .access-gate .access-gate-icon{display:grid;flex:0 0 52px;place-items:center;width:52px;height:52px;margin:0;border-radius:14px;background:var(--red-soft);color:var(--red)}
.access-gate-icon svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.room-page .access-gate h2{margin:3px 0 0;font-size:16px!important}
.room-page .access-gate>p{max-width:570px;margin:0;color:var(--muted);line-height:1.6}
.access-gate-form{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:10px}
.access-gate-form .field{margin:0}
.access-gate-form button{min-width:150px}
.room-page .access-gate>footer{display:flex;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid var(--line);color:var(--muted)}
.room-page .access-gate>footer strong{color:var(--red);font-family:ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.04em}

.participant-colors label{align-items:center;grid-template-columns:minmax(0,1fr) auto}
.participant-color-pickers{display:flex!important;align-items:center;flex-wrap:nowrap;gap:6px;justify-content:flex-end;overflow:visible!important}
.participant-color-pickers input[type=color]{flex:0 0 34px;width:34px;height:30px;min-height:30px;padding:2px}
.participant-color-pickers button{min-height:30px;padding:5px 8px}
.room-page .room-chat-stream .chat-bubble{color:var(--member-text-color,#fff)}
.room-page .room-chat-stream .chat-bubble.is-own{color:var(--member-text-color,#fff)}
.room-page .room-chat-stream .chat-bubble .file-name{color:inherit!important}
.room-page .room-chat-stream .chat-bubble .file-meta,
.room-page .room-chat-stream .chat-bubble .bubble-meta{color:inherit;opacity:.78}
.room-page .room-chat-stream .chat-bubble .text-copy-source{color:inherit}

.quick-share-page [data-quick-file-label]:after{content:"You can also paste copied files";display:block;margin-top:7px;color:var(--muted);font-size:12px;font-weight:650}
.quick-share-page [data-quick-file-label].has-files:after{content:"Paste more files or click to choose different files"}

.request-upload-page .shell{display:grid;align-items:center;min-height:calc(100dvh - var(--header-height) - 150px)}
.request-upload-page .request-uploader{
  box-sizing:border-box;
  display:grid;
  gap:18px;
  width:min(100%,760px);
  max-width:760px;
  min-height:0;
  margin:28px auto;
  padding:30px;
  border:1px solid var(--line);
  border-radius:20px;
  text-align:left;
}
.request-upload-hero{display:flex;align-items:center;gap:16px}
.request-upload-hero>div{min-width:0}
.request-upload-hero .request-upload-icon{display:grid;flex:0 0 58px;place-items:center;width:58px;height:58px;margin:0;border-radius:16px;background:var(--red-soft);color:var(--red)}
.request-upload-icon svg{width:29px;height:29px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.request-upload-hero h1{margin:3px 0 4px!important;font-size:16px!important}
.request-upload-hero p{margin:0;color:var(--muted)}
.request-uploader .quick-download-meta{justify-content:flex-start;margin:0}
.request-upload-form{display:grid;gap:12px;width:100%;max-width:none;margin:0}
.request-file-dropzone{display:grid;place-items:center;min-height:210px;padding:26px;border:1.5px dashed color-mix(in srgb,var(--red) 58%,var(--line));border-radius:16px;background:color-mix(in srgb,var(--red) 4%,var(--surface-2));cursor:pointer;text-align:center;transition:border-color .18s ease,background .18s ease,transform .18s ease}
.request-file-dropzone:hover{border-color:var(--red);background:color-mix(in srgb,var(--red) 8%,var(--surface-2));transform:translateY(-1px)}
.request-file-dropzone>span{display:grid;place-items:center;width:50px;height:50px;margin-bottom:9px;border-radius:14px;background:var(--red);color:#fff}
.request-file-dropzone svg{width:25px;height:25px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.request-file-dropzone strong,.request-file-dropzone small,.request-file-dropzone em{display:block}
.request-file-dropzone small{margin-top:4px;color:var(--muted)}
.request-file-dropzone em{margin-top:11px;padding:5px 9px;border-radius:999px;background:var(--surface);color:var(--muted);font-style:normal}
.request-upload-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
.request-upload-note{display:flex;align-items:center;justify-content:center;gap:7px;margin:0!important;color:var(--muted);text-align:center}
.request-upload-note span{color:var(--green);font-size:20px!important}
.request-upload-success{text-align:center}
@media(max-width:560px){
  .room-page .access-gate.join-gate{gap:16px;margin:18px auto!important;padding:20px 16px!important}
  .access-gate-form{grid-template-columns:1fr}
  .access-gate-form button{width:100%}
  .request-upload-page .request-uploader{gap:15px;margin:12px auto;padding:20px 15px;border-radius:16px}
  .request-upload-hero{align-items:flex-start}
  .request-upload-hero .request-upload-icon{flex-basis:48px;width:48px;height:48px}
  .request-file-dropzone{min-height:185px;padding:20px 14px}
  .request-upload-actions{grid-template-columns:1fr}
}

/* Compact homepage benefit cards with consistent, scalable icons. */
.home-benefit-row > span{
  align-items:center;
  column-gap:14px;
  grid-template-columns:46px minmax(0,1fr);
  min-height:82px;
  padding:13px 16px;
}
.home-benefit-icon{
  display:grid;
  place-items:center;
  width:46px;
  height:46px;
  border-radius:13px;
  background:color-mix(in srgb,var(--red) 10%,var(--surface-2));
  color:var(--text);
}
.home-benefit-icon svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.home-benefit-copy{display:grid;align-content:center;gap:3px;min-width:0;line-height:1.25}
.home-benefit-copy strong,.home-benefit-copy small{display:block;margin:0}
.home-benefit-row > span:hover .home-benefit-icon{animation:home-icon-pop .34s ease;color:var(--red)}

/* Inline temporary-tool upload states */
.quick-share-form .upload-dropzone,
.request-upload-form .request-file-dropzone{position:relative;overflow:hidden}
.quick-share-form .upload-dropzone{min-height:160px}
.quick-inline-upload-state{
  position:absolute;
  inset:0;
  z-index:4;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:inherit;
  background:var(--surface);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--red) 4%,transparent);
  text-align:left;
}
.quick-inline-upload-state[hidden]{display:none!important}
.quick-inline-upload-state .upload-spinner-state{
  display:grid;
  grid-template-columns:minmax(0,1fr) 112px;
  align-items:center;
  gap:20px;
  width:100%;
  max-width:470px;
}
.quick-inline-upload-state .upload-spinner-copy{display:grid;gap:6px;min-width:0;order:1}
.quick-inline-upload-state .upload-spinner-kicker{color:var(--red);font-size:11px!important;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.quick-inline-upload-state .upload-spinner-copy>strong{display:block;max-width:100%;overflow:hidden;color:var(--text);font-size:13px!important;text-overflow:ellipsis;white-space:nowrap}
.quick-inline-upload-state .upload-progress-text{display:block;overflow:hidden;color:var(--muted);text-overflow:ellipsis;white-space:nowrap}
.quick-inline-upload-state .upload-spinner-details{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin:2px 0}
.quick-inline-upload-state .upload-spinner-details>span{display:grid;gap:1px;min-width:0;padding:6px 8px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}
.quick-inline-upload-state .upload-spinner-details small{color:var(--muted);font-size:10px!important;line-height:1.2}
.quick-inline-upload-state .upload-spinner-details b{overflow:hidden;color:var(--text);font-size:11px!important;font-variant-numeric:tabular-nums;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
.quick-inline-upload-state .upload-spinner-ring{order:2;display:flex;flex:0 0 112px;width:112px!important;height:112px!important;min-width:112px;min-height:112px;max-width:112px;max-height:112px;aspect-ratio:1/1;border-radius:50%}
.quick-inline-upload-state .upload-spinner-center{display:grid;place-items:center;width:76px;height:76px;position:relative;text-align:center;z-index:1}
.quick-inline-upload-state .upload-spinner-center strong{display:block;width:4ch;margin:0;color:var(--text);font-size:22px!important;font-variant-numeric:tabular-nums;letter-spacing:-.04em;line-height:1;text-align:center;white-space:nowrap}
.quick-share-form.is-uploading .upload-dropzone>label,
.request-upload-form.is-uploading .request-file-dropzone>:not(.quick-inline-upload-state){visibility:hidden}
.quick-share-form.is-uploading #quick-duration{cursor:not-allowed;opacity:.58}
.quick-share-form.is-uploading>button[type=submit]{cursor:wait;opacity:.58}
.request-file-dropzone.is-dragging{border-color:var(--green);background:color-mix(in srgb,var(--green) 10%,var(--surface-2));transform:translateY(-1px)}
.request-file-dropzone>.request-dropzone-icon{display:grid;place-items:center;width:50px;height:50px;margin-bottom:9px;border-radius:14px;background:var(--red);color:#fff}
.request-file-dropzone>.request-picker-actions{display:flex!important;align-items:center;justify-content:center;gap:8px;width:auto!important;height:auto!important;margin:13px 0 0!important;background:transparent!important;color:inherit!important}
.request-picker-actions button{min-height:36px;padding:7px 13px;border:1px solid var(--red-dark);border-radius:6px;background:var(--red);color:#fff;font-weight:700}
.request-picker-actions button.secondary{border-color:var(--line-strong);background:var(--surface);color:var(--text)}
.request-picker-actions button:disabled{cursor:wait;opacity:.55}
@media(max-width:560px){
  .quick-inline-upload-state{padding:12px}
  .quick-inline-upload-state .upload-spinner-state{grid-template-columns:minmax(0,1fr) 88px;gap:10px;max-width:none;text-align:left}
  .quick-inline-upload-state .upload-spinner-ring{flex-basis:88px;width:88px!important;height:88px!important;min-width:88px;min-height:88px;max-width:88px;max-height:88px}
  .quick-inline-upload-state .upload-spinner-center{width:60px;height:60px}
  .quick-inline-upload-state .upload-spinner-center strong{font-size:18px!important}
  .quick-inline-upload-state .upload-spinner-copy{gap:4px}
  .quick-inline-upload-state .upload-spinner-details{gap:4px}
  .quick-inline-upload-state .upload-spinner-details>span{padding:5px}
  .request-file-dropzone>.request-picker-actions{display:grid!important;grid-template-columns:1fr 1fr;width:100%!important}
  .request-picker-actions button{width:100%}
}