/* Inter, carried here rather than fetched from fonts.googleapis.com, which
   received every visitor's IP address on every page load. Free software under
   the SIL Open Font License 1.1, by Rasmus Andersson. One rule, not six: this
   is a variable font, so the single file covers the whole weight axis. */
@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter.woff2) format('woff2')}

:root{
  --ink:#0b5a69;
  --ink-dark:#084958;
  --paper:#f7efdf;
  --paper-2:#fff9ed;
  --sky:#dbeff3;
  --teal:#0b6d7d;
  --teal-dark:#085e6c;
  --orange:#e6772b;
  --orange-dark:#c96623;
  --mint:#cfeeed;
  --wood:#d98839;
  --line:rgba(8,73,88,.12);
  --shadow:0 18px 40px rgba(29,61,66,.14);
  --frame-shadow:0 20px 55px rgba(30,60,64,.15);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink-dark);
  background:linear-gradient(180deg,#f6f1e7 0%, #f8efdf 50%, #d8eef2 100%);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
body.page-root{padding:10px;min-height:100vh}
.frame{
  max-width:1450px;
  min-height:calc(100vh - 20px);
  margin:0 auto;
  overflow:clip;
  border:2px solid rgba(11,109,125,.42);
  border-radius:30px;
  background:linear-gradient(180deg,#f7efdf 0%, #f9f1e3 60%, #dceff2 100%);
  box-shadow:var(--frame-shadow);
  position:relative;
}
.frame::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(circle at 80% 16%,rgba(255,255,255,.55) 0, transparent 22%)}
.home .frame::before{display:none}
.site-header{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:relative;z-index:5}
.brand-plaque{
  min-width:340px;
  width:340px;
  background:linear-gradient(180deg,#f4ead7 0%, #efe3cf 100%);
  border-bottom-right-radius:44px;
  padding:16px 18px 14px;
  box-shadow:0 5px 16px rgba(43,62,64,.06);
}
.brand-plaque img{width:250px;height:auto}
.brand img{width:250px;height:auto}  /* 404.html header, no plaque */
.home .brand-plaque{background:linear-gradient(180deg,rgba(247,240,226,.94) 0%, rgba(240,229,209,.9) 100%);backdrop-filter:blur(3px)}
.top-nav-wrap{flex:1;display:flex;justify-content:flex-end;padding:18px 24px 0 0}
.top-nav{
  display:flex;align-items:center;overflow:hidden;
  background:linear-gradient(180deg,#fff9ee 0%, #f4e9d6 100%);
  border:1px solid rgba(8,73,88,.1);
  border-radius:18px;
  box-shadow:0 8px 22px rgba(34,67,71,.10);
}
.top-nav a{
  min-width:110px;
  padding:20px 18px;
  border-right:1px solid rgba(8,73,88,.1);
  font-weight:800;
  text-align:center;
  transition:.18s ease;
}
.top-nav a:last-child{border-right:0}
.top-nav a.active{background:linear-gradient(180deg,var(--teal) 0%, var(--teal-dark) 100%);color:#fff}
.top-nav a:hover{background:rgba(255,255,255,.55)}
.menu-button{display:none;position:absolute;right:14px;top:14px;z-index:9;width:48px;height:48px;border:0;border-radius:14px;background:var(--teal);color:#fff;font-size:24px;box-shadow:var(--shadow)}
.page-content{padding:6px 18px 18px;position:relative;z-index:2}
.home .page-content{padding-top:0}

/* HOME — one full-bleed scene, everything floats on top of it */
.hero-stage{
  position:relative;
  isolation:isolate;
  background:#efe6d5 url(/images/hero-scene.webp) center top/cover no-repeat;
  min-height:min(74vh,740px);
  padding-bottom:154px;
}
.hero-stage::before{        /* soft light wash so the teal copy stays readable */
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(101deg,
    rgba(255,248,235,.86) 0%,
    rgba(255,248,235,.72) 22%,
    rgba(255,248,235,.30) 38%,
    rgba(255,248,235,0)   50%);
}
.hero-copy,
.phone-float{position:relative;z-index:2}
.home .site-header{position:relative;z-index:20}

.hero-copy{padding:34px 24px 0 58px;max-width:620px}
.hero-title{margin:0;color:var(--teal-dark);font-size:clamp(56px,6.2vw,92px);line-height:.88;letter-spacing:-.055em}
.hero-subtitle{margin:14px 0 20px;color:var(--orange);font-weight:900;font-size:clamp(20px,2vw,27px);line-height:1.28;letter-spacing:.055em;text-transform:uppercase}
.lead{margin:0 0 24px;font-size:19px;line-height:1.5;color:#33565e;max-width:360px}
.button-row{display:flex;flex-wrap:wrap;gap:16px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;border-radius:16px;border:2px solid var(--teal-dark);font-weight:900;font-size:18px;box-shadow:0 10px 20px rgba(18,80,87,.16);transition:.18s ease}
.button:hover{transform:translateY(-2px)}
.button.primary{background:linear-gradient(180deg,var(--teal) 0%, var(--teal-dark) 100%);color:#fff}
.button.secondary{background:rgba(255,253,248,.86);backdrop-filter:blur(2px)}
.button.orange{background:linear-gradient(180deg,var(--orange) 0%, var(--orange-dark) 100%);border-color:var(--orange-dark);color:#fff}
.play-dot{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#fff;color:var(--teal-dark);font-size:11px;padding-left:2px}
.button .arrow{margin-left:4px}

/* comic news bubble */
.home-news{
  position:relative;margin:34px 0 0;max-width:352px;
  background:#fffaf1;border:4px solid var(--teal-dark);border-radius:36px;
  padding:16px 20px 18px;box-shadow:8px 9px 0 rgba(8,93,107,.16)
}
.home-news::before{content:"";position:absolute;inset:-13px;z-index:-1;background-image:radial-gradient(var(--teal-dark) 1.25px,transparent 1.25px);background-size:9px 9px;opacity:.2;border-radius:inherit}
.home-news::after{content:"";position:absolute;right:38px;bottom:-18px;width:34px;height:24px;background:#fffaf1;border-left:4px solid var(--teal-dark);border-bottom:4px solid var(--teal-dark);transform:skew(-22deg) rotate(-8deg);border-bottom-left-radius:12px}
.news-kicker{margin:0 0 10px;font-size:22px;font-weight:950;letter-spacing:.04em;color:var(--teal-dark)}
.news-points{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.news-points li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.34;color:#31545c;font-weight:600}
.pip{flex:0 0 auto;font-size:13px;line-height:1.2;margin-top:1px}
.pip-star{color:#f0b429}
.pip-dot{color:#4cbfb4}
.pip-heart{color:#e0503c}
.news-title{margin:0 0 6px;font-size:17px;font-weight:900;line-height:1.22}
.news-body{margin:0;font-size:13px;line-height:1.42;color:#3a5a61}
.news-more{display:inline-block;margin-top:12px;font-size:12px;font-weight:900;color:var(--orange)}

.phone-float{
  position:absolute;right:26px;bottom:-96px;width:clamp(190px,17vw,258px);height:auto;
  filter:drop-shadow(0 22px 30px rgba(18,39,44,.34));
}

/* cards ride up over the bottom of the scene */
.home-cards{position:relative;z-index:3;display:grid;grid-template-columns:362fr 332fr 326fr;gap:18px;align-items:start;margin-top:-134px;padding-right:calc(clamp(190px,17vw,258px) + 14px)}
.asset-card{display:block;border-radius:22px;overflow:hidden;box-shadow:0 14px 28px rgba(25,59,63,.2);border:1px solid rgba(255,255,255,.5);background:#fff;transition:.18s ease}
.asset-card:hover{transform:translateY(-3px)}
.asset-card img{width:100%;height:auto;display:block}
.feature-strip{display:flex;justify-content:center;margin-top:20px}
.feature-strip img{width:min(100%,1016px);border-radius:18px;box-shadow:0 8px 16px rgba(28,60,65,.08)}
.feature-list{display:none;margin-top:18px;padding:18px 16px;border-radius:18px;background:linear-gradient(180deg,#fdf6e9 0%,#f6ecd9 100%);border:1px solid var(--line);box-shadow:0 8px 16px rgba(28,60,65,.08);gap:14px}
.feature-list div{display:grid;gap:2px}
.feature-list h3{margin:0;font-size:15px;color:var(--teal-dark)}
.feature-list p{margin:0;font-size:13.5px;line-height:1.4;color:#4b686d}

.eyebrow{margin:0 0 12px;color:var(--orange);text-transform:uppercase;font-weight:900;letter-spacing:.12em;font-size:15px}

.offline-note{margin:14px 0 0;font-size:13.5px;line-height:1.45;color:#5a747a}

/* inner pages */
.page-shell{display:flex;flex-direction:column;gap:18px;padding:8px 8px 10px}
.page-hero-row{display:grid;grid-template-columns:1.02fr .98fr;gap:18px;align-items:stretch}
.copy-panel,.visual-panel,.news-panel,.stat-pill,.full-card{background:rgba(255,251,244,.84);border:1px solid var(--line);border-radius:26px;box-shadow:var(--shadow);overflow:hidden}
.copy-panel{padding:34px;background:linear-gradient(180deg,#fff8ee 0%, #f5ebdb 100%);display:flex;flex-direction:column;justify-content:center}
.copy-panel h1,.copy-panel h2{margin:0 0 12px;color:var(--teal-dark);line-height:.94;letter-spacing:-.045em}
.copy-panel h1{font-size:64px}.copy-panel h2{font-size:48px}
.copy-panel p{font-size:18px;line-height:1.55;color:#426167}
.visual-panel{position:relative;min-height:330px;background:linear-gradient(180deg,#e6f3f6 0%, #fff0dd 100%)}
.visual-panel.pad-fill{padding:10px;background:linear-gradient(160deg,#fdf7ec 0%, #f3e8d6 100%)}
.visual-panel.pad-fill img{width:100%;height:100%;object-fit:contain}
.visual-panel.image-fill img:not(.phone-stack){width:100%;height:100%;object-fit:cover}
.visual-panel .phone-stack{position:absolute;right:18px;bottom:-14px;width:210px;height:auto;filter:drop-shadow(0 20px 28px rgba(18,39,44,.3))}
.card-grid-3{display:grid;grid-template-columns:362fr 332fr 326fr;gap:18px;align-items:start}
.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;align-items:start}
.full-card img{width:100%;height:auto;display:block}
.stat-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat-pill{padding:18px 16px;background:rgba(255,252,247,.8)}
.stat-pill h3{margin:0 0 6px;color:var(--teal-dark);font-size:18px}.stat-pill p{margin:0;color:#4b686d;font-size:14px;line-height:1.45}
.news-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:18px;align-content:start}
.history-bubble{position:relative;background:#fffaf1;border:3px solid var(--teal-dark);border-radius:28px;padding:22px 24px;box-shadow:8px 8px 0 rgba(8,93,107,.12)}
.history-bubble::before{content:"";position:absolute;inset:-10px;z-index:-1;background-image:radial-gradient(var(--teal-dark) 1.2px,transparent 1.2px);background-size:10px 10px;opacity:.16;border-radius:inherit}
.history-bubble:nth-child(even){border-radius:30px 24px 30px 24px}
.history-bubble time{display:inline-block;margin-bottom:8px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.history-bubble h3{margin:0 0 10px;color:var(--teal-dark);font-size:28px;letter-spacing:-.03em}
.history-bubble p{margin:0;color:#48656a;font-size:16px;line-height:1.52}
.news-panel{padding:26px;background:linear-gradient(180deg,#eef8f8 0%, #fff6e8 100%)}
.news-panel{display:flex;flex-direction:column;align-items:center;justify-content:center}
.news-panel .home-news{margin:0 auto;width:100%}
/* the /news/ box summarises the history sitting right below it, so it is
   smaller than the home-page bubble. The panel's 26px padding clears the
   tail, which hangs 14px past the bottom edge. */
.home-news.compact{max-width:330px;border-width:3px;border-radius:28px;padding:13px 17px 15px;box-shadow:6px 7px 0 rgba(8,93,107,.15)}
.home-news.compact::after{right:30px;bottom:-14px;width:26px;height:19px;border-left-width:3px;border-bottom-width:3px}
.home-news.compact .news-kicker{font-size:18px;margin-bottom:8px}
.home-news.compact .news-points{gap:8px}
.home-news.compact .news-points li{font-size:13px}
.footer-note{font-size:13px;color:#6b8285}
.footer-note a{color:var(--teal);text-decoration:underline}

/* CONTACT — the gecko carries the envelope, the mark signs it off */
.visual-panel.art-fill{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:34px}
.contact-gecko{width:min(100%,318px);height:auto;filter:drop-shadow(0 18px 26px rgba(18,54,88,.22))}
.contact-logo{width:min(78%,238px);height:auto}
/* the same address, sitting under the Ko-fi button on /support/ */
.contact-line{display:flex;align-items:center;gap:16px;margin:22px 0 0;padding:14px 18px;border:1px solid var(--line);border-radius:20px;background:rgba(255,255,255,.55)}
.contact-line img{flex:0 0 auto;width:66px;height:auto}
.contact-line p{margin:0;font-size:16px;line-height:1.45;color:#426167}
.contact-line a{color:var(--teal);font-weight:900;border-bottom:2px solid rgba(11,109,125,.3)}
.contact-line a:hover{border-bottom-color:var(--teal)}

@media (max-width:1180px){
  .brand-plaque{width:285px;min-width:285px}.brand-plaque img{width:210px}
  .top-nav a{min-width:94px;padding:18px 14px}
  .hero-copy{padding-left:38px}
  .hero-stage{min-height:min(70vh,660px)}
}
/* Seven tabs plus the brand plaque stop fitting here, so the header folds
   into the menu button. Above this width the full row still fits. */
@media (max-width:1020px){
  .site-header{display:block;min-height:78px}
  /* the header is no longer a flex row, so the plaque anchor has to be
     told to be a block before its width means anything */
  .brand-plaque{display:block;width:230px;min-width:230px;padding:14px 14px 12px;border-bottom-right-radius:30px}
  .brand-plaque img{width:170px}
  .menu-button{display:block}
  .top-nav-wrap{padding:0}
  .top-nav{display:none;position:absolute;top:74px;left:12px;right:12px;z-index:10;flex-direction:column;align-items:stretch;border-radius:18px;background:#fff9ee}
  .top-nav.open{display:flex}
  .top-nav a{min-width:unset;width:100%;text-align:left;padding:15px 16px;border-right:0;border-bottom:1px solid rgba(8,73,88,.1)}
  .top-nav a:last-child{border-bottom:0}
}
@media (max-width:920px){
  body.page-root{padding:0}
  .frame{border:0;border-radius:0;min-height:100vh}
  .hero-stage{min-height:min(64vh,580px);padding-bottom:126px;background-position:62% top}
  .hero-stage::before{background:linear-gradient(104deg,
      rgba(255,248,235,.90) 0%,
      rgba(255,248,235,.78) 26%,
      rgba(255,248,235,.34) 44%,
      rgba(255,248,235,0)   58%)}
  .hero-copy{padding:20px 20px 0;max-width:none}
  .lead{max-width:none}
  .phone-float{display:none}
  .home-cards{padding-right:0;margin-top:-108px}
  .feature-strip{display:none}
  .feature-list{display:grid;grid-template-columns:1fr 1fr;column-gap:24px}
  .page-hero-row,.card-grid-2,.news-list,.stat-strip{grid-template-columns:1fr}
  .card-grid-3{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .page-content{padding:0 14px 18px}
  .lead{font-size:18px;max-width:none}
  .button{font-size:17px;min-height:52px;padding:0 20px}
  .desktop-only{display:none}
  .embed-panel{display:none}
  .home-news{max-width:none;border-radius:24px;border-width:3px;padding:14px 16px 16px;box-shadow:6px 7px 0 rgba(8,93,107,.14)}
  .home-news::after{right:30px;bottom:-14px;width:26px;height:19px;border-left-width:3px;border-bottom-width:3px}
  .home-news::before{inset:-10px}
  .news-kicker{font-size:19px;margin-bottom:8px}
  .news-points li{font-size:13px}
  .hero-copy{padding:14px 16px 0}
  .hero-title{letter-spacing:-.05em}
  .button-row{gap:12px}
  .button{flex:1 1 auto;min-width:152px}
  .feature-list{grid-template-columns:1fr}
  .home-cards{grid-template-columns:1fr;margin-top:-20px}
  .card-grid-3{grid-template-columns:1fr}
  /* the copy sits on clean paper; the gecko sits in the clouds beneath it,
     the way it does on the phone screen in the artwork */
  .hero-stage{
    min-height:0;
    padding-bottom:calc(94vw - 30px);
    background-image:url(/images/hero-scene.webp);
    background-size:168% auto;
    background-position:58% bottom;
    background-color:#f9f2e4;
  }
  .hero-stage::before{background:linear-gradient(180deg,
      #f9f2e4 0%,
      #f9f2e4 calc(100% - 94vw),
      rgba(249,242,228,.72) calc(100% - 74vw),
      rgba(249,242,228,.18) calc(100% - 56vw),
      rgba(249,242,228,0) calc(100% - 40vw))}
  .copy-panel{padding:26px 22px}.copy-panel h1{font-size:52px}.copy-panel h2{font-size:42px}.copy-panel p{font-size:17px}
  .history-bubble h3{font-size:24px}
  .contact-line{flex-direction:column;text-align:center;gap:12px;padding:16px}
  .contact-line img{width:76px}
}