/* memodules.com. Built from the sharering-house-style cinema starter; the starter's CSS is kept
   as is below (headline weight 600, since only 400/500/600 are self-hosted), then the page's own
   mm-* rules. Fonts are served from this site: no Google Fonts, nothing third-party. */
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-tight-400.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/inter-tight-500.woff2) format("woff2")}
@font-face{font-family:"Inter Tight";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-tight-600.woff2) format("woff2")}


:root{
  color-scheme:dark;   /* stops a light host theme recolouring controls and scrollbars */
  --srh-ground:#050A20; --srh-navy-deep:#010229; --srh-navy:#0A1F44; --srh-navy-mid:#0a2472;
  --srh-ink:#EAF0FF; --srh-pale:#EDF3FF; --srh-ink-soft:rgba(234,240,255,.72);
  --srh-hairline:rgba(234,240,255,.20);
  --srh-accent:#2CE5A7; --srh-lapis:#3458E0; --srh-blue:#4d8aff;
  --srk-accent-live:var(--srh-accent);
  --srk-ground-live:var(--srh-ground);
  --grid-base:#0A1238;   /* the grid mixes against this, not the near-black ground */

  --font-ui:"Inter Tight",system-ui,-apple-system,"Segoe UI",sans-serif;
  --srk-display-xl:clamp(56px,9vw,132px);
  --srk-display-l:clamp(44px,6.5vw,96px);
  --srk-display-m:clamp(32px,4.6vw,62px);
  --srk-body-l:clamp(18px,1.7vw,23px);
  --srk-body:clamp(16px,1.1vw,18px);
  --srk-eyebrow:clamp(12px,.9vw,14px);
  --srk-measure:62ch;

  --srk-scene-pad:clamp(24px,4vw,64px);
  --srk-scene-gap:clamp(80px,11vh,180px);
  --srk-header-h:72px;
  --vph:100dvh;

  --srk-ease:cubic-bezier(.22,1,.36,1);
  --srk-spring:cubic-bezier(.34,1.56,.64,1);

  --srk-phone-width:min(clamp(260px,24vw,380px),calc((100svh - 90px) / 2.295));
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0}

/* Background layers stack UP from 0 inside an isolated page, never at -1.
   A negative z-index layer paints below any block background above it, so the
   moment this page is wrapped in a host document, embedded in an iframe or
   published as an artifact, the host's body background covers the ground, the
   glow and the grid, and the page renders as flat nothing with unreadable
   text. Isolating the page and stacking from 0 survives all of those.
   The ground is set in three places on purpose: the host body, the page, and
   the ground layer. Each one is a fallback for the one before it. */
html,body{background:var(--srk-ground-live);transition:background-color 600ms linear}

.srk-page{
  position:relative;
  isolation:isolate;             /* nothing outside can paint into this stack */
  min-height:100vh;
  background:var(--srk-ground-live);
  overflow-x:clip;               /* never overflow:hidden, it kills sticky */
  font-family:var(--font-ui);
  color:var(--srh-ink);
  transition:background-color 600ms linear;
}

/* --- the three layers, all at -1 so plain content paints above them --- */
.srh-ground{position:fixed;inset:0;z-index:0;background:var(--srk-ground-live);
  transition:background-color 600ms linear}
.srh-glow{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(60% 50% at 26% 22%, rgba(52,88,224,.10), transparent 70%),
    radial-gradient(55% 45% at 74% 74%, color-mix(in srgb, var(--srk-accent-live) 13%, transparent), transparent 70%);
  animation:srh-drift-a 67s ease-in-out infinite alternate}
.srh-glow::after{content:"";position:absolute;inset:0;
  background:radial-gradient(50% 40% at 58% 8%, rgba(10,36,114,.22), transparent 70%);
  animation:srh-drift-b 89s ease-in-out infinite alternate}
@keyframes srh-drift-a{to{transform:translate(6vw,-4vw) scale(1.12)}}
@keyframes srh-drift-b{to{transform:translate(-5vw,6vw) scale(1.08)}}

/* --- the ledger grid: the site's signature layer. Meant to be SEEN. --- */
.ledger-grid{position:fixed;left:0;right:0;top:0;height:300vh;z-index:0;
  display:grid;grid-template-columns:repeat(8,1fr);grid-auto-rows:1fr;
  pointer-events:none;will-change:transform;
  transform:translateY(calc(var(--grid-y,0px) * -1))}
.ledger-cell{position:relative;
  background-color:color-mix(in srgb,var(--srk-accent-live) 10%,var(--grid-base));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--srk-accent-live) 16%,transparent);
  transition:background-color 600ms linear}
/* 7, 11 and 13 are coprime with 8, so bright cells scatter instead of striping */
.ledger-cell:nth-child(7n+3),.ledger-cell:nth-child(11n+5){
  background-color:color-mix(in srgb,var(--srk-accent-live) 14%,var(--grid-base))}
.ledger-cell:nth-child(13n+8){
  background-color:color-mix(in srgb,var(--srk-accent-live) 19%,var(--grid-base))}
.ledger-cell .tl{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;opacity:var(--dim,1);transition:opacity 500ms var(--srk-ease)}
.tile-art{width:clamp(38px,5vw,74px);fill:none;stroke-width:1.4;
  stroke:color-mix(in srgb,var(--srk-accent-live) 34%,var(--grid-base));
  transition:stroke 600ms linear}
.ledger-cell:nth-child(13n+8) .tile-art{
  stroke:color-mix(in srgb,var(--srk-accent-live) 55%,var(--grid-base))}
/* cells behind a copy column step back so the text stays clean */
.ledger-cell.near-copy{--dim:.28}

/* --- scenes: content always sits above the layers --- */
main,header,footer{position:relative;z-index:1}
.srk-scene{position:relative;z-index:1;padding:var(--srk-scene-pad);
  margin-block:var(--srk-scene-gap)}
.srk-scene-inner{max-width:1180px;margin-inline:auto;width:100%}

.srk-flow .srk-scene{min-height:calc(var(--vph) - var(--srk-header-h));
  display:flex;align-items:flex-start}      /* flex-start + auto margins, not center */
.srk-flow .srk-scene-inner{margin-block:auto}

.srk-scene-split{display:grid;gap:clamp(32px,5vw,72px)}
@media(min-width:900px){
  .srk-scene-split{grid-template-columns:1fr 1fr;align-items:center}
  .srk-scene-split.is-flipped .srk-scene-copy{order:2}
  .srk-stage.is-sticky{position:sticky;top:clamp(90px,14svh,160px)}
}

/* --- type --- */
.srk-eyebrow{font-size:var(--srk-eyebrow);letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--srk-accent-live);margin:0 0 .9em}
h1,h2{margin:0 0 .5em;letter-spacing:-.02em;line-height:1.08;color:var(--srh-pale);font-weight:600}
h1{font-size:var(--srk-display-l)}
h2{font-size:var(--srk-display-m)}
.srk-lede{font-size:var(--srk-body-l);line-height:1.6;max-width:var(--srk-measure);
  color:var(--srh-ink-soft);margin:0}
p{font-size:var(--srk-body);line-height:1.6;max-width:var(--srk-measure);color:var(--srh-ink-soft)}
.srk-mark{color:var(--srk-accent-live);font-weight:600}

/* --- buttons --- */
.srk-actions{display:flex;gap:14px;margin-top:2em;flex-wrap:wrap}
.srk-btn{padding:15px 28px;border-radius:999px;font:600 var(--srk-body)/1 var(--font-ui);
  text-decoration:none;display:inline-flex;align-items:center;border:0;cursor:pointer;
  transition:transform 260ms var(--srk-spring),background-color 260ms var(--srk-ease)}
.srk-btn:hover{transform:translateY(-2px)}
.srk-btn-primary{background:var(--srk-accent-live);
  color:color-mix(in srgb,var(--srk-accent-live) 18%,#01120b)}
.srk-btn-secondary{background:transparent;color:var(--srh-pale);
  border:1px solid rgba(234,240,255,.32)}
:focus-visible{outline:2px solid var(--srk-accent-live);outline-offset:3px}

/* --- card --- */
.srk-grid-3{display:grid;gap:20px}
@media(min-width:700px){.srk-grid-3{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.srk-grid-3{grid-template-columns:repeat(3,1fr)}}
.srk-card{padding:clamp(22px,2.4vw,32px);border-radius:18px;
  background:rgba(10,36,114,.42);border:1px solid rgba(77,138,255,.22);
  backdrop-filter:blur(6px)}
.srk-card h3{margin:0 0 .4em;font-size:var(--srk-body-l);color:var(--srh-pale);
  letter-spacing:-.01em}
.srk-card p{margin:0;font-size:var(--srk-body)}

/* --- phone --- */
.srk-phone{max-width:var(--srk-phone-width);margin-inline:auto;padding:12px;
  border-radius:38px;background:#050d2c;border:1px solid rgba(234,240,255,.2);
  box-shadow:0 30px 90px rgba(0,0,0,.62)}
.srk-phone-screen{aspect-ratio:760/1744;border-radius:26px;overflow:hidden;
  background:linear-gradient(180deg,#0a1a4d 0%,#071238 100%)}
.srk-phone-screen img,.srk-phone-screen video{width:100%;height:100%;object-fit:cover;
  object-position:top center;display:block}

/* --- video frame --- */
.srk-vframe{border-radius:16px;background:#050d2c;overflow:hidden;
  border:1px solid rgba(234,240,255,.2);box-shadow:0 30px 90px rgba(0,0,0,.62)}
.srk-vframe-bar{height:8px;width:62px;border-radius:999px;
  background:rgba(234,240,255,.18);margin:10px 0 10px 14px}
.srk-vframe-screen video,.srk-vframe-screen img{width:100%;display:block}

/* --- faq --- */
.srk-faq-item{border-top:1px solid rgba(77,138,255,.24);padding:18px 0}
.srk-faq-item:last-child{border-bottom:1px solid rgba(77,138,255,.24)}
.srk-faq-item summary{cursor:pointer;list-style:none;color:#fff;font-weight:600;
  font-size:var(--srk-body-l);display:flex;justify-content:space-between;gap:1em}
.srk-faq-item summary::-webkit-details-marker{display:none}
.srk-faq-item summary::after{content:"+";color:var(--srk-accent-live)}
.srk-faq-item[open] summary::after{content:"\2212"}
.srk-faq-item p{margin:.8em 0 0;color:#fff;opacity:.78}

/* --- reveal: visible by default, JS adds the hidden start state --- */
.srk-reveal{opacity:1;transform:none}
.js .srk-reveal{opacity:0;transform:translateY(18px);
  transition:opacity 700ms var(--srk-ease),transform 700ms var(--srk-ease)}
.js .srk-reveal.is-in{opacity:1;transform:none}

/* --- chevron --- */
.srk-chrome{position:fixed;left:50%;transform:translateX(-50%);z-index:5;border:0;
  background:none;color:rgba(234,240,255,.72);cursor:pointer;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 8px 24px rgba(0,0,0,.4))}
.srk-chrome:hover{color:rgba(234,240,255,.98)}
.srk-nav--down{bottom:0;height:44px;width:48px;animation:srk-chev 1.8s ease-in-out infinite}
@keyframes srk-chev{0%,100%{transform:translateX(-50%) translateY(0);opacity:.55}
  50%{transform:translateX(-50%) translateY(6px);opacity:1}}
.srk-chrome.is-hidden{opacity:0;pointer-events:none}

/* --- snap on touch --- */
@media(max-width:768px) and (pointer:coarse){
  html{scroll-snap-type:y mandatory}
  [data-nav-stop]{scroll-snap-align:start;scroll-snap-stop:always;
    scroll-margin-top:var(--srk-header-h)}
}

/* --- motion off --- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;scroll-snap-type:none}
  .js .srk-reveal{opacity:1;transform:none;transition:none}
  .srh-glow,.srh-glow::after,.srk-nav--down{animation:none}
  .srk-btn:hover{transform:none}
  .srk-stage.is-sticky{position:relative;top:auto}
  *{transition:none !important}
}

/* ===================== memodules.com ===================== */
.mm-defs{position:absolute}
a{color:var(--srk-accent-live)}
code{font:500 .92em/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:rgba(234,240,255,.08);border:1px solid var(--srh-hairline);border-radius:6px;padding:.08em .38em}

/* --- header --- */
.mm-header{position:sticky;top:0;z-index:4;height:var(--srk-header-h);display:flex;align-items:center;
  justify-content:space-between;gap:16px;padding-inline:var(--srk-scene-pad);
  background:color-mix(in srgb,var(--srh-ground) 72%,transparent);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(234,240,255,.08)}
.mm-brand{font-weight:600;font-size:18px;color:var(--srh-pale);text-decoration:none;letter-spacing:-.01em}
.mm-brand span{font-weight:400;color:var(--srh-ink-soft)}
.mm-header nav{display:flex;gap:clamp(14px,2.4vw,28px)}
.mm-header nav a{color:var(--srh-ink-soft);text-decoration:none;font-size:15px;font-weight:500}
.mm-header nav a:hover{color:var(--srh-pale)}
@media(max-width:600px){
  .mm-brand span{display:none}
  .mm-header nav a{font-size:14px}
}
[id]{scroll-margin-top:var(--srk-header-h)}
.mm-anchor{position:relative;top:calc(var(--srk-scene-gap) * .5)}

/* --- hero --- */
.mm-hero{margin-top:clamp(24px,5vh,72px)}
.mm-hero h1{font-size:clamp(40px,5.4vw,78px)}
.mm-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.mm-tile{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 16px;
  border-radius:18px;background:rgba(10,36,114,.42);border:1px solid rgba(77,138,255,.22);
  backdrop-filter:blur(6px);text-decoration:none;color:var(--srh-pale);font-weight:500;font-size:15px;
  text-align:center;transition:transform 260ms var(--srk-spring),border-color 260ms var(--srk-ease)}
.mm-tile:hover{transform:translateY(-3px);border-color:var(--srk-accent-live)}
.mm-tile img{width:clamp(56px,6vw,84px);height:auto;border-radius:22%}
@media(max-width:420px){.mm-tiles{gap:10px}.mm-tile{font-size:13px;padding:14px 6px 12px}}

/* --- how to get them --- */
.mm-howto{list-style:none;padding:0;margin:2em 0 0}
.mm-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;
  margin-bottom:14px;font-weight:600;background:var(--srk-accent-live);
  color:color-mix(in srgb,var(--srk-accent-live) 18%,#01120b)}
.mm-stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px !important}
.mm-stores .srk-btn{padding:11px 18px;font-size:15px}

/* --- module sections --- */
.mm-title{display:flex;align-items:center;gap:16px;margin-bottom:.4em}
.mm-title h2{margin:0}
.mm-icon{width:clamp(44px,4.4vw,60px);height:auto;border-radius:22%;flex:none}
.mm-facts{margin:1.6em 0 0;display:grid;gap:16px}
.mm-facts div{border-left:2px solid var(--srk-accent-live);padding-left:16px}
.mm-facts dt{font-size:var(--srk-eyebrow);letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  color:var(--srh-pale);margin-bottom:.3em}
.mm-facts dd{margin:0;font-size:var(--srk-body);line-height:1.6;color:var(--srh-ink-soft);max-width:var(--srk-measure)}
.mm-wayin{margin-top:2em;padding:clamp(18px,2vw,26px);border-radius:18px;
  background:rgba(10,36,114,.42);border:1px solid rgba(77,138,255,.22);backdrop-filter:blur(6px)}
.mm-wayin h3{margin:0 0 .6em;font-size:var(--srk-body-l);color:var(--srh-pale);font-weight:600}
.mm-wayin p{margin:0;font-size:var(--srk-body);line-height:1.55;color:var(--srh-ink-soft)}
.mm-small{font-size:14px;line-height:1.55;margin:1em 0 0;overflow-wrap:anywhere}
.mm-wayin .mm-small{color:rgba(234,240,255,.6);font-size:14px;margin-top:.8em}

/* --- the intro player inside the phone frame --- */
.mm-player{position:relative;width:100%;height:100%}
.mm-player video{background:#071238}
.mm-player video::cue{font:500 15px/1.35 var(--font-ui);background:rgba(1,2,41,.72);color:#fff}
.mm-sound{position:absolute;right:14px;top:14px;padding:10px 18px;border-radius:999px;
  border:1px solid rgba(234,240,255,.3);background:rgba(1,2,41,.66);backdrop-filter:blur(6px);color:#fff;
  font:600 14px/1 var(--font-ui);cursor:pointer;white-space:nowrap}
.mm-sound-on{display:none}
.mm-sound[aria-pressed="true"] .mm-sound-on{display:inline}
.mm-sound[aria-pressed="true"] .mm-sound-off{display:none}
.mm-noplayer{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.mm-noplayer img{width:44%;height:auto;border-radius:22%}

/* --- build your own --- */
.mm-sdk{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.mm-sdk li{display:flex;gap:16px;align-items:baseline;padding:18px 20px;border-radius:16px;
  background:rgba(10,36,114,.42);border:1px solid rgba(77,138,255,.22);backdrop-filter:blur(6px);
  font-size:var(--srk-body);line-height:1.55;color:var(--srh-ink-soft)}
.mm-sdk li p{margin:0}
.mm-sdk li span{font-weight:600;color:var(--srk-accent-live);flex:none;font-variant-numeric:tabular-nums}

/* --- footer --- */
.mm-footer{padding:clamp(48px,8vh,96px) var(--srk-scene-pad) clamp(64px,10vh,110px);
  border-top:1px solid rgba(234,240,255,.1);background:color-mix(in srgb,var(--srh-ground) 80%,transparent)}
.mm-footer-cols{display:grid;gap:28px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.mm-footer-head{margin:0 0 .7em;font-weight:600;color:var(--srh-pale)}
.mm-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.mm-footer a{color:var(--srh-ink-soft);text-decoration:none;font-size:15px}
.mm-footer a:hover{color:var(--srh-pale);text-decoration:underline}
.mm-footer .mm-small{margin-top:2.4em;color:rgba(234,240,255,.5)}

@media(prefers-reduced-motion:reduce){.mm-tile:hover{transform:none}}
.mm-sdk code{display:inline;white-space:nowrap;padding:1px 6px}