/* EverJar marketing homepage only — site/index.html loads this directly.
   /support/, /privacy/, and /dev/ keep using site/style.css so their
   plain-content layout (narrow column, document-sized headings, dark-mode
   variants) isn't affected by this page's much bigger hero type. */
@import url("https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap");

:root {
  /* surfaces */
  --ej-light-bg: #F6EFE2;
  --ej-light-card: #FFFBF2;
  --ej-light-paper-alt: #EFE3CD;
  --ej-light-border: #EADDC4;
  --ej-light-dashed: #D9C39B;
  --ej-light-ink: #231710;
  --ej-light-muted: #8A7A66;
  --ej-light-faint: #B5A48D;
  --ej-light-deep-muted: #6E5B41;
  --ej-light-tag-bg: #F5E3C8;
  --ej-light-tag-text: #8A5A2E;
  --ej-light-cta-bg: #231710;
  --ej-light-cta-text: #F6EFE2;

  /* accents */
  --ej-ember: #E0632F;
  --ej-ember-gradient: linear-gradient(135deg, #F2C94C, #E0632F);
  --ej-ember-glow: 0 0 28px rgba(242, 160, 60, .3);
  --ej-gold-glow: 0 0 18px rgba(242, 201, 76, .22);

  /* pull ritual — always dark */
  --ej-ritual-bg: #201812;
  --ej-ritual-radial: radial-gradient(90% 60% at 50% 22%, #43260F 0%, #2C1B10 50%, #201812 80%);
  --ej-ritual-jar-glass: #2C221A;
  --ej-ritual-jar-border: #52432F;
  --ej-ritual-slip-a: #F6EDDF;
  --ej-ritual-chip-sel-bg: rgba(242, 201, 76, .16);
  --ej-ritual-chip-sel: #E5C27E;
  --ej-ritual-chip-border: #43362A;
  --ej-ritual-chip-text: #A2907C;
  --ej-ritual-ghost-border: #52432F;
  --ej-ritual-ghost-text: #C4B29A;
  --ej-dark-ink: #F6EDDF;

  /* textures */
  --ej-torn-edge: repeating-linear-gradient(0deg, #D8B9A0 0 3px, #C9A588 3px 6px);
  --ej-photo-stripes: repeating-linear-gradient(45deg, #F0E2CA 0 8px, #E5D3B4 8px 16px);

  /* type */
  --ej-font-serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ej-font-ui: -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ej-font-mono: ui-monospace, Menlo, "SF Mono", monospace;
  --ej-size-slip-reveal: 24px;
  --ej-size-slip: 16px;
  --ej-size-body: 15px;
  --ej-size-body-sm: 13.5px;
  --ej-size-meta: 12.5px;
  --ej-size-eyebrow: 11px;
  --ej-size-stamp: 10px;
  --ej-size-chip: 10.5px;
  --ej-lh-slip: 1.15;
  --ej-lh-body: 1.55;
  --ej-eyebrow-tracking: 0.16em;
  --ej-mono-tracking: 0.08em;
  --ej-code-tracking: 0.18em;

  /* motion */
  --ej-dur-chip: .15s;
  --ej-ease-out: cubic-bezier(.16, 1, .3, 1);
  --ej-press-scale: .97;
}

*, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body {
    margin: 0;
    background: var(--ej-light-bg);
    color: var(--ej-light-ink);
    font: 400 16px/1.6 var(--ej-font-ui);
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--ej-ember); text-decoration: none; }
  a:hover { color: var(--ej-light-tag-text); text-decoration: underline; }

  .wrap { max-width: 1060px; margin: 0 auto; padding: 0 32px; }

  /* ---------- brand mark (lifted verbatim from site/style.css) ---------- */
  .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
  .brand:hover { text-decoration: none; }
  .mark { width: 26px; height: 30px; border: 2px solid var(--ej-light-ink); border-radius: 6px 6px 7px 7px; position: relative; flex: none; }
  .mark::before { content: ""; position: absolute; top: -6px; left: 50%; width: 16px; height: 5px; margin-left: -8px;
                  background: var(--ej-light-ink); border-radius: 2px; }
  .mark::after { content: ""; position: absolute; right: 4px; bottom: 4px; width: 6px; height: 6px; border-radius: 99px;
                 background: var(--ej-ember-gradient); }
  .word { font: 600 22px/1 var(--ej-font-serif); letter-spacing: -.4px; color: var(--ej-light-ink); }

  /* ---------- header ---------- */
  header { position: sticky; top: 0; z-index: 20; background: rgba(246,239,226,.86); backdrop-filter: blur(10px);
           border-bottom: 1px solid var(--ej-light-border); }
  header .wrap { display: flex; align-items: center; justify-content: space-between; height: 68px; }
  nav.top { display: flex; align-items: center; gap: 26px; }
  nav.top a { font: 600 13.5px var(--ej-font-ui); color: var(--ej-light-deep-muted); }
  nav.top a:hover { color: var(--ej-light-ink); text-decoration: none; }
  .cta { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border-radius: 12px;
         background: var(--ej-light-cta-bg); color: var(--ej-light-cta-text); font: 600 13.5px var(--ej-font-ui);
         transition: transform var(--ej-dur-chip) var(--ej-ease-out), opacity var(--ej-dur-chip) var(--ej-ease-out); }
  .cta:hover { color: var(--ej-light-cta-text); text-decoration: none; opacity: .88; }
  .cta:active { transform: scale(var(--ej-press-scale)); }
  .cta.ember { background: var(--ej-ember-gradient); color: #FFFBF2; box-shadow: var(--ej-gold-glow); }
  .cta.ghost { background: none; border: 1px solid var(--ej-light-dashed); color: var(--ej-light-ink); }

  /* ---------- hero ---------- */
  .hero { padding: 74px 0 64px; }
  .hero .wrap { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 56px; align-items: center; }
  .eyebrow { font: 600 var(--ej-size-eyebrow)/1 var(--ej-font-ui); letter-spacing: var(--ej-eyebrow-tracking);
             text-transform: uppercase; color: var(--ej-light-tag-text); margin: 0 0 18px; }
  h1 { margin: 0; font: 500 62px/1.04 var(--ej-font-serif); letter-spacing: -1.6px; text-wrap: balance; }
  h1 em { font-style: italic; color: var(--ej-ember); }
  .lede { margin: 20px 0 0; max-width: 34ch; font-size: 18px; line-height: 1.6; color: var(--ej-light-muted); }
  .hero-actions { display: flex; gap: 12px; margin-top: 30px; }
  .fineprint { margin: 16px 0 0; font: 400 var(--ej-size-meta)/1.5 var(--ej-font-ui); color: var(--ej-light-faint); }

  /* ---------- phone shells ---------- */
  .phone { position: relative; width: 320px; height: 660px; border-radius: 40px; background: #17100A; padding: 8px; flex: none;
           box-shadow: 0 30px 70px rgba(50,30,10,.28); }
  .phone .screen { position: relative; width: 100%; height: 100%; border-radius: 33px; overflow: hidden;
                   background: var(--ej-light-bg); display: flex; flex-direction: column; }
  .phone .notch { position: absolute; z-index: 9; top: 10px; left: 50%; transform: translateX(-50%);
                  width: 92px; height: 22px; border-radius: 99px; background: #17100A; }
  .pad { padding: 46px 20px 20px; display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
  .scr-head { display: flex; align-items: baseline; justify-content: space-between; }
  .scr-head h3 { margin: 0; font: 500 24px/1.1 var(--ej-font-serif); letter-spacing: -.4px; }
  .count { font: 600 var(--ej-size-meta)/1 var(--ej-font-mono); letter-spacing: var(--ej-mono-tracking); color: var(--ej-light-faint); }

  /* slip row — torn left edge, tag chip */
  .slip { position: relative; background: var(--ej-light-card); border: 1px solid var(--ej-light-border); border-radius: 10px;
          padding: 11px 12px 11px 20px; overflow: hidden; }
  .slip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--ej-torn-edge); }
  .slip .t { font: 500 var(--ej-size-slip)/var(--ej-lh-slip) var(--ej-font-serif); }
  .slip .m { margin-top: 5px; display: flex; align-items: center; gap: 7px; }
  .chip { display: inline-block; padding: 3px 7px; border-radius: 5px; background: var(--ej-light-tag-bg);
          color: var(--ej-light-tag-text); font: 600 var(--ej-size-chip)/1.2 var(--ej-font-ui);
          letter-spacing: .05em; text-transform: uppercase; }
  .by { font: 400 var(--ej-size-meta) var(--ej-font-ui); color: var(--ej-light-faint); }
  .shake { margin-top: auto; height: 50px; border-radius: 14px; background: var(--ej-ember-gradient); color: #FFFBF2;
           display: flex; align-items: center; justify-content: center; gap: 8px;
           font: 600 15px var(--ej-font-ui); box-shadow: var(--ej-ember-glow); }
  .tabbar { height: 58px; border-top: 1px solid var(--ej-light-border); background: var(--ej-light-card);
            display: flex; align-items: center; justify-content: space-around; padding-bottom: 6px; }
  .tabbar span { font: 600 10.5px var(--ej-font-ui); color: var(--ej-light-faint); }
  .tabbar span.on { color: var(--ej-light-ink); }

  /* dark ritual screen */
  .phone.ritual .screen { background: var(--ej-ritual-bg); background-image: var(--ej-ritual-radial); color: var(--ej-dark-ink); }
  .jarglass { align-self: center; width: 132px; height: 168px; margin-top: 18px; border: 2px solid var(--ej-ritual-jar-border);
              border-radius: 16px 16px 22px 22px; background: var(--ej-ritual-jar-glass); position: relative; }
  .jarglass::before { content: ""; position: absolute; top: -9px; left: 50%; transform: translateX(-50%); width: 72px; height: 8px;
                      border-radius: 3px; background: var(--ej-ritual-jar-border); }
  .jarglass::after { content: ""; position: absolute; inset: auto 12px 12px; height: 44px; border-radius: 8px;
                     background: var(--ej-photo-stripes); opacity: .5; }
  .reveal { background: var(--ej-ritual-slip-a); color: var(--ej-light-ink); border-radius: 12px; padding: 18px 18px 18px 26px;
            position: relative; overflow: hidden; transform: rotate(-1.4deg); box-shadow: 0 18px 34px rgba(0,0,0,.32); }
  .reveal::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--ej-torn-edge); }
  .reveal .t { font: 500 var(--ej-size-slip-reveal)/1.2 var(--ej-font-serif); letter-spacing: -.3px; }
  .rchips { display: flex; gap: 7px; margin-top: 12px; }
  .rchip { padding: 5px 9px; border-radius: 99px; border: 1px solid var(--ej-ritual-chip-border);
           color: var(--ej-ritual-chip-text); font: 600 var(--ej-size-chip) var(--ej-font-ui); letter-spacing: .05em; text-transform: uppercase; }
  .rchip.sel { background: var(--ej-ritual-chip-sel-bg); color: var(--ej-ritual-chip-sel); border-color: transparent; }
  .ghostbtn { height: 46px; border-radius: 14px; border: 1px solid var(--ej-ritual-ghost-border); color: var(--ej-ritual-ghost-text);
              display: flex; align-items: center; justify-content: center; font: 600 14px var(--ej-font-ui); }

  /* memory card */
  .mem { background: var(--ej-light-card); border: 1px solid var(--ej-light-border); border-radius: 12px; overflow: hidden; }
  .mem .photo { height: 96px; background: var(--ej-photo-stripes); }
  .mem .body { padding: 12px 13px 14px; }
  .mem .stamp { font: 600 var(--ej-size-stamp)/1 var(--ej-font-mono); letter-spacing: var(--ej-mono-tracking);
                text-transform: uppercase; color: var(--ej-light-faint); }
  .mem .q { margin: 7px 0 0; font: 400 italic var(--ej-size-body)/1.45 var(--ej-font-serif); color: var(--ej-light-deep-muted); }

  /* ---------- sections ---------- */
  section.band { padding: 80px 0; border-top: 1px solid var(--ej-light-border); }
  .band.sunken { background: var(--ej-light-paper-alt); }
  h2 { margin: 0; font: 500 40px/1.12 var(--ej-font-serif); letter-spacing: -1px; }
  .sub { margin: 14px 0 0; max-width: 48ch; color: var(--ej-light-muted); font-size: 17px; }
  .sechead { margin-bottom: 42px; }

  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; list-style: none; margin: 0; padding: 0; counter-reset: step; }
  .steps li { position: relative; background: var(--ej-light-card); border: 1px solid var(--ej-light-border); border-radius: 14px;
              padding: 22px 20px 22px 22px; overflow: hidden; font-size: var(--ej-size-body); line-height: var(--ej-lh-body); }
  .steps li::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 7px; background: var(--ej-torn-edge); }
  .steps .n { counter-increment: step; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px;
              border-radius: 99px; background: var(--ej-ember-gradient); color: #FFFBF2;
              font: 700 12.5px var(--ej-font-ui); margin: 0 0 14px 10px; }
  .steps .n::before { content: counter(step); }
  .steps h4 { margin: 0 0 6px 10px; font: 500 19px/1.2 var(--ej-font-serif); }
  .steps p { margin: 0 0 0 10px; color: var(--ej-light-muted); }

  .gallery { display: flex; flex-wrap: wrap; gap: 34px; justify-content: center; align-items: flex-start; }
  .gallery .phone { width: 288px; height: 594px; }
  .gallery .phone .screen { border-radius: 30px; }
  .gallery figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
  .gallery figcaption { text-align: center; max-width: 26ch; }
  .gallery figcaption b { display: block; font: 500 18px/1.2 var(--ej-font-serif); margin-bottom: 5px; }
  .gallery figcaption span { font-size: var(--ej-size-body-sm); color: var(--ej-light-muted); }

  .two { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 60px; align-items: center; }
  .private ul { margin: 24px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 14px; }
  .private li { display: flex; gap: 12px; font-size: var(--ej-size-body); line-height: var(--ej-lh-body); color: var(--ej-light-muted); }
  .private li b { color: var(--ej-light-ink); font-weight: 600; }
  .private li::before { content: ""; flex: none; width: 7px; height: 7px; margin-top: 8px; border-radius: 99px; background: var(--ej-ember-gradient); }

  .keepsakes { display: flex; gap: 22px; flex-wrap: wrap; justify-content: center; }
  .keepsake { width: 176px; background: var(--ej-light-card); border: 1px solid var(--ej-light-border); border-radius: 4px;
              padding: 11px 11px 16px; box-shadow: 0 12px 26px rgba(80,50,20,.12); }
  .keepsake:nth-child(odd) { transform: rotate(-1.6deg); }
  .keepsake:nth-child(even) { transform: rotate(1.4deg); }
  .keepsake .ph { height: 150px; background: var(--ej-photo-stripes); }
  .keepsake .cap { margin: 12px 2px 0; font: 400 italic 14px/1.4 var(--ej-font-serif); color: var(--ej-light-deep-muted); }
  .keepsake .dt { margin: 8px 2px 0; font: 600 var(--ej-size-stamp) var(--ej-font-mono); letter-spacing: var(--ej-mono-tracking);
                  text-transform: uppercase; color: var(--ej-light-faint); }

  .closer { text-align: center; padding: 96px 0 100px; }
  .closer h2 { font-size: 46px; }
  .closer .hero-actions { justify-content: center; }
  .code { display: inline-flex; gap: 6px; margin-top: 34px; }
  .code i { width: 34px; height: 44px; border: 1px dashed var(--ej-light-dashed); border-radius: 8px; background: var(--ej-light-card);
            display: flex; align-items: center; justify-content: center; font: 600 19px var(--ej-font-mono);
            letter-spacing: var(--ej-code-tracking); font-style: normal; color: var(--ej-light-ink); }

  footer { border-top: 1px solid var(--ej-light-border); background: var(--ej-light-card); padding: 30px 0; }
  footer .wrap { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
                 font: 400 14px var(--ej-font-ui); color: var(--ej-light-faint); }
  footer nav { display: flex; gap: 20px; }

  @media (max-width: 980px) {
    .hero .wrap, .two { grid-template-columns: minmax(0,1fr); }
    .steps { grid-template-columns: repeat(2, 1fr); }
    h1 { font-size: 46px; }
    nav.top { display: none; }
  }