/* ============================================================================
   MODCADO — design system
   Extracted from the Figma file `traxor_FO61C0B53C782_$120_UXmancer`
   (node 2055:23, "Home page v2") and the landing page built from it.

   Load order matters only for the cascade layers below. Anything you write
   OUTSIDE these layers automatically wins, so you can adopt the theme without
   fighting it:

     @layer mc.tokens, mc.base, mc.components;
   <- declared here
     .my-app-thing { ... }                        <- unlayered, always wins

   Three layers:
     mc.tokens      custom properties only. Re-theme by overriding these.
     mc.base        real HTML elements. No classes required.
     mc.components  the signature Modcado shapes, as opt-in classes.
   ========================================================================= */

@layer mc.tokens, mc.base, mc.components;

/* ---------------------------------------------------------------------------
   FONTS
   Chakra Petch is the voice of the brand: squared terminals, slightly
   condensed, reads as "technical" without being a monospace. It does ~99% of
   the work, in four weights:

     400 Regular   body, placeholders, quiet labels
     500 Medium    stat labels, nav links, "Get in touch"
     600 SemiBold  every headline, card title, stat value
     700 Bold      buttons, eyebrows on dark panels, big outlined numerals

   Chakra Petch 300 is NOT used anywhere in the design -- do not load it.

   Space Grotesk appears in exactly TWO places in the whole product: the "$0"
   badge and the free-banner counter, both Bold. That is the only reason it is
   loaded, and 700 is the only weight worth requesting. Everything else that
   looks like a big number -- including the stat counters -- is Chakra Petch
   SemiBold.

   The faces are SELF-HOSTED -- the product ships offline-first, so it cannot
   depend on fonts.googleapis.com, and no visitor IP should reach a third
   party. Load fonts.css before this file:

   <link rel="stylesheet" href="theme/fonts.css">
   <link rel="stylesheet" href="theme/modcado.css">
   ------------------------------------------------------------------------ */

@layer mc.tokens {
  :root {
    color-scheme: dark;

    /* ---- surfaces -------------------------------------------------------
       Six steps of near-black. They are NOT a lightness ramp: each one is a
       specific material. Use the named role, not "the next darker one".      */
    --mc-void:        #040406;   /* full-bleed section behind everything      */
    --mc-bg:          #0A0D12;   /* page background                          */
    --mc-bg-deep:     #06090D;   /* recessed wells inside the page           */
    --mc-panel:       #12171F;   /* the standard card / panel                */
    --mc-panel-alt:   #10121D;   /* card that sits ON another card           */
    --mc-panel-dark:  #0E1019;   /* wide banner slabs                        */
    --mc-panel-inner: #161C21;   /* the lighter inlay inside a banner        */
    --mc-tile:        #11131E;   /* small square tiles (social, icon chips)  */
    --mc-field:       #171D27;   /* form control background                  */
    --mc-track:       #121720;   /* progress / scrollbar track               */
    --mc-pill:        #0E1219;   /* the badge / brand-pill ground            */

    /* ---- lines ----------------------------------------------------------
       Hairlines are white at low alpha so they survive on any surface.       */
    --mc-line:        rgb(255 255 255 / .08);
    --mc-line-2:      rgb(255 255 255 / .12);
    --mc-line-solid:  #151920;   /* opaque hairline, for card outer frames   */
    --mc-line-nav:    #0E2124;   /* the nav's cyan-tinted underline           */
    --mc-line-foot:   #161F2D;   /* the footer's cooler top edge              */

    /* ---- text -----------------------------------------------------------
       Five steps. --mc-t-2 is the workhorse for body copy.                   */
    --mc-t-0:         #FFFFFF;   /* headlines                                */
    --mc-t-1:         #E8EDF3;   /* strong UI text, card titles              */
    --mc-t-2:         #A5A5AB;   /* body copy                                */
    --mc-t-3:         #8B96A3;   /* placeholders, secondary labels           */
    --mc-t-4:         #57626F;   /* metadata, counts                         */
    --mc-t-5:         #777980;   /* legal, credits                           */
    --mc-t-link:      #8896AB;   /* quiet navigation links                   */
    --mc-ink:         #070707;   /* text ON a flat accent fill               */
    --mc-ink-teal:    #04222B;   /* text ON the cyan->teal gradient          */

    /* ---- accent ---------------------------------------------------------
       Two cyans, and they are not interchangeable:
         --mc-accent    fills and strokes (buttons, brackets, rules)
         --mc-accent-2  TEXT and icons — slightly softer, reads better small
       Re-theme the product by overriding just these four.                    */
    --mc-accent:      #04D3F7;
    --mc-accent-2:    #22D3EE;
    --mc-accent-hi:   #3FE0FF;   /* hover on an accent fill                  */
    --mc-accent-soft: #7FE8FB;   /* hover on accent text                     */
    --mc-accent-deep: #0F766E;   /* the teal end of the numeral gradient     */
    --mc-accent-glow: #0BDBFF;   /* the colour of blurred light only          */
    --mc-focus:       #B8F5FF;   /* focus ring inside an accent fill          */

    /* ---- status ---------------------------------------------------------- */
    --mc-ok:          #34D399;
    --mc-warn:        #FBBF24;
    --mc-danger:      #F87171;

    /* washes derived from the above; keep the alphas, they are tuned */
    --mc-ok-wash:     rgb(52 211 153 / .10);
    --mc-ok-line:     rgb(52 211 153 / .30);
    --mc-accent-wash: rgb(34 211 238 / .10);
    --mc-accent-line: rgb(34 211 238 / .25);
    --mc-warn-wash:   rgb(251 191 36 / .10);
    --mc-danger-wash: rgb(248 113 113 / .10);

    /* ---- gradients ------------------------------------------------------
       --mc-silver is the signature subhead treatment: a brushed-metal sweep
       clipped to the text. Always pair with `background-clip:text`.          */
    --mc-silver:  linear-gradient(90deg, #B1ADBD 0%, #D6D3DF 50%, #B1ADBD 100%);
    --mc-chrome:  linear-gradient(90deg, #FFFFFF, #9EA4B1);
    --mc-numeral: linear-gradient(180deg, var(--mc-accent-2), var(--mc-accent-deep));
    /* The numeral's outline, as Figma draws it. On a single glyph it reads
       as intended; across a longer figure the outline accumulates between
       characters and the whole number turns to chrome, so anything more
       than one character takes the accent below instead.                */
    --mc-numeral-stroke:      rgb(255 255 255 / .85);
    --mc-numeral-stroke-long: rgb(58 202 210 / .85);
    /* card edge: a 2px stroke that fades out across the card, not a flat line */
    --mc-edge:    linear-gradient(140deg, #434343, rgb(67 67 67 / .14) 51%, rgb(255 255 255 / 0));

    /* ---- type -----------------------------------------------------------
       One display/UI family. Space Grotesk exists ONLY for large numerals
       (stat counters, the "$0" badge) — never for prose.                     */
    --mc-font:      "Chakra Petch", var(--mc-font-fallback);
    /* ONLY the "$0" badge and the free-banner counter. Stat values are NOT
       this -- they are --mc-font, weight 600. */
    --mc-font-num:  "Space Grotesk", var(--mc-font-fallback);
    /* Arial first, deliberately. Measured over a mixed string at 100px,
       Chakra Petch sets at 0.9985x Arial's width -- a 0.15% match, so the
       swap causes no reflow. system-ui is 0.7% off AND varies by platform,
       which is why it sits behind rather than in front. */
    --mc-font-fallback: Arial, Helvetica, "Liberation Sans", system-ui, sans-serif;
    --mc-font-mono: ui-monospace, SFMono-Regular, "Cascadia Mono", Menlo, Consolas, monospace;

    /* Fluid scale. Each step is clamp(floor, viewport-relative, design value)
       where the design value is what Figma specifies at a 1600px canvas.
       Body sizes deliberately DO NOT scale — see the note in mc.base.        */
    --mc-fs-hero:  clamp(29px, 4vw,    64px);   /* h1                        */
    --mc-fs-2xl:   clamp(24px, 2.7vw,  42px);   /* section headline          */
    --mc-fs-xl:    clamp(24px, 2.5vw,  40px);   /* sub-section headline      */
    --mc-fs-lg:    clamp(24px, 2.3vw,  36px);   /* block headline            */
    --mc-fs-md:    clamp(20px, 2.1vw,  32px);   /* stat value, banner head   */
    --mc-fs-sm:    clamp(18px, 1.75vw, 28px);   /* hero standfirst           */
    --mc-fs-xs:    clamp(16px, 1.5vw,  24px);   /* card title, trust item    */
    --mc-fs-2xs:   clamp(15px, 1.25vw, 20px);   /* feature title             */
    --mc-fs-lede:  clamp(14px, 1.125vw, 18px);  /* standfirst paragraph      */
    --mc-fs-ui:    clamp(12px, .875vw, 14px);   /* buttons, nav, small UI    */
    --mc-fs-body:  16px;                        /* prose — intentionally flat */
    --mc-fs-small: 14px;
    --mc-fs-micro: 12px;

    --mc-lh-tight: 1.2;    /* headlines                                      */
    --mc-lh-head:  1.4;    /* uppercase titles                               */
    --mc-lh-body:  1.6;    /* prose                                          */
    --mc-lh-ui:    1.5;    /* dense UI text                                  */
    --mc-lh-flat:  1;      /* buttons, single-line labels                    */

    /* Tracking is a signature: headlines pull IN, uppercase labels push OUT. */
    --mc-track-head:  -.02em;
    --mc-track-label: .02em;

    /* ---- space ----------------------------------------------------------
       Section rhythm is fluid; component spacing is usually expressed in
       `cqw` against the component's own container (see mc.components).       */
    --mc-shell:   1320px;                        /* max content width        */
    --mc-gutter:  clamp(20px, 8.75vw, 140px);    /* page side margin         */
    --mc-nav-h:   clamp(72px, 6.25vw, 100px);
    --mc-sec-y:   clamp(56px, 7vw, 112px);       /* section top/bottom       */
    --mc-space-1: 4px;
    --mc-space-2: 8px;
    --mc-space-3: clamp(10px, 1vw, 16px);
    --mc-space-4: clamp(14px, 1.5vw, 24px);
    --mc-space-5: clamp(20px, 2.5vw, 40px);
    --mc-space-6: clamp(28px, 3.5vw, 56px);
    --mc-space-7: clamp(36px, 4.875vw, 78px);

    /* ---- shape ----------------------------------------------------------
       The brand is chamfered, not rounded. Radii are rare and small.
       Chamfer ratios are of the element's own height (see .mc-btn).          */
    --mc-radius:    0;        /* the default: square                         */
    --mc-radius-sm: 9px;      /* small icon tiles                            */
    --mc-radius-md: 12px;     /* social tiles                                */
    --mc-radius-pill: 20px;   /* status chips only                           */
    --mc-chamfer-x: .305;     /* horizontal cut, as a share of height        */
    --mc-chamfer-y: .25;      /* vertical cut, as a share of height          */
    --mc-hairline:  1px;

    /* ---- motion ---------------------------------------------------------
       Fast and mechanical. Nothing bounces, nothing over-shoots.             */
    --mc-ease:      cubic-bezier(.2, .6, .3, 1);
    --mc-dur-fast:  .15s;
    --mc-dur:       .18s;
  }
}

/* ==========================================================================
   BASE — real HTML elements, no classes required.
   Drop this into an app and bare markup already looks Modcado.
   ========================================================================== */

@layer mc.base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    scrollbar-color: var(--mc-line-2) transparent;
  }
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  body {
    margin: 0;
    background: var(--mc-bg);
    color: var(--mc-t-2);
    font-family: var(--mc-font);
    /* Body copy stays at a fixed 16px on purpose. Scaling prose with the
       viewport is how you end up with 5px text on a phone — the fluid scale
       above is for display type, which has room to shrink. */
    font-size: var(--mc-fs-body);
    line-height: var(--mc-lh-body);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  ::selection { background: var(--mc-accent); color: var(--mc-ink); }

  /* ---- headings -------------------------------------------------------
     h1/h2 are uppercase with NEGATIVE tracking — the family is wide enough
     that caps need pulling together. h3 and below are uppercase with
     POSITIVE tracking, which reads as a label rather than a headline.      */
  h1, h2, h3, h4, h5, h6 {
    margin: 0 0 var(--mc-space-3);
    color: var(--mc-t-0);
    font-weight: 600;
    text-transform: uppercase;
    text-wrap: balance;
  }
  h1 { font-size: var(--mc-fs-hero); line-height: var(--mc-lh-tight); letter-spacing: var(--mc-track-head); }
  h2 { font-size: var(--mc-fs-2xl);  line-height: var(--mc-lh-tight); letter-spacing: var(--mc-track-head); }
  h3 { font-size: var(--mc-fs-lg);   line-height: var(--mc-lh-head);  letter-spacing: 0; }
  h4 { font-size: var(--mc-fs-xs);   line-height: var(--mc-lh-head);  letter-spacing: var(--mc-track-label); }
  h5 { font-size: var(--mc-fs-2xs);  line-height: var(--mc-lh-head);  letter-spacing: var(--mc-track-label); }
  h6 { font-size: var(--mc-fs-ui);   line-height: var(--mc-lh-head);  letter-spacing: var(--mc-track-label); color: var(--mc-accent-2); }

  p { margin: 0 0 var(--mc-space-3); text-wrap: pretty; }
  p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }

  small { font-size: var(--mc-fs-small); color: var(--mc-t-4); }
  strong, b { font-weight: 700; color: var(--mc-t-1); }
  em, i { font-style: italic; }
  mark { background: var(--mc-accent-wash); color: var(--mc-accent-2); padding: 0 .25em; }
  abbr[title] { text-decoration-color: var(--mc-t-4); text-underline-offset: 3px; }
  sub, sup { font-size: .72em; line-height: 0; }
  del, s { color: var(--mc-t-4); text-decoration-color: var(--mc-danger); }
  ins, u { text-decoration: none; color: var(--mc-ok); }
  q { quotes: "C" "D" "8" "9"; color: var(--mc-t-1); }
  time { font-variant-numeric: tabular-nums; }
  address { font-style: normal; color: var(--mc-t-3); }
  iframe { border: 0; max-width: 100%; }

  a {
    color: var(--mc-accent-2);
    text-decoration: none;
    transition: color var(--mc-dur-fast) var(--mc-ease);
  }
  a:hover { color: var(--mc-accent-soft); text-decoration: underline; text-underline-offset: 3px; }
  /* prose links stay underlined so they are findable inside a paragraph */
  p > a, li > a, td > a { text-decoration: underline; text-underline-offset: 3px; }

  /* ---- lists ----------------------------------------------------------
     The marker is an accent square, not a bullet — squares everywhere.     */
  ul, ol { margin: 0 0 var(--mc-space-3); padding-left: 1.4em; }
  li { margin-bottom: var(--mc-space-2); }
  li::marker { color: var(--mc-accent-2); }
  ul, menu { list-style: square; }
  menu { margin: 0 0 var(--mc-space-3); padding-left: 1.4em; }
  dl { margin: 0 0 var(--mc-space-3); }
  dt { color: var(--mc-t-1); font-weight: 600; }
  dd { margin: 0 0 var(--mc-space-2); color: var(--mc-t-2); }

  hr {
    border: 0;
    height: var(--mc-hairline);
    background: var(--mc-line);
    margin: var(--mc-space-5) 0;
  }

  blockquote {
    margin: 0 0 var(--mc-space-3);
    padding: var(--mc-space-3) var(--mc-space-4);
    border-left: 2px solid var(--mc-accent);
    background: var(--mc-panel);
    color: var(--mc-t-1);
  }
  cite { color: var(--mc-t-4); font-style: normal; }

  /* ---- code ----------------------------------------------------------- */
  code, kbd, samp, pre { font-family: var(--mc-font-mono); font-size: .92em; }
  code {
    background: var(--mc-field);
    border: var(--mc-hairline) solid var(--mc-line);
    color: var(--mc-accent-2);
    padding: .12em .4em;
  }
  pre {
    margin: 0 0 var(--mc-space-3);
    padding: var(--mc-space-3);
    background: var(--mc-bg-deep);
    border: var(--mc-hairline) solid var(--mc-line);
    overflow-x: auto;
    color: var(--mc-t-1);
  }
  pre code { background: none; border: 0; padding: 0; color: inherit; }
  kbd {
    background: var(--mc-tile);
    border: var(--mc-hairline) solid var(--mc-line-2);
    border-bottom-width: 2px;
    color: var(--mc-t-1);
    padding: .15em .45em;
    font-size: .85em;
  }

  /* ---- media ---------------------------------------------------------- */
  img, svg, video, canvas { display: block; max-width: 100%; }
  img, video { height: auto; }
  figure { margin: 0 0 var(--mc-space-3); }
  figcaption { color: var(--mc-t-4); font-size: var(--mc-fs-small); margin-top: var(--mc-space-2); }

  /* ---- tables ---------------------------------------------------------
     Hairline rows, no vertical rules, uppercase head. Wrap wide tables in
     an element with `overflow-x:auto` — the table itself must not shrink.  */
  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 var(--mc-space-3);
    font-size: var(--mc-fs-small);
  }
  caption {
    text-align: left;
    color: var(--mc-t-4);
    padding-bottom: var(--mc-space-2);
  }
  th {
    text-align: left;
    color: var(--mc-t-3);
    font-weight: 600;
    font-size: var(--mc-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--mc-track-label);
    padding: var(--mc-space-2) var(--mc-space-3);
    border-bottom: var(--mc-hairline) solid var(--mc-line-2);
    white-space: nowrap;
  }
  td {
    padding: var(--mc-space-3);
    border-bottom: var(--mc-hairline) solid var(--mc-line);
    color: var(--mc-t-2);
  }
  thead { background: var(--mc-panel-alt); }
  tbody tr:last-child td { border-bottom: 0; }
  tbody tr:hover td { background: rgb(255 255 255 / .02); }
  tfoot td { color: var(--mc-t-1); font-weight: 600; }

  /* ---- forms ----------------------------------------------------------
     Controls are square wells. The only rounded things in the system are
     status chips and the small icon tiles.                                 */
  fieldset {
    margin: 0 0 var(--mc-space-4);
    padding: var(--mc-space-4);
    border: var(--mc-hairline) solid var(--mc-line);
    background: var(--mc-panel);
  }
  legend {
    padding: 0 var(--mc-space-2);
    color: var(--mc-accent-2);
    font-size: var(--mc-fs-micro);
    text-transform: uppercase;
    letter-spacing: var(--mc-track-label);
  }
  label { display: inline-block; color: var(--mc-t-1); font-size: var(--mc-fs-small); font-weight: 500; }

  input, select, textarea {
    font: inherit;
    font-size: var(--mc-fs-small);
    color: var(--mc-t-1);
    background: var(--mc-field);
    border: var(--mc-hairline) solid var(--mc-line);
    border-radius: var(--mc-radius);
    padding: 0 clamp(10px, .94vw, 15px);
    height: clamp(34px, 2.63vw, 42px);
    width: 100%;
    max-width: 100%;
    transition: border-color var(--mc-dur-fast) var(--mc-ease),
                background var(--mc-dur-fast) var(--mc-ease);
  }
  textarea { height: auto; min-height: 7em; padding: clamp(8px, .75vw, 12px) clamp(10px, .94vw, 15px); resize: vertical; line-height: var(--mc-lh-body); }
  input::placeholder, textarea::placeholder { color: var(--mc-t-3); opacity: 1; }
  input:hover, select:hover, textarea:hover { border-color: var(--mc-line-2); }
  input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--mc-accent-2);
    background: var(--mc-bg-deep);
    box-shadow: 0 0 0 3px var(--mc-accent-wash);
  }
  input:disabled, select:disabled, textarea:disabled,
  input[readonly], textarea[readonly] { opacity: .5; cursor: not-allowed; }
  input:invalid:not(:placeholder-shown) { border-color: var(--mc-danger); }

  /* the chevron is drawn, not a glyph, so it matches the icon set */
  select {
    appearance: none;
    padding-right: 2.2em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5 6 8.5 10 4.5' fill='none' stroke='%238B96A3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right .8em center;
    background-size: 12px;
  }
  select[multiple] { height: auto; padding: var(--mc-space-2); }
  optgroup { color: var(--mc-t-3); }
  /* some platforms render <option> white-on-white inside a dark select */
  option { background: var(--mc-field); color: var(--mc-t-1); }
  /* the native date/time pickers ship a dark glyph that vanishes on our ground */
  input::-webkit-calendar-picker-indicator { filter: invert(1); opacity: .45; cursor: pointer; }
  input::-webkit-calendar-picker-indicator:hover { opacity: .8; }
  /* :user-invalid only fires after the field has been interacted with */
  input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--mc-danger); }

  input[type="checkbox"], input[type="radio"] {
    width: 18px; height: 18px; padding: 0;
    accent-color: var(--mc-accent);
    vertical-align: -3px;
  }
  input[type="radio"] { border-radius: 50%; }
  input[type="range"] { height: auto; padding: 0; background: none; border: 0; accent-color: var(--mc-accent); }
  input[type="color"] { padding: 2px; height: 38px; width: 56px; }
  input[type="file"] { padding: var(--mc-space-2); height: auto; }
  input[type="file"]::file-selector-button {
    font: inherit; font-size: var(--mc-fs-micro); font-weight: 700;
    text-transform: uppercase; letter-spacing: var(--mc-track-label);
    background: var(--mc-tile); color: var(--mc-t-1);
    border: var(--mc-hairline) solid var(--mc-line-2);
    padding: .5em 1em; margin-right: var(--mc-space-3);
    cursor: pointer;
  }
  input[type="file"]::file-selector-button:hover { border-color: var(--mc-accent-2); color: var(--mc-accent-2); }
  input[type="search"]::-webkit-search-cancel-button { filter: invert(1) opacity(.4); }

  progress, meter { width: 100%; height: 6px; appearance: none; border: 0; background: var(--mc-track); }
  progress::-webkit-progress-bar { background: var(--mc-track); }
  progress::-webkit-progress-value { background: linear-gradient(90deg, var(--mc-accent-2), rgb(34 211 238 / .06)); }
  progress::-moz-progress-bar { background: var(--mc-accent-2); }

  /* ---- buttons --------------------------------------------------------
     A bare <button> IS the brand button: chamfered top-left / bottom-right
     with two thin notches, cut from a solid accent fill. That silhouette is
     the most recognisable thing in the system, so it is the default rather
     than an opt-in. Escape it with `.mc-plain` when you need a bare control
     (icon-only actions, table row menus).

     NOTE: clip-path also clips `outline`, so the focus ring is an INSET
     box-shadow. Do not "fix" this back to outline — it becomes invisible.  */
  button, .mc-btn,
  input[type="submit"], input[type="button"], input[type="reset"] {
    --mc-h: clamp(44px, 3.25vw, 52px);
    --mc-cx: calc(var(--mc-h) * var(--mc-chamfer-x));
    --mc-cy: calc(var(--mc-h) * var(--mc-chamfer-y));
    position: relative;
    display: inline-flex; align-items: center; justify-content: center;
    gap: clamp(8px, .625vw, 10px);
    height: var(--mc-h);
    padding: 0 calc(var(--mc-h) * .46);
    width: auto;
    background: var(--mc-accent);
    color: var(--mc-ink);
    border: 0;
    font-family: inherit;
    font-weight: 700;
    font-size: var(--mc-fs-ui);
    line-height: var(--mc-lh-flat);
    letter-spacing: var(--mc-track-label);
    text-transform: uppercase;
    white-space: nowrap;
    flex: none;
    cursor: pointer;
    clip-path: polygon(var(--mc-cx) 0, 100% 0, 100% calc(100% - var(--mc-cy)),
                       calc(100% - var(--mc-cx)) 100%, 0 100%, 0 var(--mc-cy));
    transition: background var(--mc-dur) var(--mc-ease),
                transform var(--mc-dur) var(--mc-ease);
  }
  /* the two notches cut out of the fill */
  button::before, button::after,
  .mc-btn::before, .mc-btn::after {
    content: "";
    position: absolute;
    width: calc(var(--mc-h) * .06);
    height: calc(100% - var(--mc-h) * .33);
    background: rgb(0 0 0 / .82);
    pointer-events: none;
  }
  button::before, .mc-btn::before { left: calc(var(--mc-h) * .173); top: calc(var(--mc-h) * .21); }
  button::after,  .mc-btn::after  { right: calc(var(--mc-h) * .1);  bottom: calc(var(--mc-h) * .21); }

  button:hover, .mc-btn:hover,
  input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover {
    background: var(--mc-accent-hi);
    transform: translateY(-1px);
  }
  button:active, .mc-btn:active { transform: translateY(0); }
  button:disabled, .mc-btn[aria-disabled="true"], input[type="submit"]:disabled {
    opacity: .45; cursor: not-allowed; transform: none;
  }
  button:focus-visible, .mc-btn:focus-visible,
  input[type="submit"]:focus-visible, input[type="button"]:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--mc-ink), inset 0 0 0 4px var(--mc-focus);
  }

  /* ---- disclosure & dialog -------------------------------------------- */
  details {
    border: var(--mc-hairline) solid var(--mc-line);
    background: var(--mc-panel);
    margin-bottom: var(--mc-space-3);
  }
  summary {
    cursor: pointer;
    padding: var(--mc-space-3);
    color: var(--mc-t-1);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--mc-track-label);
    font-size: var(--mc-fs-ui);
    list-style: none;
  }
  summary::-webkit-details-marker { display: none; }
  summary::after { content: "+"; float: right; color: var(--mc-accent-2); }
  details[open] summary::after { content: "\2212"; }
  details > *:not(summary) { padding: 0 var(--mc-space-3) var(--mc-space-3); }

  dialog {
    background: var(--mc-panel);
    color: var(--mc-t-2);
    border: var(--mc-hairline) solid var(--mc-line-2);
    border-radius: var(--mc-radius);
    padding: var(--mc-space-4);
    max-width: min(560px, 92vw);
  }
  dialog::backdrop { background: rgb(4 4 6 / .74); backdrop-filter: blur(6px); }

  /* ---- focus ----------------------------------------------------------- */
  :focus-visible { outline: 2px solid var(--mc-accent-2); outline-offset: 3px; }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   COMPONENTS — the signature Modcado shapes.
   Every internal measurement is a share of the component's own container, so
   a panel dropped into a 400px column and the same panel in a 719px column
   look like the same object at two sizes, not two different objects.

   CONTAINER-QUERY RULES, learned the hard way while building the landing page:

   1. An element with `container-type` CANNOT query ITSELF. Its own `cqw`
      resolves against the nearest ANCESTOR container — or the viewport if
      there is none. Put the padding on an inner box (see .mc-panel__in).
   2. `cqw` for descendants resolves against the container's CONTENT box, so
      any padding on the container changes the basis for everything inside.
      Keep containers padding-free.
   3. Percentage padding resolves against the PARENT's inline size, never the
      element's own. It is not a substitute for `cqw`.
   4. ALWAYS cap a `cqw` value with clamp()/min(). When a panel goes full
      width on a phone it becomes wider than its design width, and uncapped
      `cqw` padding overshoots (51px design -> 64px actual).
   5. `margin-inline: auto` on a grid item that is also `container-type:
      inline-size` collapses it to zero width. Give it a definite width.
   ========================================================================== */

@layer mc.components {

  /* ---- layout ---------------------------------------------------------- */
  .mc-shell {
    width: 100%;
    max-width: calc(var(--mc-shell) + var(--mc-gutter) * 2);
    margin-inline: auto;
    padding-inline: var(--mc-gutter);
  }
  .mc-section { position: relative; padding-block: var(--mc-sec-y); overflow: hidden; }

  /* Centred section header: eyebrow, headline, standfirst. The max-widths are
     the Figma text-box widths — they control where the lines break. */
  .mc-section__head {
    display: flex; flex-direction: column; align-items: center;
    gap: var(--mc-space-3);
    text-align: center;
    max-width: 1069px;
    margin-inline: auto;
  }
  .mc-section__head > h1, .mc-section__head > h2 { max-width: 819px; }
  .mc-section__head > p { max-width: 673px; }

  /* ---- headings without heading semantics -------------------------------
     An app constantly needs a thing that LOOKS like an h2 but is not one --
     a <div> in a card, or a real <h4> that has to read as a page title for
     document outline reasons. These carry the style; the tag carries the
     meaning. Never pick a heading level for its size.                      */
  .mc-h1 { font-size: var(--mc-fs-hero); line-height: var(--mc-lh-tight); letter-spacing: var(--mc-track-head); font-weight: 600; text-transform: uppercase; color: var(--mc-t-0); }
  .mc-h2 { font-size: var(--mc-fs-2xl);  line-height: var(--mc-lh-tight); letter-spacing: var(--mc-track-head); font-weight: 600; text-transform: uppercase; color: var(--mc-t-0); }
  .mc-h3 { font-size: var(--mc-fs-xl);   line-height: var(--mc-lh-head);  letter-spacing: 0; font-weight: 600; text-transform: uppercase; color: var(--mc-t-0); }
  .mc-h4 { font-size: var(--mc-fs-xs);   line-height: var(--mc-lh-head);  letter-spacing: var(--mc-track-label); font-weight: 600; text-transform: uppercase; color: var(--mc-t-1); }
  .mc-h5 { font-size: var(--mc-fs-2xs);  line-height: var(--mc-lh-head);  letter-spacing: var(--mc-track-label); font-weight: 600; text-transform: uppercase; color: var(--mc-t-1); }
  /* the standfirst: one per section, sitting directly under the headline */
  .mc-lede { font-size: var(--mc-fs-lede); line-height: var(--mc-lh-ui); }

  /* ---- brand lockup ----------------------------------------------------
     Mark plus wordmark, at the Figma ratio (40 / 34.3 tall, 11.4 apart).
     Below 480 the 8.45:1 wordmark and a 44px menu button stop fitting the
     gutters, so the lockup steps down rather than pushing the page wide.   */
  .mc-brand { display: flex; align-items: center; gap: clamp(8px, .71vw, 11.4px); flex: none; }
  .mc-brand img { display: block; width: auto; }
  .mc-brand .mark { height: clamp(28px, 2.5vw, 40px); }
  .mc-brand .word { height: clamp(23px, 2.14vw, 34.3px); }
  @media (max-width: 480px) {
    .mc-brand { gap: 6px; }
    .mc-brand .mark { height: 24px; }
    .mc-brand .word { height: 19px; }
  }
  @media (max-width: 360px) {
    .mc-brand .mark { height: 22px; }
    .mc-brand .word { height: 16px; }
  }

  /* ---- top bar ---------------------------------------------------------
     Sticky, blurred, with the cyan-tinted underline. --mc-nav-h also drives
     .mc-anchor, so in-page links never land under it.                      */
  .mc-nav {
    position: sticky; top: 0; z-index: 60;
    height: var(--mc-nav-h);
    background: rgb(10 13 18 / .88);
    border-bottom: var(--mc-hairline) solid var(--mc-line-nav);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  }
  .mc-nav__in { display: flex; align-items: center; justify-content: space-between; height: 100%; gap: clamp(16px, 3vw, 128px); }

  /* ---- list row --------------------------------------------------------
     Icon, name over meta, a value, an action. The shape behind every list in
     the product -- cheats, files, members, sessions.

     <li class="mc-row">
       <span class="mc-tile">…</span>
       <span class="mc-row__text"><b>Unlimited Health</b><small>2,841 uses</small></span>
       <span class="mc-row__meta">4.9</span>
       <button class="mc-btn--sm">Get</button>
     </li>                                                                  */
  .mc-rows { list-style: none; margin: 0; padding: 0; }
  .mc-row {
    display: flex; align-items: center;
    gap: clamp(6px, 1.12cqw, 8px);
    padding: clamp(9px, 1.81cqw, 13px) min(.56cqw, 4px);
    border-bottom: var(--mc-hairline) solid var(--mc-line);
    margin: 0;
  }
  .mc-row:last-child { border-bottom: 0; }
  .mc-row__text { flex: 1 1 auto; min-width: 0; }
  .mc-row__text b { display: block; font-size: clamp(12px, 1.95cqw, 14px); font-weight: 600; line-height: 1.5; color: var(--mc-t-1); }
  .mc-row__text small { display: block; font-size: clamp(10px, 1.67cqw, 12px); line-height: 1.5; color: var(--mc-t-4); }
  .mc-row__meta { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; font-weight: 600; font-size: clamp(11px, 1.81cqw, 13px); color: var(--mc-t-2); }
  @media (max-width: 480px) { .mc-row { flex-wrap: wrap; row-gap: 6px; } .mc-row__text { flex: 1 1 60%; } }

  /* ---- decoration layer ------------------------------------------------
     Vector art sits BEHIND content and never takes a pointer. Place it with
     shares of the canvas -- min(Npx, Nvw) -- so it survives every width
     rather than being switched off below a breakpoint.                     */
  .mc-deco { position: absolute; pointer-events: none; user-select: none; z-index: 0; }
  .mc-deco--soft {
    -webkit-mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
    mask-image: radial-gradient(60% 60% at 50% 50%, #000 20%, transparent 100%);
  }

  /* ---- eyebrow ---------------------------------------------------------
     A cyan label flanked by short rules. One rule = section starts here;
     two rules = a centred header.                                          */
  .mc-eyebrow {
    display: inline-flex; align-items: center;
    gap: clamp(7px, .625vw, 10px);
    color: var(--mc-accent-2);
    font-size: clamp(13px, 1vw, 16px);
    line-height: var(--mc-lh-flat);
    font-weight: 400;
    text-transform: none;
  }
  .mc-eyebrow::before,
  .mc-eyebrow--both::after {
    content: "";
    width: clamp(11px, 1vw, 16px);
    height: 2px;
    background: currentColor;
    flex: none;
  }

  /* ---- silver text ----------------------------------------------------- */
  .mc-silver { background: var(--mc-silver); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .mc-chrome { background: var(--mc-chrome); -webkit-background-clip: text; background-clip: text; color: transparent; }
  /* big outlined numeral, as used on the step cards */
  .mc-numeral {
    font-weight: 700; line-height: 1;
    background: var(--mc-numeral);
    -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-text-stroke: 1px var(--mc-numeral-stroke-long);
  }

  /* ---- panel -----------------------------------------------------------
     <div class="mc-panel"><div class="mc-panel__in"> … </div></div>
     The wrapper is the query container and carries the border + corner
     marks; the inner box carries the padding. See rule 1 above.            */
  .mc-panel {
    --mc-arm: clamp(11px, 1vw, 16px);   /* corner bracket arm length        */
    --mc-arm-w: 1.2px;
    --mc-dot: clamp(3px, .25vw, 4px);
    --mc-dot-in: clamp(4px, .38vw, 6px);
    position: relative;
    container-type: inline-size;
    display: flex; flex-direction: column;
    border: var(--mc-hairline) solid var(--mc-line);
    background-color: var(--mc-panel);
  }
  .mc-panel__in { flex: 1; min-width: 0; padding: clamp(16px, 4.6cqw, 33px) clamp(14px, 3.49cqw, 25px); }

  /* Four cyan L-brackets with a white dot set inside each. Painted as
     background layers so every bracket tracks its OWN corner — a box-shadow
     offset cannot follow a panel whose width changes. */
  .mc-panel--marks {
    background-image:
      linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
      linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
      linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
      linear-gradient(var(--mc-accent), var(--mc-accent)), linear-gradient(var(--mc-accent), var(--mc-accent)),
      linear-gradient(#ffffff4d, #ffffff4d), linear-gradient(#ffffff4d, #ffffff4d),
      linear-gradient(#ffffff4d, #ffffff4d), linear-gradient(#ffffff4d, #ffffff4d);
    background-size:
      var(--mc-arm) var(--mc-arm-w), var(--mc-arm-w) var(--mc-arm),
      var(--mc-arm) var(--mc-arm-w), var(--mc-arm-w) var(--mc-arm),
      var(--mc-arm) var(--mc-arm-w), var(--mc-arm-w) var(--mc-arm),
      var(--mc-arm) var(--mc-arm-w), var(--mc-arm-w) var(--mc-arm),
      var(--mc-dot) var(--mc-dot), var(--mc-dot) var(--mc-dot),
      var(--mc-dot) var(--mc-dot), var(--mc-dot) var(--mc-dot);
    background-position:
      0 0, 0 0, 100% 0, 100% 0, 0 100%, 0 100%, 100% 100%, 100% 100%,
      var(--mc-dot-in) var(--mc-dot-in),
      calc(100% - var(--mc-dot-in)) var(--mc-dot-in),
      var(--mc-dot-in) calc(100% - var(--mc-dot-in)),
      calc(100% - var(--mc-dot-in)) calc(100% - var(--mc-dot-in));
    background-repeat: no-repeat;
  }

  /* ---- chamfered card --------------------------------------------------
     The larger sibling of the button silhouette: top-left and bottom-right
     cut away, edged with a stroke that fades across the card rather than a
     flat hairline. The border is a masked frame so it follows the chamfer.  */
  .mc-card {
    position: relative;
    background: rgb(255 255 255 / .012);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    clip-path: polygon(15.2% 0, 100% 0, 100% 86.67%, 85.87% 100%, 0 100%, 0 18.1%);
    padding: clamp(24px, 4.31cqw, 49px) clamp(22px, 5.11cqw, 58px)
             clamp(24px, 4.23cqw, 48px) clamp(20px, 2.91cqw, 33px);
  }
  .mc-card__edge {
    position: absolute; inset: 0; z-index: 2; pointer-events: none;
    box-sizing: border-box; padding: 2px;
    background: var(--mc-edge);
    clip-path: polygon(15.2% 0, 100% 0, 100% 86.67%, 85.87% 100%, 0 100%, 0 18.1%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
  }
  /* two cyan brackets on the square corners (top-right + bottom-left) */
  .mc-card__mark {
    position: absolute; width: 8.373%; aspect-ratio: 1; z-index: 3;
    border: 1.12px solid var(--mc-accent-2); pointer-events: none;
  }
  .mc-card__mark--tr { top: 0; right: 0; border-left: 0; border-bottom: 0; }
  .mc-card__mark--bl { left: 0; bottom: 0; border-right: 0; border-top: 0; }

  /* ---- buttons: size and tone variants --------------------------------- */
  .mc-btn--md { --mc-h: clamp(40px, 2.875vw, 46px); }
  .mc-btn--sm { --mc-h: clamp(36px, 2.625vw, 42px); font-size: clamp(11px, .8vw, 12.8px); text-transform: capitalize; }
  .mc-btn--ghost {
    background: transparent;
    color: var(--mc-accent-2);
    box-shadow: inset 0 0 0 var(--mc-hairline) currentColor;
  }
  .mc-btn--ghost::before, .mc-btn--ghost::after { display: none; }
  .mc-btn--ghost:hover { background: var(--mc-accent-wash); color: var(--mc-accent-soft); }
  /* opt OUT of the brand silhouette entirely */
  .mc-plain {
    all: unset;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--mc-space-2);
    color: var(--mc-t-2);
  }
  .mc-plain:hover { color: var(--mc-accent-2); }
  .mc-plain:focus-visible { outline: 2px solid var(--mc-accent-2); outline-offset: 3px; }

  /* underlined uppercase text link with a trailing icon */
  .mc-link {
    display: inline-flex; align-items: center;
    gap: clamp(6px, .5vw, 8px);
    color: var(--mc-accent-2);
    font-weight: 700; font-size: var(--mc-fs-ui);
    letter-spacing: 0; text-transform: uppercase;
    text-decoration: underline; text-underline-offset: 4px;
  }

  /* ---- square control (icon button / pager) ---------------------------
     44x44 is a tap target and stays fixed on purpose — do not make it
     fluid, it is the accessibility floor.                                  */
  .mc-square {
    --mc-cx: 11px; --mc-cy: 11px;
    width: 44px; height: 44px;
    display: grid; place-items: center;
    flex: none;
    background: none; border: 0; padding: 0;
    color: var(--mc-t-0);
    box-shadow: inset 0 0 0 var(--mc-hairline) currentColor;
    clip-path: polygon(var(--mc-cx) 0, 100% 0, 100% calc(100% - var(--mc-cy)),
                       calc(100% - var(--mc-cx)) 100%, 0 100%, 0 var(--mc-cy));
    transition: color var(--mc-dur-fast) var(--mc-ease);
    cursor: pointer;
  }
  .mc-square::before, .mc-square::after { display: none; }
  .mc-square:hover { color: var(--mc-accent-2); background: none; transform: none; }
  .mc-square--active { color: var(--mc-accent); }

  /* ---- badge -----------------------------------------------------------
     Figma 2055:570 "Header Container", 184x40. A solid 3px cyan bar, then a
     pill of 12% white with a 32% cyan hairline. It marks WHAT a thing is
     (AI-POWERED, BETA, NEW) at the top of a page or panel -- one per view,
     and never as a status readout. For status, use .mc-chip.

     <span class="mc-badge">
       <span class="mc-badge__in"><svg …/><span class="mc-chrome">AI-powered.</span></span>
     </span>                                                                */
  .mc-badge { position: relative; display: inline-flex; align-items: center; padding-left: 3px; }
  .mc-badge::before {
    content: "";
    position: absolute; left: 0; top: 0; bottom: 0;
    width: clamp(2px, .19vw, 3px);
    background: var(--mc-accent);
  }
  .mc-badge__in {
    display: inline-flex; align-items: center;
    gap: clamp(6px, .5vw, 8px);
    height: clamp(32px, 2.5vw, 40px);
    padding: 0 clamp(9px, .75vw, 12px);
    background: rgb(255 255 255 / .12);
    border: var(--mc-hairline) solid rgb(34 211 238 / .32);
    font-size: clamp(13px, 1vw, 16px);
    line-height: 1;
    white-space: nowrap;
  }
  .mc-badge svg { color: var(--mc-accent-2); flex: none; width: clamp(15px, 1.25vw, 20px); height: auto; }
  /* quieter variant: no hairline, 8% ground. Use when the badge sits on a
     panel that already has its own border. */
  .mc-badge--ghost .mc-badge__in { background: rgb(255 255 255 / .08); border-color: transparent; }

  /* ---- chip ------------------------------------------------------------
     The one rounded shape in the system. Status only, never navigation.    */
  .mc-chip {
    display: inline-flex; align-items: center;
    gap: clamp(3px, .3vw, 4px);
    height: clamp(20px, 1.56vw, 25px);
    padding: 0 clamp(7px, .63vw, 10px);
    border-radius: var(--mc-radius-pill);
    font-size: clamp(10px, .75vw, 12px);
    font-weight: 600;
    line-height: 1.35;
    background: var(--mc-accent-wash);
    border: var(--mc-hairline) solid var(--mc-accent-line);
    color: var(--mc-accent-2);
  }
  .mc-chip--ok     { background: var(--mc-ok-wash);     border-color: var(--mc-ok-line);       color: var(--mc-ok); }
  .mc-chip--warn   { background: var(--mc-warn-wash);   border-color: rgb(251 191 36 / .3);    color: var(--mc-warn); }
  .mc-chip--danger { background: var(--mc-danger-wash); border-color: rgb(248 113 113 / .3);   color: var(--mc-danger); }

  /* ---- icon tile -------------------------------------------------------- */
  .mc-tile {
    display: grid; place-items: center; flex: none;
    width: clamp(26px, 2.13vw, 34px); aspect-ratio: 1;
    border-radius: var(--mc-radius-sm);
    background: var(--mc-field);
    border: var(--mc-hairline) solid var(--mc-line);
    color: var(--mc-accent-2);
  }
  .mc-tile--accent { background: var(--mc-accent-wash); border-color: var(--mc-accent-line); border-radius: 0; }
  .mc-tile--lg { width: clamp(32px, 2.63vw, 42px); }

  /* ---- stat ------------------------------------------------------------
     Label above value; the value is the ONLY place Space Grotesk appears.  */
  .mc-stat { display: flex; flex-direction: column; gap: var(--mc-space-3); }
  .mc-stat__label { color: #D2D2D5; font-size: var(--mc-fs-body); font-weight: 500; line-height: 21px; }
  /* Chakra Petch SemiBold, NOT Space Grotesk -- see the note on --mc-font-num */
  .mc-stat__value { font-weight: 600; font-size: var(--mc-fs-md); line-height: 1; color: var(--mc-t-0);
    font-variant-numeric: tabular-nums; }

  /* ---- progress rail (carousel position) -------------------------------- */
  .mc-rail { position: relative; height: 2px; background: var(--mc-track); flex: 1; min-width: 0; }
  .mc-rail__fill {
    position: absolute; inset: 0 auto 0 0;
    background: linear-gradient(90deg, var(--mc-accent-2), rgb(34 211 238 / .06));
  }

  /* ---- glow ------------------------------------------------------------
     A blurred disc of --mc-accent-glow. Its blur MUST scale with it, or the
     light goes soft and shapeless as the layout narrows.                    */
  .mc-glow {
    position: absolute; border-radius: 50%; pointer-events: none;
    background: var(--mc-accent-glow);
    filter: blur(min(128px, 8vw));
    opacity: .5;
  }

  /* ---- utilities -------------------------------------------------------- */
  .mc-scroll-x { overflow-x: auto; overscroll-behavior-x: contain; }
  .mc-anchor { scroll-margin-top: calc(var(--mc-nav-h) + 12px); }
  .mc-visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}