/* ==========================================================================
   Click2Mail Connect — MOL SKIN  (v2.5)
   --------------------------------------------------------------------------
   Loaded AFTER styles.css. Same markup, same class names — this file only
   restates the design tokens and the handful of rules that carry the paper
   look, so Connect renders in the main Click2Mail (MOL) system instead.

   Tokens are read from the marketing beta's own Elementor globals:
     primary   #3D68FF      secondary #000B33      text   #64748D
     accent bg #F9FAFD      red       #C51520      tints  #E6EAF9 / #B5C7E7

   TYPEFACE - UNRESOLVED, SEE BELOW.
   The real Click2Mail brand font is Slippy, and it already ships in this repo
   at assets/fonts/. That is what this skin uses: no external request, no
   licensing question, and it matches the brand rather than a stand-in.

   BUT the marketing beta currently renders in "Inter Display", not Slippy.
   One of those two is wrong and only the design team can say which:
     - if the beta is meant to be Slippy, it needs fixing, and this is correct;
     - if Slippy is being retired for Inter Display, flip the two lines in the
       --font-display / --font-body block below and get the self-hosted
       Inter Display file the main site uses (it is NOT on Google Fonts).
   Until that is settled, Connect matching the brand font is the safer default.
   ========================================================================== */

:root {
  /* ---- MOL palette ---- */
  --c2m-navy:       #000B33;
  --c2m-navy-dark:  #020643;
  --c2m-navy-light: #2545B5;
  --c2m-blue:       #3D68FF;
  --c2m-blue-dark:  #0830BF;
  --c2m-red:        #C51520;
  --c2m-red-dark:   #840E15;
  --c2m-white:      #FFFFFF;

  /* ---- Cool ground, no paper ---- */
  --paper:      #F9FAFD;
  --paper-warm: #EFF3FE;
  --ink:        #000B33;
  --ink-soft:   #64748D;
  --hairline:   #E6EAF9;
  --tint:       #E6EAF9;
  --tint-deep:  #B5C7E7;

  /* ---- Textures off. Kept as variables so nothing downstream breaks. ---- */
  --tex-cream: none;
  --tex-white: none;
  --tex-navy:  none;
  --tex-red:   none;
  --tex-ink:   none;
  --tex-grain: none;

  /* ---- One family, both roles. Slippy is the brand font and is local. ---- */
  --font-display: 'Slippy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-body:    'Slippy', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  /* To switch to what the beta currently renders, use these two instead and
     add the self-hosted Inter Display @font-face:
     --font-display: 'Inter Display','Inter',-apple-system,sans-serif;
     --font-body:    'Inter Display','Inter',-apple-system,sans-serif; */

  /* ---- MOL radius vocabulary ---- */
  --radius:      10px;
  --radius-media:20px;
  --radius-pill: 30px;
  --shadow-menu: 0 18px 44px rgba(0,11,51,.12), 0 2px 6px rgba(0,11,51,.06);
  --shadow-card: 0 1px 2px rgba(0,11,51,.06);
}

/* ==========================================================================
   Type — the scale comes down hard. 116px serif → 54px sans at weight 500.
   ========================================================================== */
body { font-size:19px; line-height:1.5; color:var(--ink-soft); background:var(--c2m-white); }

h1, h2, h3, h4 {
  font-family:var(--font-display);
  font-weight:400;   /* Slippy ships 300/400/700 - no 500 */
  letter-spacing:-.015em;
  line-height:1.1;
  color:var(--ink);
}

.hero h1            { font-size:clamp(36px,4.2vw,56px); line-height:1.1; max-width:18ch; }
.hero-sub           { font-size:clamp(18px,1.2vw,20px); line-height:1.5; max-width:52ch; color:var(--ink-soft); }
.page-hero h1       { font-size:clamp(32px,3.6vw,48px); max-width:20ch; }
.page-hero .page-hero-sub { font-size:clamp(18px,1.2vw,20px); line-height:1.5; color:var(--ink-soft); }
.intro h2           { font-size:clamp(28px,2.8vw,38px); line-height:1.2; }
.section-head h2    { font-size:clamp(28px,2.8vw,38px); line-height:1.2; }
.carousel-title,
.marquee-title      { font-size:clamp(26px,2.4vw,34px); }
.cta-band h2        { font-size:clamp(30px,3vw,44px); max-width:20ch; }
.value-tile h3      { font-size:clamp(24px,2vw,30px); }
.sol-card h3,
.rcard h3,
.step h3,
.feature-item h3    { font-size:22px; }
.case-panel h2      { font-size:clamp(26px,2.4vw,36px); }
.article h2         { font-size:clamp(26px,2.4vw,34px); }
.article p          { font-size:19px; line-height:1.65; }
.quote-block blockquote { font-family:var(--font-body); font-size:clamp(22px,2vw,28px); line-height:1.4; font-weight:400; }
.pullquote          { font-family:var(--font-body); font-weight:400; border-left-color:var(--c2m-blue); }

/* Stat and metric figures stay sans, tabular */
.stat .val, .case-stat .val, .quote-metric .val {
  font-family:var(--font-display); font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; color:var(--c2m-navy);
}
.quote-metric .val { color:var(--c2m-blue); }

/* ==========================================================================
   Surfaces — paper grain off, flat and gradient on
   ========================================================================== */
.paper::before { display:none; }

.paper-cream { background:var(--paper); }
.paper-white { background:var(--c2m-white); }
.paper-navy  { background:linear-gradient(160deg,#000B33 0%,#041759 45%,#2545B5 100%); color:var(--c2m-white); }
.paper-red   { background:var(--c2m-red); color:var(--c2m-white); }
.paper-ink   { background:linear-gradient(160deg,#000B33 0%,#020643 100%); color:var(--c2m-white); }

/* The hero carries the MOL gradient plus its faint icon field */
.hero.paper-cream,
.page-hero.paper-cream {
  background:linear-gradient(165deg,#000B33 0%,#062270 50%,#2B57E0 100%);
  color:var(--c2m-white);
  position:relative; overflow:hidden;
}
.hero.paper-cream::after,
.page-hero.paper-cream::after {
  content:''; position:absolute; inset:0; pointer-events:none; opacity:.09;
  background-image:
    radial-gradient(circle at 12% 22%, #fff 0 2px, transparent 2px),
    radial-gradient(circle at 78% 14%, #fff 0 2px, transparent 2px),
    radial-gradient(circle at 34% 78%, #fff 0 2px, transparent 2px),
    radial-gradient(circle at 88% 66%, #fff 0 2px, transparent 2px);
  background-size:260px 260px, 340px 340px, 300px 300px, 400px 400px;
}
.hero.paper-cream h1, .page-hero.paper-cream h1,
.hero.paper-cream .hero-sub, .page-hero.paper-cream .page-hero-sub,
.hero.paper-cream .eyebrow, .page-hero.paper-cream .eyebrow { color:var(--c2m-white); position:relative; z-index:1; }
.hero.paper-cream .hero-sub, .page-hero.paper-cream .page-hero-sub { color:rgba(255,255,255,.82); }
.page-hero.paper-cream .eyebrow { color:#B5C7E7; }
.hero.paper-cream .btn, .page-hero.paper-cream .btn { position:relative; z-index:1; }
.hero.paper-cream .hero-copy, .page-hero.paper-cream > .container > * { position:relative; z-index:1; }
.hero.paper-cream .hero-media, .page-hero.paper-cream .page-hero-media { position:relative; z-index:1; }

/* Decorative stars were a paper-era device — retire them in this skin */
.hero.paper-cream .spark { display:none; }

/* Carousel section sits on the cool ground, not cream */
.carousel-section.paper-cream { background:var(--paper); color:var(--ink); }
.carousel-section.paper-cream h2 { color:var(--ink); }
.section.paper-cream { background:var(--paper); color:var(--ink); }
.section.paper-cream h2, .section.paper-cream h3 { color:var(--ink); }

/* ==========================================================================
   Buttons — MOL pills
   ========================================================================== */
.btn {
  border-radius:var(--radius-pill);
  font-weight:700; font-size:18px; padding:14px 30px;
  border-width:1.5px;
}
.btn-primary { background:var(--c2m-blue); color:#fff; }
.btn-primary:hover { background:var(--c2m-blue-dark); }
.btn-red { background:var(--c2m-red); color:#fff; }
.btn-red:hover { background:var(--c2m-red-dark); }
.btn-outline { border-color:var(--c2m-blue); color:var(--c2m-blue); }
.btn-outline:hover { background:var(--c2m-blue); color:#fff; }
.btn-on-dark { background:#fff; color:var(--c2m-navy); }
.btn-on-dark:hover { background:var(--tint); color:var(--c2m-navy); }
.btn-sm { padding:10px 22px; font-size:17px; }

.link-arrow { color:var(--c2m-blue); font-weight:700; }
.link-arrow:hover { border-bottom-color:var(--c2m-blue); }

/* ==========================================================================
   Nav
   ========================================================================== */
.navbar { border-bottom:1px solid var(--hairline); }
.nav-trigger { font-weight:700; color:var(--ink); }
.nav-item:hover > .nav-trigger,
.nav-item.is-open > .nav-trigger,
.nav-item.is-current > .nav-trigger { color:var(--c2m-blue); }
.nav-dropdown { border-radius:var(--radius); border-color:var(--hairline); }
.nav-dropdown a { border-radius:8px; }
.nav-dropdown a:hover { background:var(--paper); }
.nav-dropdown a:hover .dd-label { color:var(--c2m-blue); }
.nav-dropdown .dd-label { font-weight:700; }
.nav-login { font-weight:700; }
.nav-login:hover { color:var(--c2m-blue); }

/* ==========================================================================
   Cards, tiles and surfaces
   ========================================================================== */
.step, .rcard, .quote-metric, .contact-aside, .panel {
  border-radius:var(--radius); border-color:var(--hairline);
  box-shadow:var(--shadow-card);
}
.step .num { color:var(--c2m-blue); font-family:var(--font-display); font-weight:600; font-size:17px;
             letter-spacing:.12em; }
.rcard-media img, .media-row-media img, .page-hero-media img,
.carousel-slide img, .case-media img, .article img, .media-slot video, .media-slot img {
  border-radius:var(--radius-media);
}
.rcard-media { background:var(--tint); }
.tag { background:var(--tint); color:var(--c2m-navy); border-radius:var(--radius-pill); font-weight:700; }
.tag.is-red { background:#F3E3E3; color:var(--c2m-red); }

/* Value tiles lose the checkerboard colour-block and become MOL panels */
.value-tile.paper-white { background:var(--c2m-white); }
.value-tile.paper-cream { background:var(--paper); }
.value-tile img { width:124px; height:124px; }

/* Bulleted lists switch from the red tick to a blue dot */
.media-row-text li::before {
  content:''; left:2px; top:9px; width:8px; height:8px; border:0; border-radius:50%;
  background:var(--c2m-blue); transform:none;
}
.article li::before { background:var(--c2m-blue); }

.case-eyebrow, .page-hero .eyebrow {
  color:var(--c2m-blue); font-weight:500; letter-spacing:.1em;
}

/* Section heading badge pill — a MOL signature */
.section-head .badge, .badge-pill {
  display:inline-block; background:var(--tint); color:var(--c2m-navy);
  font-size:15px; font-weight:700; padding:6px 16px; border-radius:var(--radius-pill);
  margin-bottom:18px;
}

/* Forms */
.field input, .field select, .field textarea {
  border-radius:10px; border-color:var(--tint-deep);
}
.field input:focus, .field select:focus, .field textarea:focus { border-color:var(--c2m-blue); }
.form-note { background:var(--tint); color:var(--c2m-navy); border-radius:10px; }

/* Footer */
.footer-col h4 { color:var(--c2m-blue); font-weight:700; }
.footer-col a:hover { color:var(--c2m-blue); }
.footer-bottom a:hover { color:var(--c2m-blue); }

/* Marquee + carousel controls */
.car-btn { border-color:var(--tint-deep); background:#fff; }
.car-btn:hover { background:var(--c2m-blue); border-color:var(--c2m-blue); }
.carousel-dots button.is-active { background:var(--c2m-blue); }
.carousel-slide img { box-shadow:0 18px 40px rgba(0,11,51,.12); }

/* ---------- Guide + vertical pages in the MOL skin ---------- */
.toc a.is-active { color:var(--c2m-blue); border-left-color:var(--c2m-blue); font-weight:700; }
.qa-block > h2 { border-bottom-color:var(--hairline); }
.qa li::before { background:var(--c2m-blue); }
.guide-cta { background:var(--paper); border-color:var(--hairline); border-radius:var(--radius); }
.pain { border-color:var(--hairline); border-radius:var(--radius); }
.pain .mark { background:#F3E3E3; color:var(--c2m-red); }
.pain.is-solved .mark { background:var(--tint); color:var(--c2m-blue); }
.usecase { border-color:var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow-card); }
.usecase .n { color:var(--c2m-blue); font-weight:700; }

/* ---------- Flow diagram band ---------- */
.flow-diagram { border-color:var(--hairline); border-radius:var(--radius); box-shadow:var(--shadow-card); }

/* ---------- Headings on dark surfaces ----------
   The global h1-h4 rule sets a navy colour, which beats inheritance from the
   dark container. Restate it so tiles and bands stay legible. */
.paper-navy h1, .paper-navy h2, .paper-navy h3, .paper-navy h4,
.paper-red  h1, .paper-red  h2, .paper-red  h3, .paper-red  h4,
.paper-ink  h1, .paper-ink  h2, .paper-ink  h3, .paper-ink  h4,
.cta-band h2, .case-panel h2 { color:var(--c2m-white); }

.paper-navy .stat .val, .paper-red .stat .val, .paper-ink .stat .val { color:var(--c2m-white); }

/* ---------- "Integrates with" strip ----------
   The partner logos arrive with inconsistent backgrounds (some transparent,
   some solid white) and mixed lockups (horizontal and stacked). A white tile
   normalises all of that. Replace with official brand SVGs and this still works. */
.marquee-track img {
  height:66px; width:auto; max-width:210px; object-fit:contain;
  background:#fff; border:1px solid var(--hairline); border-radius:12px;
  padding:10px 20px; opacity:1;
}

/* ---------- Setup documentation in the MOL skin ---------- */
.breadcrumb a:hover { color:var(--c2m-blue); }
.callout { background:var(--paper); border-color:var(--hairline); border-left-color:var(--c2m-blue); }
.callout.is-draft { border-left-color:var(--c2m-red); background:#FDF2F2; }
.callout.is-help { border-left-color:var(--c2m-blue); }
.callout a { color:var(--c2m-blue); font-weight:700; }
.prereq li::before { border-color:var(--c2m-blue); }
.doc-step .num { background:var(--c2m-blue); }
.doc-step ol.substeps li::before { color:var(--c2m-blue); }
.shot img { border-color:var(--hairline); box-shadow:var(--shadow-card); }

/* Secondary button on the gradient hero */
.page-hero.paper-cream .btn-outline.btn-on-dark-outline {
  border-color:rgba(255,255,255,.55); color:#fff; background:transparent;
}
.page-hero.paper-cream .btn-outline.btn-on-dark-outline:hover {
  background:#fff; color:var(--c2m-navy); border-color:#fff;
}