/* ==========================================================================
   Jam AI Design System 2026  ·  jam.css
   Source of truth: the jamout.ai redesign (homepage v4 "Jam desk" + /academy)
   Load fonts first:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap">
   Then: <link rel="stylesheet" href="jam.css">
   Set --jam-assets to wherever the assets/ folder lives (default: assets/).
   ========================================================================== */

:root{
  /* ---- Orange (the hero color) ---- */
  --jam-orange:#ff6b35;          /* THE brand orange */
  --jam-orange-deep:#e5501d;     /* hover, script accents, gradients */
  --jam-orange-card:#ff7b3b;     /* big hero card fill */
  --jam-orange-side:#ff7138;     /* sidebar, send button */
  --jam-orange-line:#f36826;     /* border on orange cards */
  --jam-orange-press:#d95724;    /* pressed shadow under orange buttons */
  --jam-orange-soft:#fff1ea;     /* tints */
  --jam-accent:#af431a;          /* orange text on light backgrounds (readable) */
  --jam-link:#9c411c;            /* links */
  --jam-rust:#a63b16;            /* solid deep button */

  /* ---- Yellow (primary button) ---- */
  --jam-yellow:#ffdb57;
  --jam-yellow-line:#e9be36;
  --jam-yellow-hover:#ffe783;

  /* ---- Warm neutrals ---- */
  --jam-page:#fff9f1;            /* page background */
  --jam-cream:#faf5ee;
  --jam-paper:#fffefb;           /* panels */
  --jam-explore:#f6eee2;         /* alt section band */
  --jam-rule:#d8c4ab;            /* dividers */
  --jam-ink:#2c251e;             /* body text */
  --jam-ink-strong:#231a14;
  --jam-ink-soft:#4c4038;
  --jam-muted:#7a6d63;
  --jam-body-soft:#71604f;       /* ledes / secondary copy */
  --jam-eyebrow:#956d47;

  /* ---- Text ON the orange card ---- */
  --jam-on-orange:#301c12;
  --jam-on-orange-sub:#5c2d18;
  --jam-on-orange-em:#fff9eb;

  /* ---- Offer + chip surfaces ---- */
  --jam-offer-bg:#fff7eb;
  --jam-offer-line:#ffc69c;
  --jam-chip-bg:#fff5e8;
  --jam-chip-line:#eed6bc;
  --jam-chip-icon:#ffe0bf;
  --jam-chip-icon-ink:#b1451b;

  /* ---- Dark warm ---- */
  --jam-dark:#382319;
  --jam-dark-ink:#fff4e3;
  --jam-dark-head:#fff3dd;
  --jam-dark-muted:#ebbd9c;
  --jam-dark-grad:linear-gradient(160deg,#241a13 0%,#171008 100%);
  --jam-orange-grad:linear-gradient(160deg,#ff6b35 0%,#e5501d 100%);

  /* ---- Iridescent (the ribbon's colors, for CSS-only sheen) ---- */
  --jam-irid-gold:rgba(255,214,92,.75);
  --jam-irid-lilac:rgba(180,150,255,.85);
  --jam-irid-pink:rgba(255,120,200,.7);
  --jam-irid-sky:rgba(120,200,255,.8);

  /* ---- Type ---- */
  --jam-sans:"Poppins",-apple-system,BlinkMacSystemFont,sans-serif;
  --jam-script:"Caveat",cursive;
  --jam-fs-display:clamp(40px,4.6vw,62px);
  --jam-fs-h2:clamp(28px,3.2vw,38px);
  --jam-fs-h3:24px;
  --jam-fs-body:17.5px;
  --jam-fs-small:15px;
  --jam-fs-eyebrow:13px;

  /* ---- Shape + depth ---- */
  --jam-r-xl:23px;   /* hero + dark cards */
  --jam-r-lg:19px;   /* panels */
  --jam-r-md:14px;   /* offer cards, buttons */
  --jam-r-sm:12px;   /* chips, inputs */
  --jam-r-pill:100px;
  --jam-shadow-soft:0 4px 14px #aa35100b;
  --jam-shadow-card:0 9px 26px #c64c1010;
  --jam-shadow-lift:0 10px 26px #aa351014;
  --jam-shadow-deep:0 26px 60px rgba(35,26,20,.28);

  --jam-maxw:1180px;
  --jam-assets:"assets/";
}

/* ---------- Base ---------- */
.jam, .jam-page{font-family:var(--jam-sans);color:var(--jam-ink);font-size:var(--jam-fs-body);line-height:1.7;-webkit-font-smoothing:antialiased}
.jam-page{background:var(--jam-page);margin:0}
.jam *,.jam-page *{box-sizing:border-box}
.jam h1,.jam h2,.jam h3,.jam-page h1,.jam-page h2,.jam-page h3{font-weight:500;letter-spacing:-.045em;line-height:1.15;text-wrap:balance;margin:0}
.jam-wrap{max-width:var(--jam-maxw);margin:0 auto;padding:0 28px}
.jam-band{padding:64px 0}
.jam-band--alt{background:var(--jam-explore);border-top:1px solid #e5d5c0}

/* ---------- Type pieces ---------- */
.jam-display{font-size:var(--jam-fs-display);font-weight:600;line-height:1.06;letter-spacing:-.06em}
.jam-h2{font-size:var(--jam-fs-h2);font-weight:500;margin:12px 0 10px}
.jam-h3{font-size:var(--jam-fs-h3);font-weight:600;letter-spacing:-.02em}
.jam-lede{font-size:17.5px;color:var(--jam-body-soft);max-width:60ch}
.jam-small{font-size:var(--jam-fs-small);color:var(--jam-muted)}
.jam-eyebrow{display:inline-block;font-size:var(--jam-fs-eyebrow);font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--jam-eyebrow)}
.jam-eyebrow--star::before{content:"✦ ";color:var(--jam-orange)}
.jam-tilt{font-style:italic;color:var(--jam-orange);font-weight:600}       /* italic orange emphasis word */
.jam-accent{font-style:normal;color:var(--jam-accent)}                      /* upright orange emphasis */
.jam-hand{font-family:var(--jam-script);color:var(--jam-orange-deep);font-size:clamp(23px,2.6vw,30px);line-height:1.2;font-weight:600}
.jam-sticker{display:inline-block;font-family:var(--jam-script);font-weight:700;font-size:24px;line-height:1;background:var(--jam-yellow);color:#392315;padding:8px 14px 6px;border-radius:10px;transform:rotate(-4deg);box-shadow:0 4px 12px #b94e2322}
.jam-link{color:var(--jam-link);font-weight:500;border-bottom:1px solid #b97e51;padding-bottom:3px;text-decoration:none}
.jam-link:hover{color:var(--jam-orange-deep)}

/* ---------- Buttons ---------- */
.jam-btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;font:inherit;font-size:15.5px;font-weight:600;line-height:1.2;border-radius:var(--jam-r-pill);padding:12px 20px;border:1px solid transparent;cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform .15s,background .15s,box-shadow .15s}
.jam-btn:hover{transform:translateY(-2px)}
.jam-btn:active{transform:translateY(2px)}
.jam-btn:focus-visible{outline:3px solid #b84921;outline-offset:4px}
.jam-btn:disabled,.jam-btn[aria-disabled="true"]{opacity:.45;box-shadow:none;cursor:default;transform:none}
/* primary: the yellow pill */
.jam-btn--primary{background:var(--jam-yellow);color:#392315;border-color:var(--jam-yellow-line);box-shadow:0 4px 0 #b94e2333}
.jam-btn--primary:hover{background:var(--jam-yellow-hover)}
/* orange */
.jam-btn--orange{background:var(--jam-orange-side);color:#332015;box-shadow:0 3px 0 var(--jam-orange-press)}
.jam-btn--orange:hover{background:#ff905d}
/* deep (on light cards / inside offers) */
.jam-btn--deep{background:var(--jam-rust);color:#fff6e8;border-radius:8px}
.jam-btn--deep:hover{background:#8f3212}
/* ghost */
.jam-btn--ghost{background:transparent;color:var(--jam-link);border-color:#ddcdbb;font-weight:500}
.jam-btn--ghost:hover{background:#fff7eb}
/* on dark */
.jam-btn--light{background:var(--jam-dark-head);color:var(--jam-dark)}
.jam-btn--sm{font-size:14px;padding:8px 14px}
.jam-btn--lg{font-size:17px;padding:15px 26px}
.jam-btn--icon{width:46px;height:46px;padding:0;border-radius:14px;font-size:22px}

/* ---------- Ribbon ---------- */
/* Drop inside any card with .jam-has-ribbon. Uses the transparent PNG or the looping video. */
.jam-has-ribbon{position:relative;overflow:hidden;isolation:isolate}
.jam-ribbon{position:absolute;width:760px;max-width:none;height:330px;object-fit:contain;right:-300px;top:-90px;z-index:-1;pointer-events:none;transform:rotate(-17deg)}
.jam-ribbon--video{object-fit:cover;background:transparent;-webkit-mask-image:radial-gradient(ellipse 56% 64% at 58% 46%,#000 50%,transparent 100%);mask-image:radial-gradient(ellipse 56% 64% at 58% 46%,#000 50%,transparent 100%)}
.jam-ribbon--drift{animation:jam-ribbon-drift 22s ease-in-out infinite;will-change:transform}
.jam-ribbon--soft{opacity:.75}
.jam-ribbon--small{width:420px;height:180px;top:-70px;right:-170px}
.jam-ribbon--corner{width:150px;height:78px;right:-64px;top:-24px;opacity:.7}
@keyframes jam-ribbon-drift{0%,100%{transform:rotate(-17deg) translate3d(0,0,0)}50%{transform:rotate(-15.5deg) translate3d(-16px,8px,0)}}
/* CSS-only iridescent sheen (no image needed) */
.jam-sheen{position:relative;overflow:hidden;isolation:isolate}
.jam-sheen::before{content:"";position:absolute;left:-30%;right:-30%;top:52%;height:120px;background:linear-gradient(90deg,rgba(255,255,255,0) 0%,var(--jam-irid-gold) 18%,rgba(255,255,255,.95) 40%,var(--jam-irid-lilac) 62%,var(--jam-irid-pink) 80%,rgba(255,255,255,0) 100%);filter:blur(14px);transform:rotate(-9deg);opacity:.85;z-index:-1}
.jam-sheen::after{content:"";position:absolute;left:-30%;right:-30%;top:60%;height:40px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9),var(--jam-irid-sky),rgba(255,255,255,0));filter:blur(6px);transform:rotate(-9deg);z-index:-1}
/* iridescent text (use sparingly, one word max) */
.jam-irid-text{background:linear-gradient(95deg,#fff9eb 0%,#ffd65c 25%,#fff 45%,#b496ff 65%,#ff78c8 85%,#fff9eb 100%);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- Cards ---------- */
/* Hero: the orange welcome card (pair with .jam-has-ribbon + a .jam-ribbon img) */
.jam-hero{background:var(--jam-orange-card);border:1px solid var(--jam-orange-line);border-radius:var(--jam-r-xl);padding:38px 42px 40px;min-height:330px;box-shadow:var(--jam-shadow-card);color:var(--jam-on-orange)}
.jam-hero .jam-eyebrow{color:#5a2c18;font-size:12px;margin-bottom:12px}
.jam-hero h1,.jam-hero .jam-display{color:var(--jam-on-orange);max-width:660px}
.jam-hero h1 em,.jam-hero .jam-display em{font-style:normal;color:var(--jam-on-orange-em)}
.jam-hero p{max-width:620px;color:var(--jam-on-orange-sub);margin:18px 0 0;font-size:17px}
.jam-hero__note{display:block;font-size:13px;color:#642f16;letter-spacing:.04em;margin-bottom:26px}
.jam-hero__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.jam-hero__actions .jam-link{color:var(--jam-on-orange);border-color:#a63b16}
/* Dark warm card */
.jam-dark{background:var(--jam-dark);color:var(--jam-dark-ink);border-radius:var(--jam-r-xl);padding:40px 44px}
.jam-dark--grad{background:var(--jam-dark-grad)}
.jam-dark h2,.jam-dark h3{color:var(--jam-dark-head);font-weight:600;letter-spacing:-.04em}
.jam-dark p{color:var(--jam-dark-muted)}
.jam-dark .jam-eyebrow{color:var(--jam-dark-muted)}
.jam-dark .jam-tilt{color:var(--jam-yellow)}
/* Offer card */
.jam-offer{padding:24px 22px;border-radius:var(--jam-r-md);border:1px solid var(--jam-offer-line);background:var(--jam-offer-bg);box-shadow:var(--jam-shadow-soft);display:flex;flex-direction:column;gap:10px}
.jam-offer--lead{border-color:#ac7957;box-shadow:var(--jam-shadow-lift)}
.jam-offer__tag{font-size:12px;color:#88674f;letter-spacing:.06em;text-transform:uppercase}
.jam-offer h3{font-size:24px;font-weight:600;letter-spacing:-.02em}
.jam-offer__price{font-size:15.5px;font-weight:600}
.jam-offer ul{margin:0;padding-left:16px;font-size:15px;color:#786553;display:grid;gap:3px}
.jam-offer__go{margin-top:auto;padding-top:10px;align-self:flex-start}
/* Panel (white working surface) */
.jam-panel{background:var(--jam-paper);border:2px solid #ecb089;border-radius:var(--jam-r-lg);box-shadow:0 7px 20px #ae53200b;overflow:hidden}
.jam-panel__head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 20px;border-bottom:1px solid #f0e3d6}
.jam-panel__body{padding:24px 22px}
.jam-dot{width:7px;height:7px;border-radius:50%;background:var(--jam-orange);display:inline-block}
/* Sheen card (orange + CSS iridescent stripe) */
.jam-shine-card{background:var(--jam-orange);color:var(--jam-cream);border-radius:16px;padding:26px 22px 22px;min-height:320px;display:flex;flex-direction:column;align-items:center;text-align:center;box-shadow:0 14px 34px rgba(35,26,20,.16)}
.jam-shine-card .kicker{font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;font-weight:700;opacity:.9;margin-bottom:12px}
.jam-shine-card h3{font-weight:800;font-size:clamp(26px,2.6vw,34px);line-height:.95;letter-spacing:-.01em;text-transform:uppercase;margin:0 0 12px;color:var(--jam-cream)}
.jam-shine-card p{font-size:13px;font-weight:600;line-height:1.4;margin:0;max-width:220px}
/* Invite / callout */
.jam-callout{background:#ffe0bc;border:1px solid #efaa6d;border-radius:13px;padding:22px;color:#3f2b1d}
.jam-callout h3{font-size:25px;margin:8px 0}

/* ---------- Chips + prompts ---------- */
.jam-chip{border:1px solid var(--jam-chip-line);border-radius:var(--jam-r-sm);padding:14px;background:var(--jam-chip-bg);font:inherit;font-size:15px;line-height:1.5;display:flex;align-items:center;gap:13px;text-align:left;cursor:pointer;color:var(--jam-ink);transition:background .15s,transform .15s,border-color .15s}
.jam-chip:hover{background:#ffe5c9;border-color:#e69d67;transform:translateY(-2px)}
.jam-chip__ic{color:var(--jam-chip-icon-ink);background:var(--jam-chip-icon);width:28px;height:28px;border-radius:8px;display:grid;place-items:center;font-size:17px;flex:0 0 28px}
.jam-tag{display:inline-flex;align-items:center;gap:6px;border:1px solid #d9c7b2;border-radius:30px;padding:6px 12px;font-size:14px;color:var(--jam-ink-soft);background:transparent}

/* ---------- Forms ---------- */
.jam-input{border:1.5px solid var(--jam-chip-line);border-radius:var(--jam-r-sm);padding:11px 14px;font:inherit;font-size:17px;background:#fff;color:var(--jam-ink);width:100%}
.jam-input:focus{outline:none;border-color:var(--jam-orange);box-shadow:0 0 0 4px #ff7b3b22}
.jam-input--error{border-color:#d64545;background:#fff4f2}
.jam-label{display:block;font-size:14px;font-weight:500;margin-bottom:6px}
.jam-composer{border:2px solid #e6a06a;border-radius:18px;background:#fff;padding:14px 16px 10px 18px;box-shadow:0 6px 18px #c65a1a14}
.jam-composer:focus-within{border-color:var(--jam-orange);box-shadow:0 0 0 4px #ff7b3b22,0 6px 18px #c65a1a14}
.jam-composer textarea{border:0;padding:4px 0;width:100%;min-height:62px;resize:none;background:transparent;color:var(--jam-ink);font:inherit;font-size:19px;line-height:1.6;display:block}
.jam-composer textarea:focus{outline:none}
.jam-composer textarea::placeholder{color:#978a7d}
.jam-composer__foot{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:4px}

/* ---------- Steps + FAQ ---------- */
.jam-steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--jam-rule)}
.jam-step{padding:22px 18px 22px 0;border-right:1px solid #e5d5c0}
.jam-step:last-child{border-right:0}
.jam-step__n{font-size:13px;color:var(--jam-accent);font-weight:600;letter-spacing:.08em}
.jam-step h3{font-size:20.5px;font-weight:600;margin:6px 0}
.jam-step p{font-size:15px;color:var(--jam-body-soft)}
.jam-faq details{border-bottom:1px solid #e0ceb8;padding:18px 0}
.jam-faq summary{font-size:18px;cursor:pointer;font-weight:500}
.jam-faq p{font-size:16px;color:#78634e;margin-top:12px}

/* ---------- Bands ---------- */
.jam-cta-band{background:var(--jam-orange-grad);color:#fff;text-align:center;border-radius:var(--jam-r-xl);padding:56px 28px}
.jam-cta-band h2{color:#fff;font-weight:600}
.jam-cta-band p{color:#fff3e8}

/* ---------- Responsive ---------- */
@media (max-width:900px){.jam-steps{grid-template-columns:1fr}.jam-step{border-right:0;border-bottom:1px solid #e5d5c0}}
@media (max-width:640px){
  .jam-wrap{padding:0 16px}
  .jam-hero{padding:26px 22px;min-height:0}
  .jam-hero h1,.jam-hero .jam-display{font-size:36px}
  .jam-ribbon{width:420px;height:180px;top:-70px;right:-170px}
  .jam-dark{padding:28px 22px}
  .jam-band{padding:48px 0}
}
@media (prefers-reduced-motion:reduce){.jam-ribbon--drift{animation:none}.jam-btn,.jam-chip{transition:none}}