/* ===========================================================================
   Kontta — responsive layer
   ---------------------------------------------------------------------------
   The canvas masters express every visual decision as an inline `style`, so
   overrides need `!important`. That is confined to this file and to the
   generated per-element rules; desktop rendering is untouched.

   Structural adaptations live here. Everything derivable from an element's own
   inline style (grid collapse, gutters, fluid type, fixed widths) is generated
   by build/responsive.mjs instead.
   ========================================================================= */

/* The runtime injects these at boot. Declaring them statically means the
   prerendered markup is laid out correctly on the very first paint, before
   any script runs. */
html, body { height: 100%; margin: 0; }
#dc-root, #dc-root > .sc-host { height: 100%; }
x-dc { display: none !important; }

/* The prerendered snapshot stands in for #dc-root until the runtime mounts,
   so it must lay out identically. */
#dc-prerender, #dc-prerender > .sc-host { height: 100%; }

* { -webkit-tap-highlight-color: rgba(122, 184, 154, .25); }

img, svg, video { max-width: 100%; }
img { height: auto; }

/* Guard against a stray wide child; real overflow causes are fixed at source. */
body { overflow-x: clip; }

/* The masters pin the page to a desktop canvas. Release it. */
.r-page { min-width: 0 !important; }

/* --- Mobile navigation ---------------------------------------------------
   Injected by the build: a checkbox + label ahead of the existing link group,
   so the drawer needs no JavaScript and survives the React re-render (the
   checkbox is uncontrolled). Above the breakpoint both are display:none and
   the bar renders exactly as designed. */

.r-navbar { position: relative; }
.r-navtoggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.r-burger { display: none; }

@media (max-width: 900px) {
  .r-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -6px -8px -6px 0;
    border-radius: 12px;
    cursor: pointer;
    color: var(--r-nav-fg, #f4f1ea);
    flex: 0 0 auto;
  }
  .r-burger svg { display: block; }
  .r-burger .r-burger-x { display: none; }
  .r-navtoggle:checked ~ .r-burger .r-burger-x { display: block; }
  .r-navtoggle:checked ~ .r-burger .r-burger-bars { display: none; }

  .r-navlinks {
    display: none !important;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 60;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 10px 14px 16px !important;
    margin: 0 12px;
    border-radius: 18px;
    background: var(--r-nav-bg, #182b21);
    border: 1px solid var(--r-nav-border, rgba(244, 241, 234, .14));
    box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .55);
  }
  .r-navtoggle:checked ~ .r-navlinks { display: flex !important; }

  /* Links become full-width rows with real touch targets. */
  .r-navlinks > * {
    display: flex !important;
    align-items: center;
    min-height: 46px;
    padding: 6px 12px !important;
    border-radius: 12px;
    font-size: 16px !important;
  }
  /* The trailing pill CTA keeps its emphasis but spans the drawer. */
  .r-navlinks > a:last-child { justify-content: center; margin-top: 8px; }
}

/* --- Touch input ---------------------------------------------------------- */
@media (pointer: coarse) {
  a, button, summary, label, [role="button"] { touch-action: manipulation; }
  /* Anything that reads as a control gets a thumb-sized target. */
  .r-navlinks > *, .r-cta { min-height: 44px; }
}

/* --- Horizontal scrollers -------------------------------------------------
   Wide, column-structured blocks (comparison tables, ledger rows) read better
   scrolled than stacked, because their cells carry no labels of their own. */
@media (max-width: 860px) {
  .r-scroll {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    overscroll-behavior-x: contain;
  }
  .r-scroll > .r-scroll-inner { min-width: var(--r-scroll-min, 720px); }
}

/* --- Motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- Nav colour schemes (set by the build from the bar's own palette) ----- */
.r-nav-dark  { --r-nav-bg: #182b21; --r-nav-fg: #f4f1ea; --r-nav-border: rgba(244, 241, 234, .14); }
.r-nav-light { --r-nav-bg: #faf8f4; --r-nav-fg: #211f1b; --r-nav-border: rgba(33, 31, 27, .12); }

/* --- Touch hit areas ------------------------------------------------------
   Padding grows the hit area; the matching negative margin keeps the layout
   exactly where the design put it. Applied only to links that set no padding
   of their own and sit outside running prose. */
@media (pointer: coarse) {
  .r-tap { padding-block: 6px !important; margin-block: -6px; }

  /* The calculator sliders ship a 16px-tall track — fine for a mouse, far
     too thin for a thumb. The track stays centred, so nothing moves. */
  input[type="range"] { height: 44px; }
}

/* --- App shell -----------------------------------------------------------
   The product demo is a desktop app layout: a 236px rail beside a scrolling
   pane. Stacking the rail on top would push the actual product below the fold,
   so on narrow screens it becomes a horizontally scrollable toolbar. Every
   control stays reachable — nothing is hidden, it just scrolls. */
@media (max-width: 860px) {
  .r-shell {
    flex-direction: column !important;
    height: 100dvh !important;
    min-width: 0 !important;
  }
  .r-aside {
    box-sizing: border-box;
    width: 100% !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 8px;
    padding: 6px 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    border-right: 0 !important;
    border-bottom: 1px solid #e7e2d7;
  }
  .r-aside::-webkit-scrollbar { display: none; }

  /* Every rail section becomes a fixed-size item on the strip. */
  .r-aside > * {
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    display: flex !important;
    align-items: center;
    gap: 6px !important;
  }
  .r-aside > * + *::before {
    content: "";
    align-self: stretch;
    width: 1px;
    margin: 6px 2px;
    background: #e7e2d7;
  }
  /* Nav and company lists were vertical grids; lay them out inline. */
  .r-aside nav { display: flex !important; gap: 6px !important; }
  .r-aside button { white-space: nowrap; }

  /* Screen navigation is the point of the strip, so it leads — the brand keeps
     the first slot, everything else follows. */
  .r-aside > * { order: 3; }
  .r-aside > *:first-child { order: 0; }
  .r-aside > nav { order: 1; }

  .r-main { flex: 1 1 auto !important; min-height: 0; }
}

/* --- Auth split ----------------------------------------------------------
   Brand panel beside the form on desktop; stacked above it on a phone, so the
   form is the first thing in reach. */
@media (max-width: 860px) {
  .r-split { flex-direction: column !important; min-width: 0 !important; min-height: 0 !important; }
  .r-splitside { width: 100% !important; padding: 30px 20px !important; }
}

/* ===========================================================================
   Landing: mobile layouts
   Structures whose desktop form does not survive a narrow column, and that no
   per-element rule can rearrange.
   ========================================================================= */

/* --- Hero call to action -------------------------------------------------
   Two pills side by side do not fit a phone; they squeeze until the labels
   look broken. Full width, stacked, primary first. */
@media (max-width: 640px) {
  .r-hero-cta { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .r-hero-cta > a {
    text-align: center;
    padding: 15px 20px !important;
    font-size: 15.5px !important;
  }
}

/* --- Bank strip ----------------------------------------------------------
   A 44px gutter between six logos leaves a sparse, drifting grid once it
   wraps. Tighten the rhythm and cap the marks to one optical size. */
@media (max-width: 860px) {
  .r-banks { gap: 22px 30px !important; }
  .r-banks img { height: auto !important; max-height: 27px; width: auto; }
}
@media (max-width: 640px) {
  /* Wrapping six marks of unequal width leaves one orphaned on its own line.
     A fixed 3x2 grid gives them an even rhythm instead. */
  .r-banks {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
    justify-items: center;
    gap: 22px 12px !important;
  }
  .r-banks img { max-height: 25px; }
  /* The Open Banking line is a caption, not a button: full row, natural width. */
  .r-banks > span {
    grid-column: 1 / -1;
    justify-self: center;
    margin-top: 4px;
  }
}

/* --- Setup: three steps --------------------------------------------------
   The desktop connector is an absolutely positioned rule across the columns.
   Stacked, it becomes a stray line beside step 1. On a phone the sequence
   reads better as a vertical stepper: numeral in the gutter, copy beside it,
   the connector running down between them. */
@media (max-width: 860px) {
  .r-steps-line { display: none !important; }
  .r-steps { gap: 0 !important; }

  .r-step {
    display: grid !important;
    grid-template-columns: 58px 1fr;
    column-gap: 18px;
    text-align: left !important;
    padding: 0 0 30px !important;
    position: relative;
  }
  .r-step:last-child { padding-bottom: 0 !important; }

  /* The numeral holds the gutter for the whole step. */
  .r-step > *:first-child { grid-column: 1; grid-row: 1 / -1; align-self: start; margin-bottom: 0 !important; }
  .r-step > *:not(:first-child) { grid-column: 2; }
  .r-step > h3 { align-self: center; }

  /* Connector between consecutive steps, aligned to the numeral's centre. */
  .r-step:not(:last-child)::before {
    content: "";
    position: absolute;
    left: 28px;
    top: 66px;
    bottom: 8px;
    width: 2px;
    background: linear-gradient(180deg, #0e5f42, #7ab89a);
    opacity: .45;
  }
}

/* --- Before and after table ---------------------------------------------
   Column headers are meaningless once the columns stack, and the ✗ / ✓ marks
   already say which side is which. Drop the header and let each row read as a
   small block: label, today, with Kontta. */
@media (max-width: 860px) {
  .r-ba-head { display: none !important; }

  .r-ba-row > * { padding: 8px 20px !important; }
  .r-ba-row > *:first-child {
    padding-top: 18px !important;
    padding-bottom: 2px !important;
  }
  .r-ba-row > *:last-child {
    border-left: 0 !important;
    padding-bottom: 18px !important;
  }

  .r-ba-stats {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
    padding: 24px 20px !important;
  }
}

/* --- The IA pipeline -----------------------------------------------------
   Nine chips in a row carry their order left to right. Wrapped into a grid
   that order is gone, and the section's whole point is who does which step in
   sequence. Stacked, numbered, one per line. */
@media (max-width: 860px) {
  .r-pipe { flex-direction: column !important; gap: 6px !important; counter-reset: pipe; }

  .r-pipe-step {
    flex: none !important;
    display: grid !important;
    grid-template-columns: 26px 64px 1fr;
    align-items: center;
    column-gap: 12px;
    text-align: left !important;
    padding: 12px 16px !important;
  }
  .r-pipe-step::before {
    counter-increment: pipe;
    content: counter(pipe, decimal-leading-zero);
    font-family: 'Spline Sans Mono', monospace;
    font-size: 11.5px;
    color: #7f9488;
  }
  .r-pipe-step > * { margin: 0 !important; }
}