/* ============================================================
   CINTA & Co. — Site layout system (imports base.css)
   Reusable section/card/hero patterns shared across all pages.
   ============================================================ */
@import url("base.css");

/* ---- PAGE HERO (interior) ---- */
.pagehero{background:var(--white);padding:92px 0 64px;position:relative;overflow:hidden}
.pagehero__accent{position:absolute;top:0;right:0;width:42%;height:100%;background:var(--gray-bg);z-index:0}
.pagehero__accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);opacity:.5}
.pagehero__in{position:relative;z-index:1;max-width:760px}
.kicker{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.kicker__bar{width:32px;height:4px;background:var(--red);border-radius:2px}
.kicker__txt{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--brown)}
.pagehero h1{font-size:var(--fs-display);line-height:1.08;margin-bottom:22px}
.pagehero__sub{font-size:19px;line-height:1.65;color:var(--text-body);max-width:600px}

/* ---- HOME HERO (split) ---- */
.hero{background:var(--white);padding:96px 0 80px;position:relative;overflow:hidden}
.hero__accent{position:absolute;top:0;right:0;width:42%;height:100%;background:var(--gray-bg);z-index:0}
.hero__accent::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--red);opacity:.5}
.hero__in{position:relative;z-index:1;display:grid;grid-template-columns:1.15fr .85fr;gap:72px;align-items:center}
.hero h1{font-size:var(--fs-display);line-height:1.06;margin-bottom:26px}
.hero__sub{font-size:19px;line-height:1.65;color:var(--text-body);max-width:560px;margin-bottom:38px}
.hero__actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.hero__panel{background:var(--white);border:1px solid var(--gray);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);padding:34px}
.hero__panel-t{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--brown);margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--gray)}
.hero__facts{display:grid;grid-template-columns:1fr 1fr;gap:24px 20px}
.hero__fact-n{font-size:32px;font-weight:700;color:var(--black);line-height:1;letter-spacing:-.02em}
.hero__fact-n .u{color:var(--red);font-size:20px}
.hero__fact-l{font-size:12px;color:var(--muted);margin-top:6px;line-height:1.4}

/* ---- DARK HERO (RAI / product) ---- */
.darkhero{background:var(--black);color:#fff;padding:96px 0 80px;text-align:center}
.darkhero .kicker{justify-content:center}
.darkhero .kicker__txt{color:var(--red)}
.darkhero h1{color:#fff;font-size:var(--fs-display);line-height:1.1;max-width:820px;margin:0 auto 22px}
.darkhero h1 .accent{color:var(--red)}
.darkhero__sub{font-size:19px;line-height:1.65;color:rgba(255,255,255,.72);max-width:620px;margin:0 auto 38px}
.darkhero__actions{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.darkhero__quote{margin-top:60px;padding-top:44px;border-top:1px solid rgba(255,255,255,.1)}
.darkhero__quote p{font-size:22px;font-style:italic;color:rgba(255,255,255,.85);max-width:680px;margin:0 auto 12px;line-height:1.5}
.darkhero__quote span{font-size:13px;font-weight:600;color:var(--red)}

/* ---- SECTOR STRIP ---- */
.strip{background:var(--black);padding:30px 0}
.strip__in{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px 24px}
.strip__label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.strip__item{font-size:14px;font-weight:500;color:rgba(255,255,255,.85)}
.strip__dot{width:5px;height:5px;border-radius:50%;background:var(--red)}

/* ---- SECTIONS ---- */
.section{padding:var(--section-y) 0}
.section--alt{background:var(--gray-bg)}
.section--dark{background:var(--black);color:#fff}
.section--dark h2{color:#fff}
.section__head{max-width:720px;margin-bottom:52px}
.section__head--center{margin:0 auto 52px;text-align:center}
.section__head h2{font-size:var(--fs-h2);margin-bottom:16px}
.section__head .accent{color:var(--red)}
.section__intro{font-size:17px;line-height:1.65;color:var(--text-body)}
.section--dark .section__intro{color:rgba(255,255,255,.65)}
.section__head--center .section-head{display:inline-block;padding-left:0}
.section__head--center .section-head::before{display:none}

/* ---- SPLIT (2-col) ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start}
.split--center{align-items:center}
.split h2{font-size:var(--fs-h2);margin-bottom:22px}
.split p{font-size:16px;line-height:1.75;color:var(--text-body);margin-bottom:18px}
.diffs{display:flex;flex-direction:column;gap:22px}
.diff{display:flex;gap:18px}
.diff .red-bullet{margin-top:7px}
.diff h3{font-size:16px;font-weight:600;margin-bottom:6px}
.diff p{font-size:14px;line-height:1.6;color:var(--muted);margin:0}

/* ---- CARD GRIDS ---- */
.cards{display:grid;gap:24px}
.cards--2{grid-template-columns:repeat(2,1fr)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--4{grid-template-columns:repeat(4,1fr)}
.cards--5{grid-template-columns:repeat(5,1fr)}
.card{background:var(--white);border:1px solid var(--gray);border-radius:var(--r-lg);padding:30px;transition:box-shadow var(--t),transform var(--t);position:relative}
.section--alt .card{background:var(--white)}
.card:hover{box-shadow:var(--shadow-lg);transform:translateY(-2px)}
.card__num{position:absolute;top:28px;right:30px;font-size:13px;font-weight:600;color:var(--gray)}
.card__icon{margin-bottom:22px}
.card h3{font-size:18px;margin-bottom:12px;line-height:1.3}
.card__txt{font-size:14px;line-height:1.65;color:var(--muted);margin-bottom:0}
.card .textlink{font-size:13px;margin-top:20px}
.card__eyebrow{font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--red);margin-bottom:10px}
.card--feature{border-color:var(--red);box-shadow:0 0 0 1px var(--red) inset}
.card--dark{background:#141414;border-color:rgba(255,255,255,.08)}
.card--dark h3{color:#fff}
.card--dark .card__txt{color:rgba(255,255,255,.6)}

/* compact sector card */
.scard{padding:28px 24px}
.scard h3{font-size:16px;margin-bottom:10px}
.scard .card__txt{font-size:13px;line-height:1.55;margin-bottom:14px}
.scard__entry{font-size:12px;font-weight:600;color:var(--brown)}

/* ---- CHECKLIST ---- */
.checklist{display:flex;flex-direction:column;gap:14px;margin:28px 0}
.checklist li{display:flex;gap:14px;align-items:flex-start;font-size:15px;color:var(--text-body)}
.checklist svg{width:20px;height:20px;color:var(--red);stroke-width:2;flex-shrink:0;margin-top:2px}

/* ---- STEPS ---- */
.steps{display:grid;gap:24px;position:relative}
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--5{grid-template-columns:repeat(5,1fr)}
.step{text-align:center}
.step__n{width:56px;height:56px;border-radius:50%;background:transparent;border:2px solid var(--red);color:var(--red);display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;margin:0 auto 20px}
.section--dark .step__n{background:var(--red);color:#fff;border-color:var(--red)}
.step h3{font-size:16px;margin-bottom:10px}
.section--dark .step h3{color:#fff}
.step p{font-size:14px;line-height:1.6;color:var(--muted)}
.section--dark .step p{color:rgba(255,255,255,.65)}

/* ---- INFO CARD (dark panel) ---- */
.panel-dark{background:var(--black);border-radius:var(--r-lg);padding:44px;color:#fff}
.panel-dark .card__eyebrow{color:var(--red)}
.panel-dark h3{color:#fff;font-size:24px;margin-bottom:16px;line-height:1.2}
.panel-dark p{font-size:15px;line-height:1.65;color:rgba(255,255,255,.7);margin-bottom:30px}
.panel-dark__meta{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:28px;border-top:1px solid rgba(255,255,255,.15)}
.panel-dark__meta-n{font-size:22px;font-weight:700;color:#fff;line-height:1}
.panel-dark__meta-n .u{color:var(--red);font-size:14px}
.panel-dark__meta-l{font-size:11px;color:rgba(255,255,255,.5);margin-top:5px;text-transform:uppercase;letter-spacing:.04em}

/* ---- CTA RED (the one bold red moment) ---- */
.cta-red{background:var(--red);padding:92px 0;text-align:center;color:#fff}
.cta-red__logo{font-size:15px;font-weight:700;letter-spacing:.02em;margin-bottom:4px}
.cta-red__tag{font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:rgba(255,255,255,.75);margin-bottom:32px}
.cta-red h2{color:#fff;font-size:clamp(28px,4vw,42px);line-height:1.12;max-width:720px;margin:0 auto 20px}
.cta-red__sub{font-size:18px;color:rgba(255,255,255,.9);max-width:540px;margin:0 auto 36px;line-height:1.55}

/* ---- ALERT BANNER ---- */
.alert{background:var(--black);padding:14px 0;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
.alert p{font-size:14px;color:rgba(255,255,255,.9);max-width:900px;margin:0 auto;padding:0 24px}
.alert strong{color:var(--red)}
.alert a{color:var(--red);text-decoration:underline}
.alert a svg{display:inline-block;width:13px;height:13px;vertical-align:-2px;stroke-width:2;text-decoration:none}

/* ---- FORM EMBED ---- */
.embed{background:rgba(0,0,0,.02);border:1px solid var(--gray);border-radius:var(--r-lg);overflow:hidden}
.embed__head{background:var(--red);padding:18px 26px}
.embed__head-t{font-size:16px;font-weight:700;color:#fff}
.embed__head-s{font-size:13px;color:rgba(255,255,255,.85);margin-top:4px}
.embed iframe{display:block;width:100%;border:0}

/* ---- PROSE (privacy / terms) ---- */
.prose{max-width:760px;margin:0 auto}
.prose h2{font-size:22px;margin:40px 0 14px}
.prose h2:first-child{margin-top:0}
.prose p,.prose li{font-size:15px;line-height:1.75;color:var(--text-body);margin-bottom:14px}
.prose ul{margin:0 0 14px 20px;list-style:disc}
.prose li{margin-bottom:8px}

/* ---- RESPONSIVE ---- */
@media(max-width:980px){
  .hero__in{grid-template-columns:1fr;gap:48px}
  .hero__accent,.pagehero__accent{display:none}
  .split{grid-template-columns:1fr;gap:48px}
  .cards--3,.cards--4,.cards--5{grid-template-columns:repeat(2,1fr)}
  .steps--4,.steps--5{grid-template-columns:repeat(2,1fr);gap:36px 24px}
  .panel-dark__meta{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  .hero,.pagehero{padding:64px 0 52px}
  .section{padding:72px 0}
  .cards--2,.cards--3,.cards--4,.cards--5{grid-template-columns:1fr}
  .steps--4,.steps--5{grid-template-columns:1fr}
  .strip__in{gap:10px 16px}
  .panel-dark__meta{grid-template-columns:1fr}
  .darkhero__actions,.hero__actions{flex-direction:column;align-items:stretch}
}