/* ==========================================================================
   Ospelia marketing — design system (Pass 1)
   Night grounds for the product, bone for reading. One accent: the app's green.
   85% neutral · 10% secondary neutral · 5% accent (operational green).
   ========================================================================== */

:root{
  /* ---- neutrals ------------------------------------------------------- */
  --night:      #0C0E0D;   /* before-dawn ground, hero + dark bands          */
  --night-2:    #151816;   /* raised surfaces on night                       */
  --night-line: #262A27;   /* rules on night                                 */
  --bone:       #F2F0EA;   /* morning ground                                 */
  --bone-2:     #E8E5DD;   /* secondary neutral band                         */
  --paper:      #FFFFFF;   /* the memo sheet, product surfaces               */
  --ink:        #0C0E0D;   /* primary text on light                          */
  --ink-2:      #3A3F3B;   /* body text on light                             */
  --mute:       #5F655F;   /* secondary text on light (5.3:1 on bone)        */
  --line:       #DAD7CE;   /* hairlines on bone                              */
  --line-2:     #C9C5BA;
  --fog:        #A3A9A4;   /* secondary text on night (7.6:1)                */
  --mist:       #D9DDD9;   /* body text on night                             */

  /* ---- the one accent ------------------------------------------------- */
  --green:      #2F5D3A;   /* the app's header green: CTAs, links, checks     */
  --green-ink:  #2F5D3A;   /* green text on bone/paper (7.4:1)               */
  --green-lit:  #57A15F;   /* the app's accent green, for night grounds       */
  --green-wash: #E5EDE4;   /* highlight fill behind a green figure           */
  --red:        #C4442E;   /* negative movement only — never decoration      */

  /* ---- type ----------------------------------------------------------- */
  --sans: "Schibsted Grotesk", ui-sans-serif, system-ui, sans-serif;  /* a newspaper house grotesk: the memo's own voice */
  --mono: "Fragment Mono", ui-monospace, "SFMono-Regular", monospace; /* timestamps, figures, system status only        */

  --t-mega:  clamp(3.6rem, 8.4vw, 7.25rem);  /* hero only                    */
  --t-1:     clamp(2.6rem, 5.2vw, 4.5rem);   /* section heads                */
  --t-2:     clamp(1.9rem, 3.1vw, 2.75rem);
  --t-3:     1.5rem;
  --t-lede:  clamp(1.12rem, 1.4vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-small: .9375rem;
  --t-label: .8125rem;                       /* mono labels                  */

  /* ---- space (8pt, with a 4 for tight groups) ------------------------- */
  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px;
  --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --s-11:176px;

  /* ---- grid ----------------------------------------------------------- */
  --max:   1360px;             /* page frame                                  */
  --read:  64ch;               /* editorial measure                           */
  --gut:   clamp(20px, 4vw, 56px);

  /* ---- shape + depth -------------------------------------------------- */
  --r-1: 4px;                  /* controls, tags                              */
  --r-2: 8px;                  /* product surfaces (the app's own radius)     */
  --lift: 0 1px 0 rgba(12,14,13,.04), 0 24px 48px -28px rgba(12,14,13,.45);
  --lift-night: 0 40px 80px -40px rgba(0,0,0,.85);

  --ease: cubic-bezier(.16,1,.3,1);
}

/* ---- base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);font-size:var(--t-body);line-height:1.6;color:var(--ink);background:var(--bone);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;font-feature-settings:"ss01","cv11"}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--green);color:#fff}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:2px}
.night :focus-visible{outline-color:var(--green-lit)}
html{scrollbar-color:var(--line-2) transparent}
.num,.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:0}

/* ---- layout ----------------------------------------------------------- */
.frame{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.night{background:var(--night);color:var(--mist)}
.night h1,.night h2,.night h3{color:#fff}

/* ---- type roles ------------------------------------------------------- */
.h-mega{font-weight:700;font-size:var(--t-mega);line-height:.94;letter-spacing:-.045em;text-wrap:balance}
.h-1{font-weight:700;font-size:var(--t-1);line-height:1;letter-spacing:-.04em;text-wrap:balance}
.h-2{font-weight:600;font-size:var(--t-2);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.h-3{font-weight:600;font-size:var(--t-3);line-height:1.2;letter-spacing:-.02em}
.lede{font-size:var(--t-lede);line-height:1.55;color:var(--ink-2);max-width:var(--read)}
.night .lede{color:var(--mist)}
/* the mono stamp: timestamps and system lines, sentence case unless it is a clock */
.stamp{font-family:var(--mono);font-size:var(--t-label);line-height:1.5;color:var(--mute);font-variant-numeric:tabular-nums}
.night .stamp{color:var(--fog)}

/* ---- movement figures -------------------------------------------------- */
.up{color:var(--green-ink)} .night .up{color:var(--green-lit)}
.down-good{color:var(--green-ink)} .night .down-good{color:var(--green-lit)}
.down{color:var(--red)}

/* ---- buttons ----------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 20px;border-radius:var(--r-1);
  font-weight:600;font-size:1rem;letter-spacing:-.01em;white-space:nowrap;transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.btn .arr{display:inline-block;transition:transform .25s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-go{background:var(--green);color:#fff}
.btn-go:hover{background:#244A2D}
.night .btn-go{background:var(--green-lit);color:var(--night)}
.night .btn-go:hover{background:#6BB373}
.btn-quiet{color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)}
.btn-quiet:hover{box-shadow:inset 0 0 0 1px var(--ink)}
.night .btn-quiet{color:#fff;box-shadow:inset 0 0 0 1px #3A3F3B}
.night .btn-quiet:hover{box-shadow:inset 0 0 0 1px var(--mist)}
.btn-sm{height:38px;padding:0 14px;font-size:.9375rem}
.link-arrow{display:inline-flex;gap:8px;align-items:center;font-weight:600;border-bottom:1px solid currentColor;padding-bottom:2px}
.link-arrow .arr{transition:transform .25s var(--ease)} .link-arrow:hover .arr{transform:translateX(3px)}

/* ---- status + tags ----------------------------------------------------- */
.status{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:var(--t-label)}
.status i{width:7px;height:7px;border-radius:50%;background:var(--green)}
.night .status i{background:var(--green-lit)}
.status.live i{box-shadow:0 0 0 0 rgba(87,161,95,.6);animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(87,161,95,.55)}70%{box-shadow:0 0 0 8px rgba(87,161,95,0)}100%{box-shadow:0 0 0 0 rgba(87,161,95,0)}}
.tag{display:inline-block;font-family:var(--mono);font-size:.75rem;line-height:1;padding:5px 7px;border-radius:var(--r-1);box-shadow:inset 0 0 0 1px var(--line-2);color:var(--mute)}
.tag.soon{color:var(--mute)}

/* ---- navigation -------------------------------------------------------- */
.nav{position:sticky;top:0;z-index:50;transition:background .3s var(--ease),box-shadow .3s var(--ease)}
.nav-in{display:flex;align-items:center;gap:var(--s-6);height:68px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:1.3rem;letter-spacing:-.03em}
.nav-links{display:flex;gap:4px;margin-left:var(--s-5)}
.nav-links>li>a,.nav-links>li>button{display:flex;align-items:center;gap:6px;height:38px;padding:0 12px;border-radius:var(--r-1);font-size:.96875rem;font-weight:500;color:inherit;opacity:.78;transition:opacity .2s,background .2s}
.nav-links>li>a:hover,.nav-links>li>button:hover,.nav-links>li>button[aria-expanded="true"]{opacity:1}
.nav-links .car{width:9px;height:9px;transition:transform .25s var(--ease)}
.nav-links button[aria-expanded="true"] .car{transform:rotate(180deg)}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:var(--s-4)}
.nav-right .signin{font-weight:500;font-size:.96875rem;opacity:.78}
.nav-right .signin:hover{opacity:1}
.nav.on-night{color:#fff}
.nav.stuck{background:rgba(12,14,13,.92);backdrop-filter:saturate(1.2) blur(10px);-webkit-backdrop-filter:saturate(1.2) blur(10px);box-shadow:0 1px 0 var(--night-line)}
.nav.menu-open{background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.brand .spark{fill:var(--green-lit)}
.nav.menu-open .brand .spark,.nav.on-bone .brand .spark{fill:var(--green)}
.nav.on-bone.stuck{background:rgba(242,240,234,.92);box-shadow:0 1px 0 var(--line)}
.burger{display:none;width:40px;height:40px;margin-left:auto;align-items:center;justify-content:center}
.burger span{display:block;width:20px;height:1.5px;background:currentColor;box-shadow:0 6px 0 currentColor,0 -6px 0 currentColor}

/* mega menu: grouped by function, reads like a table of contents */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--paper);color:var(--ink);box-shadow:0 1px 0 var(--line),0 30px 60px -30px rgba(12,14,13,.35);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease),visibility 0s linear .22s}
.mega.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.mega-in{display:grid;grid-template-columns:1.25fr repeat(4,1fr);gap:var(--s-6);padding:var(--s-7) 0 var(--s-7)}
.mega-feature{padding-right:var(--s-6);border-right:1px solid var(--line)}
.mega-feature .stamp{margin-bottom:var(--s-3)}
.mega-feature p{color:var(--ink-2);font-size:var(--t-small);line-height:1.55;margin-top:var(--s-3)}
.mega h4{font-family:var(--mono);font-weight:400;font-size:var(--t-label);color:var(--mute);margin-bottom:var(--s-4)}
.mega li+li{margin-top:2px}
.mega li a{display:block;padding:8px 10px;margin-left:-10px;border-radius:var(--r-1);transition:background .15s}
.mega li a:hover{background:var(--bone)}
.mega li a b{display:block;font-weight:600;font-size:.96875rem;letter-spacing:-.01em}
.mega li a span{display:block;font-size:.84375rem;color:var(--mute);line-height:1.4}

/* ---- product surfaces ---------------------------------------------------
   Rules: no fake device chrome, no browser bars. The interface is the visual.
   Screens sit on paper with the app's own 8px radius, may bleed off the
   viewport, crop on purpose, and overlap the section boundary below.       */
.surface{background:var(--paper);border-radius:var(--r-2);box-shadow:var(--lift);overflow:hidden}
.night .surface{box-shadow:var(--lift-night)}
.surface img{width:100%}
.bleed-right{margin-right:calc(-1 * var(--gut))}
.caption{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:var(--s-3)}

/* ---- metric ------------------------------------------------------------ */
.metric .v{font-family:var(--mono);font-size:1.75rem;line-height:1.1;letter-spacing:-.02em;color:var(--ink);font-variant-numeric:tabular-nums}
.metric .l{font-size:var(--t-small);color:var(--mute);margin-top:4px}
.metric .d{font-family:var(--mono);font-size:var(--t-label);margin-top:6px}
.night .metric .v{color:#fff}
.night .metric .l{color:var(--fog)}

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