/* Scoped token bridge: renders Duologue product-UI mocks in the exact palette,
   type and radii of the "Duologue Design System - Components" library. */
.duo-cmp{
--white:#FFFFFF;--n-25:#FCFCFD;--n-50:#FAFAFB;--n-75:#F5F6F7;--n-100:#F0F1F3;--n-150:#E9EBED;--n-200:#E4E7EA;--n-300:#D3D8DD;--n-400:#B4BBC2;--n-500:#98A0A8;--n-600:#787F88;--n-700:#5A616A;--n-800:#3B424B;--n-900:#2B3138;--n-950:#1F2226;
--blue-50:#EDF7FE;--blue-100:#DCEFFC;--blue-200:#BCE0F9;--blue-400:#4FB2F4;--blue-500:#1D9BF0;--blue-600:#0E8BDE;--blue-700:#0A72B8;
--green-50:#E7F7EE;--green-100:#D3F0E0;--green-500:#2CBB6B;--green-600:#22A45B;--green-700:#1B7F47;
--amber-50:#FEF6E7;--amber-500:#E9A33A;--amber-700:#A9701C;
--red-50:#FDECEC;--red-500:#E5484D;--red-600:#D13438;--red-700:#A82A2E;
--violet-100:#EAE6FB;--violet-600:#6D5BD0;--teal-100:#DDF2F1;--teal-600:#2F8C86;
--surface-page:var(--white);--surface-canvas:var(--n-50);--surface-card:var(--white);--surface-sunken:var(--n-75);--surface-hover:var(--n-75);--surface-active:var(--n-100);--surface-selected:var(--blue-50);
--text-primary:var(--n-950);--text-heading:var(--n-900);--text-body:var(--n-800);--text-secondary:var(--n-600);--text-muted:var(--n-500);--text-disabled:var(--n-400);--text-inverse:var(--white);--text-accent:var(--blue-500);
--border-subtle:var(--n-150);--border-default:var(--n-200);--border-strong:var(--n-300);
--accent-solid:var(--blue-500);--accent-tint:var(--blue-50);--accent-tint-strong:var(--blue-100);
--status-online:var(--green-500);
--fs-title:22px;--lh-title:28px;--fs-heading:17px;--lh-heading:24px;--fs-subheading:15px;--lh-subheading:22px;--fs-body:15px;--lh-body:22px;--fs-label:13px;--lh-label:18px;--fs-caption:12px;--lh-caption:16px;--fs-micro:11px;--lh-micro:14px;--fs-mono:13px;--lh-mono:21px;
--fw-regular:400;--fw-medium:500;--fw-semibold:600;--fw-bold:700;--ls-tight:-0.015em;--ls-caps:0.085em;
--type-body:var(--fw-regular) var(--fs-body)/var(--lh-body) var(--font-sans);
--type-label:var(--fw-medium) var(--fs-label)/var(--lh-label) var(--font-sans);
--type-section-caps:var(--fw-semibold) var(--fs-micro)/var(--lh-micro) var(--font-sans);
--r-xs:3px;--r-sm:4px;--r-md:6px;--r-lg:8px;--r-xl:10px;--r-2xl:14px;--r-pill:999px;--r-card:8px;--r-chip:4px;
--pad-card:16px;--rail-width:340px;--nav-rail-width:56px;
--dur-fast:120ms;--ease-standard:cubic-bezier(.2,.7,.3,1);
--shadow-md:0 4px 16px rgba(16,24,40,.10);--shadow-lg:0 12px 32px -6px rgba(16,24,40,.14);
--font-sans:"Figtree","Helvetica Neue",Arial,sans-serif;--font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
font:var(--type-body);color:var(--text-body);-webkit-font-smoothing:antialiased;text-align:left;
}
.duo-cmp *{box-sizing:border-box}

/* ---- Responsive / mobile ---- */
@media (max-width:980px){
  /* Hero product mock: let it shrink to the viewport and drop the account rail */
  .du-workspace{min-width:0 !important;}
  .du-workspace-rail{display:none !important;}
}
/* Keep each nav link on a single line (never wrap "How it works" into stacked words) */
header nav a{white-space:nowrap;}
@media (max-width:1080px){
  /* Tight bar: drop the legal links first (still reachable in the footer) */
  header nav a:nth-child(n+4){display:none !important;}
}
@media (max-width:900px){
  /* Tighter: also drop FAQs, keeping How it works + Customers */
  header nav a:nth-child(3){display:none !important;}
}
@media (max-width:820px){
  /* Navbar: hide the centre links (keep the logo + CTAs); nav keeps its flex spacer */
  header nav a{display:none !important;}
}
@media (max-width:760px){
  /* Two-column splits (FAQ etc.) stack */
  .du-split{grid-template-columns:1fr !important;gap:28px !important;}
  /* Footer: stack the statement / links / newsletter columns */
  footer div[style*="minmax(240px, 1.1fr)"]{grid-template-columns:1fr !important;gap:40px !important;}
  /* Footer link groups: two tidy columns instead of cramped auto-fit */
  footer div[style*="minmax(150px, 1fr)"]{grid-template-columns:1fr 1fr !important;gap:28px !important;}
  /* Tame the oversized outline wordmark */
  footer div[style*="14.5vw"]{font-size:clamp(48px,17vw,120px) !important;}
}
/* Belt-and-braces: never allow horizontal scroll (clip keeps the sticky nav working) */
html,body{overflow-x:clip;}
/* Stop the product mock's min-content from stretching the hero grid column (and headline) */
.du-hero-wide .du-container > div{min-width:0;}
@media (max-width:600px){
  /* Hero headline: smaller, and drop the desktop line break so it wraps to the phone width */
  .du-hero-wide h1{font-size:clamp(30px,8.5vw,52px) !important;}
  .du-hero-wide h1 br{display:none !important;}
  /* Let the hero copy use the full column on small screens */
  .du-hero-wide .du-container > div:first-child{max-width:100% !important;}
  /* Tighten the nav and drop the secondary "Sign in" link so the primary CTA fits */
  header a[href*="/signin"]{display:none !important;}
  header > div > a{padding-inline:16px !important;}
  header > div > div:last-of-type{padding-inline:16px !important;}
}