/* ===================================================================
   COLD EMAIL SHOWCASE
   Paper (card) + Bento (grid) tokened to Hopin's design system.
   Tokens reused from index.html / blog.html for visual continuity.
   =================================================================== */

@font-face{font-family:'General Sans';src:url('GeneralSans-Variable.woff2') format('woff2-variations');font-weight:200 700;font-style:normal;font-display:swap;}
@font-face{font-family:'Manrope';src:url('Manrope-Variable.woff2') format('woff2-variations');font-weight:200 800;font-style:normal;font-display:swap;}

/* ---------- Tokens (keep in one place) ---------- */
:root{
  --ce-cream: #fffef6;
  --ce-cream-2: #faf7ea;
  --ce-cream-3: #f3efe0;
  --ce-ink: #1a1a1a;
  --ce-muted: #666;
  --ce-muted-2: rgba(26,21,18,0.55);
  --ce-border: rgba(26,26,26,0.08);
  --ce-border-strong: rgba(26,26,26,0.18);
  --ce-accent: #6F7FAD;
  --ce-accent-hover: #5A6A94;
  --ce-accent-soft: rgba(111,127,173,0.12);
  --ce-shadow-sm: 0 1px 2px rgba(26,26,26,0.04);
  --ce-shadow-md: 0 1px 2px rgba(26,26,26,0.04), 0 8px 24px rgba(26,26,26,0.04);
  --ce-shadow-lg: 0 2px 4px rgba(26,26,26,0.06), 0 18px 48px rgba(26,26,26,0.08);
  --ce-gap: 24px;
  --ce-radius-card: 18px;
  --ce-radius-featured: 28px;
  --ce-radius-pill: 999px;
  --ce-max: 1200px;
  --ce-section-pad: clamp(84px, 10vw, 152px);
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box;}
html,body{margin:0;padding:0;background:var(--ce-cream);color:var(--ce-ink);font-family:'Manrope',system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;color-scheme:light;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;background:none;border:none;padding:0;cursor:pointer;color:inherit;}
img{max-width:100%;height:auto;display:block;}
::selection{background:#d1d5e1;color:#000;}
::-moz-selection{background:#d1d5e1;color:#000;}

/* ---------- Noise overlay (paper texture) ---------- */
.hopin-noise{
  position:fixed;inset:0;
  width:100%;height:100%;
  opacity:0.13;
  pointer-events:none;
  z-index:5;
  background:url('noise.avif') top left repeat;
  -webkit-user-select:none;user-select:none;
}

/* ---------- Nav (ported from blog.html for consistency) ---------- */
.hpn-nav{position:fixed;top:24px;left:50%;transform:translateX(-50%);width:calc(100% - 48px);max-width:1080px;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 26px;background:rgba(255,254,246,0.26);border-radius:16px;z-index:100;transition:background-color .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease;backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%);border:1px solid rgba(255,255,255,0.30);box-shadow:0 2px 14px rgba(0,0,0,0.04);}
.hpn-nav.nav-glass{background:rgba(255,254,246,0.55);backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);border:1px solid rgba(0,0,0,0.06);box-shadow:0 6px 24px rgba(0,0,0,0.05);}
.hpn-logo-link{display:flex;align-items:center;position:relative;z-index:2;}
.hpn-logo{height:30px;width:auto;display:block;}
/* The right-side cluster (LinkedIn + Slack + Login, ~210px wide) is wider
   than the hopin logo (~95px), so placing nav-links at geometric center
   leaves a visibly larger gap on the left than on the right. Nudging the
   block ~55px left of center makes the logo→first-link gap match the
   last-link→LinkedIn gap. */
.hpn-nav-links{position:absolute;left:50%;top:50%;transform:translate(calc(-50% - 30px),-50%);display:flex;align-items:center;gap:32px;}
.hpn-nav-link{font-size:14px;font-weight:500;color:#1a1a1a;transition:color .2s ease;white-space:nowrap;}
.hpn-nav-link:hover{color:var(--ce-accent);}
.hpn-right{display:flex;align-items:center;gap:12px;position:relative;z-index:2;}
/* Login button — matches the blue used on index.html */
.hopin-login-btn{display:inline-flex;align-items:center;gap:8px;background:var(--ce-accent);color:#fff;text-decoration:none;font-family:'Manrope',sans-serif;font-size:14px;font-weight:500;padding:10px 22px;border-radius:8px;transition:background-color .25s ease, transform .25s ease, box-shadow .25s ease;box-shadow:0 1px 3px rgba(111,127,173,0.3);border:none;}
.hopin-login-btn:hover{background:var(--ce-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(111,127,173,0.35);}
.hopin-login-btn .dot-grid{display:inline-grid;grid-template-columns:repeat(2,4px);gap:2px;margin-left:4px;transition:transform .5s cubic-bezier(.22,1,.36,1);}
.hopin-login-btn:hover .dot-grid{transform:rotate(45deg);}
.hopin-login-btn .dot-item{width:4px;height:4px;background:#fff;border-radius:1px;}
.hopin-social{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:7px;transition:transform .2s ease, background .2s ease;}
.hopin-social img{display:block;width:22px;height:22px;object-fit:contain;filter:grayscale(1);opacity:0.55;transition:filter .3s ease, opacity .3s ease;}
.hopin-social:hover img{filter:none;opacity:1;}
.hopin-social:hover{background:rgba(0,0,0,0.04);transform:translateY(-1px);}

/* ---------- Page shell ---------- */
.ce-main{
  max-width:var(--ce-max);
  margin:0 auto;
  padding:calc(var(--ce-section-pad) + 24px) 40px 48px;
  position:relative;
}

/* ---------- Reveal (IntersectionObserver) ---------- */
[data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.25,1), transform .7s cubic-bezier(.2,.7,.25,1);}
[data-reveal].is-in{opacity:1;transform:none;}

/* ---------- Hero ---------- */
.ce-hero{max-width:820px;padding:16px 0 56px;}
.ce-eyebrow{
  display:inline-block;
  font-family:'Manrope',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ce-accent);
  padding:6px 12px;
  border-radius:var(--ce-radius-pill);
  background:var(--ce-accent-soft);
  margin-bottom:20px;
}
.ce-h1{
  font-family:'General Sans',sans-serif;
  font-size:clamp(40px, 6vw, 64px);
  font-weight:500;
  letter-spacing:-0.03em;
  line-height:1.05;
  color:var(--ce-ink);
  margin:0 0 20px;
}
.ce-sub{
  font-size:17px;line-height:1.55;
  color:var(--ce-muted);
  max-width:640px;
  margin:0;
}
.ce-sub-link{color:var(--ce-accent);border-bottom:1px solid var(--ce-accent-soft);}
.ce-sub-link:hover{color:var(--ce-accent-hover);border-bottom-color:var(--ce-accent);}

/* ---------- Stats strip ---------- */
.ce-stats{
  display:flex;align-items:center;gap:32px;
  padding:32px 0;
  border-top:1px solid var(--ce-border);
  border-bottom:1px solid var(--ce-border);
  margin-bottom:48px;
}
.ce-stat{display:flex;align-items:baseline;gap:10px;}
.ce-stat-num{
  font-family:'General Sans',sans-serif;
  font-size:28px;font-weight:500;letter-spacing:-0.02em;
  color:var(--ce-ink);
}
.ce-stat-lbl{font-size:13px;color:var(--ce-muted);letter-spacing:.01em;}
.ce-stat-div{width:1px;height:20px;background:var(--ce-border);}

/* ---------- Filter pills ---------- */
/* Filter bar is inline (not sticky) and blends fully with the page:
   transparent background so the fixed .hopin-noise layer shows through
   untouched and nothing draws a panel, edge, or border around the pills. */
.ce-filters-wrap{
  position:relative;
  margin:0 0 36px;padding:4px 0;
  background:transparent;
}
.ce-filters{
  display:flex;flex-wrap:wrap;gap:8px;
  /* Match the nav's outer width (1080px) so pills align with the topbar. */
  max-width:1080px;margin:0 auto;
  overflow-x:auto;overflow-y:hidden;
  scrollbar-width:none;
}
.ce-filters::-webkit-scrollbar{display:none;}
.ce-pill{
  display:inline-flex;align-items:center;
  padding:8px 16px;
  font-family:'Manrope',sans-serif;
  font-size:13px;font-weight:500;
  color:#2f2f2f;
  /* Transparent — pills show the page/filter-bar bg through them.
     Definition comes from a stronger border + darker text only. */
  background:transparent;
  border:1px solid rgba(26,26,26,0.28);
  border-radius:var(--ce-radius-pill);
  transition:color .2s ease, background .2s ease, border-color .2s ease, transform .15s ease;
  white-space:nowrap;flex-shrink:0;
}
.ce-pill:hover{color:var(--ce-ink);border-color:rgba(26,26,26,0.45);transform:translateY(-1px);}
.ce-pill.is-active{
  color:#fff;
  background:var(--ce-accent);
  border-color:var(--ce-accent);
  box-shadow:0 2px 8px rgba(111,127,173,0.3);
}
.ce-pill.is-active:hover{background:var(--ce-accent-hover);border-color:var(--ce-accent-hover);}

/* ---------- Bento grid (aspect-ratio driven) ---------- */
.ce-gallery-wrap{margin-bottom:96px;}
.ce-gallery{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  grid-auto-rows:auto;
  gap:var(--ce-gap);
  align-items:start;
}
.ce-empty{
  grid-column:1/-1;
  text-align:center;
  padding:80px 20px;
  color:var(--ce-muted);
  font-size:15px;
}

/* ---------- Card (paper) ---------- */
.ce-card{
  grid-column:span 4;
  display:flex;flex-direction:column;gap:10px;
  position:relative;
  z-index:10; /* lift above fixed .hopin-noise (z:5) so cards render crisp */
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.25,1), transform .6s cubic-bezier(.2,.7,.25,1), box-shadow .25s ease;
  outline:none;
  cursor:pointer;
}
.ce-card.is-in{opacity:1;transform:none;}
.ce-card.is-hidden{display:none;}

/* Featured "hero" card — full-width landscape that matches the natural
   aspect of a wide email screenshot. Used by cards with both
   featured:true and a resolved image path. */
.ce-card[data-size="feat"]{grid-column:1 / -1;}
.ce-card[data-size="feat"] .ce-card-frame{aspect-ratio:5 / 2;padding:20px;}
.ce-card[data-size="feat"] .ce-card-img{object-fit:cover;object-position:center;}
/* Scale the stamp proportionally so it reads as "a stamp on a real
   piece of paper" and not a small pill on a huge wall. */
.ce-card[data-size="feat"] .ce-stamp{
  right:28px;bottom:28px;
  padding:14px 22px;
}
.ce-card[data-size="feat"] .ce-stamp-l1{font-size:11px;}
.ce-card[data-size="feat"] .ce-stamp-l2{font-size:22px;}

/* Filter-change animation: shorten the transition + add a gentle scale pop
   so cards feel like they "come up" into place. */
.ce-gallery.is-filtering .ce-card,
.ce-gallery.is-filtering .ce-breather{
  transition:opacity .3s cubic-bezier(.2,.7,.25,1), transform .38s cubic-bezier(.2,.7,.25,1), box-shadow .25s ease;
}
.ce-gallery.is-filtering .ce-card:not(.is-in){
  opacity:0;
  transform:translateY(18px) scale(.96);
}
.ce-gallery.is-filtering .ce-breather:not(.is-in){
  opacity:0;
  transform:translateY(12px) scale(.98);
}

.ce-card-frame{
  position:relative;
  flex:0 0 auto;
  width:100%;
  aspect-ratio:3 / 4;
  /* Warm cream frame — sits one shade darker than the page so the card feels
     "placed" on the wall instead of popping out as pure white. */
  background:#f5f0de;
  border:1px solid rgba(26,26,26,0.14);
  border-radius:var(--ce-radius-card);
  box-shadow:var(--ce-shadow-md), inset 1px 0 0 rgba(0,0,0,0.03);
  padding:16px;
  overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.25,1), border-color .25s ease, box-shadow .25s ease;
}
.ce-card[data-clickable="true"]{cursor:pointer;}
.ce-card[data-clickable="true"]:hover .ce-card-frame,
.ce-card[data-clickable="true"]:focus-visible .ce-card-frame{
  transform:translateY(-4px);
  border-color:var(--ce-border-strong);
  box-shadow:var(--ce-shadow-lg), inset 1px 0 0 rgba(0,0,0,0.03);
}
.ce-card:focus-visible .ce-card-frame{outline:2px solid var(--ce-accent);outline-offset:2px;}

.ce-card-image{
  position:relative;
  width:100%;height:100%;
  border-radius:calc(var(--ce-radius-card) - 6px);
  overflow:hidden;
  /* Inner paper sheet sits slightly lighter than the frame so the stacked
     paper / mount effect reads cleanly. */
  background:#fdfbef;
  border:1px solid rgba(26,26,26,0.08);
}
.ce-card-img{
  width:100%;height:100%;
  object-fit:cover;object-position:top center;
  display:block;
}

/* ---------- Skeleton placeholder ---------- */
.ce-skeleton{
  position:absolute;inset:0;
  padding:20px 22px;
  display:flex;flex-direction:column;gap:12px;
  background:linear-gradient(180deg, #fdfbef 0%, #f8f3e0 100%);
}
/* display:flex above would otherwise beat the UA's [hidden]{display:none}
   rule (equal specificity, author > UA), leaving the skeleton painted on
   top of a loaded image. Explicitly collapse it when the JS marks it hidden. */
.ce-skeleton[hidden],
.ce-card-img[hidden]{display:none;}
.ce-sk-bar{
  height:10px;width:100%;
  border-radius:3px;
  background:linear-gradient(90deg, var(--ce-cream-3) 0%, #f7f2df 50%, var(--ce-cream-3) 100%);
  background-size:200% 100%;
  animation:ce-shimmer 1.8s ease-in-out infinite;
  opacity:0.85;
}
.ce-sk-bar--subject{height:14px;width:75%;margin-bottom:10px;background:linear-gradient(90deg,#ebe5cf 0%,#f3efe0 50%,#ebe5cf 100%);background-size:200% 100%;}
.ce-sk-bar--short{width:55%;}
.ce-sk-bar:nth-child(2){animation-delay:.1s;}
.ce-sk-bar:nth-child(3){animation-delay:.2s;}
.ce-sk-bar:nth-child(4){animation-delay:.3s;}
.ce-sk-bar:nth-child(5){animation-delay:.4s;}
.ce-sk-bar:nth-child(6){animation-delay:.5s;}
.ce-sk-redacted{
  position:absolute;
  bottom:18px;left:22px;
  font-family:'Manrope',sans-serif;
  font-size:10px;font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(26,26,26,0.42);
}
@keyframes ce-shimmer{
  0%{background-position:200% 0;}
  100%{background-position:-200% 0;}
}

/* ---------- Stamp (the hero element) ---------- */
/* Color is driven per-card via --stamp-color (set in JS) with accent fallback. */
.ce-stamp{
  --_stamp: var(--stamp-color, var(--ce-accent));
  position:absolute;
  right:18px;bottom:18px;
  padding:10px 16px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:1.5px solid var(--_stamp);
  box-shadow:inset 0 0 0 2px var(--ce-cream), 0 1px 0 rgba(0,0,0,0.04);
  border-radius:4px;
  background:rgba(255,254,246,0.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transform:rotate(-4deg);
  transform-origin:center;
  transition:transform .25s cubic-bezier(.2,.7,.25,1);
  pointer-events:none;
  z-index:2;
}
.ce-card[data-clickable="true"]:hover .ce-stamp{transform:rotate(-2deg) scale(1.02);}
.ce-stamp-l1{
  font-family:'General Sans',sans-serif;
  font-size:10px;font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--stamp-color, var(--ce-accent));
  opacity:0.85;
  line-height:1;
}
.ce-stamp-l2{
  font-family:'General Sans',sans-serif;
  font-size:18px;font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--stamp-color, var(--ce-accent));
  line-height:1.1;
  white-space:nowrap;
}
/* ---------- Card meta (below frame) ---------- */
.ce-card-meta{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:0 4px;
}
.ce-card-tag{
  font-family:'Manrope',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ce-muted);
  flex:0 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* ---------- Make-template (secondary meta-row action) ---------- */
.ce-card-action{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 10px;
  font-family:'Manrope',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ce-muted);
  background:var(--ce-cream);
  border:1px solid var(--ce-border);
  border-radius:8px;
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease, background .2s ease, transform .15s ease;
  flex:0 0 auto;
  white-space:nowrap;
}
.ce-card-action:hover{color:var(--ce-accent);border-color:var(--ce-accent);transform:translateY(-1px);}
.ce-card-action:focus-visible{outline:2px solid var(--ce-accent);outline-offset:2px;}
.ce-card-action .ce-icon{width:12px;height:12px;flex-shrink:0;}
.ce-card-action .ce-icon--check{display:none;}
.ce-card-action.is-copied{
  color:var(--ce-accent);
  border-color:var(--ce-accent);
  background:var(--ce-accent-soft);
}
.ce-card-action.is-copied .ce-icon--copy{display:none;}
.ce-card-action.is-copied .ce-icon--check{display:inline-block;}

/* Visually-hidden live region for screen-reader copy confirmations */
.ce-sr-live{
  position:absolute;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- Breather blocks ---------- */
.ce-breather{
  grid-column:span 4;
  display:flex;flex-direction:column;justify-content:center;
  padding:32px;
  border-radius:var(--ce-radius-card);
  background:var(--ce-cream);
  border:1px dashed var(--ce-border-strong);
  opacity:0;transform:translateY(14px);
  transition:opacity .6s cubic-bezier(.2,.7,.25,1), transform .6s cubic-bezier(.2,.7,.25,1);
  overflow:hidden;
}
.ce-breather.is-in{opacity:1;transform:none;}
.ce-breather[data-size="brth"]{grid-column:span 8;min-height:220px;}
.ce-breather-eyebrow{
  font-family:'Manrope',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ce-accent);
  margin-bottom:16px;
  display:block;
}
.ce-breather-eyebrow--muted{color:var(--ce-muted);}

/* Stat breather: two columns — headline stat + tip list.
   Columns stretch to the breather's full height (align-items:stretch) and
   each column vertically centers its own content so the eyebrow/headline
   and the tip list read as a balanced, centered block regardless of how
   tall the breather's grid row ends up being. */
.ce-breather--stat{
  flex-direction:row;
  align-items:stretch;
  gap:56px;
}
.ce-breather-stat-col,
.ce-breather-tips-col{
  flex:1 1 50%;
  min-width:0;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.ce-breather-tips-col{
  border-left:1px solid var(--ce-border);
  padding-left:32px;
}
.ce-breather-stat{
  font-family:'General Sans',sans-serif;
  font-size:clamp(22px, 2.4vw, 30px);
  font-weight:500;
  letter-spacing:-0.02em;
  line-height:1.25;
  color:var(--ce-ink);
  margin:0;
}
.ce-breather-num{color:var(--ce-accent);}
.ce-breather-tips{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.ce-breather-tips li{
  display:flex;align-items:flex-start;gap:10px;
  font-family:'Manrope',sans-serif;
  font-size:13.5px;line-height:1.5;
  color:var(--ce-ink);
}
.ce-tip-bullet{
  flex-shrink:0;
  width:6px;height:6px;
  border-radius:50%;
  background:var(--ce-accent);
  margin-top:7px;
  opacity:0.85;
}

/* Quote breather. Two variants:
   - Wide (data-size="brth", span-8): 3 quotes side-by-side in 3 columns.
   - Narrow (no data-size, span-4): a single quote, treated as a standalone
     callout card that slots in to complete a row of card-sized items. */
.ce-breather--quote{align-items:stretch;justify-content:center;}
.ce-quote-list{
  list-style:none;margin:0;padding:0;
  display:grid;
  /* Narrow default: one column, the single quote fills the card. */
  grid-template-columns:1fr;
  gap:28px;
  align-items:start;
}
.ce-breather--quote[data-size="brth"] .ce-quote-list{
  /* Wide variant: 3 columns for the 3 quotes. */
  grid-template-columns:repeat(3, minmax(0,1fr));
}
.ce-quote-item{
  display:flex;flex-direction:column;gap:8px;
  padding-left:16px;
  border-left:2px solid var(--ce-accent-soft);
}
.ce-quote-text{
  font-family:'General Sans',sans-serif;
  font-size:clamp(14px, 1.2vw, 17px);
  font-weight:500;
  letter-spacing:-0.01em;
  line-height:1.4;
  color:var(--ce-ink);
  margin:0;
}
.ce-quote-mark{
  color:var(--ce-accent);
  font-size:1.6em;
  line-height:0;
  vertical-align:-0.35em;
  margin-right:2px;
}
.ce-breather-attr{
  font-family:'Manrope',sans-serif;
  font-size:12.5px;
  color:var(--ce-muted);
  font-style:italic;
}

/* ---------- Transparency strip ---------- */
.ce-transparency{
  display:flex;align-items:center;gap:16px;
  max-width:820px;
  margin:0 auto 72px;
  padding:20px 24px;
  background:var(--ce-accent-soft);
  border-radius:var(--ce-radius-card);
  border:1px solid rgba(111,127,173,0.2);
}
.ce-t-bullet{
  flex-shrink:0;
  width:10px;height:10px;
  border-radius:50%;
  background:var(--ce-accent);
  box-shadow:0 0 0 4px rgba(111,127,173,0.15);
}
.ce-transparency p{
  margin:0;
  font-size:14px;line-height:1.55;
  color:var(--ce-ink);
}
.ce-t-link{
  color:var(--ce-accent);
  text-decoration:underline;
  text-underline-offset:2px;
  transition:color .2s ease;
}
.ce-t-link:hover{color:#4a5a8a;}

/* ---------- Submit form ---------- */
.ce-submit{margin-bottom:72px;}
.ce-submit-inner{
  max-width:640px;margin:0 auto;
  text-align:center;
  padding:48px 32px;
  border-radius:var(--ce-radius-featured);
  background:var(--ce-cream);
  border:1px solid var(--ce-border);
  box-shadow:var(--ce-shadow-md);
}
.ce-submit-h2{
  font-family:'General Sans',sans-serif;
  font-size:clamp(24px, 3vw, 32px);
  font-weight:500;letter-spacing:-0.02em;
  color:var(--ce-ink);
  margin:0 0 12px;
}
.ce-submit-p{
  font-size:15px;color:var(--ce-muted);
  margin:0 0 24px;line-height:1.55;
}
.ce-submit-p a{color:var(--ce-accent);border-bottom:1px solid var(--ce-accent-soft);}
.ce-submit-p a:hover{color:var(--ce-accent-hover);}

/* Minimal Gmail mailto button */
.ce-submit-mail{
  display:inline-flex;align-items:center;gap:10px;
  padding:10px 16px 10px 12px;
  background:var(--ce-cream-2);
  border:1px solid var(--ce-border);
  border-radius:999px;
  color:var(--ce-ink);
  font-family:'Manrope',sans-serif;
  font-size:14px;font-weight:500;
  letter-spacing:.01em;
  box-shadow:var(--ce-shadow-sm);
  transition:border-color .25s ease, background .25s ease, transform .15s ease, box-shadow .25s ease;
}
.ce-submit-mail:hover{
  border-color:var(--ce-border-strong);
  background:var(--ce-cream);
  transform:translateY(-1px);
  box-shadow:var(--ce-shadow-md);
}
.ce-submit-mail:focus-visible{outline:2px solid var(--ce-accent);outline-offset:2px;}
.ce-submit-mail-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:#fff;
  border-radius:50%;
  border:1px solid rgba(26,26,26,0.06);
  flex-shrink:0;
}
.ce-submit-mail-icon svg{display:block;}
.ce-submit-mail-addr{
  font-variant-numeric:tabular-nums;
  color:var(--ce-ink);
}
.ce-submit-mail-arrow{
  display:inline-flex;align-items:center;justify-content:center;
  color:var(--ce-muted);
  opacity:0.6;
  transition:opacity .2s ease, transform .2s ease;
}
.ce-submit-mail:hover .ce-submit-mail-arrow{
  opacity:1;color:var(--ce-accent);
  transform:translate(1px,-1px);
}

/* ---------- Footer ---------- */
.ce-foot{
  max-width:var(--ce-max);
  margin:0 auto;
  padding:32px 40px 48px;
  display:flex;align-items:center;justify-content:space-between;
  font-size:13px;color:var(--ce-muted);
  border-top:1px solid var(--ce-border);
  position:relative;z-index:1;
}
.ce-foot a{color:var(--ce-accent);}
.ce-foot a:hover{color:var(--ce-accent-hover);}

/* ---------- Lightbox ---------- */
.ce-lightbox{
  position:fixed;inset:0;
  background:rgba(26,26,26,0.78);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  z-index:2000;
  display:flex;align-items:center;justify-content:center;
  padding:48px 24px;
  opacity:0;pointer-events:none;
  transition:opacity .25s ease;
}
.ce-lightbox.is-open{opacity:1;pointer-events:auto;}
.ce-lightbox[hidden]{display:none;}
.ce-lb-close{
  position:absolute;top:24px;right:24px;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--ce-radius-pill);
  background:rgba(255,254,246,0.15);
  color:#fff;
  transition:background .2s ease, transform .2s ease;
}
.ce-lb-close:hover{background:rgba(255,254,246,0.28);transform:rotate(90deg);}
.ce-lb-inner{
  max-width:820px;width:100%;
  display:flex;flex-direction:column;gap:16px;align-items:center;
}
.ce-lb-frame{
  position:relative;
  max-width:100%;
  background:var(--ce-cream);
  border-radius:var(--ce-radius-featured);
  padding:16px;
  box-shadow:0 24px 64px rgba(0,0,0,0.35);
  border:1px solid rgba(26,26,26,0.12);
}
.ce-lb-img{
  display:block;
  max-width:100%;max-height:70vh;
  border-radius:calc(var(--ce-radius-featured) - 6px);
  object-fit:contain;
  background:var(--ce-cream-2);
}
.ce-lb-stamp{
  position:absolute;
  right:28px;bottom:28px;
  padding:14px 22px;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:2px solid var(--stamp-color, var(--ce-accent));
  box-shadow:inset 0 0 0 2px var(--ce-cream);
  border-radius:4px;
  background:rgba(255,254,246,0.88);
  transform:rotate(-4deg);
}
.ce-lb-stamp .ce-stamp-l1{font-size:12px;}
.ce-lb-stamp .ce-stamp-l2{font-size:26px;}
.ce-lb-caption{
  font-size:13px;color:rgba(255,254,246,0.72);
  margin:0;text-align:center;
  font-family:'Manrope',sans-serif;
}

/* ---------- Template modal ----------
   Fullscreen overlay with a frosted backdrop and a cream paper box
   that scales up into place. Shared copy-to-clipboard UX reuses the
   existing .ce-icon--copy/check morph so "Copied" feedback is consistent
   with the card and lightbox actions. */
.ce-tpl-modal{
  position:fixed;inset:0;z-index:3000;
  display:flex;align-items:center;justify-content:center;
  padding:32px 20px;
  opacity:0;pointer-events:none;
  transition:opacity .28s cubic-bezier(.2,.7,.25,1);
}
.ce-tpl-modal[hidden]{display:none;}
.ce-tpl-modal.is-open{opacity:1;pointer-events:auto;}
.ce-tm-backdrop{
  position:absolute;inset:0;
  background:rgba(20,18,12,0.42);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
}
.ce-tm-box{
  position:relative;
  width:100%;max-width:640px;max-height:min(86vh, 760px);
  display:flex;flex-direction:column;
  background:var(--ce-cream);
  border:1px solid var(--ce-border);
  border-radius:var(--ce-radius-featured);
  box-shadow:0 30px 80px rgba(20,18,12,0.32), 0 8px 20px rgba(20,18,12,0.14);
  overflow:hidden;
  opacity:0;
  transform:translateY(14px) scale(0.96);
  transition:transform .38s cubic-bezier(.2,.85,.25,1.08), opacity .28s cubic-bezier(.2,.7,.25,1);
  will-change:transform, opacity;
}
.ce-tpl-modal.is-open .ce-tm-box{
  opacity:1;
  transform:translateY(0) scale(1);
}
.ce-tm-close{
  position:absolute;top:14px;right:14px;
  width:34px;height:34px;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--ce-radius-pill);
  background:rgba(26,26,26,0.06);
  color:var(--ce-ink);
  transition:background .2s ease, transform .3s cubic-bezier(.2,.85,.25,1);
  z-index:2;
}
.ce-tm-close:hover{background:rgba(26,26,26,0.14);transform:rotate(90deg);}
.ce-tm-close:focus-visible{outline:2px solid var(--ce-accent);outline-offset:2px;}
.ce-tm-head{
  padding:30px 36px 20px;
  border-bottom:1px solid var(--ce-border);
  background:linear-gradient(180deg, var(--ce-cream) 0%, rgba(255,254,246,0.7) 100%);
}
.ce-tm-head-top{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  /* Leave room on the right so the credit doesn't slide under the close button */
  padding-right:40px;
  margin-bottom:4px;
}
.ce-tm-eyebrow{
  display:inline-block;
  font-family:'Manrope',sans-serif;
  font-size:11px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ce-accent);
}
.ce-tm-company{color:var(--ce-ink);opacity:0.72;font-weight:600;letter-spacing:.14em;}

/* Credit link — subtle "Sent by NAME [in]" attribution that rides the top-right
   of the header. Monochrome by default, tints LinkedIn-blue on hover with a tiny
   slide on the icon. Hidden entirely when the card has no credit metadata. */
.ce-tm-credit{
  display:inline-flex;align-items:center;gap:6px;
  font-family:'Manrope',sans-serif;
  font-size:11.5px;font-weight:500;
  color:var(--ce-muted);
  letter-spacing:.01em;
  border-radius:var(--ce-radius-pill);
  padding:4px 2px;
  transition:color .25s cubic-bezier(.2,.7,.25,1);
  white-space:nowrap;
  opacity:0.78;
}
.ce-tm-credit[hidden]{display:none;}
.ce-tm-credit-lbl{opacity:0.72;}
.ce-tm-credit-name{
  color:var(--ce-ink);
  font-weight:600;
  border-bottom:1px solid transparent;
  transition:border-color .25s cubic-bezier(.2,.7,.25,1);
}
.ce-tm-credit-ico{
  width:14px;height:14px;
  flex-shrink:0;
  color:var(--ce-muted);
  transform:translate(0,0);
  transition:color .25s cubic-bezier(.2,.7,.25,1), transform .3s cubic-bezier(.2,.85,.25,1);
}
.ce-tm-credit:hover{color:#0A66C2;opacity:1;}
.ce-tm-credit:hover .ce-tm-credit-name{color:#0A66C2;border-bottom-color:rgba(10,102,194,0.35);}
.ce-tm-credit:hover .ce-tm-credit-ico{color:#0A66C2;transform:translate(2px,-1px);}
.ce-tm-credit:focus-visible{outline:2px solid var(--ce-accent);outline-offset:3px;}
.ce-tm-title{
  font-family:'General Sans',sans-serif;
  font-size:clamp(22px, 2.4vw, 28px);
  font-weight:500;letter-spacing:-0.02em;
  line-height:1.15;
  color:var(--ce-ink);
  margin:10px 0 8px;
}
.ce-tm-sub{
  margin:0;
  font-size:13.5px;line-height:1.55;
  color:var(--ce-muted);
}
.ce-tm-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:22px 36px 26px;
}
.ce-tm-text{
  margin:0;
  font-family:'Manrope',sans-serif;
  font-size:14px;line-height:1.65;
  color:var(--ce-ink);
  white-space:pre-wrap;
  word-break:break-word;
  tab-size:2;
}
/* Bracketed placeholders ([Your Name], [major], [College Name] etc.) are
   highlighted so the user knows exactly what to swap out. Clipboard copy
   still writes plain text — the red is visual-only. */
.ce-tm-ph{
  color:#DC2626;
  font-weight:600;
  /* Keep natural line-break behaviour so long placeholder phrases wrap cleanly */
  word-break:normal;
}
.ce-tm-sub-hint{
  color:#DC2626;
  font-weight:600;
  border-bottom:1px dashed rgba(220,38,38,0.4);
  padding-bottom:1px;
}
.ce-tm-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 20px 14px 28px;
  border-top:1px solid var(--ce-border);
  background:var(--ce-cream-2);
}
.ce-tm-hint{
  font-size:12px;
  color:var(--ce-muted);
  letter-spacing:.02em;
}
.ce-tm-copy{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 18px;
  font-family:'Manrope',sans-serif;
  font-size:13px;font-weight:600;
  letter-spacing:.02em;
  color:#fff;
  background:var(--ce-accent);
  border:1px solid var(--ce-accent);
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(111,127,173,0.25);
  transition:background .2s ease, border-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.ce-tm-copy:hover{background:var(--ce-accent-hover);border-color:var(--ce-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px rgba(111,127,173,0.35);}
.ce-tm-copy:focus-visible{outline:2px solid var(--ce-accent);outline-offset:2px;}
.ce-tm-copy .ce-icon{width:14px;height:14px;flex-shrink:0;}
.ce-tm-copy .ce-icon--check{display:none;}
.ce-tm-copy.is-copied{background:#3b7a5e;border-color:#3b7a5e;}
.ce-tm-copy.is-copied .ce-icon--copy{display:none;}
.ce-tm-copy.is-copied .ce-icon--check{display:inline-block;}

@media (max-width: 767px){
  .ce-tpl-modal{padding:16px 12px;}
  .ce-tm-box{max-height:92vh;border-radius:22px;}
  .ce-tm-head{padding:26px 22px 18px;}
  .ce-tm-head-top{flex-direction:column;align-items:flex-start;gap:6px;padding-right:36px;}
  .ce-tm-body{padding:18px 22px 22px;}
  .ce-tm-text{font-size:13.5px;}
  .ce-tm-foot{padding:12px 14px 12px 22px;flex-direction:column-reverse;align-items:stretch;gap:10px;}
  .ce-tm-hint{text-align:center;}
  .ce-tm-copy{justify-content:center;}
}

/* Lightbox copy-template button — lives outside the frame, on the dark bg */
.ce-lb-action{
  display:inline-flex;align-items:center;gap:8px;
  padding:10px 16px;
  font-family:'Manrope',sans-serif;
  font-size:12px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;
  color:#fffef6;
  background:rgba(255,254,246,0.08);
  border:1px solid rgba(255,254,246,0.22);
  border-radius:999px;
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, transform .15s ease;
}
.ce-lb-action:hover{background:rgba(255,254,246,0.14);border-color:rgba(255,254,246,0.45);transform:translateY(-1px);}
.ce-lb-action:focus-visible{outline:2px solid var(--ce-accent);outline-offset:2px;}
.ce-lb-action .ce-icon{width:14px;height:14px;}
.ce-lb-action .ce-icon--check{display:none;}
.ce-lb-action.is-copied{background:rgba(111,127,173,0.25);border-color:var(--ce-accent);}
.ce-lb-action.is-copied .ce-icon--copy{display:none;}
.ce-lb-action.is-copied .ce-icon--check{display:inline-block;}

/* ---------- Responsive ---------- */
@media (max-width: 1024px){
  .ce-gallery{grid-template-columns:repeat(6, 1fr);}
  .ce-card{grid-column:span 3;}
  .ce-breather{grid-column:span 3;}
  .ce-breather[data-size="brth"]{grid-column:span 6;}
  /* Featured hero still spans full row */
  .ce-card[data-size="feat"]{grid-column:1 / -1;}
}

/* =========================================================================
   MOBILE (≤767px) — minimalist single-column layout.
   Core decision: switch the gallery from 2-col to 1-col. At 2-col on a 390px
   phone each card was only ~177px wide, which shrank the email screenshots
   to a point where the text was legible only via tap-to-lightbox. One card
   per row at ~360px wide lets users read emails in-place, keeps the paper
   metaphor clean, and removes the need for any "bento" layout math (all
   landscape heroes, std portraits, breathers, and pre-card interludes
   simply become full-width blocks stacked vertically).
   ========================================================================= */
@media (max-width: 767px){
  .ce-main{padding:96px 14px 32px;}
  .ce-hero{padding:8px 0 28px;}
  .ce-eyebrow{font-size:11px;padding:5px 11px;margin-bottom:16px;}
  .ce-h1{font-size:clamp(32px, 8vw, 40px);line-height:1.08;letter-spacing:-0.02em;}
  .ce-sub{font-size:15px;line-height:1.55;}
  .ce-stats{gap:20px;padding:20px 0;margin-bottom:28px;flex-wrap:wrap;justify-content:flex-start;}
  .ce-stat{gap:8px;}
  .ce-stat-num{font-size:22px;}
  .ce-stat-lbl{font-size:12px;}
  /* Filter pills: horizontal swipe instead of multi-row wrap.
     Scrollbar hidden (handled in base CSS). */
  .ce-filters-wrap{margin:0 -14px 24px;padding:4px 14px;}
  .ce-filters{flex-wrap:nowrap;padding-right:14px;}
  .ce-pill{padding:7px 14px;font-size:12.5px;}

  /* 1-col gallery — the core mobile change. */
  .ce-gallery{grid-template-columns:1fr;gap:18px;}
  .ce-card{grid-column:1;}

  /* Landscape heroes (BCG, GS, Google, Dunzo). Aspect 5/2 matches the
     source images; contain guarantees no text clipping for the slight
     aspect variance between them (2.07 → 3.10). */
  .ce-card[data-size="feat"]{grid-column:1 / -1;}
  .ce-card[data-size="feat"] .ce-card-frame{aspect-ratio:5 / 2;padding:14px;}
  .ce-card[data-size="feat"] .ce-card-img{object-fit:contain;object-position:center;background:#fdfbef;}
  .ce-card[data-size="feat"] .ce-stamp{right:16px;bottom:16px;padding:10px 15px;}
  .ce-card[data-size="feat"] .ce-stamp-l1{font-size:10px;}
  .ce-card[data-size="feat"] .ce-stamp-l2{font-size:17px;}

  /* Std portrait cards on mobile: 2/3 aspect matches most portrait email
     sources (typical range 0.60–0.72), and object-fit:contain prevents
     the left/right text clipping that cover+3/4 caused. Any residual
     letterboxing paints the inner paper colour so it reads as an
     intentional mat around the email, not a broken crop. */
  .ce-card-frame{padding:14px;aspect-ratio:2/3;}
  .ce-card-img{object-fit:contain;object-position:center;background:#fdfbef;}

  /* Stamp scales up slightly to match the card's new width. */
  .ce-stamp{right:16px;bottom:16px;padding:10px 14px;}
  .ce-stamp-l1{font-size:10px;letter-spacing:.2em;}
  .ce-stamp-l2{font-size:17px;letter-spacing:.05em;}

  /* Meta row — one card per row means we have space for comfortable
     category tag + Make-template button typography. */
  .ce-card-meta{padding:0 4px;gap:10px;}
  .ce-card-tag{font-size:10.5px;letter-spacing:.14em;}
  .ce-card-action{padding:7px 12px;font-size:10.5px;letter-spacing:.14em;gap:6px;}
  .ce-card-action .ce-icon{width:12px;height:12px;}

  /* Breathers collapse to full width. Stat breather stacks its two
     columns vertically with a top-border divider between them instead of
     the desktop's left-border. Quote lists reduce to single-column so
     three quotes render as a vertical sequence. */
  .ce-breather,.ce-breather[data-size="brth"]{grid-column:1 / -1;aspect-ratio:auto;padding:26px 22px;min-height:0;}
  .ce-breather--stat{flex-direction:column;gap:20px;align-items:stretch;}
  .ce-breather-stat-col,
  .ce-breather-tips-col{flex:0 0 auto;width:100%;}
  .ce-breather-tips-col{border-left:none;border-top:1px solid var(--ce-border);padding-left:0;padding-top:16px;}
  .ce-breather-tips li{font-size:13px;}
  .ce-breather-stat{font-size:22px;line-height:1.3;}
  /* Force 1-col even on wide [data-size="brth"] quote breathers — desktop's
     3-column rule is more specific than a plain .ce-quote-list selector. */
  .ce-quote-list,
  .ce-breather--quote[data-size="brth"] .ce-quote-list{grid-template-columns:1fr;gap:20px;}
  .ce-quote-item{padding-left:14px;}
  .ce-quote-text{font-size:14.5px;line-height:1.45;}
  .ce-breather-attr{font-size:12px;}

  /* Skeletons (shown only on cards that haven't been wired with an image
     yet — currently none, but keep the styling consistent). */
  .ce-skeleton{padding:18px 20px;gap:12px;}
  .ce-sk-bar{height:10px;}
  .ce-sk-bar--subject{height:14px;}
  .ce-sk-redacted{font-size:9px;bottom:16px;left:20px;}

  .ce-transparency{flex-direction:row;padding:18px 20px;margin-bottom:48px;}
  .ce-transparency p{font-size:13.5px;line-height:1.55;}
  .ce-submit-inner{padding:32px 20px;}
  .ce-submit-h2{font-size:22px;}
  .ce-submit-p{font-size:14px;}
  .ce-submit-mail{font-size:13px;padding:9px 14px 9px 10px;}
  .ce-submit-mail-icon{width:24px;height:24px;}
  .ce-foot{padding:24px 16px 32px;font-size:12px;}

  /* Top-bar: hide the desktop pill nav (mobile.js injects the hamburger). */
  .hpn-nav{width:calc(100% - 24px);padding:0 16px;height:56px;top:12px;}
  .hpn-nav-links{display:none;}

  /* Lightbox on mobile — take the whole viewport. */
  .ce-lightbox{padding:16px;}
  .ce-lb-close{top:12px;right:12px;}
  .ce-lb-img{max-height:62vh;}
  .ce-lb-action{padding:8px 14px;font-size:11px;}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;}
  [data-reveal],.ce-card,.ce-breather{opacity:1!important;transform:none!important;}
}