/*
 * air.css — Camiforex "breathing room" layer (loaded last)
 *   One vertical rhythm for the whole site: every section gets the same generous space above
 *   and below, a quiet hairline marks where one section ends and the next begins, headings sit
 *   further from their content, and cards / grids / footer are less tightly packed.
 *   Nothing here changes colours or content — remove the <link> to go back to the old spacing.
 * Built by NgallaFX (ngallabrian@gmail.com)
 */
:root{
  --sec-y:clamp(56px,6.6vw,104px);      /* space above AND below every section */
  --head-gap:clamp(40px,4.6vw,68px);    /* heading block → its content */
  --gap:clamp(18px,2.2vw,32px);         /* between cards in a grid */
}

/* ---------- 1 · Section rhythm ---------- */
.sec{padding-block:var(--sec-y)}
/* a section that follows another one always gets the full space (overrides old per-page values) */
section + section.sec,
section + section.steps-sec{padding-top:var(--sec-y)!important}
.steps-sec{padding-block:var(--sec-y) calc(var(--sec-y) * .6)}
main > section.sec:last-of-type{padding-bottom:calc(var(--sec-y) * 1.1)}

/* quiet divider between sections */
section + section.sec::before,
section + section.steps-sec::before{
  content:"";position:absolute;left:50%;top:0;width:min(720px,72%);height:1px;transform:translateX(-50%);
  background:linear-gradient(90deg,transparent,rgba(124,130,142,.34) 30%,rgba(124,130,142,.5) 50%,rgba(124,130,142,.34) 70%,transparent);
  pointer-events:none;
}
html[data-theme="light"] section + section.sec::before,
html[data-theme="light"] section + section.steps-sec::before{
  background:linear-gradient(90deg,transparent,rgba(35,39,55,.16) 30%,rgba(35,39,55,.24) 50%,rgba(35,39,55,.16) 70%,transparent);
}

/* ---------- 2 · Headings breathe ---------- */
.sec-head{margin-bottom:var(--head-gap)}
.sec-head p{margin-top:20px;max-width:600px;line-height:1.65}
.rev-sec .rate{margin-top:calc(var(--head-gap) * -.45)}
.page-hero{padding:clamp(60px,7.4vw,112px) 0 clamp(28px,4.4vw,64px)}
.page-hero p{line-height:1.65}
.crumbs{margin-top:28px}

/* platforms diagram: its top label used to touch the section text */
@media (min-width:701px){.plat-sec .sec-head{margin-bottom:calc(var(--head-gap) + 34px)}}

/* ---------- 3 · Hero ---------- */
.hero .lead{line-height:1.7}
.hero-btns{margin-top:40px}
.tape-wrap{margin-top:clamp(28px,4vw,56px)}
.steps{margin-top:56px}

/* ---------- 4 · Cards and grids ---------- */
.grid{gap:var(--gap)}
.cgrid{gap:var(--gap)}
.gcard{padding:32px 28px}
.gcard .ico{margin-bottom:24px}
.gcard h3{margin-bottom:12px}
.gcard p{line-height:1.6}
.tabs{margin-bottom:44px}
.plans{gap:32px}
.split{gap:clamp(40px,6vw,96px)}
.split h2{margin-bottom:24px}
.split p{margin-bottom:18px;line-height:1.7}
.gallery{gap:var(--gap)}
.faq{gap:16px}
.faq .a{line-height:1.65;padding-bottom:28px}
.home-contest{padding:clamp(24px,3.4vw,48px);gap:clamp(24px,3.4vw,48px)}
.prose h2{margin-top:44px}
.prose p{line-height:1.8;margin-bottom:18px}
.cta{padding-block:clamp(60px,7vw,104px) clamp(56px,6vw,88px)}
.cta p{margin:26px 0 34px}

/* a button or link row that closes a block (e.g. "See every course") */
.cgrid + .btn,.cgrid + p,.cgrid + div:not([class]),.grid + .btn{margin-top:40px}

/* ---------- 5 · Footer ---------- */
.footer{padding:clamp(72px,8vw,128px) 0 56px}
.ftop{gap:clamp(40px,5vw,72px)}
.flinks{margin-top:clamp(52px,6vw,88px);padding-bottom:26px}
.flinks nav{gap:14px 34px}
.legal{margin-top:40px;max-width:940px;opacity:.82}
.legal p{margin-bottom:22px}
.copy{padding-top:26px;margin-top:8px;border-top:1px solid var(--divider)}

/* ---------- 6 · Phones ---------- */
@media (max-width:700px){
  .wrap{width:calc(100% - 40px)}
  .hero-btns{margin-top:30px}
  .hero-art{margin-top:48px}
  .steps{margin-top:36px;gap:16px}
  .sec-head p{margin-top:16px}
  .tabs{margin-bottom:32px}
  .plans{gap:22px}
  .gcard{padding:26px 22px}
  .faq{gap:12px}
  .flinks nav{gap:16px 26px}
  .legal{margin-top:32px}
}

/* ---------- 7 · Tools, boxes and inner pages ---------- */
.tool-tabs{margin-bottom:40px}
.tool-wrap{gap:var(--gap)}
.tool-form{gap:20px}
.tool-notes{gap:var(--gap);margin-top:var(--gap)}
.tool-more{gap:var(--gap);margin-top:clamp(48px,5.6vw,80px)}
@media (min-width:1181px){.tool-more{grid-template-columns:repeat(4,1fr)}}
@media (min-width:701px) and (max-width:1180px){.tool-more{grid-template-columns:repeat(2,1fr)}}
.box{padding:clamp(22px,2.6vw,32px)}
.acct,.checkout{gap:var(--gap)}
@media (max-width:700px){
  .faq summary{padding-block:18px}
  .faq .a{margin-top:0}
}