/* ClearTrust review site — mobile & tablet overrides.
   Additive. Media queries only. No rule outside a media query, so above 1024px
   this file is inert and the desktop review is byte-identical to today.

   Technique: the pages carry ~615 inline style attributes, and an inline style
   beats a stylesheet. Overrides therefore select on the literal inline
   declaration and carry !important. That is ugly and it is the cost of not
   touching reviewed markup. It is also precise: each selector matches exactly
   the declaration it is replacing, nothing else.

   Every such selector appears twice, as font-size:56px and font-size: 56px.
   ct-site.js writes to element.style at runtime — opacity for the scroll
   reveal, transform for the parallax — and any write re-serialises the whole
   attribute through the CSSOM, which inserts a space after every colon. An
   element that has not been touched yet keeps the authored form. Both spellings
   must match or a heading changes size the moment it scrolls into view.

   Nothing here sets a colour or a font-family. Every value the palette and type
   switchers own stays owned by them. Where tracking is adjusted it is adjusted
   relative to --ct-track-h1 / --ct-track-h2, never in place of them.

   Breakpoints
     <= 1024px   tablet: gutters and display type step down, grids relax
     <=  720px   phone: single column, nav becomes a drawer, parallax stops
     <=  400px   small phone: gutters tighten again
*/

/* ============================================================
   TABLET  <= 1024px
   ============================================================ */
@media (max-width: 1024px) {

  /* Gutters. 56px of side padding on a 900px-wide tablet is a desktop habit. */
  [style*="padding:0 56px;"], [style*="padding: 0 56px;"] { padding: 0 36px !important; }
  [style*="padding:16px 56px"], [style*="padding: 16px 56px"]      { padding: 14px 36px !important; }
  [style*="padding:96px 56px"], [style*="padding: 96px 56px"]      { padding: 72px 36px !important; }
  [style*="padding:48px 56px 64px"], [style*="padding: 48px 56px 64px"] { padding: 40px 36px 52px !important; }
  [style*="padding:34px 56px 20px"], [style*="padding: 34px 56px 20px"] { padding: 30px 36px 20px !important; }

  /* Display type. Ratios preserved: the h1 stays the largest thing on the page
     and the section h3s stay a clear step below it. */
  [style*="font-size:72px"], [style*="font-size: 72px"] { font-size: 56px !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 46px !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 38px !important; }
  [style*="font-size:27px"], [style*="font-size: 27px"] { font-size: 24px !important; }

  /* Card grids: let a track go narrower than its authored floor rather than
     overflow the container. min() keeps the desktop intent where it fits. */
}

/* ============================================================
   PHONE  <= 720px
   ============================================================ */
@media (max-width: 720px) {

  /* --- containment ------------------------------------------------------
     The decorative circles are already inside an overflow:hidden layer, so
     they do not cause sideways scroll on their own. This is a belt on top of
     that brace: it catches any single wide child without touching <html>,
     where overflow-x would silently kill the sticky header. */
  body { overflow-x: hidden !important; }

  /* --- gutters ----------------------------------------------------------- */
  [style*="padding:0 56px;"], [style*="padding: 0 56px;"] { padding: 0 20px !important; }
  [style*="padding:16px 56px"], [style*="padding: 16px 56px"]      { padding: 11px 20px !important; }
  [style*="padding:96px 56px"], [style*="padding: 96px 56px"]      { padding: 56px 20px !important; }
  [style*="padding:48px 56px 64px"], [style*="padding: 48px 56px 64px"] { padding: 36px 20px 44px !important; }
  [style*="padding:34px 56px 20px"], [style*="padding: 34px 56px 20px"] { padding: 28px 20px 22px !important; }

  /* --- vertical rhythm ---------------------------------------------------
     Desktop section spacing reads as dead air on a 390px screen: roughly
     0.6x throughout, with the hero's opening gap cut hardest because the
     sticky header and review bar are already occupying the top of the view. */
  [style*="padding:112px 0 64px"], [style*="padding: 112px 0 64px"] { padding: 40px 0 44px !important; }
  [style*="padding:104px 0 92px"], [style*="padding: 104px 0 92px"] { padding: 56px 0 52px !important; }

  /* --- panel and card padding -------------------------------------------- */
  [style*="padding:56px"], [style*="padding: 56px"]           { padding: 28px 22px !important; }
  [style*="padding:34px"], [style*="padding: 34px"]           { padding: 24px 20px !important; }

  /* --- type scale --------------------------------------------------------
     Body copy floors at 16px. Display type compresses hardest because it was
     set for a 1280px measure; 72px on a 390px screen is about six characters
     a line. Tracking is tightened only as a delta on the switcher's own value,
     so a type system that ships loose tracking still reads as loose here. */
  [style*="font-size:72px"], [style*="font-size: 72px"] { font-size: 38px !important; line-height: 1.08 !important; letter-spacing: calc(var(--ct-track-h1, 0em) - 0.004em) !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 33px !important; line-height: 1.1 !important;  letter-spacing: calc(var(--ct-track-h1, 0em) - 0.003em) !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 29px !important; line-height: 1.14 !important; letter-spacing: calc(var(--ct-track-h1, 0em) - 0.002em) !important; }
  [style*="font-size:27px"], [style*="font-size: 27px"] { font-size: 21px !important; line-height: 1.28 !important; }
  [style*="font-size:21px"], [style*="font-size: 21px"] { font-size: 18px !important; }
  [style*="font-size:19px"], [style*="font-size: 19px"] { font-size: 17px !important; }
  [style*="font-size:18px"], [style*="font-size: 18px"] { font-size: 17px !important; }
  [style*="font-size:17px"], [style*="font-size: 17px"] { font-size: 16px !important; line-height: 1.62 !important; }

  /* Measure caps authored in ch are fine, but a 20ch h1 on a phone leaves the
     hero looking like a column of two words. Let headings use the full width. */
  h1[style*="max-width:20ch"], [style*="max-width: 20ch"], h2[style*="max-width:30ch"], [style*="max-width: 30ch"], h3[style*="max-width:24ch"], [style*="max-width: 24ch"], h3[style*="max-width:30ch"], [style*="max-width: 30ch"] { max-width: none !important; }

  /* --- tap targets -------------------------------------------------------
     44px minimum on anything a finger lands on. The CTA and outline buttons
     are 15px type with 15px vertical padding, which already clears it. */
  [style*="padding:15px 28px"], [style*="padding: 15px 28px"] { padding: 15px 24px !important; display: inline-block !important; }

  /* --- motion ------------------------------------------------------------
     Parallax off. The factors run to 0.09 against circles up to 1400px, which
     on a short viewport is a large field sliding under short text — expensive
     to composite on a phone and legible as jitter. The circles stay; only the
     scroll-coupled transform stops. ct-site.js keeps writing an inline
     transform every frame and this rule keeps beating it. data-ct-curve is
     untouched in the markup and the behaviour returns above 720px. */
  [data-ct-curve] { transform: none !important; }

  /* Card lift is a hover affordance; on a touch screen it fires on tap and
     reads as the layout twitching. */
  .ct-card { transition: none !important; }
  .ct-card:hover { transform: none !important; box-shadow: none !important; }

  /* --- header ------------------------------------------------------------
     ct-site.js pins the sticky header at a hardcoded top:40px, correct only
     while the review bar is one row. ct-mobile.js measures the bar and
     publishes --ct-bar-h; this consumes it and falls back to 40px. */
  [data-ct-sticky-header] { top: var(--ct-bar-h, 40px) !important; }
  [data-ct-sticky-header] > div { flex-wrap: nowrap !important; gap: 12px !important; }
  [data-ct-sticky-header] a[style*="font-size:21px"], [style*="font-size: 21px"] { font-size: 19px !important; }

  /* --- navigation drawer -------------------------------------------------
     Hover-revealed panels do not exist on a phone. The nav row becomes a
     drawer that slides down under the header; Capabilities expands in place
     inside it rather than opening a second layer.

     Progressive enhancement: the drawer is only hidden once ct-mobile.js has
     set data-ct-nav-js on <html> and injected the toggle. Without the script
     the nav renders as a plain stacked list — long, but never unreachable. */
  [data-ct-sticky-header] > div > div[style*="justify-content:flex-end"], [style*="justify-content: flex-end"] {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0 !important;
  }

  [data-ct-nav-js] [data-ct-sticky-header] > div > div[style*="justify-content:flex-end"], [style*="justify-content: flex-end"] {
    position: absolute !important;
    left: 0; right: 0; top: 100%;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: var(--ct-header) !important;
    border-bottom: 1px solid var(--ct-header-rule) !important;
    padding: 4px 0 12px !important;
    max-height: calc(100vh - var(--ct-bar-h, 40px) - 58px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  [data-ct-nav-js] [data-ct-sticky-header][data-ct-nav="open"] > div > div[style*="justify-content:flex-end"], [style*="justify-content: flex-end"] {
    display: flex !important;
    animation: ct-drawer-in .22s cubic-bezier(.2,.7,.2,1);
  }
  [data-ct-sticky-header] { position: sticky !important; }
  [data-ct-nav-js] [data-ct-sticky-header] > div { position: relative !important; }

  /* Rows inside the drawer. */
  [data-ct-nav-js] [data-ct-sticky-header] .ct-nav-item {
    font-size: 15px !important;
    padding: 15px 20px !important;
    white-space: normal !important;
    border-top: 1px solid var(--ct-header-rule) !important;
    display: block !important;
  }

  /* Capabilities becomes an accordion row: the panel goes static and collapsed,
     and the caret ct-mobile.js injects opens it in place. */
  [data-ct-nav-js] [data-ct-sticky-header] .ct-menu {
    display: block !important;
    position: relative !important;
  }
  [data-ct-nav-js] [data-ct-sticky-header] .ct-menu-panel {
    position: static !important;
    display: none !important;
    margin: 0 !important;
    min-width: 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--ct-header-rule) !important;
    background: var(--ct-surface-sunken) !important;
    padding: 4px 0 8px !important;
  }
  /* Hover and focus-within must not open it here — a tap would trip both. */
  [data-ct-nav-js] [data-ct-sticky-header] .ct-menu:hover .ct-menu-panel,
  [data-ct-nav-js] [data-ct-sticky-header] .ct-menu:focus-within .ct-menu-panel { display: none !important; }
  [data-ct-nav-js] [data-ct-sticky-header] .ct-menu[data-ct-open="1"] .ct-menu-panel { display: flex !important; }
  [data-ct-nav-js] [data-ct-sticky-header] .ct-menu-panel a { white-space: normal !important; }

  /* A nested .ct-menu inside a panel — the Capabilities submenu arriving in the
     next copy drop — indents one step and behaves the same at any depth. */
  [data-ct-nav-js] [data-ct-sticky-header] .ct-menu-panel .ct-menu-panel {
    padding-left: 16px !important;
    background: var(--ct-surface) !important;
  }

  /* --- compact review bar -------------------------------------------------
     ct-mobile.js builds one 44px row carrying a palette dropdown, a type
     dropdown and the Comment button moved across from the original bar. The two
     stacked bars it replaces are hidden only once that row exists, so a script
     failure leaves the reviewer with the wrapped bars rather than none. */
  [data-ct-mbar-js] [data-ct-bar],
  [data-ct-mbar-js] [data-ct-type-bar] { display: none !important; }
  [data-ct-mbar] [data-ct-comment-btn] { min-height: 44px !important; padding: 0 12px !important; }

  [data-ct-nav-toggle], [data-ct-menu-caret] {
    font-family: var(--ct-f-mono);
    background: transparent;
    border: 1px solid var(--ct-header-rule);
    color: var(--ct-header-text);
    cursor: pointer;
  }
  /* Hamburger. Square, 44px, glyph only — the accessible name is on the
     button's aria-label, which ct-mobile.js keeps truthful as it opens. */
  [data-ct-nav-toggle] {
    font-size: 17px; line-height: 1;
    padding: 0; width: 44px; height: 44px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
  }
  [data-ct-menu-caret] {
    position: absolute; right: 12px; top: 6px;
    width: 40px; height: 40px; border: 0; font-size: 15px; line-height: 1;
    color: var(--ct-header-text-secondary);
  }
  [data-ct-menu-caret][aria-expanded="true"] { color: var(--ct-header-text); }

  @keyframes ct-drawer-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
}

@media (max-width: 720px) and (prefers-reduced-motion: reduce) {
  [data-ct-nav-js] [data-ct-sticky-header][data-ct-nav="open"] > div > div[style*="justify-content:flex-end"], [style*="justify-content: flex-end"] { animation: none !important; }
}

/* ============================================================
   SMALL PHONE  <= 400px
   ============================================================ */
@media (max-width: 400px) {
  [style*="padding:0 56px;"], [style*="padding: 0 56px;"] { padding: 0 16px !important; }
  [style*="padding:16px 56px"], [style*="padding: 16px 56px"]    { padding: 10px 16px !important; }
  [style*="padding:96px 56px"], [style*="padding: 96px 56px"]    { padding: 48px 16px !important; }
  [style*="padding:48px 56px 64px"], [style*="padding: 48px 56px 64px"] { padding: 32px 16px 40px !important; }
  [style*="padding:34px 56px 20px"], [style*="padding: 34px 56px 20px"] { padding: 26px 16px 20px !important; }
  [style*="font-size:72px"], [style*="font-size: 72px"] { font-size: 34px !important; }
  [style*="font-size:56px"], [style*="font-size: 56px"] { font-size: 30px !important; }
  [style*="font-size:44px"], [style*="font-size: 44px"] { font-size: 27px !important; }
}