/* ===========================================================================
   Ntuthuko Biz Connect — thank-you card
   ---------------------------------------------------------------------------
   Deliberately not a document. No letterhead, no clauses, no tables: a gold
   ribbon at the head, one centred column of type, and the social profiles as
   a linked chain across the foot — the same chain the website carries.

   Cinzel is the display face, subset to Latin and self-hosted so the emailed
   PDF renders it too.
   =========================================================================== */

@font-face{
  font-family:'Cinzel'; font-style:normal; font-weight:400; font-display:block;
  src:url(fonts/cinzel-600.woff) format('woff');
}

:root{
  --card-gold:#c8901c; --card-gold-bright:#e8b33d; --card-gold-pale:#f3e2b4;
  --card-green:#0b4b3c; --card-ink:#3d3427; --card-cream:#fffdf7;
}

.card-doc{
  font-family:'Montserrat','Segoe UI',Arial,sans-serif;
  -webkit-print-color-adjust:exact; print-color-adjust:exact;
}
.card-doc *{box-sizing:border-box}
/* Deliberately not resetting p. `.card-doc p{margin:0}` out-specifies every
   `.card-body` / `.card-to` / `.card-ask` rule below and flattens the whole
   card into one solid block of text. */
.card-doc h1,.card-doc h2{margin:0;padding:0}
.card-doc p{padding:0}

.card-sheet{
  width:210mm; height:297mm; background:var(--card-cream); margin:0 auto;
  padding:0 0 16mm; display:flex; flex-direction:column; align-items:center;
  position:relative; overflow:hidden; box-shadow:0 10px 34px rgba(11,75,60,.16);
}
/* A hairline gold frame, inset from the trim. */
.card-sheet::after{
  content:""; position:absolute; inset:9mm; border:1px solid var(--card-gold-pale);
  pointer-events:none;
}

.card-ribbon{display:block; width:170mm; margin:14mm auto 0; flex:none}
.card-ribbon text{
  font-family:'Cinzel',Georgia,serif; font-size:23px; letter-spacing:.16em;
  fill:#fff3d4; font-weight:400;
}

.card-inner{
  flex:1 1 auto; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; padding:0 26mm; width:100%;
}

h1.card-title{
  font-family:'Cinzel',Georgia,serif; font-size:58pt; line-height:1.05;
  color:var(--card-gold); font-weight:400; letter-spacing:.03em;
  margin-bottom:6mm;
}
.card-rule{
  width:52mm; height:0; border-top:1px solid var(--card-gold);
  position:relative; margin:0 auto 7mm;
}
/* A small diamond centred on the rule. */
.card-rule::after{
  content:""; position:absolute; left:50%; top:-3.2px; width:6.4px; height:6.4px;
  background:var(--card-gold); transform:translateX(-50%) rotate(45deg);
}

.card-to{
  font-family:'Cinzel',Georgia,serif; font-size:19pt; color:var(--card-green);
  letter-spacing:.05em; margin-bottom:5mm;
}
.card-body{
  font-size:11.5pt; line-height:1.85; color:var(--card-ink); max-width:126mm;
  margin:0 auto 6mm;
}
.card-em{color:var(--card-green); font-weight:600}

.card-ask{
  font-family:'Cinzel',Georgia,serif; font-size:13pt; color:var(--card-gold);
  letter-spacing:.11em; text-transform:uppercase; margin:5mm 0 3.5mm;
}
.card-review{
  font-size:10.5pt; line-height:1.7; color:var(--card-ink); max-width:126mm; margin:0 auto;
}
.card-review a{color:var(--card-green); text-decoration:none; font-weight:600}

/* ------------------------------------------------------------ the chain -- */
.card-chain{
  flex:none; width:100%; padding:0 18mm; margin-top:8mm;
  display:flex; align-items:flex-start; justify-content:center;
}
.card-chain-inner{position:relative; display:flex; align-items:flex-start; gap:0}
/* The line that links the badges into a chain. */
.card-chain-inner::before{
  content:""; position:absolute; left:7mm; right:7mm; top:7mm; height:1px;
  background:linear-gradient(90deg,transparent,var(--card-gold) 12%,var(--card-gold) 88%,transparent);
}
.card-link{
  position:relative; width:28mm; text-decoration:none; display:flex;
  flex-direction:column; align-items:center; gap:2.4mm;
}
.card-badge{
  width:14mm; height:14mm; border-radius:50%; background:var(--card-green);
  border:1.5px solid var(--card-gold); display:flex; align-items:center;
  justify-content:center; position:relative; z-index:1;
}
/* The outline glyphs stroke with currentColor, and these sit inside an <a>,
   so colour must be set here or they inherit the default link blue. */
.card-badge svg{width:7mm; height:7mm; fill:var(--card-gold-bright);
  color:var(--card-gold-bright); stroke:var(--card-gold-bright)}
.card-handle{
  font-size:6.6pt; letter-spacing:.01em; color:var(--card-ink);
  text-align:center; line-height:1.4; white-space:nowrap;
}
.card-handle b{display:block; font-size:7.6pt; letter-spacing:.03em;
  color:var(--card-green); font-weight:700; margin-bottom:.6mm}

.card-foot{
  flex:none; text-align:center; font-size:8.6pt; line-height:1.6;
  color:#7b6f5c; margin-top:8mm; padding:0 20mm;
}
.card-foot strong{color:var(--card-green); letter-spacing:.04em}

@media print{
  .card-sheet{box-shadow:none; margin:0}
}
@media screen and (max-width:820px){
  .card-sheet{width:100%; height:auto; padding-bottom:24px}
  .card-ribbon{width:92%; margin-top:18px}
  h1.card-title{font-size:38pt}
  .card-inner{padding:18px}
  .card-chain{padding:0 8px; margin-top:18px}
  .card-chain-inner{flex-wrap:wrap; justify-content:center; gap:10px}
  .card-chain-inner::before{display:none}
  .card-link{width:70px}
}