/* ==========================================================================
   Mirentha app page kit — the shared craft under every app's pages.

   One stylesheet for an app's whole set (its page, compare, support, privacy,
   terms), so the set reads as one piece. The app sets its tokens on <body
   class="k-page k-<slug>">; everything else here is shared structure:
   type scale, section rhythm, the iPhone frame, scroll scenes, feature tiles,
   plans, questions, the closing band, and the child pages' layout.

   Motion: kit.js adds .k-motion to <html> when motion is allowed and GSAP's
   ScrollTrigger is loaded. Without it every scene shows its finished, still
   state, laid out as a normal page: nothing depends on JavaScript to be read.
   ========================================================================== */

.k-page {
  /* App tokens (each app overrides these on its body class) */
  --k-bg: #FFFFFF;            /* the page ground */
  --k-bg-2: #F4F4F1;          /* an alternate ground for bands */
  --k-ink: #141414;           /* text */
  --k-ink-2: #55555A;         /* secondary text */
  --k-accent: #0A64D8;        /* the app's brand colour */
  --k-accent-ink: #FFFFFF;    /* text on the brand colour */
  --k-card: #FFFFFF;          /* cards and tiles */
  --k-line: rgba(20, 20, 20, .10);
  --k-display: system-ui, -apple-system, "Segoe UI", sans-serif;   /* the app's display face */
  --k-text: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Shared scale */
  --k-max: 1280px;
  --k-gutter: clamp(20px, 5vw, 64px);
  --k-sec: clamp(88px, 12svh, 168px);           /* vertical rhythm between sections */
  --k-fs-hero: clamp(44px, min(6vw, 10svh), 104px);   /* by height too: a pinned hero has one screen */
  --k-fs-h2: clamp(36px, 5.2vw, 80px);
  --k-fs-h3: clamp(24px, 2.4vw, 34px);
  --k-fs-lead: clamp(19px, 1.55vw, 24px);
  --k-fs-body: clamp(17px, 1.15vw, 19px);
  --k-radius: 28px;
  --k-device-w: clamp(200px, min(24vw, calc((100svh - 150px) * .46)), 360px);   /* the whole iPhone fits below the nav */

  background: var(--k-bg);
  color: var(--k-ink);
}

.k-page main { font-family: var(--k-text); font-size: var(--k-fs-body); line-height: 1.55; }
.k-page main :where(h1, h2, h3) { font-family: var(--k-display); color: var(--k-ink); margin: 0; font-weight: 500; letter-spacing: -0.015em; }
.k-page main p { margin: 0; }
.k-page main img { display: block; max-width: 100%; height: auto; }

.k-wrap { width: 100%; max-width: var(--k-max); margin: 0 auto; padding: 0 var(--k-gutter); box-sizing: border-box; }
.k-section { padding: var(--k-sec) 0; position: relative; }
.k-eyebrow { font: 600 13px/1.2 var(--k-text); letter-spacing: .14em; text-transform: uppercase; color: var(--k-ink-2); margin-bottom: 18px !important; }
.k-h1 { font-size: var(--k-fs-hero); line-height: .98; }
.k-h2 { font-size: var(--k-fs-h2); line-height: 1.08; }   /* display faces' descenders need the room */
.k-h3 { font-size: var(--k-fs-h3); line-height: 1.15; }
.k-lead { font-size: var(--k-fs-lead); line-height: 1.45; color: var(--k-ink-2); max-width: 36ch; }
.k-lead strong, .k-body strong { color: var(--k-ink); font-weight: 600; }
.k-body { color: var(--k-ink-2); max-width: 44ch; }
.k-stack > * + * { margin-top: 22px !important; }

/* The app's lockup: icon, name, one line */
.k-lockup { display: flex; align-items: center; gap: 14px; }
.k-lockup img { width: 56px; height: 56px; border-radius: 13px; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.k-lockup b { display: block; font: 600 19px/1.2 var(--k-text); color: var(--k-ink); }
.k-lockup span { display: block; font-size: 15px; color: var(--k-ink-2); }

/* Buttons */
.k-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.k-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 24px; border-radius: 999px; font: 600 17px/1 var(--k-text); text-decoration: none; transition: transform .2s ease, background-color .2s ease; }
.k-btn:hover { transform: translateY(-1px); }
.k-btn-primary { background: var(--k-ink); color: var(--k-bg); }
.k-btn-quiet { color: var(--k-ink); box-shadow: inset 0 0 0 1.5px var(--k-line); }
.k-soon::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--k-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--k-accent) 30%, transparent); }
.k-meta { font-size: 15px; color: var(--k-ink-2); }

/* ---------- Hero ---------- */
.k-hero { min-height: 100svh; display: flex; align-items: center; padding: 120px 0 64px; box-sizing: border-box; position: relative; }
.k-hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.k-hero-copy > * + *, .k-hero-head > * + *, .k-hero-more > * + * { margin-top: 26px; }
.k-hero-copy .k-btn { padding: 0 18px; font-size: 16px; }   /* both buttons on one row in the copy column */
@media (max-width: 899px) {
  .k-hero { min-height: 0; padding: 104px 0 40px; }
  .k-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  /* On a phone the showpiece comes straight after the headline, so the first screen shows it;
     the rest of the copy (.k-hero-more) follows it. */
  .k-hero-copy:has(> .k-hero-head) { display: contents; }
  .k-hero-head { order: 1; }
  .k-hero-grid > :not(.k-hero-copy) { order: 2; }
  .k-hero-more { order: 3; }
  .k-hero-copy > .k-hero-more { margin-top: 0; }
}

/* ---------- The iPhone frame ---------- */
/* The screen has an iPhone's own shape, 1320 × 2868 like the captures, and the frame is the screen
   plus its bezel, as on a real phone (about 1 : 2.107 overall). Until 19 October 2026 the frame had
   the screen's shape, so the screen inside it was squeezed taller than any capture, and
   `.k-page main img { height: auto }` beat the screen's own rule: every capture stopped 3% short and
   left a black strip under it. A capture placed directly in the screen now always fills it. */
.k-device { position: relative; width: var(--k-device-w); border-radius: calc(var(--k-device-w) * .155);
  background: #0B0B0C; padding: calc(var(--k-device-w) * .028); box-sizing: border-box; flex: none;
  box-shadow: 0 0 0 1.5px #3A3A3D inset, 0 40px 80px -30px rgba(0,0,0,.45), 0 18px 36px -18px rgba(0,0,0,.35); }
.k-device-screen { position: relative; width: 100%; aspect-ratio: 1320 / 2868; border-radius: calc(var(--k-device-w) * .13); overflow: hidden; background: #000; }
.k-device-screen img, .k-page main .k-device-screen > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; }
.k-device-screen img + img { opacity: 0; }
.k-device::after { /* the Dynamic Island */ content: ""; position: absolute; top: calc(var(--k-device-w) * .045); left: 50%; width: 30%; height: calc(var(--k-device-w) * .085); transform: translateX(-50%); background: #000; border-radius: 999px; }
html.k-motion .k-device-screen img { transition: opacity .45s ease; }

/* ---------- Scroll scenes ----------
   A scene is a tall section whose stage sticks to the screen while its steps play.
   Each step is a caption (and usually a screen in the device). Without motion the
   steps are listed one after another with the finished visual. */
.k-scene { position: relative; }
.k-stage { position: relative; }
.k-stage-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
.k-scene.k-flip .k-stage-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.k-scene.k-flip .k-steps { order: 2; }
.k-visual { position: relative; display: flex; justify-content: center; align-items: center; min-height: 0; }
.k-step + .k-step { margin-top: 48px; }
.k-step .k-h3 { margin-bottom: 14px; }
.k-step .k-h2 { margin-bottom: .32em; }
.k-step-n { font: 600 14px/1 var(--k-text); color: var(--k-ink-2); letter-spacing: .08em; margin-bottom: 14px !important; display: flex; align-items: center; gap: 10px; }
.k-step-n::before { content: ""; width: 28px; height: 2px; background: var(--k-accent); }

html.k-motion .k-scene { height: calc((var(--steps, 3) + .6) * 100svh); }
html.k-motion .k-stage { position: sticky; top: 0; height: 100svh; display: flex; align-items: center; overflow: hidden;
  padding: 96px 0 32px; box-sizing: border-box; }   /* centred in the screen below the site's nav */
html.k-motion .k-stage > .k-wrap { width: 100%; }
html.k-motion .k-step-stack { position: relative; }   /* kit.js sets its height to the tallest step */
html.k-motion .k-step { position: absolute; inset: 0 0 auto 0; margin: 0; opacity: 0; transform: translateY(24px); transition: opacity .45s ease, transform .45s ease; pointer-events: none; }
html.k-motion .k-step { transition: opacity .28s ease, transform .4s ease; }
html.k-motion .k-step.is-on { opacity: 1; transform: none; pointer-events: auto; transition-delay: .22s; }
/* A scene's moment on a phone: the extras beside the device don't fit there, so the scene carries
   a strip under its caption (.k-strip, aria-hidden) made of the same content, driven by the same
   timeline. Hidden on bigger screens, where the extras play. */
.k-strip { display: none; }
@media (max-width: 899px) { .k-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; } }

/* Progress pips beside the captions */
.k-pips { display: none; }
html.k-motion .k-pips { display: flex; gap: 8px; margin-bottom: 26px; }
.k-pips i { width: 26px; height: 4px; border-radius: 2px; background: var(--k-line); transition: background-color .3s ease; }
.k-pips i.is-on { background: var(--k-accent); }

@media (max-width: 899px) {
  .k-stage-grid, .k-scene.k-flip .k-stage-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .k-scene.k-flip .k-steps { order: 0; }
  .k-page { --k-device-w: min(66vw, 290px); }
  .k-step .k-h2 { font-size: clamp(30px, 8vw, 40px); }
  /* On a phone the stage is the caption at the top and the phone rising from the bottom
     edge, cropped by the screen, the way Apple's own pages show one: both on one screen. */
  html.k-motion .k-stage { align-items: stretch; padding: 0; }
  html.k-motion .k-stage > .k-wrap { height: 100%; }
  html.k-motion .k-stage-grid { grid-template-rows: auto minmax(0, 1fr); align-items: start; gap: 22px; padding-top: 84px; height: 100%; box-sizing: border-box; }
  html.k-motion .k-steps { order: 0; }
  html.k-motion .k-steps .k-eyebrow { display: none; }
  html.k-motion .k-pips { margin-bottom: 14px; }
  html.k-motion .k-visual { order: 1; align-items: flex-start; overflow: visible; }
  html.k-motion .k-step .k-h2 { font-size: clamp(28px, 7.4vw, 34px); margin-bottom: 10px; }
  html.k-motion .k-step .k-body { font-size: 16px; line-height: 1.45; }
  html.k-motion .k-step-n { display: none; }
}

/* ---------- Bands: a full-bleed statement ---------- */
.k-band { background: var(--k-bg-2); overflow: hidden; }
.k-band-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 96px); align-items: center; }
@media (max-width: 899px) { .k-band-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Tiles: the rest of what it does ---------- */
.k-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 56px; }
.k-tile { background: var(--k-card); border-radius: var(--k-radius); padding: 30px; min-height: 230px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; box-shadow: 0 1px 0 var(--k-line) inset, 0 0 0 1px var(--k-line); }
.k-tile.k-wide { grid-column: span 2; }
.k-tile .k-h3 { font-size: clamp(22px, 1.9vw, 28px); }
.k-tile p { color: var(--k-ink-2); font-size: 17px; }
.k-tile-art { margin-top: auto; }
@media (max-width: 899px) { .k-tiles { grid-template-columns: minmax(0, 1fr); } .k-tile.k-wide { grid-column: auto; } .k-tile { min-height: 0; } }
@media (min-width: 900px) and (max-width: 1179px) { .k-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Plans ---------- */
.k-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.k-plan { border-radius: var(--k-radius); padding: 36px; background: var(--k-card); box-shadow: 0 0 0 1px var(--k-line); }
.k-plan.k-plus { background: var(--k-ink); color: var(--k-bg); }
.k-plan.k-plus :is(h3, p, li) { color: inherit; }
.k-plan-price { font: 500 clamp(32px, 3.4vw, 48px)/1 var(--k-display); margin: 18px 0 8px !important; }
.k-plan ul { margin: 22px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.k-plan li { padding-left: 30px; position: relative; font-size: 17px; }
.k-plan li::before { content: ""; position: absolute; left: 0; top: .32em; width: 16px; height: 9px; border: solid var(--k-accent); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
@media (max-width: 899px) { .k-plans { grid-template-columns: minmax(0, 1fr); } .k-plan { padding: 28px; } }

/* ---------- Compare teaser ---------- */
.k-teaser { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.k-teaser ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.k-teaser li { background: var(--k-card); border-radius: 20px; padding: 20px 22px; box-shadow: 0 0 0 1px var(--k-line); }
.k-teaser li { padding: 26px 28px; }
.k-teaser li b { display: block; font: 500 clamp(21px, 1.7vw, 26px)/1.2 var(--k-display); margin-bottom: 8px; }
.k-teaser li span { color: var(--k-ink-2); font-size: 17px; }
@media (max-width: 899px) { .k-teaser { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Questions ---------- */
.k-faq { margin-top: 40px; border-top: 1px solid var(--k-line); }
.k-faq details { border-bottom: 1px solid var(--k-line); }
.k-faq summary { cursor: pointer; list-style: none; padding: 24px 44px 24px 0; position: relative; font: 500 clamp(19px, 1.6vw, 23px)/1.3 var(--k-text); color: var(--k-ink); }
.k-faq summary::-webkit-details-marker { display: none; }
.k-faq summary::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); font-size: 28px; font-weight: 300; color: var(--k-ink-2); transition: transform .2s ease; }
.k-faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.k-faq details p { padding: 0 0 26px; color: var(--k-ink-2); max-width: 62ch; }

/* ---------- The closing band ---------- */
.k-cta { text-align: center; }
.k-cta .k-h2 { max-width: 14ch; margin: 0 auto; }
.k-cta .k-actions { justify-content: center; margin-top: 34px; }
.k-cta .k-lockup { justify-content: center; margin-bottom: 32px; }

/* ---------- The app's own nav: its pages as one set ---------- */
.k-subnav { display: flex; flex-wrap: wrap; gap: 8px; }
.k-subnav a { padding: 9px 16px; border-radius: 999px; font: 500 15px/1 var(--k-text); text-decoration: none; color: var(--k-ink); box-shadow: inset 0 0 0 1.5px var(--k-line); }
.k-subnav a[aria-current="page"] { background: var(--k-ink); color: var(--k-bg); box-shadow: none; }

/* ---------- Child pages: compare, support, privacy, terms ---------- */
.k-sub-hero { padding: 132px 0 56px; background: var(--k-bg-2); }
.k-sub-hero .k-lockup { margin-bottom: 28px; }
.k-sub-hero .k-h1 { font-size: clamp(40px, 5.6vw, 84px); max-width: 16ch; }
.k-sub-hero .k-lead { margin-top: 20px; max-width: 48ch; }
.k-sub-hero .k-subnav { margin-top: 32px; }
.k-doc { padding: 64px 0 var(--k-sec); }
.k-doc .k-wrap { max-width: 860px; }
.k-doc h2 { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.1; margin: 56px 0 16px; }
.k-doc h3 { font: 600 20px/1.3 var(--k-text) !important; margin: 32px 0 10px !important; letter-spacing: 0; }
.k-doc p, .k-doc li { color: var(--k-ink-2); }
.k-doc p + p { margin-top: 14px; }
.k-doc ul, .k-doc ol { padding-left: 1.2em; display: grid; gap: 8px; margin: 14px 0; }
.k-doc a { color: var(--k-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.k-doc .k-note { background: var(--k-card); border-radius: 20px; padding: 22px 24px; box-shadow: 0 0 0 1px var(--k-line); margin: 24px 0; }

/* The comparison table: one real table, each row a card on phones */
.k-table { width: 100%; border-collapse: separate; border-spacing: 0; margin: 28px 0; font-size: 16px; }
.k-table th, .k-table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--k-line); vertical-align: top; }
.k-table thead th { font: 600 16px/1.3 var(--k-text); color: var(--k-ink); background: var(--k-bg); border-bottom: 2px solid var(--k-ink); }
.k-table thead th.is-us { color: var(--k-ink); }
.k-table tbody th { font-weight: 600; color: var(--k-ink); width: 22%; }
.k-table td { color: var(--k-ink-2); }
.k-table td.is-us { color: var(--k-ink); font-weight: 500; background: color-mix(in srgb, var(--k-accent) 10%, transparent); }
@media (max-width: 759px) {
  .k-table thead { display: none; }
  .k-table, .k-table tbody, .k-table tr, .k-table th, .k-table td { display: block; width: auto; }
  .k-table tr { background: var(--k-card); border-radius: 20px; padding: 16px 18px; margin-bottom: 14px; box-shadow: 0 0 0 1px var(--k-line); }
  .k-table tbody th { padding: 0 0 8px; border: 0; font-size: 18px; width: auto; }
  .k-table td { padding: 8px 0; border: 0; border-top: 1px solid var(--k-line); display: flex; justify-content: space-between; gap: 16px; background: none !important; }
  .k-table td::before { content: attr(data-app); color: var(--k-ink); font-weight: 600; flex: none; }
  .k-table td.is-us::before { color: var(--k-ink); }
}

/* ---------- Reveals (small, for things that aren't scenes) ---------- */
html.k-motion [data-k-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
html.k-motion [data-k-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .k-btn, .k-device-screen img { transition: none !important; }
}

.k-doc .k-updated { font-size: 15px; color: var(--k-ink-2); margin-bottom: 8px !important; }
.k-doc .k-note > p:first-child { font: 600 18px/1.3 var(--k-text); color: var(--k-ink); margin-bottom: 6px !important; }
.k-doc .k-note ul { margin-bottom: 0; }
.k-doc .k-faq summary { font-size: 19px; }
.k-doc .k-faq details > div p { padding-bottom: 14px; }
.k-compare-lists { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin: 28px 0; }
.k-compare-lists > div { background: var(--k-card); border-radius: 22px; padding: 24px 26px; box-shadow: 0 0 0 1px var(--k-line); }
.k-compare-lists h3 { margin-top: 0 !important; }
@media (max-width: 759px) { .k-compare-lists { grid-template-columns: minmax(0, 1fr); } }
.k-checked { font-size: 15px; color: var(--k-ink-2); margin-top: 40px !important; padding-top: 20px; border-top: 1px solid var(--k-line); }

.k-vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.k-doc.k-wide .k-wrap { max-width: 1160px; }
.k-doc.k-wide :is(h2 + p, .k-checked) { max-width: 760px; }
.k-compare-lists ul { list-style: disc; padding-left: 1.1em; }

/* The compare page's standout, reasons and price note (17 October 2026) */
.k-sub-hero .k-standout { margin-top: 24px; max-width: 34ch; padding: 18px 22px 20px; border-radius: 20px; background: color-mix(in srgb, var(--k-accent) 14%, var(--k-card)); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--k-accent) 40%, transparent); font: 600 clamp(19px, 1.7vw, 24px)/1.35 var(--k-text); color: var(--k-ink); text-wrap: pretty; }
.k-standout > span { display: block; margin-bottom: 8px; font: 600 13px/1.2 var(--k-text); letter-spacing: .06em; text-transform: uppercase; color: var(--k-ink-2); }
.k-doc .k-reasons { list-style: none; padding: 0; display: grid; gap: 10px; margin: 20px 0 8px; max-width: 760px; }
.k-doc .k-reasons li { position: relative; padding: 14px 18px 14px 46px; border-radius: 16px; background: var(--k-card); box-shadow: 0 0 0 1px var(--k-line); color: var(--k-ink); }
.k-doc .k-reasons li::before { content: ""; position: absolute; left: 20px; top: 1.32em; width: 10px; height: 10px; border-radius: 50%; background: var(--k-accent); }
.k-doc .k-reasons li:first-child { font-weight: 600; }
.k-doc .k-price-note { max-width: 760px; padding: 16px 20px; border-radius: 16px; background: var(--k-bg-2); color: var(--k-ink); }
.k-doc .k-others { max-width: 760px; list-style: disc; padding-left: 1.2em; }