/* Ren by alts · design tokens (see STYLE-GUIDE.md) */
:root{
  /* colour */
  --ink:#0a0a0a; --ink2:#5b5e63; --ink3:#9a9ea4;
  --surface:#ffffff; --surface-2:#fafafa; --fill:#F3F3F1; --fill-hover:#f8f8f7; --fill-press:#EFEFEC; --disabled:#E9EAE7;
  --ac:#14B8A6; --teal:#5ee6c9; --cy:#4cc3ff; --teal-ink:#0F766E; --teal-tint:#E6F7F5;
  --dot:#c6cbd0;
  /* radius */
  --r-chip:99px; --r-sm:12px; --r-md:16px; --r-field:20px; --r-card-in:22px; --r-card:28px; --r-tab:32px; --r-xl:36px;
  /* glow (no solid outlines anywhere) */
  --glow-card:0 20px 44px -24px rgba(20,140,150,.45),0 0 28px -6px rgba(94,230,201,.28);
  --glow-hero:0 40px 90px -30px rgba(30,120,140,.42),0 0 70px -10px rgba(94,230,201,.22);
  --halo:0 0 0 10px rgba(94,230,201,.10);
  --ring-focus:0 0 0 5px rgba(94,230,201,.30);
  --glow-pill:0 0 22px rgba(94,230,201,.45);
  /* r66 glow standard: ONE hue (teal 94,230,201), very light (alpha <= .12) and close-set (blur <= 40px, spread negative).
     --glow-soft = cards that should glow (login card, CTA chat card). --wash = page-level hue behind a hero card (login only). */
  --glow-rgb:94,230,201; --glow-a:.12; --glow-blur:40px; --glow-spread:-14px;
  --lift:0 24px 56px -32px rgba(15,60,55,.22);
  --glow-soft:var(--lift),0 0 var(--glow-blur) var(--glow-spread) rgba(var(--glow-rgb),var(--glow-a));
  --wash:radial-gradient(ellipse 440px 340px at 50% 46%,rgba(var(--glow-rgb),.08),rgba(var(--glow-rgb),0) 72%);
  /* glass */
  --glass:rgba(255,255,255,.78); --blur:blur(14px); --blur-lg:blur(16px);
  /* motion */
  --ease:cubic-bezier(.2,.8,.2,1); --t-fast:.3s; --t-mid:.45s; --t-open:.9s;
  /* type */
  --f-body:'Instrument Sans',sans-serif; --f-display:'Bricolage Grotesque',sans-serif;
  --fs-h2:clamp(38px,4.6vw,68px); --fs-sub:20px; --fs-title:28px; --fs-body:15.5px; --fs-field:16.5px; --fs-chip:14px; --fs-bubble:14.5px; --fs-meta:12.5px; --fs-tag:12.5px;
  /* spacing (4px grid) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s7:28px; --s8:32px;
  /* dotted rule */
  --rule:radial-gradient(circle,var(--dot) 1.2px,transparent 1.6px) 0 100%/9px 3px repeat-x;
}
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){:root{--fs-field:14px;--r-field:16px;--fs-title:22px;--fs-body:14px;--fs-chip:13px}}
/* Ren field: A = display-only (raised), B = interactive input (recessed). Icon box. */
.ic{display:inline-grid;place-items:center;width:1.25em;height:1.25em;line-height:1;flex:none;vertical-align:middle;font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',sans-serif}
.fld.show{width:860px;max-width:100%;box-sizing:border-box;background:var(--surface);border-radius:var(--r-field);padding:18px 24px;min-height:64px;display:flex;align-items:center;text-align:left;font:500 var(--fs-field)/1.4 var(--f-body);color:var(--ink);cursor:default;user-select:none;-webkit-user-select:none;box-shadow:var(--glow-card)}
.fld.show.sm{font-size:var(--fs-bubble);padding:12px 16px;min-height:0;border-radius:var(--r-md)}
.fld.in{display:flex;align-items:center;gap:8px;background:var(--fill);border-radius:var(--r-chip);padding:6px 6px 6px 22px;height:52px;box-sizing:border-box;transition:background var(--t-fast),box-shadow var(--t-fast) var(--ease)}
.fld.in:hover{background:var(--fill-press)}.fld.in:focus-within,.fld.in.focus{background:var(--surface);box-shadow:var(--ring-focus),0 20px 44px -24px rgba(20,140,150,.45)}
.fld.in input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:500 16px var(--f-body);caret-color:var(--ac);color:var(--ink)}.fld.in input::placeholder{color:var(--ink2)}
.fld.in .go{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:var(--disabled);color:#8a8f94;font-size:16px;transition:background var(--t-fast)}.fld.in .go.ok{background:#111;color:#fff;cursor:pointer}
.fld.in.off{opacity:.5;pointer-events:none}
.tag{font:600 var(--fs-tag) var(--f-body);padding:7px 13px;border-radius:var(--r-chip);white-space:nowrap}
.soon-white{background:#fff;color:var(--teal-ink);box-shadow:var(--glow-pill)}.soon-teal{background:var(--teal-ink);color:#fff;box-shadow:0 0 22px rgba(94,230,201,.55)}
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (orientation:portrait){.fld.show{padding:14px 18px;min-height:54px}}

/* r61 error pattern (one component everywhere). Coral, never colour-only: icon + text + label tint + glow. */
:root{--err:#C2412D;--err-soft:rgba(232,102,74,.16);--err-glow:0 0 0 4px rgba(232,102,74,.18),0 0 24px rgba(232,102,74,.16)}
.fl.bad input,.fl.bad textarea{box-shadow:var(--err-glow)!important;background:#FFF7F5!important}
.fl.bad>span{color:var(--err)!important}
.fl.shake{animation:fshake .36s cubic-bezier(.36,.07,.19,.97)}
@keyframes fshake{20%{transform:translateX(-5px)}40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@media (prefers-reduced-motion:reduce){.fl.shake{animation:none}}
.ferr{display:flex;align-items:flex-start;gap:7px;margin:8px 4px 0 18px;color:var(--err);font:500 13.5px/1.35 'Instrument Sans',system-ui,sans-serif;text-align:left;animation:ferr-in .22s ease}
.ferr svg{flex:none;width:15px;height:15px;margin-top:1px}
.ferr.hint{color:#0F766E}.ferr.hint button{all:unset;cursor:pointer;font-weight:700;text-decoration:underline;text-underline-offset:3px;padding:6px 2px;margin:-6px 0}
@keyframes ferr-in{from{opacity:0;transform:translateY(-3px)}}