/* Public help center — support.lalufamily.com.
   Layout is the design's own support-styles.css; colors/effects are Lalu DS tokens
   copied verbatim from the DS token sheets. Nunito is loaded by fonts.css. */

/* ============================================================
   A. Tokens
   Values are copied verbatim from the DS sheets (tokens/colors.css,
   tokens/effects.css). Semantic aliases keep their var() indirection so a
   palette change in the DS propagates the same way here as in the app.
   A few aliases and effect tokens are defined but unused by the rules below —
   they are the complete semantic/radius/motion sets, so a template can reach for
   e.g. var(--lalu-surface-premium) without editing this file.
   ============================================================ */

:root {
  /* ---- Core / "Main palette" ------------------------------- */
  --lalu-tiber: #13293e;            /* primary — deep navy ink   */
  --lalu-marshland: #1f211c;        /* near-black body text      */
  --lalu-atomic-tangerine: #ff8c67; /* coral — the brand accent  */
  --lalu-bahia: #8dc922;            /* lime green — active/live   */
  --lalu-sulu: #bbe07d;             /* soft green                 */
  --lalu-cornflower-blue: #4581f5;  /* blue — links/info          */
  --lalu-bittersweet: #ff6a63;      /* red — error/destructive    */
  --lalu-pastel-white: #fafafa;     /* app background (paper)     */
  --lalu-white: #ffffff;            /* surfaces                   */

  /* ---- Greys ----------------------------------------------- */
  --lalu-storm-grey: #72737b;   /* icons, tertiary text          */
  --lalu-delta: #9c9d9b;        /* placeholder / muted           */
  --lalu-blue-haze: #b3b4c6;    /* secondary / desaturated       */
  --lalu-slate: #717f8b;        /* meta text on cards            */
  --lalu-white-lilac: #f6f6f7;  /* hairline border / divider     */
  --lalu-white-smoke: #f2f2f2;  /* disabled fill                 */
  --lalu-zirkon: #e3e5e8;       /* avatar ring / faint border    */

  /* ---- Green family ---------------------------------------- */
  --lalu-christi: #80ba1a;        /* darker lime (gradients)      */
  --lalu-reef: #cce79d;           /* pale green border            */
  --lalu-promenade: #f6fbee;      /* pale green surface           */

  /* ---- Coral / orange family -------------------------------- */
  --lalu-burnt-orange: #ff6f40;
  --lalu-tahiti-gold: #de5a26;
  --lalu-zest: #f69438;
  --lalu-coral-fizz: #ffd1c2;     /* light coral fill (small btns)*/
  --lalu-coral-tint: #fff4f0;
  --lalu-linen: #faebe6;

  /* ---- Premium / gold --------------------------------------- */
  --lalu-golden-tainoi: #fdc24c;
  --lalu-selective-yellow: #febf21;   /* alert accent             */
  --lalu-gin-fizz: #f8efce;           /* premium card fill        */
  --lalu-old-lace: #fdf8ea;           /* premium background       */
  --lalu-early-dawn: #fef7e9;         /* alert surface            */

  /* ---- Blue / cyan family ----------------------------------- */
  --lalu-alice-blue: #dff0ff;     /* premium border               */
  --lalu-pattens-blue: #f0f7fe;   /* premium card                 */
  --lalu-catskill: #eff3fa;       /* blue accent surface          */
  --lalu-cadet-blue: #5a999f;

  /* ---- Feedback fills --------------------------------------- */
  --lalu-error-fill: #ffe1e0;
  --lalu-success-fill: #dcf8e1;

  /* ---- Semantic aliases: text ------------------------------- */
  --lalu-text-primary: var(--lalu-marshland);   /* headings/body  */
  --lalu-text-heading: var(--lalu-tiber);       /* navy headings  */
  --lalu-text-secondary: var(--lalu-storm-grey);
  --lalu-text-muted: var(--lalu-delta);
  --lalu-text-placeholder: var(--lalu-delta);
  --lalu-text-meta: var(--lalu-slate);
  --lalu-text-inverse: var(--lalu-white);
  --lalu-text-accent: var(--lalu-atomic-tangerine);
  --lalu-text-link: var(--lalu-cornflower-blue);

  /* ---- Semantic aliases: brand ------------------------------ */
  --lalu-primary: var(--lalu-atomic-tangerine); /* coral CTA      */
  --lalu-primary-press: var(--lalu-burnt-orange);

  /* ---- Semantic aliases: surfaces --------------------------- */
  --lalu-bg: var(--lalu-pastel-white);
  --lalu-surface: var(--lalu-white);
  --lalu-surface-sunken: var(--lalu-pastel-white);
  --lalu-surface-green: var(--lalu-promenade);
  --lalu-surface-premium: var(--lalu-pattens-blue);
  --lalu-surface-alert: var(--lalu-early-dawn);

  /* ---- Semantic aliases: lines ------------------------------ */
  --lalu-border: var(--lalu-white-lilac);
  --lalu-border-strong: var(--lalu-zirkon);
  --lalu-border-green: var(--lalu-reef);
  --lalu-divider: var(--lalu-white-lilac);

  /* ---- Semantic aliases: states ----------------------------- */
  --lalu-disabled: var(--lalu-white-smoke);

  /* Header gradient (green) — used across app-bar hero areas */
  --lalu-gradient-green: linear-gradient(
    216.094deg,
    var(--lalu-christi) -8.05%,
    var(--lalu-sulu) 93.97%
  );

  /* ---- Radii ------------------------------------------------ */
  --lalu-radius-8: 8px;      /* inputs, small controls, alerts   */
  --lalu-radius-12: 12px;    /* buttons, cards                    */
  --lalu-radius-16: 16px;    /* large cards, headers, sheets      */
  --lalu-radius-20: 20px;    /* hero cards                        */
  --lalu-radius-pill: 999px; /* chips, switches, avatars          */

  /* ---- Shadows (soft, ambient) ------------------------------ */
  --lalu-shadow-card: 0px 0px 20px 0px rgba(0, 0, 0, 0.02);
  --lalu-shadow-raised: 0px 8px 24px 0px rgba(31, 33, 28, 0.08);

  /* ---- Motion ----------------------------------------------- */
  --lalu-ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --lalu-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --lalu-duration-fast: 120ms;
  --lalu-duration-base: 200ms;
  --lalu-press-scale: 0.97;
}

/* ============================================================
   B. Page layout — the design's support-styles.css, verbatim
   ============================================================ */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Every in-page anchor has to clear the sticky nav. Without this the browser
   parks the target flush against the viewport top — i.e. behind the header —
   so the post-vote redirect to #helpful scrolls its own thank-you message out
   of sight, and the nav's #categories/#popular/#contact links land a section
   heading under the bar. [id] rather than :target so it also covers the
   heading a reader lands on from a search-engine result; scroll-margin is
   inert except while something is being scrolled into view.
   .sup-nav is 64px of content plus its 1px border, and 20px of air. */
[id] { scroll-margin-top: 85px; }
body { margin: 0; background: var(--lalu-bg); color: var(--lalu-text-primary); font-family: 'Nunito', -apple-system, system-ui, sans-serif; font-size: 16px; line-height: 1.55; font-weight: 500; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; color: var(--lalu-text-heading); letter-spacing: -0.01em; line-height: 1.2; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; }

/* Images anywhere on the page must never push the layout wider than the viewport. */
img, svg, video { max-width: 100%; }

/* ---- nav ---- */
.sup-nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.88); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border-bottom: 1px solid var(--lalu-border); }
.sup-nav-in { height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.sup-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; font-size: 19px; color: var(--lalu-text-heading); }
/* The mark is fill="currentColor" so it can be tinted, and .sup-brand sets
   colour for the WORDMARK (navy ink). Without resetting it here the
   butterfly inherits that navy and renders dark on the green tile — it
   has to be white, as it is in the hero badge and the design source. */
.sup-brand .bmark { width: 34px; height: 34px; border-radius: 10px; background: var(--lalu-gradient-green); color: var(--lalu-white); display: grid; place-items: center; flex-shrink: 0; }
.sup-brand .bsub { font-weight: 700; color: var(--lalu-text-secondary); }
.sup-nav-links { display: flex; align-items: center; gap: 26px; }
.sup-nav-links a { font-weight: 700; font-size: 14.5px; color: var(--lalu-text-secondary); transition: color .12s; }
.sup-nav-links a:hover { color: var(--lalu-text-heading); }
.sup-nav-right { display: flex; align-items: center; gap: 12px; }
.locale-chip { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--lalu-border-strong); background: var(--lalu-white); font-weight: 700; font-size: 13px; color: var(--lalu-text-secondary); cursor: pointer; }

/* ---- hero ---- */
.sup-hero { position: relative; overflow: hidden; background: var(--lalu-gradient-green); padding: 64px 0 96px; }
.sup-hero .waves { position: absolute; inset: 0; pointer-events: none; width: 100%; height: 100%; }
.sup-hero-in { position: relative; text-align: center; max-width: 640px; margin: 0 auto; padding: 0 24px; }
.sup-hello { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: rgba(255,255,255,0.24); color: #fff; font-weight: 800; font-size: 13px; }
.sup-hero h1 { color: #fff; font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 900; margin-top: 18px; }
.sup-hero .sub { color: rgba(255,255,255,0.92); font-size: 1.06rem; margin-top: 10px; font-weight: 600; }
.sup-search { margin-top: 26px; display: flex; align-items: center; gap: 10px; background: var(--lalu-white); border-radius: 16px; padding: 8px 8px 8px 18px; box-shadow: 0 14px 40px rgba(31,33,28,0.16); }
.sup-search input { flex: 1; border: none; outline: none; font: inherit; font-weight: 600; font-size: 16px; color: var(--lalu-text-primary); background: transparent; min-width: 0; }
.sup-search input::placeholder { color: var(--lalu-text-placeholder); }
.hot-row { margin-top: 16px; display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.hot-row .lbl { color: rgba(255,255,255,0.85); font-weight: 700; font-size: 13px; }
.hot-row a { cursor: pointer; }

/* ---- status strip ---- */
.status-strip { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; margin-top: -26px; position: relative; }
.status-card { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--lalu-surface); border: 1px solid var(--lalu-border); border-radius: 16px; padding: 12px 18px; box-shadow: 0 0 20px rgba(0,0,0,0.04); }
.status-card .sep { width: 1px; height: 18px; background: var(--lalu-border-strong); }
.status-card a { font-weight: 800; font-size: 13.5px; color: var(--lalu-text-link); }

/* ---- sections ---- */
.sec { padding: 64px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
.sec-head h2 { font-size: 1.55rem; font-weight: 900; }
.sec-head p { color: var(--lalu-text-secondary); margin-top: 6px; font-size: 15px; }
.sec-head .more { font-weight: 800; font-size: 14.5px; color: var(--lalu-text-accent); display: inline-flex; align-items: center; gap: 5px; }

/* ---- category grid (Muhim-tile pattern) ---- */
.cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.cat-card { position: relative; border-radius: 16px; padding: 20px 18px; display: flex; flex-direction: column; gap: 12px; border: 1px solid; transition: transform .14s ease, box-shadow .14s ease; }
.cat-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(31,33,28,0.08); }
.cat-card:active { transform: scale(0.97); }
.cat-ic { width: 46px; height: 46px; border-radius: 50%; background: var(--lalu-white); display: grid; place-items: center; box-shadow: 0 0 20px rgba(0,0,0,0.03); }
.cat-card h3 { font-size: 15.5px; font-weight: 800; color: var(--lalu-text-heading); }
.cat-card p { font-size: 12.5px; font-weight: 600; color: var(--lalu-text-meta); line-height: 1.45; flex: 1; }
.cat-count { font-size: 12px; font-weight: 800; }

/* ---- popular rows ---- */
.pop-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.pop-row { display: flex; align-items: center; gap: 13px; background: var(--lalu-surface); border: 1px solid var(--lalu-border); border-radius: 12px; padding: 14px 16px; transition: border-color .12s, box-shadow .12s; }
.pop-row:hover { border-color: var(--lalu-border-strong); box-shadow: 0 0 20px rgba(0,0,0,0.04); }
.pop-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; }
/* min-width:0 lets a long unbroken title shrink instead of forcing the row wider
   than the grid column (the design never had titles long enough to hit this). */
.pop-row .t { flex: 1; min-width: 0; font-weight: 700; font-size: 14.5px; color: var(--lalu-text-primary); overflow-wrap: anywhere; }
.pop-row .m { font-size: 12px; font-weight: 700; color: var(--lalu-text-muted); white-space: nowrap; }

/* ---- contact band ---- */
.contact-band { background: var(--lalu-surface); border: 1px solid var(--lalu-border); border-radius: 20px; padding: 40px; box-shadow: 0 0 20px rgba(0,0,0,0.02); }
.contact-head { text-align: center; max-width: 480px; margin: 0 auto 28px; }
.contact-head h2 { font-size: 1.5rem; font-weight: 900; }
.contact-head p { color: var(--lalu-text-secondary); margin-top: 8px; font-size: 15px; }
/* The coral glyph circle above "Still need help?" — inline styles in the design. */
.contact-head .ci { width: 48px; height: 48px; border-radius: 50%; background: var(--lalu-coral-tint); color: var(--lalu-primary); display: inline-grid; place-items: center; }
.chan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.chan-card { border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; border: 1px solid; }
.chan-card .ci { width: 42px; height: 42px; border-radius: 50%; background: var(--lalu-white); display: grid; place-items: center; box-shadow: 0 0 20px rgba(0,0,0,0.03); }
.chan-card h4 { font-size: 15px; font-weight: 800; }
.chan-card p { font-size: 13px; font-weight: 600; color: var(--lalu-text-meta); flex: 1; }
.chan-card .cl { font-weight: 800; font-size: 13.5px; }
.contact-foot { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 26px; flex-wrap: wrap; }
.contact-foot .hours { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 700; color: var(--lalu-text-muted); }

/* ---- breadcrumbs + article ---- */
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--lalu-text-muted); padding: 22px 0 0; flex-wrap: wrap; }
.crumbs a:hover { color: var(--lalu-text-heading); }
.art-wrap { max-width: 720px; margin: 0 auto; padding: 0 24px; }
.art-head { padding: 26px 0 8px; }
.art-head h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; }
.art-meta { display: flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 13.5px; font-weight: 700; color: var(--lalu-text-muted); flex-wrap: wrap; }
.art-body { padding: 18px 0 0; font-size: 16.5px; line-height: 1.7; }
.art-body > * + * { margin-top: 18px; }
.art-body h2 { font-size: 1.25rem; font-weight: 900; margin-top: 34px; }
.art-body p { color: var(--lalu-text-primary); }
.steps { counter-reset: st; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 0; list-style: none; }
.steps li { counter-increment: st; display: flex; gap: 14px; align-items: flex-start; background: var(--lalu-surface); border: 1px solid var(--lalu-border); border-radius: 12px; padding: 14px 16px; font-weight: 600; font-size: 15px; }
.steps li::before { content: counter(st); width: 28px; height: 28px; border-radius: 50%; background: var(--lalu-coral-tint); color: var(--lalu-primary); font-weight: 900; font-size: 14px; display: grid; place-items: center; flex-shrink: 0; }
.steps li b { font-weight: 800; }
.helpful { margin-top: 40px; background: var(--lalu-surface-green); border: 1px solid var(--lalu-border-green); border-radius: 16px; padding: 22px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.helpful .q { font-weight: 800; font-size: 15px; color: var(--lalu-text-heading); }
.helpful .btns { display: flex; gap: 10px; flex-wrap: wrap; }
.rel-list { display: flex; flex-direction: column; gap: 10px; }

/* ---- category page ---- */
.cat-hero { display: flex; align-items: center; gap: 18px; padding: 30px 0 6px; }
.cat-hero .chi { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; border: 1px solid; flex-shrink: 0; }
.cat-hero h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; }
.cat-hero p { color: var(--lalu-text-secondary); margin-top: 4px; font-size: 15px; }
.art-row { display: flex; align-items: center; gap: 15px; background: var(--lalu-surface); border: 1px solid var(--lalu-border); border-radius: 12px; padding: 16px 18px; transition: border-color .12s, box-shadow .12s; }
.art-row:hover { border-color: var(--lalu-border-strong); box-shadow: 0 0 20px rgba(0,0,0,0.04); }
.art-row .b { flex: 1; min-width: 0; }
/* .t and .s are spans stacked inside .b — the design forced display:block with an
   inline style; as a stylesheet we have to say it here or they run onto one line. */
.art-row .t { display: block; font-weight: 800; font-size: 15px; color: var(--lalu-text-heading); overflow-wrap: anywhere; }
.art-row .s { display: block; font-size: 13px; font-weight: 600; color: var(--lalu-text-meta); margin-top: 3px; overflow-wrap: anywhere; }
.art-row .m { font-size: 12px; font-weight: 700; color: var(--lalu-text-muted); white-space: nowrap; }
.other-cats { display: flex; gap: 8px; flex-wrap: wrap; }
.other-cats a { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 15px; border-radius: 999px; background: var(--lalu-surface); border: 1px solid var(--lalu-border-strong); font-weight: 700; font-size: 13.5px; color: var(--lalu-text-secondary); max-width: 100%; }
.other-cats a:hover { color: var(--lalu-text-heading); }

/* ---- footer ---- */
.sup-footer { background: var(--lalu-old-lace); border-top: 1px solid var(--lalu-border); margin-top: 64px; padding: 52px 0 30px; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 30px; }
.foot-brand p { color: var(--lalu-text-secondary); font-size: 14px; margin-top: 12px; max-width: 260px; }
/* h3 in the markup (the outline goes h1 -> section h2 -> these), styled as the
   design's small uppercase column label rather than as a third-level heading. */
.foot-col h3 { margin: 0 0 12px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lalu-text-muted); }
.foot-col a { display: block; padding: 5px 0; font-weight: 600; font-size: 14.5px; color: var(--lalu-text-secondary); }
.foot-col a:hover { color: var(--lalu-text-heading); }
.foot-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--lalu-border); flex-wrap: wrap; }
.foot-bottom span { font-size: 13px; font-weight: 600; color: var(--lalu-text-muted); }
.foot-locales { display: flex; gap: 6px; flex-wrap: wrap; }
.foot-locales a, .foot-locales button { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--lalu-border-strong); background: var(--lalu-white); font-family: inherit; font-weight: 700; font-size: 12px; color: var(--lalu-text-secondary); cursor: pointer; }
.foot-locales a.on, .foot-locales button.on { background: var(--lalu-tiber); border-color: var(--lalu-tiber); color: #fff; }

@media (max-width: 900px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .pop-grid, .chan-grid { grid-template-columns: 1fr; }
  .sup-nav-links { display: none; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cat-grid { grid-template-columns: 1fr; }
  .sup-hero { padding: 48px 0 84px; }
  .contact-band { padding: 26px 20px; }
  .foot-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   C. DS components as CSS classes
   The design consumed these as React components with inline styles; the server
   templates need real classes. Values transcribed from the DS bundle.
   ============================================================ */

/* ---- Button ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; border: none; font-family: inherit; font-weight: 700; line-height: 1; cursor: pointer; white-space: nowrap; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; transition: transform 120ms cubic-bezier(0.4, 0, 0.2, 1); }
/* The DS scales the button on pointerdown in JS; :active is the CSS equivalent. */
.btn:active { transform: scale(0.97); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--lalu-disabled); color: var(--lalu-text-muted); cursor: not-allowed; }
.btn[disabled]:active, .btn[aria-disabled="true"]:active { transform: none; }

.btn--lg { height: 48px; font-size: 16px; border-radius: 12px; padding: 0 20px; gap: 8px; }
.btn--md { height: 40px; font-size: 15px; border-radius: 10px; padding: 0 16px; gap: 8px; }
.btn--sm { height: 32px; font-size: 14px; border-radius: 8px; padding: 0 14px; gap: 6px; }

.btn--primary { background: var(--lalu-atomic-tangerine); color: var(--lalu-white); }
.btn--secondary { background: var(--lalu-white-smoke); color: var(--lalu-marshland); }
.btn--green { background: var(--lalu-bahia); color: var(--lalu-white); }
.btn--ghost { background: transparent; color: var(--lalu-atomic-tangerine); }
/* Web-only affordance: the DS is touch-first and has no hover state. */
.btn--primary:hover { background: var(--lalu-primary-press); }

/* ---- Chip ----
   Tones are carried on private --chip-* properties rather than the --tint/--ink
   pair used by the category palettes, so a chip inside a .pal-* card keeps its
   own colours instead of inheriting the card's. */
.chip { display: inline-flex; align-items: center; border-radius: 999px; font-family: inherit; font-weight: 700; line-height: 1; white-space: nowrap; background: var(--chip-soft); color: var(--chip-ink); }
.chip--md { height: 26px; padding: 0 10px; font-size: 12px; gap: 6px; }
.chip--sm { height: 20px; padding: 0 8px; font-size: 11px; gap: 4px; }

.chip--green { --chip-soft: var(--lalu-promenade); --chip-ink: var(--lalu-christi); --chip-solid: var(--lalu-bahia); }
.chip--coral { --chip-soft: var(--lalu-coral-tint); --chip-ink: var(--lalu-atomic-tangerine); --chip-solid: var(--lalu-atomic-tangerine); }
.chip--blue { --chip-soft: var(--lalu-pattens-blue); --chip-ink: var(--lalu-cornflower-blue); --chip-solid: var(--lalu-cornflower-blue); }
.chip--gold { --chip-soft: var(--lalu-old-lace); --chip-ink: var(--lalu-tahiti-gold); --chip-solid: var(--lalu-golden-tainoi); }
.chip--grey { --chip-soft: var(--lalu-white-lilac); --chip-ink: var(--lalu-storm-grey); --chip-solid: var(--lalu-blue-haze); }

.chip--solid { background: var(--chip-solid); color: var(--lalu-white); }
.chip .dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; background: var(--chip-solid); }
.chip--solid .dot { background: var(--lalu-white); }

/* ---- Alert ----
   The 1px outline is an inset box-shadow, not a border: the DS keeps the 12x16
   padding box exactly as specified, and a real border would add 2px to the box
   (or need padding maths) on every variant. */
.alert { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border-radius: 8px; box-sizing: border-box; background: var(--alert-bg); box-shadow: inset 0 0 0 1px var(--alert-line); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--lalu-marshland); }
.alert--warning { --alert-bg: var(--lalu-early-dawn); --alert-line: var(--lalu-selective-yellow); }
.alert--info { --alert-bg: var(--lalu-pattens-blue); --alert-line: var(--lalu-cornflower-blue); }
.alert--success { --alert-bg: var(--lalu-success-fill); --alert-line: var(--lalu-bahia); }
.alert--error { --alert-bg: var(--lalu-error-fill); --alert-line: var(--lalu-bittersweet); }
/* Leading glyph: tinted with the variant's line colour via currentColor. */
.alert > .ic { width: 24px; height: 24px; flex-shrink: 0; color: var(--alert-line); }
/* The callout body is a <span> that may hold whole blocks (a multi-paragraph or
   list callout keeps its <p>/<ul>), hence display:block. min-width:0 is what
   actually lets it shrink: without it a flex item's automatic minimum size is
   its content, so one unbreakable token — a support URL, an order id — widens
   the alert past the article column and scrolls the entire page sideways. */
.alert-body { display: block; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.alert p { margin: 0; }
.alert b, .alert strong { font-weight: 800; }
.alert a { color: var(--lalu-text-link); font-weight: 800; }

/* ---- SegmentedControl (article platform tabs) ---- */
.seg { position: relative; display: flex; width: 100%; height: 32px; padding: 2px; border-radius: 9px; background: rgba(118,118,128,0.12); box-sizing: border-box; }
/* Segments may be <button>s or <a>s (server-rendered tabs), so the centring
   properties are set here rather than relying on a button's default. */
.seg-b { position: relative; display: inline-flex; align-items: center; justify-content: center; text-align: center; padding: 0 8px; flex: 1; min-width: 0; height: 100%; border: none; border-radius: 7px; cursor: pointer; background: transparent; box-shadow: none; font-family: inherit; font-weight: 600; font-size: 13px; color: var(--lalu-storm-grey); transition: background 200ms, box-shadow 200ms; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seg-b.is-on, .seg-b[aria-selected="true"] { background: var(--lalu-white); box-shadow: 0px 3px 8px rgba(0,0,0,0.12), 0px 3px 1px rgba(0,0,0,0.04); font-weight: 700; color: var(--lalu-marshland); }

/* ============================================================
   D. Category palettes
   One class sets --tint / --ink / --ring so the card, its icon tile and its count
   label all read from the same source. The design set them per element inline.
   ============================================================ */

.pal-green  { --tint: var(--lalu-promenade);    --ink: var(--lalu-christi);         --ring: var(--lalu-reef); }
.pal-blue   { --tint: var(--lalu-pattens-blue); --ink: var(--lalu-cornflower-blue); --ring: var(--lalu-alice-blue); }
.pal-gold   { --tint: var(--lalu-old-lace);     --ink: var(--lalu-zest);            --ring: var(--lalu-gin-fizz); }
.pal-coral  { --tint: var(--lalu-coral-tint);   --ink: var(--lalu-primary);         --ring: var(--lalu-coral-fizz); }
.pal-leaf   { --tint: var(--lalu-promenade);    --ink: var(--lalu-bahia);           --ring: var(--lalu-reef); }
.pal-orange { --tint: var(--lalu-linen);        --ink: var(--lalu-burnt-orange);    --ring: var(--lalu-coral-fizz); }
.pal-teal   { --tint: var(--lalu-catskill);     --ink: var(--lalu-cadet-blue);      --ring: var(--lalu-zirkon); }
.pal-slate  { --tint: var(--lalu-white-lilac);  --ink: var(--lalu-tiber);           --ring: var(--lalu-zirkon); }

/* Palette consumers. Fallbacks keep an un-paletted element readable rather than
   transparent, since var() with no fallback resolves to the initial value. */
.cat-card { background: var(--tint, var(--lalu-white-lilac)); border-color: var(--ring, var(--lalu-border-strong)); }
.cat-ic { color: var(--ink, var(--lalu-text-heading)); }
.cat-count { color: var(--ink, var(--lalu-text-accent)); }
.cat-hero .chi { background: var(--tint, var(--lalu-white-lilac)); border-color: var(--ring, var(--lalu-border-strong)); color: var(--ink, var(--lalu-text-heading)); }
.pop-ic { background: var(--tint, var(--lalu-white-lilac)); color: var(--ink, var(--lalu-text-heading)); }
.other-cats a { color: var(--ink, var(--lalu-text-secondary)); }
.other-cats a .lbl { color: var(--lalu-text-secondary); }

/* ============================================================
   E. Article prose
   Article HTML is rendered from Markdown and sanitised, so no element can carry a
   class. Everything here is selected by element name. Component markup that the
   template nests inside .art-body (.rel-list, .helpful, .alert, .tabs) does have
   classes, so prose rules that would clobber it are guarded with :not([class]).
   ============================================================ */

/* Sanitised article text is user/editor supplied — a long URL or an agglutinated
   Uzbek compound must wrap rather than widen the page. */
.art-body { overflow-wrap: break-word; }
.art-body h2, .art-body h3, .art-body h4 { color: var(--lalu-text-heading); }
.art-body h3 { font-size: 1.08rem; font-weight: 900; margin-top: 26px; }
.art-body h4 { font-size: 1rem; font-weight: 800; margin-top: 22px; }
.art-body a:not([class]) { color: var(--lalu-text-link); font-weight: 800; text-decoration: underline; text-underline-offset: 2px; }
.art-body a:not([class]):hover { text-decoration-thickness: 2px; }
.art-body strong, .art-body b { font-weight: 800; }
.art-body em, .art-body i { font-style: italic; }
.art-body img { display: block; border-radius: var(--lalu-radius-12); height: auto; }
.art-body hr { border: none; border-top: 1px solid var(--lalu-border-strong); margin: 32px 0; }

/* Ordered lists get the design's .steps treatment: a card per step with a 28px
   coral counter circle. counter-reset lives on the list so nested lists restart. */
.art-body ol:not([class]) { counter-reset: st; display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: 0; list-style: none; }
/* NOT a flex container. Markdown gives the step text as bare inline nodes,
   and in a flex box each of those becomes its own anonymous flex item and
   picks up the gap — which puts a visible space either side of every bold
   run. In an agglutinative language that breaks words outright:
   "**Obunani bekor qilish**ni bosing" renders as "... qilish ni bosing".
   Absolute-positioned counter keeps the text in normal inline flow. */
.art-body ol:not([class]) > li { counter-increment: st; position: relative; padding: 14px 16px 14px 58px;
  background: var(--lalu-surface); border: 1px solid var(--lalu-border); border-radius: 12px;
  font-weight: 600; font-size: 15px; }
.art-body ol:not([class]) > li::before { content: counter(st); position: absolute; left: 16px; top: 13px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--lalu-coral-tint);
  color: var(--lalu-primary); font-weight: 900; font-size: 14px; display: grid; place-items: center; }
/* A step's own paragraphs sit in the card body, to the right of the counter. */
.art-body ol:not([class]) > li p { margin: 0; }
.art-body ol:not([class]) > li p + p { margin-top: 8px; }

/* Unordered lists get a small coral bullet instead of the browser marker. */
.art-body ul:not([class]) { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; padding: 0; list-style: none; }
.art-body ul:not([class]) > li { position: relative; padding-left: 20px; }
.art-body ul:not([class]) > li::before { content: ""; position: absolute; left: 4px; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; background: var(--lalu-primary); }
/* Nested lists indent instead of restarting the card/bullet rhythm at full width. */
.art-body li > ul:not([class]), .art-body li > ol:not([class]) { margin-top: 10px; }

.art-body blockquote { margin: 0; padding: 12px 18px; border-left: 3px solid var(--lalu-border-green); background: var(--lalu-surface-green); border-radius: 0 var(--lalu-radius-12) var(--lalu-radius-12) 0; color: var(--lalu-text-primary); font-weight: 600; }
.art-body blockquote p + p { margin-top: 10px; }

.art-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88em; background: var(--lalu-white-lilac); border-radius: 6px; padding: 2px 6px; overflow-wrap: anywhere; }
.art-body pre { margin: 0; padding: 14px 16px; border-radius: var(--lalu-radius-12); background: var(--lalu-marshland); color: var(--lalu-white); font-size: 14px; line-height: 1.5; overflow-x: auto; }
/* Inside a <pre> the chip styling would fight the block; strip it back. */
.art-body pre code { background: none; color: inherit; padding: 0; border-radius: 0; font-size: inherit; overflow-wrap: normal; }

/* Markdown cannot wrap a table in a scroll container, so the table itself becomes
   the scroll container. display:block is the cost of never overflowing at 360px. */
.art-body table { display: block; width: 100%; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 15px; }
.art-body th, .art-body td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--lalu-border-strong); vertical-align: top; }
.art-body th { font-weight: 800; color: var(--lalu-text-heading); white-space: nowrap; }
.art-body td { font-weight: 600; color: var(--lalu-text-primary); }
.art-body tbody tr:last-child td { border-bottom: none; }

/* ============================================================
   F. Extra components the design had no class for
   ============================================================ */

/* Language picker: a <details> dropdown in the nav. Eight locales do not fit in a
   chip row, and <details> keeps it working with JavaScript disabled. */
.lang { position: relative; }
.lang > summary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 13px; border-radius: var(--lalu-radius-pill); border: 1px solid var(--lalu-border-strong); background: var(--lalu-white); font-weight: 700; font-size: 13px; color: var(--lalu-text-secondary); cursor: pointer; list-style: none; white-space: nowrap; }
.lang > summary::-webkit-details-marker { display: none; }
.lang > summary::marker { content: ""; }
.lang[open] > summary { border-color: var(--lalu-atomic-tangerine); color: var(--lalu-text-heading); }
/* The chevron's flip lives with the other .locale-chip rules further down, so the
   trigger's styling is not split across two places. */

/* Anchored to .lang (which sits inside the sticky nav) so the menu opens below and
   right-aligned to the trigger — right:0 keeps it inside a 360px viewport. */
.lang-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 200px; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--lalu-surface); border: 1px solid var(--lalu-border-strong); border-radius: var(--lalu-radius-16); box-shadow: var(--lalu-shadow-raised); }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 10px; border-radius: 10px; font-weight: 700; font-size: 14px; color: var(--lalu-text-primary); }
.lang-menu a:hover { background: var(--lalu-white-lilac); }
.lang-menu a.on { background: var(--lalu-coral-tint); color: var(--lalu-text-heading); }
/* First span is the endonym — each locale written in its own script (O'zbekcha,
   Қазақша, Тоҷикӣ …); .code is the ISO code, so a reader who cannot read the
   script still recognises the row. */
.lang-menu a > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.lang-menu .code { font-weight: 600; font-size: 12px; color: var(--lalu-text-muted); white-space: nowrap; }
/* The current locale shown on the trigger; hidden on small screens (see below). */
.lang-cur { display: inline; }

/* Tabbed article section: the .seg track plus one panel per segment. */
.tabs { margin-top: 22px; }
/* Only the control is narrow — the panels under it run the full column,
   as in the design. Constraining .tabs itself would squeeze the steps. */
.tabs .seg { max-width: 420px; }
/* The segmented control is inert until the script wires it up, and every panel
   is visible until then anyway. Shown unenhanced it is a row of focusable
   buttons that do nothing — worse than absent. The script adds .is-enhanced
   before paint (it runs at the end of <body>), so there is no flash. */
.tabs:not(.is-enhanced) .seg { display: none; }
.tabs-panel[hidden] { display: none; }
.tabs-panel { margin-top: 18px; }

/* "This article is not translated into your language yet" banner. Same inset-line
   construction as .alert, but full-width in the article flow with its own margin. */
.notice { display: flex; align-items: flex-start; gap: 12px; padding: 12px 16px; border-radius: var(--lalu-radius-12); background: var(--lalu-surface-alert); box-shadow: inset 0 0 0 1px var(--lalu-selective-yellow); font-weight: 600; font-size: 14px; line-height: 20px; color: var(--lalu-marshland); }
.notice > .ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--lalu-selective-yellow); margin-top: 1px; }
.notice a { color: var(--lalu-text-link); font-weight: 800; }

/* Empty-state text: no search results, no articles in a category. */
.empty { padding: 40px 24px; text-align: center; font-weight: 600; font-size: 15px; color: var(--lalu-text-muted); }
.empty strong { display: block; margin-bottom: 6px; font-weight: 800; font-size: 17px; color: var(--lalu-text-heading); }

/* Skip-to-content link: off-screen until keyboard focus pulls it into the nav. */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; }
.skip-link:focus { left: 12px; top: 12px; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border-radius: 10px; background: var(--lalu-tiber); color: var(--lalu-white); font-weight: 800; font-size: 14px; }

/* Base class for inline sprite icons: <svg class="ic"><use href="#i-..."/></svg>.
   No width/height here on purpose — the sprite is sized per use with width/height
   attributes, which CSS would otherwise override. */
.ic { display: inline-block; vertical-align: middle; flex-shrink: 0; color: inherit; }

/* Small layout helpers the templates need and the design faked with inline styles. */
.sec--flush { padding-top: 0; }              /* section that follows another directly */
.sec--tight { padding-top: 28px; }           /* category page: list right under the hero */
.sec-head--sub { margin-bottom: 14px; }    /* "Other topics" and similar sub-headings */
.sec-head--sub h2 { font-size: 1.15rem; }
.crumbs .here { color: var(--lalu-text-heading); }  /* last, non-linked breadcrumb */

/* ============================================================
   Focus visibility
   The design ships no focus styles at all. One consistent ring is added here for
   every interactive element (WCAG 2.1 SC 2.4.7): 2px coral, 2px offset.
   :focus-visible keeps it off mouse clicks.
   ============================================================ */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--lalu-atomic-tangerine);
  outline-offset: 2px;
}
/* The search input's own outline is suppressed by the design; move the ring onto
   the white pill so it stays visible against the green hero. */
.sup-search input:focus-visible { outline: none; }
.sup-search:focus-within { outline: 2px solid var(--lalu-atomic-tangerine); outline-offset: 2px; }
/* Cards clip their ring against neighbours at 2px offset, so tuck it inside. */
.cat-card:focus-visible, .pop-row:focus-visible, .art-row:focus-visible { outline-offset: -1px; }

/* ============================================================
   Responsive additions
   The design's own 900/560 breakpoints are above, verbatim. These extra rules
   keep the nav from overflowing a 360px viewport — the design was never tested
   below 560px and its nav row is ~400px wide at minimum.
   ============================================================ */

@media (max-width: 560px) {
  .sup-nav-in { gap: 10px; }
  .sup-nav .sup-brand { font-size: 17px; min-width: 0; }
  /* "Support" is redundant next to the mark once space is tight; the footer
     brand keeps it. */
  .sup-nav .sup-brand .bsub { display: none; }
  .sup-nav-right { gap: 8px; }
  .sup-nav-right .btn--md { padding: 0 12px; font-size: 14px; }
  /* Language trigger collapses to globe + chevron. */
  .lang > summary { padding: 0 10px; }
  .lang-cur { display: none; }
  .lang-menu { max-width: calc(100vw - 24px); }

  .sec { padding: 44px 0; }
  .sup-search { padding: 8px 8px 8px 14px; gap: 8px; }
  .art-body { font-size: 16px; }
  .helpful { padding: 18px 18px; }
  .contact-band { text-align: center; }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  .cat-card:hover, .cat-card:active, .btn:active, .lang[open] > summary .caret { transform: none; }
}

/* ============================================================
   G. Pieces the design source expressed as one-off inline styles
   ============================================================ */

/* Category pill above an article title. Takes its colour from the palette
   class on the same element, so it matches the topic it links back to. */
.art-cat { display: inline-block; margin-bottom: 12px; }
.art-cat .chip { background: var(--tint); color: var(--ink); }

.art-related { margin-top: 44px; }
.other-wrap { margin-top: 44px; }

/* A category icon may be an emoji instead of a sprite symbol (that is how
   categories were authored before the redesign). Nudge its size so an emoji
   and a 22px glyph occupy the same optical space in the tile. */
.emoji { font-size: 21px; line-height: 1; }
.cat-hero .chi .emoji { font-size: 28px; }
.other-cats .emoji { font-size: 14px; }

/* "in another language" marker next to a fallback title. */
.tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--lalu-radius-pill);
       background: var(--lalu-old-lace); color: var(--lalu-tahiti-gold);
       font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
       vertical-align: middle; white-space: nowrap; }

.search-head { padding: 8px 0 4px; }
.search-head h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; }
.search-head .sup-search { box-shadow: var(--lalu-shadow-card); border: 1px solid var(--lalu-border-strong); }
.result-count { margin: 0 0 18px; font-size: 14px; font-weight: 700; color: var(--lalu-text-secondary); }

/* The chevron on the language trigger points down, and flips when it opens. */
.locale-chip .caret { transition: transform var(--lalu-duration-base) var(--lalu-ease-standard); }
.lang[open] .locale-chip .caret { transform: rotate(180deg); }

/* Tab panel headings. With JS they are redundant with the segment labels, so
   the script hides them; without JS they are the only thing telling a reader
   which platform each stacked block is for. */
.tabs-panel-title { margin: 0 0 10px; font-size: 15px; font-weight: 800; color: var(--lalu-text-heading); }
.tabs.is-enhanced .tabs-panel-title { display: none; }

@media (max-width: 720px) {
  /* Below this the nav has room for the brand, the language trigger and one
     more thing. The app link is the one a help-center visitor needs least. */
  .open-app { display: none; }
}

/* ============================================================
   H. Contact form
   ============================================================ */

/* The form sits in the 720px article column, so it gets the article page's
   centred header treatment rather than the contact band's card. */
.contact-head--page { text-align: center; max-width: none; margin: 0 auto 26px; padding-top: 26px; }
.contact-head--page h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 900; margin-top: 14px; }

.contact-form { margin-top: 24px; display: flex; flex-direction: column; gap: 20px; }

.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field label { font-size: 13.5px; font-weight: 800; color: var(--lalu-text-heading); }
.field input,
.field select,
.field textarea {
  width: 100%; font: inherit; font-size: 15.5px; font-weight: 600;
  color: var(--lalu-text-primary); background: var(--lalu-surface);
  border: 1px solid var(--lalu-border-strong); border-radius: var(--lalu-radius-12);
  padding: 12px 14px; transition: border-color var(--lalu-duration-fast), box-shadow var(--lalu-duration-fast);
}
.field textarea { resize: vertical; min-height: 140px; line-height: 1.55; }
.field input::placeholder,
.field textarea::placeholder { color: var(--lalu-text-placeholder); font-weight: 600; }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--lalu-atomic-tangerine);
  box-shadow: 0 0 0 4px rgba(255, 140, 103, 0.16);
}
/* select needs its own arrow once the native appearance is dropped; inlined as
   a data URI so the form still costs no extra request. */
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239c9d9b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

/* Email / phone / Telegram are one question ("how do we reach you?"), so they
   are a fieldset rather than three unrelated fields. */
.field-group { border: 1px solid var(--lalu-border); border-radius: var(--lalu-radius-16);
  padding: 18px; margin: 0; display: flex; flex-direction: column; gap: 14px;
  background: var(--lalu-surface-sunken); }
.field-group legend { padding: 0 6px; font-size: 13.5px; font-weight: 800; color: var(--lalu-text-heading); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.hint { margin: 0; font-size: 13px; font-weight: 600; color: var(--lalu-text-muted); }
.field-group > .hint { margin-top: -6px; }

/* Honeypot. Hidden without display:none — some bots skip inputs that are
   display:none, and the point is that they fill it in. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.contact-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding-top: 4px; }
.contact-actions--center { justify-content: center; }
.contact-actions .hours { display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; color: var(--lalu-text-muted); }

/* Confirmation page */
.sent-card { text-align: center; padding: 40px 24px 8px; }
.sent-mark { width: 68px; height: 68px; border-radius: 50%; display: inline-grid; place-items: center;
  background: var(--lalu-surface-green); color: var(--lalu-bahia); margin-bottom: 18px; }
.sent-card h1 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; }
.sent-card > p { color: var(--lalu-text-secondary); margin-top: 12px; font-size: 15.5px; }
.sent-card .hint { margin-top: 18px; }
.sent-card .contact-actions { margin-top: 26px; }

/* People photograph this to quote back at us, so it is large, monospaced and
   selectable rather than decorative. */
.ref-box { display: inline-flex; flex-direction: column; align-items: center; gap: 6px;
  margin-top: 24px; padding: 16px 28px; border-radius: var(--lalu-radius-16);
  background: var(--lalu-old-lace); border: 1px solid var(--lalu-gin-fizz); }
.ref-label { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--lalu-tahiti-gold); }
.ref-value { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 22px; font-weight: 700; letter-spacing: .08em; color: var(--lalu-text-heading);
  user-select: all; }

@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
  .contact-actions { flex-direction: column; align-items: stretch; }
  .contact-actions .btn { width: 100%; }
  .contact-actions .hours { justify-content: center; text-align: center; }
  .ref-value { font-size: 19px; }
}

/* ---- Ticket pages (public "my tickets" + thread) ------------------------ */
.ticket-list { display: flex; flex-direction: column; gap: 10px; }
.ticket-row {
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    background: #fff; border: 1px solid var(--line, #e6e3de); border-radius: 14px;
    padding: 14px 18px; text-decoration: none; color: inherit;
}
.ticket-row:hover { border-color: #cbb; }
.ticket-row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ticket-ref { font-weight: 700; letter-spacing: 0.04em; }
.ticket-topic { color: #6b7280; font-size: 0.9em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ticket-row-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.ticket-when { color: #9ca3af; font-size: 0.85em; }
.ticket-status {
    font-size: 0.78em; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
    padding: 3px 9px; border-radius: 999px; background: #f3f4f6; color: #4b5563;
}
.ticket-status--open { background: #ecfdf5; color: #047857; }
.ticket-status--pending { background: #fffbeb; color: #b45309; }
.ticket-status--resolved { background: #eff6ff; color: #1d4ed8; }
.ticket-thread { display: flex; flex-direction: column; gap: 12px; margin: 18px 0 26px; }
.ticket-msg {
    border: 1px solid var(--line, #e6e3de); border-radius: 14px; padding: 12px 16px;
    background: #fff; max-width: 46rem;
}
.ticket-msg--support { background: #fdf3ee; border-color: #f3d9cc; }
.ticket-msg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 4px; font-size: 0.9em; }
.ticket-msg-body { white-space: pre-wrap; word-break: break-word; margin: 0; }
.ticket-reply { margin-top: 6px; }

/* "Track my requests" band (contact + home; the mobile-visible /tickets door) */
.tickets-band {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    background: #fdf3ee; border: 1px solid #f3d9cc; border-radius: 14px;
    padding: 12px 16px; margin: 14px 0 18px;
}
.tickets-band-text {
    display: flex; align-items: center; gap: 9px;
    font-weight: 700; font-size: 14.5px; color: var(--lalu-text-heading, #26333f);
}
.tickets-band .btn { flex-shrink: 0; }
@media (max-width: 560px) {
  .tickets-band { flex-direction: column; align-items: stretch; text-align: center; }
  .tickets-band-text { justify-content: center; }
}