/*
  SessionM — custom stylesheet.

  Registered in documentation.json under "customCss" only -- the key the working
  AlgoShack project uses. Setting both "customCss" and "css" loaded nothing.

  In the editor: Site Config → Custom CSS → Add Stylesheet → styles/home.css.

  Selectors are FLAT on purpose -- no native CSS nesting, no "&", so no build
  step can drop a whole block by failing to parse newer syntax.

  Home-page scoping uses the id the platform generates from each page's H2:
    help-center.mdx        ## Welcome to the SessionM Help Center
      -> <h2 id="welcome-to-the-sessionm-help-center">
    developer/sessionm-developer-center.mdx
                     ## Welcome to the SessionM Developer Center
      -> <h2 id="welcome-to-the-sessionm-developer-center">
  Those ids exist nowhere else. CAVEAT: the id comes from the heading TEXT, so
  rewording either H2 changes it and silently kills every rule below it.
*/

/* Plus Jakarta Sans -- the face the acquisition landing at the foot of this
   file is drawn in. It has to sit here, above every rule: CSS ignores an
   @import that appears after one. The landing falls back to the system stack
   if this request fails, so nothing breaks if the font is ever blocked. */
@import url("https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap");

/* ── Content column: same values as the algoQA home (1280px, 24px gutter) ── */
:root:has(#welcome-to-the-sessionm-help-center) .dai-article,
:root:has(#welcome-to-the-sessionm-help-center) .dai-content-column,
:root:has(#welcome-to-the-sessionm-developer-center) .dai-article,
:root:has(#welcome-to-the-sessionm-developer-center) .dai-content-column {
  max-width: 1280px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 24px !important;
  padding-right: 24px !important;
}

/* ── Grid spacing under each section ── */
:root:has(#welcome-to-the-sessionm-help-center) [data-component="Columns"],
:root:has(#welcome-to-the-sessionm-developer-center) [data-component="Columns"] {
  gap: 16px !important;
}

/* ── Card text: 16px/1.35 titles, 14px/1.55 descriptions (algoQA values) ── */
:root:has(#welcome-to-the-sessionm-help-center) [data-component="Card"] .dai-card-title,
:root:has(#welcome-to-the-sessionm-developer-center) [data-component="Card"] .dai-card-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
}
:root:has(#welcome-to-the-sessionm-help-center) [data-component="Card"] .dai-card-description,
:root:has(#welcome-to-the-sessionm-developer-center) [data-component="Card"] .dai-card-description {
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
  margin-top: 4px !important;
}

/* ── Tablet ── */
@media (max-width: 1000px) {
  :root:has(#welcome-to-the-sessionm-help-center) .dai-article,
  :root:has(#welcome-to-the-sessionm-help-center) .dai-content-column,
  :root:has(#welcome-to-the-sessionm-developer-center) .dai-article,
  :root:has(#welcome-to-the-sessionm-developer-center) .dai-content-column {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Mobile ──────────────────────────────────────────────────────────────────
   Tighter on all four sides, to match what the platform gives every other page.

   SIDES: the platform already pads the shell -- .dai-page carries px-8 (32px)
   below lg. The rules above then add their own padding to .dai-article AND to
   .dai-content-column, which NEST, so at 540px the two stacked on top of the
   shell and the content sat 64px in from each edge against 32px everywhere
   else -- roughly 240px of usable width instead of 324px. Measured at a 390px
   viewport against documentation.ai/docs/components/columns.

   Zeroing both here hands the gutter back to .dai-page, so these pages line up
   with the rest of the site. Desktop and tablet are untouched: this block only
   fires at 540px and below.

   TOP: with no mobile nav strip above it, the breadcrumb's 36px platform offset
   plus the section gap left a visible void under the logo. Halved below.

   BOTTOM: .dai-page-main ships pb-10 (40px); 24px is enough under the last card.
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 540px) {
  :root:has(#welcome-to-the-sessionm-help-center) .dai-article,
  :root:has(#welcome-to-the-sessionm-help-center) .dai-content-column,
  :root:has(#welcome-to-the-sessionm-developer-center) .dai-article,
  :root:has(#welcome-to-the-sessionm-developer-center) .dai-content-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Top: pull the breadcrumb up under the header */
  :root:has(#welcome-to-the-sessionm-help-center) .page-group-title,
  :root:has(#welcome-to-the-sessionm-developer-center) .page-group-title {
    margin-top: 16px !important;
  }

  /* Bottom: trim the tail below the last card */
  :root:has(#welcome-to-the-sessionm-help-center) .dai-page-main,
  :root:has(#welcome-to-the-sessionm-developer-center) .dai-page-main {
    padding-bottom: 24px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   API Starter Pack (Developer Center home)

   Layout follows the live docs.sessionm.com card: title across the top, a rule
   under it, then the Postman logo beside the copy. Written as plain markup in
   the MDX rather than as a <Card>, because the component renders its `image`
   prop above the title with dai-card-image (w-full h-auto object-cover) -- full
   width by design, which is the wrong place and size for this layout.

   The MDX reproduces the component's wrapper chain exactly, straight from its
   source, so the cascade treats both cards identically:
     Link.!border-b-0.hover:!opacity-100
       > div[data-component=Card].bg-background.border.border-border-muted
                                 .rounded-xl.flex.flex-col.overflow-hidden
                                 .group.!decoration-0.hover:!opacity-100
       > div.w-full.overflow-hidden            (image slot, empty here)
       > div.p-5.py-4                          (all padding comes from this)
         > div.flex.flex-col.gap-3.5
           > div.space-y-3.5.h-full
             > div.space-y-0.5
               > p.dai-card-title  +  span.dai-card-description
   Note hover:border-heading is CONDITIONAL in the component --
   `href && !cta && !image`. This card meets all three, so it is hard-coded
   here; add a cta and it would need removing to stay faithful.

   NO COLOURS, TYPE SIZES OR PADDING ARE SET HERE. Those come from the platform's own
   utility classes, applied in the MDX -- the exact same ones the <Card>
   component renders:
     shell : bg-background border border-border-muted rounded-xl
             hover:border-heading
     rule  : bg-border-muted
     title : !font-semibold !text-base !text-heading
     copy  : !text-[14px] !text-body !font-normal !leading-normal
   That is deliberate. An earlier version hard-coded var(--body, #363747) and
   friends; those token names were guesses, so the fallback hex silently took
   over and this card's text drifted from the section cards -- and could never
   follow dark mode. Borrowing the component's utilities means one source of
   truth: the two cards cannot diverge, in either theme. Only layout below.
   ══════════════════════════════════════════════════════════════════════════ */
:root:has(#welcome-to-the-sessionm-developer-center) .sm-starter {
  display: block !important;
  margin: 16px 0 !important;
}
:root:has(#welcome-to-the-sessionm-developer-center) .sm-starter__title {
  margin: 0;
}
:root:has(#welcome-to-the-sessionm-developer-center) .sm-starter__rule {
  height: 1px;
  margin: 14px 0 16px 0;
}

/* Body: logo left, copy right */
:root:has(#welcome-to-the-sessionm-developer-center) .sm-starter__body {
  display: flex;
  align-items: center;
  gap: 20px;
}
:root:has(#welcome-to-the-sessionm-developer-center) .sm-starter__logo {
  flex: 0 0 72px;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
}
:root:has(#welcome-to-the-sessionm-developer-center) .sm-starter__copy {
  margin: 0;
  flex: 1 1 auto;
}

/* Stack on narrow screens */
@media (max-width: 640px) {
  :root:has(#welcome-to-the-sessionm-developer-center) .sm-starter__body {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Feature card (.sm-feature) — the same look as .sm-starter above, but built
   from the <Card> component instead of hand-written markup.

   Its own class set, kept separate from .sm-starter* on purpose: the two cards
   have completely different DOM, so sharing hooks would mean rules that only
   half-apply to each.

   <Card> takes no className, so the MDX wraps it in <div className="sm-feature">
   and these rules reach the component's internals through the stable dai-*
   classes. Structure the component renders:
     [data-component="Card"] > div.p-5.py-4 > … > p.dai-card-title
                                                + span.dai-card-description
                                                  > figure[data-component="Image"]
                                                  + p

   NO COLOURS, TYPE SIZES OR PADDING HERE -- the component already supplies all
   of it (bg-background, !text-heading, !text-body, p-5 py-4), which is exactly
   why this card cannot drift from the section cards below. These rules only add
   the divider under the title and lay the logo out beside the copy.

   That means NO divider rule under the title here: drawing one would require
   naming a border colour, and there is no class hook on the component's own
   title element to borrow one from. The card therefore looks exactly as <Card>
   renders it, only with the logo placed beside the copy.
   ══════════════════════════════════════════════════════════════════════════ */
:root:has(#welcome-to-the-sessionm-developer-center) .sm-feature {
  margin: 16px 0;
}

/* Body: logo left, copy right */
:root:has(#welcome-to-the-sessionm-developer-center) .sm-feature .dai-card-description {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin-top: 16px !important;
}
:root:has(#welcome-to-the-sessionm-developer-center) .sm-feature .dai-card-description > p {
  margin: 0 !important;
  flex: 1 1 auto !important;
}

img{
border-radius:0;
}

/* <Image> nests the picture as figure > div > [data-rmiz] > div > img, and its
   figure ships a !my-6 margin. Every level is pinned to 72px -- sizing only the
   <img> leaves an ancestor holding full width, which is what blew this logo up
   to fill the card earlier. !important is required because the component writes
   max-width/height inline on the <img> itself. */
:root:has(#welcome-to-the-sessionm-developer-center) .sm-feature .dai-card-description > figure {
  flex: 0 0 72px !important;
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  margin: 0 !important;
}
:root:has(#welcome-to-the-sessionm-developer-center) .sm-feature figure div {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
}
:root:has(#welcome-to-the-sessionm-developer-center) .sm-feature .dai-card-description img {
  width: 72px !important;
  height: 72px !important;
  max-width: 72px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}
/* <Image> renders the alt text as a visible caption; .sm-starter has none */
:root:has(#welcome-to-the-sessionm-developer-center) .sm-feature figcaption {
  display: none !important;
}

/* Stack on narrow screens, matching .sm-starter__body */
@media (max-width: 640px) {
  :root:has(#welcome-to-the-sessionm-developer-center) .sm-feature .dai-card-description {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   Hide the platform page title on the two home pages.

   Neither help-center.mdx nor developer/sessionm-developer-center.mdx carries a
   frontmatter title, so the platform falls back to the tab name and renders
   <h1 class="page-title">Help Center</h1> / <h1 class="page-title">Developer</h1>
   above the body. Each duplicates the "Welcome to the SessionM …" H2 sitting
   immediately below it, giving those pages two stacked titles.

   Scoped the same way as everything else in this file: :has() only matches on
   the page carrying that H2's generated id, so no other page is affected.
   Rewording either H2 changes its id and silently disables the matching rule.
   ══════════════════════════════════════════════════════════════════════════ */
:root:has(#welcome-to-the-sessionm-help-center) h1.page-title,
:root:has(#welcome-to-the-sessionm-developer-center) h1.page-title {
  display: none !important;
}




/* ══════════════════════════════════════════════════════════════════════════
   Prev/next page navigation — hidden on the two landing pages only.

   The Help Center tab carries "show-page-navigation": true (Developer and
   Release Notes are both false), so its landing page renders a "Next >
   Account Management" strip below the content. On a page that is itself a
   grid of links into every module, a single "next" pointer is noise.

   Hidden here rather than by flipping the tab flag, because that flag applies
   to the tab AND all 178 descendants -- it would also strip prev/next from
   every content page, where it is genuinely useful. Scoped to the landing
   pages via their H2 ids, same as every other rule in this file.

   .dai-page-nav is client-rendered, so it does not appear in the server HTML;
   confirmed only in the browser. If the platform renames it this rule stops
   working silently -- re-check after any platform upgrade.
   ══════════════════════════════════════════════════════════════════════════ */
:root:has(#welcome-to-the-sessionm-help-center) .dai-page-nav,
:root:has(#welcome-to-the-sessionm-developer-center) .dai-page-nav {
  display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Top spacing for the "Welcome to the SessionM ..." H2.

   These two pages carry no frontmatter title, so the platform renders
   <h1 class="page-title"> from the tab name, which duplicates the H2 below it.
   That h1 is hidden further up this file, which leaves the H2 doing a TITLE's
   job while still being paid SECTION spacing:

     .mdx-container h2 { margin-top: 48px }        (platform, editor.css)

   The platform's own compensation for this, .mdx-container h1 + h2 {margin-top:0},
   cannot fire: the h1 is a child of article.dai-article while the H2 sits inside
   div.mt-8.mdx-container, so the adjacent-sibling "+" never matches.

   TWO rules are required. div.mt-8 (32px) and the H2 (48px) are COLLAPSING
   margins -- they resolve to max(32, 48), so zeroing one alone just exposes the
   other. The wrapper goes to 0 and the H2 becomes the single knob.

   Values mirror what the platform gives h1.page-title:
     breadcrumb above  -> !mt-0            -> Developer Centre  = 0
     no breadcrumb     -> !mt-[36px]/[51px] -> Help Centre      = 40px
   Whether a breadcrumb renders above the title is NOT stable. It is decided
   server-side from parentLookup, and it varies with the viewer's auth state:
   signed out, the Developer page renders one; signed in, it does not. So the
   spacing must not be hard-coded per page -- it has to react to the breadcrumb
   actually being in the DOM. That is what the :has() pair below does.
   ══════════════════════════════════════════════════════════════════════════ */
:root:has(#welcome-to-the-sessionm-help-center) .dai-article > .mdx-container,
:root:has(#welcome-to-the-sessionm-developer-center) .dai-article > .mdx-container {
  margin-top: 0 !important;
}

/* Default -- nothing above the title, so it carries its own top offset.
   No :has() prefix needed: each id exists only on its own page. */
#welcome-to-the-sessionm-help-center,
#welcome-to-the-sessionm-developer-center {
  margin-top: 40px !important;
}

/* A breadcrumb IS present -- it already supplies the top offset (56px from the
   platform's .page-group-title), so the title sits tight beneath it, exactly
   as h1.page-title does on every content page. Specificity (1,2,0) beats the
   bare id above, so this wins wherever it matches. */
.dai-article:has(.dai-breadcrumbs) #welcome-to-the-sessionm-help-center,
.dai-article:has(.dai-breadcrumbs) #welcome-to-the-sessionm-developer-center {
  margin-top: 0 !important;
}

/* Mobile: the no-breadcrumb offset above is a desktop value. Cut it on small
   screens so the title starts near the top of the page. Placed last in the
   file so it outranks the bare-id rule, which is equally specific. */
@media (max-width: 540px) {
  #welcome-to-the-sessionm-help-center,
  #welcome-to-the-sessionm-developer-center {
    margin-top: 20px !important;
  }
  .dai-article:has(.dai-breadcrumbs) #welcome-to-the-sessionm-help-center,
  .dai-article:has(.dai-breadcrumbs) #welcome-to-the-sessionm-developer-center {
    margin-top: 0 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   Welcome / acquisition landing  (home.mdx)

   A one-to-one port of "sessionm landing draft.html". Every value below is
   the draft's own; the only additions are the rules that neutralise platform
   styling that would otherwise bleed into the markup (listed under "Platform
   neutralisation"). Nothing here keys off a heading id -- everything hangs
   off the .sm-landing wrapper class that home.mdx and no other page carries.

   What the draft has, and where it lives here
     nav.site-tabs      -> the platform's own tab bar (.dai-navbar-tabs),
                           restyled to the draft's metrics and given the
                           draft's exact SVG icons via CSS masks.
     #splash            -> .sm-landing__splash (same timings, same easing).
     .hero / .cards-section / .band -> same class set, sm-landing__ prefixed.
     .strip / .timeline / header / footer -> defined in the draft's CSS but
                           not used in its <body>; not reproduced.
     <title>            -> the page's frontmatter title.

   Theme: light only, exactly like the draft (color-scheme: light). The page
   renders light whichever theme a reader has chosen; footer.css does the
   same for .sm-landing.

   Full bleed: the platform shell is capped at 1560px (.dai-layout). That cap
   is lifted on this page so the tab-bar rule, the band rule and the footer
   band run edge to edge the way they do in the draft. No 100vw tricks are
   used, so there is no horizontal scrollbar from the vertical scrollbar's
   width.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Tokens (the draft's :root) ─────────────────────────────────────────── */
:root:has(.sm-landing) {
  --sm-l-ink: #10131A;
  --sm-l-ink-soft: #3C4250;
  --sm-l-slate: #5B6472;
  --sm-l-paper: #FFFFFF;
  --sm-l-paper-dim: #F3F6F9;
  --sm-l-line: #E4E8EE;
  --sm-l-blue: #1080D0;
  --sm-l-amber: #F5A214;
  --sm-l-orange: #DD5A22;
  --sm-l-green: #3FAE59;
  --sm-l-yellow: #F2C230;
  --sm-l-card-shadow: 0 1px 2px rgba(16, 19, 26, 0.04), 0 12px 32px -16px rgba(16, 19, 26, 0.14);
  --sm-l-band-bg: #FFFFFF;
  --sm-l-band-text: #10131A;
  --sm-l-band-muted: #5B6472;
  --sm-l-band-line: #E4E8EE;
  --sm-l-font: "Plus Jakarta Sans", -apple-system, "Segoe UI", sans-serif;
  --sm-l-gutter: 32px;        /* .wrap side padding; 20px below 820px */
  color-scheme: light;
  background: var(--sm-l-paper);
}

/* ── Platform neutralisation ────────────────────────────────────────────────
   Scoped by :root:has(.sm-landing), so these touch this one page only.
   ─────────────────────────────────────────────────────────────────────── */

/* The page is light-only: pin the document ground so nothing dark shows
   through in the gutters or below the footer when a reader is in dark mode. */
:root:has(.sm-landing) body {
  background: var(--sm-l-paper) !important;
}

/* Lift the 1560px shell cap so bands and rules run edge to edge. */
:root:has(.sm-landing) .dai-layout {
  max-width: none !important;
}

/* Logo / search / theme-toggle row: the draft's <body> opens straight onto
   the tab row, so the whole first row goes. The header stops being sticky
   as well -- the draft's tab bar scrolls with the page. */
:root:has(.sm-landing) .dai-navbar,
:root:has(.sm-landing) .dai-navbar-search,
:root:has(.sm-landing) .dai-sidebar-mobile,
:root:has(.sm-landing) .dai-ask-ai-button {
  display: none !important;
}

:root:has(.sm-landing) .dai-sticky-header {
  position: static !important;
  height: auto !important;
  background: var(--sm-l-paper) !important;
}

/* Breadcrumb, page title, platform paddings. The title <h1> the platform
   prints from the frontmatter is display:none so the hero's own <h1> is the
   page's single top-level heading, as in the draft. */
:root:has(.sm-landing) .dai-breadcrumbs,
:root:has(.sm-landing) .dai-article > .page-title,
:root:has(.sm-landing) .dai-article > .page-description {
  display: none !important;
}

:root:has(.sm-landing) .dai-page,
:root:has(.sm-landing) .dai-page-main {
  padding: 0 !important;
  background: var(--sm-l-paper) !important;
}

:root:has(.sm-landing) .dai-article,
:root:has(.sm-landing) .dai-content-column {
  max-width: none !important;
  padding: 0 !important;
}

:root:has(.sm-landing) .dai-article > * {
  margin-top: 0 !important;
}

/* ── Tab bar (the draft's nav.site-tabs) ──────────────────────────────────
   Platform DOM:
     .dai-navbar-tabs                       hidden below lg, overflow-x:auto
       > div                                h-10, border-b, flex, gap-x-4
         > a[.text-brand when active]       h-full, pb-2.5, text-sm/500
           > span                           icon + label, gap-1.5
           > div[.bg-brand when active]     absolute, bottom:-1px, 1.5px tall

   Draft:
     nav.site-tabs   border-bottom 1px --line, full width
       .wrap         1080px measure, 32px gutters, overflow-x:auto
         .site-tab   18px 2px 15px, 14.5px/600 --slate, gap 8px, 19px icon,
                     2px underline pulled 1px over the nav rule (margin -1px)

   The grey rule is painted as an inset shadow on the OUTER element so it
   spans the full width and never scrolls, and the row keeps a transparent
   1px border in that same strip. The underline (2px, bottom:-1px) therefore
   ends inside the row's border box -- overlapping the rule by 1px exactly as
   in the draft -- and never overflows the scroll container. That overflow
   was what made the bar scroll vertically by a pixel before ("please remove
   the slider", review of 9 Sep 2026).

   Tab height: the draft's tab is 18 + 19 + 15 + a 2px border, pulled up 1px
   (margin-bottom:-1px) so the bar is 54px with the rule at 53-54px. Here the
   underline is a separate box, so the tab takes 16px of bottom padding to
   land the rule on the same pixel row.

   Alignment: in the draft a generic `nav { display:flex }` rule turns the
   .wrap row into a shrink-wrapped flex item that `margin: 0 auto` centres,
   so the GROUP of tabs is centred in the window (group = tabs + 32px either
   side), not aligned to the hero's left edge. Reproduced with auto margins
   on two gutter spacers: they split the free space when the tabs fit, and
   collapse to 0 when the row overflows, so on a narrow screen the row
   starts at the left gutter and scrolls, exactly like the draft.
   ─────────────────────────────────────────────────────────────────────── */
:root:has(.sm-landing) .dai-navbar-tabs {
  display: block !important;                     /* the draft shows it at every width */
  background: var(--sm-l-paper) !important;
  border: 0 !important;
  box-shadow: inset 0 -1px 0 var(--sm-l-line);
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: none;
}

:root:has(.sm-landing) .dai-navbar-tabs::-webkit-scrollbar {
  display: none;
}

:root:has(.sm-landing) .dai-navbar-tabs > div {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid transparent !important;
  display: flex !important;
  align-items: center !important;
  gap: 32px !important;
}

/* Gutter spacers (see "Alignment" above). Each nets out to one gutter: its
   own width, minus the 32px gap the row puts beside it. */
:root:has(.sm-landing) .dai-navbar-tabs > div::before,
:root:has(.sm-landing) .dai-navbar-tabs > div::after {
  content: "";
  display: block;
  flex: 0 0 var(--sm-l-gutter);
}

:root:has(.sm-landing) .dai-navbar-tabs > div::before {
  margin-left: auto;
  margin-right: -32px;
}

:root:has(.sm-landing) .dai-navbar-tabs > div::after {
  margin-right: auto;
  margin-left: -32px;
}

:root:has(.sm-landing) .dai-navbar-tabs > div > a {
  height: auto !important;
  margin: 0 !important;
  padding: 18px 2px 16px !important;
  font-family: var(--sm-l-font) !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: normal !important;
  color: var(--sm-l-slate) !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: color 0.15s ease !important;
}

:root:has(.sm-landing) .dai-navbar-tabs > div > a:hover {
  color: var(--sm-l-ink) !important;
}

:root:has(.sm-landing) .dai-navbar-tabs > div > a:focus-visible {
  outline: 2px solid var(--sm-l-blue) !important;
  outline-offset: 2px !important;
  border-radius: 3px !important;
}

:root:has(.sm-landing) .dai-navbar-tabs > div > a.text-brand {
  color: var(--sm-l-orange) !important;
}

:root:has(.sm-landing) .dai-navbar-tabs > div > a > span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  line-height: normal !important;
}

:root:has(.sm-landing) .dai-navbar-tabs > div > a svg {
  width: 19px !important;
  height: 19px !important;
  flex-shrink: 0 !important;
  stroke-width: 1.7 !important;
}

/* Underline: 2px, only on the active tab (the draft has no hover underline). */
:root:has(.sm-landing) .dai-navbar-tabs > div > a > div {
  height: 2px !important;
  bottom: -1px !important;
  background: transparent !important;
}

:root:has(.sm-landing) .dai-navbar-tabs > div > a.text-brand > div {
  background: var(--sm-l-orange) !important;
}

/* The draft's own icons, drawn as masks in currentColor so they take the
   tab's colour in every state. Where masks are unsupported the platform's
   Lucide icons stay, sized and stroked to match. */
@supports (mask-repeat: no-repeat) or (-webkit-mask-repeat: no-repeat) {
  :root:has(.sm-landing) .dai-navbar-tabs > div > a svg {
    display: none !important;
  }

  :root:has(.sm-landing) .dai-navbar-tabs > div > a > span::before {
    content: "";
    display: block;
    width: 19px;
    height: 19px;
    flex-shrink: 0;
    background-color: currentColor;
    -webkit-mask: var(--sm-l-tab-icon) center / contain no-repeat;
    mask: var(--sm-l-tab-icon) center / contain no-repeat;
  }
}

/* 1. Welcome */
:root:has(.sm-landing) .dai-navbar-tabs > div > a:nth-child(1) {
  --sm-l-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M4 11.5 12 4l8 7.5' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6 10v9a1 1 0 0 0 1 1h3v-6h4v6h3a1 1 0 0 0 1-1v-9' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 2. Learning Hub */
:root:has(.sm-landing) .dai-navbar-tabs > div > a:nth-child(2) {
  --sm-l-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 4 3 8l9 4 9-4-9-4Z' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M6 10v5c0 1.1 2.7 3 6 3s6-1.9 6-3v-5' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 3. Developer Center */
:root:has(.sm-landing) .dai-navbar-tabs > div > a:nth-child(3) {
  --sm-l-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M8 8 4 12l4 4M16 8l4 4-4 4' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* 4. Release Notes */
:root:has(.sm-landing) .dai-navbar-tabs > div > a:nth-child(4) {
  --sm-l-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 11v2a2 2 0 0 0 2 2h1l3 4v-4h1l7-3V8L10 5H9v4H6a2 2 0 0 0-2 2Z' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M18 9.5c1 .8 1 3.2 0 4' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}
/* 5. Help Center */
:root:has(.sm-landing) .dai-navbar-tabs > div > a:nth-child(5) {
  --sm-l-tab-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 4h9l4 4v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z' stroke='%23000' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M8 9h7M8 13h7M8 17h4' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ── Landing root ───────────────────────────────────────────────────────── */
.sm-landing {
  font-family: var(--sm-l-font);
  line-height: normal;                  /* the draft's body: no explicit line-height */
  color: var(--sm-l-ink);
  background: var(--sm-l-paper);
  -webkit-font-smoothing: antialiased;
}

.sm-landing *,
.sm-landing *::before,
.sm-landing *::after {
  box-sizing: border-box;
}

/* The draft's `a { color: inherit }`, plus the platform link treatment
   (.mdx-container a: 600 weight, 1px bottom border, 0.8 hover opacity)
   undone so each component below starts from a clean anchor. Specificity
   (0,2,1): the button and card-link rules below are written as
   `.sm-landing a.…` to match it and win by source order. */
.mdx-container .sm-landing a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
  border-bottom: 0;
  transition: none;
}

.mdx-container .sm-landing a:hover {
  opacity: 1;
}

.sm-landing .sm-landing__wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--sm-l-gutter);
}

/* ── Splash (the draft's #splash) ──────────────────────────────────────── */
.sm-landing .sm-landing__splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--sm-l-paper);
  animation: smLandingSplashOut 0.5s ease 1.3s forwards;
}

.sm-landing .sm-landing__splash img {
  height: 52px;
  width: auto;
  animation: smLandingSplashPulse 1.3s ease;
}

@keyframes smLandingSplashOut {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; pointer-events: none; }
}

@keyframes smLandingSplashPulse {
  0%   { opacity: 0; transform: scale(0.94); }
  35%  { opacity: 1; transform: scale(1); }
  100% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .sm-landing .sm-landing__splash {
    animation: smLandingSplashOut 0.3s ease 0.4s forwards;
  }
  .sm-landing .sm-landing__splash img {
    animation: none;
  }
}

/* ── Hero ───────────────────────────────────────────────────────────────── */
/* Draft: 56px 0 64px. Review feedback (Andrea, 9 Sep 2026): the gap between
   the "Explore Capillary" button and "What this means for you" was too big
   (64px hero + 72px cards = 136px) and should reuse the spacing between the
   cards and the quote rule (72px). The hero's bottom padding is therefore 0
   and the 72px comes from .sm-landing__cards alone. */
.sm-landing .sm-landing__hero {
  padding: 56px 0 0;
}

.sm-landing .sm-landing__hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 48px;
  align-items: center;
  max-width: 1080px;
}

.sm-landing .sm-landing__copy {
  min-width: 0;
}

.sm-landing .sm-landing__logo {
  display: block;
  height: 30px;
  width: auto;
  max-width: 100%;
  margin: 0 0 22px;
}

.sm-landing .sm-landing__badge {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--sm-l-amber) 18%, transparent);
  color: #92400E;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 16px;
  border-radius: 100px;
  margin: 0 0 20px;
}

.sm-landing .sm-landing__title {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sm-l-font);
  font-size: 48px;
  line-height: 1.09;
  font-weight: 800;
  letter-spacing: -0.9px;
  color: var(--sm-l-ink);
  text-wrap: balance;
}

.sm-landing .sm-landing__lede {
  margin: 22px 0 0;
  font-size: 17px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--sm-l-ink-soft);
  max-width: 52ch;
}

.sm-landing .sm-landing__ctas {
  display: flex;
  gap: 14px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.sm-landing a.sm-landing__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 100px;
  font-size: 14px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.sm-landing a.sm-landing__btn:hover {
  transform: translateY(-1px);
}

.sm-landing a.sm-landing__btn:focus-visible {
  outline: 2px solid var(--sm-l-blue);
  outline-offset: 3px;
}

.sm-landing a.sm-landing__btn--solid {
  background: var(--sm-l-amber);
  color: #20130A;
  box-shadow: 0 10px 24px -10px rgba(245, 162, 20, 0.55);
}

.sm-landing a.sm-landing__btn--outline {
  background: transparent;
  border-color: var(--sm-l-line);
  color: var(--sm-l-ink);
}

.sm-landing a.sm-landing__btn--outline:hover {
  border-color: var(--sm-l-ink-soft);
}

.sm-landing a.sm-landing__btn svg {
  width: 14px;
  height: 14px;
}

.sm-landing .sm-landing__media {
  display: flex;
}

.sm-landing .sm-landing__banner {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(16, 19, 26, 0.06), 0 20px 44px -22px rgba(16, 19, 26, 0.24);
}

/* Entrance: the draft animates the h1, the lede and the CTA row (its
   .eyebrow rule matches nothing in the body; the badge is not animated). */
@keyframes smLandingRise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.sm-landing .sm-landing__title,
.sm-landing .sm-landing__lede,
.sm-landing .sm-landing__ctas {
  animation: smLandingRise 0.5s ease both;
}

.sm-landing .sm-landing__title { animation-delay: 0.05s; }
.sm-landing .sm-landing__lede  { animation-delay: 0.1s; }
.sm-landing .sm-landing__ctas  { animation-delay: 0.15s; }

@media (prefers-reduced-motion: reduce) {
  .sm-landing .sm-landing__title,
  .sm-landing .sm-landing__lede,
  .sm-landing .sm-landing__ctas {
    animation: none;
  }
}

/* ── "What this means for you" ──────────────────────────────────────────── */
.sm-landing .sm-landing__cards {
  padding: 72px 0;
}

.sm-landing .sm-landing__head {
  max-width: 56ch;
  margin-bottom: 36px;
}

.sm-landing .sm-landing__head h2 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sm-l-font);
  font-size: 28px;
  line-height: normal;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--sm-l-ink);
  text-wrap: balance;
}

.sm-landing .sm-landing__head p {
  margin: 12px 0 0;
  color: var(--sm-l-slate);
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
}

.sm-landing .sm-landing__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.sm-landing .sm-landing__card {
  background: var(--sm-l-paper);
  border: 1px solid var(--sm-l-line);
  border-radius: 18px;
  padding: 30px;
  box-shadow: var(--sm-l-card-shadow);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sm-landing .sm-landing__card-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sm-landing .sm-landing__card-icon--sm {
  background: color-mix(in srgb, var(--sm-l-orange) 14%, transparent);
}

.sm-landing .sm-landing__card-icon--cap {
  background: color-mix(in srgb, var(--sm-l-blue) 14%, transparent);
}

.sm-landing .sm-landing__card h3 {
  margin: 0;
  padding: 0;
  border: 0;
  font-family: var(--sm-l-font);
  font-size: 19px;
  line-height: normal;
  font-weight: 700;
  letter-spacing: -0.2px;
  color: var(--sm-l-ink);
  text-wrap: balance;
}

.sm-landing .sm-landing__card p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--sm-l-slate);
}

.sm-landing a.sm-landing__card-link {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: normal;
  text-decoration: none;
  border: 1px solid var(--sm-l-line);
  color: var(--sm-l-ink);
  transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease;
  align-self: flex-start;
}

.sm-landing a.sm-landing__card-link:hover {
  border-color: var(--sm-l-ink-soft);
  background: var(--sm-l-paper-dim);
  transform: translateY(-1px);
}

.sm-landing a.sm-landing__card-link:focus-visible {
  outline: 2px solid var(--sm-l-blue);
  outline-offset: 3px;
}

.sm-landing a.sm-landing__card-link svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}

.sm-landing a.sm-landing__card-link:hover svg {
  transform: translateX(3px);
}

/* ── Quote band ─────────────────────────────────────────────────────────── */
/* 64px above and below the quote, as in the draft. The site footer follows
   with no top margin of its own (footer.css), so the space under the byline
   is this 64px and nothing more -- review feedback had the earlier 144px
   (64px + an 80px footer margin) as too big. */
.sm-landing .sm-landing__band {
  background: var(--sm-l-band-bg);
  color: var(--sm-l-band-text);
  padding: 64px 0;
  border-top: 1px solid var(--sm-l-band-line);
}

/* Declared after __wrap so its 720px measure wins, as in the draft. */
.sm-landing .sm-landing__band-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}

.sm-landing .sm-landing__band blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 22px;
  line-height: 1.5;
  font-weight: 500;
  font-style: normal;
  letter-spacing: -0.2px;
  color: inherit;
}

.sm-landing .sm-landing__band blockquote::before {
  content: "\201C";
  color: var(--sm-l-amber);
  font-size: 1.2em;
}

.sm-landing .sm-landing__band cite {
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 13.5px;
  color: var(--sm-l-band-muted);
  text-align: center;
}

.sm-landing .sm-landing__band cite b {
  color: var(--sm-l-band-text);
  font-weight: 700;
}

/* ── Responsive: the draft's single 820px breakpoint ────────────────────── */
@media (max-width: 820px) {
  :root:has(.sm-landing) {
    --sm-l-gutter: 20px;
  }

  .sm-landing .sm-landing__hero-grid {
    grid-template-columns: 1fr;
  }

  .sm-landing .sm-landing__media {
    order: -1;
    margin-bottom: 24px;
  }

  .sm-landing .sm-landing__title {
    font-size: 36px;
  }

  .sm-landing .sm-landing__row {
    grid-template-columns: 1fr;
  }
}