/* ============================================================
   HOME PAGE ONLY
   Shared shell (tokens, base, nav, buttons, cta, faq accordion,
   footer) lives in main.css — load that first.
   ============================================================ */

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--navy-900);color:#fff;padding-block:72px 88px;}
.hero-grid{
  display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;
}
.eyebrow{
  font-size:13px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--blue-300);margin-bottom:22px;
}
.hero h1{
  font-size:clamp(36px,4vw,50px);
  color:#fff;margin-bottom:26px;font-weight:600;
}
.hero h1 em{font-style:italic;font-weight:600;}
.underline-wrap{position:relative;display:inline-block;}
.underline-wrap .scribble{
  position:absolute;left:0;right:0;bottom:-12px;width:100%;height:14px;
}
.hero-sub{
  font-size:17px;line-height:1.7;color:#B9C4D6;max-width:520px;margin-bottom:34px;
}
.hero-actions{
  display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-bottom:28px;
}
.hero-note{
  display:flex;gap:10px;align-items:flex-start;
  font-size:14px;color:#9FB0C8;max-width:560px;line-height:1.6;
}
.hero-note svg{flex:none;margin-top:2px;}
.hero-diagram{min-width:0;}
.hero-diagram svg{width:100%;height:auto;}
@media (max-width:1023px){
  .hero-grid{gap:40px;}
}
@media (max-width:767px){
  .hero{padding-block:48px 56px;}
  .hero-grid{grid-template-columns:1fr;}
  .hero-diagram{display:none;}
  .hero-actions{gap:20px;}
  /* On small screens the italic line wraps, so the single absolute
     scribble can't follow it — swap to a per-line repeating underline. */
  .underline-wrap .scribble{display:none;}
  .underline-wrap em{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='10' viewBox='0 0 130 10'%3E%3Cpath d='M2 6 C 32 2, 64 9, 96 5 S 124 4, 128 6' stroke='%23F59E0B' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:repeat-x;
    background-size:130px 10px;
    background-position:0 100%;
    padding-bottom:2px;
    -webkit-box-decoration-break:clone;
    box-decoration-break:clone;
  }
}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{background:var(--cream);padding-block:34px;}
.trust-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.trust-item{
  display:flex;align-items:center;gap:14px;
  padding-inline:28px;
  border-left:1px solid var(--line-cream);
}
.trust-item:first-child{border-left:0;padding-left:0;}
.trust-item svg{flex:none;}
.trust-item p{font-size:15px;font-weight:600;line-height:1.35;color:var(--text-dk);}
@media (max-width:1023px){
  .trust-item{padding-inline:18px;}
  .trust-item p{font-size:14px;}
}
@media (max-width:767px){
  .trust-grid{grid-template-columns:1fr 1fr;gap:22px 0;}
  .trust-item{padding-inline:16px;}
  .trust-item:nth-child(odd){border-left:0;padding-left:0;}
}

/* ============================================================
   SPLIT SECTION
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;}
.split-left{
  background:var(--cream);
  padding:var(--section-y) 56px var(--section-y) max(24px,calc((100vw - var(--container)) / 2 + 24px));
}
.split-right{
  background:var(--navy-800);color:#fff;
  padding:var(--section-y) max(24px,calc((100vw - var(--container)) / 2 + 24px)) var(--section-y) 56px;
  display:flex;flex-direction:column;justify-content:center;
}
.split-left h2{
  font-size:clamp(28px,2.6vw,36px);margin-bottom:24px;max-width:420px;
}
.split-left .body{color:var(--text-md);font-size:15.5px;line-height:1.75;max-width:440px;margin-bottom:18px;}
.quote-card{
  margin-top:34px;max-width:460px;
  background:var(--cream-2);border:1px solid var(--line-cream);border-radius:var(--radius-sm);
  padding:26px 28px;display:flex;gap:16px;
}
.quote-card .qmark{
  font-family:var(--font-serif);font-size:44px;line-height:.8;color:var(--navy-900);flex:none;
}
.quote-card blockquote{
  font-family:var(--font-serif);font-style:italic;font-size:19px;line-height:1.5;color:var(--text-dk);
}
.split-right h2{font-size:clamp(28px,2.6vw,34px);color:#fff;}
.fit-head{margin-bottom:40px;}
.fit-head h2{display:inline;margin-right:14px;}
.fit-hand{display:inline-block;white-space:nowrap;vertical-align:middle;}
.fit-head .hand-note{
  display:inline-block;vertical-align:middle;transform:rotate(-4deg);
}
.fit-head .hand-arrow{
  display:inline-block;vertical-align:middle;width:36px;height:22px;margin-right:6px;
}
.fit-cols{
  display:grid;grid-template-columns:1fr 1fr;gap:40px;position:relative;
}
.fit-cols::before{
  content:"";position:absolute;top:4px;bottom:4px;left:50%;
  border-left:1px dashed rgba(147,197,253,.25);
}
.fit-label{
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  margin-bottom:22px;
}
.fit-label.good{color:var(--green);}
.fit-label.bad{color:var(--red);}
.fit-list li{
  display:flex;gap:12px;align-items:flex-start;
  font-size:14.5px;line-height:1.5;color:#D4DCE8;
  margin-bottom:20px;
}
.fit-list li:last-child{margin-bottom:0;}
.fit-list svg{flex:none;margin-top:1px;}
@media (max-width:1023px){
  .split{grid-template-columns:1fr;}
  .split-left{padding:var(--section-y) 24px;}
  .split-right{padding:var(--section-y) 24px;}
  .split-left h2,.split-left .body,.quote-card{max-width:560px;}
}
@media (max-width:639px){
  .fit-cols{grid-template-columns:1fr;gap:44px;}
  .fit-cols::before{display:none;}
}

/* ============================================================
   FAILURES GRID
   ============================================================ */
.failures{background:var(--cream);}
.failures-grid{
  display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start;
}
.failures h2{
  font-size:clamp(30px,3vw,40px);line-height:1.2;
}
.cards-grid{
  display:grid;grid-template-columns:repeat(4,1fr);
}
.f-card{
  background:transparent;
  border-left:1px solid var(--line-cream);
  border-top:1px solid var(--line-cream);
  padding:26px 22px;
}
.cards-grid .f-card:nth-child(-n+4){border-top:0;padding-top:0;}
.cards-grid .f-card:nth-child(4n+1){border-left:0;padding-left:0;}
.f-card .icon{margin-bottom:16px;}
.f-card h3{
  font-family:var(--font-sans);font-size:15.5px;font-weight:700;line-height:1.3;
  margin-bottom:8px;color:var(--text-dk);
}
.f-card p{font-size:13.5px;line-height:1.55;color:var(--text-md);}
@media (max-width:1023px){
  .failures-grid{grid-template-columns:1fr;gap:40px;}
  .cards-grid{grid-template-columns:1fr 1fr;}
  .cards-grid .f-card{border-top:1px solid var(--line-cream);border-left:0;padding-left:0;padding-top:26px;}
  .cards-grid .f-card:nth-child(-n+2){border-top:0;padding-top:0;}
  .cards-grid .f-card:nth-child(2n){border-left:1px solid var(--line-cream);padding-left:22px;}
}
@media (max-width:639px){
  .cards-grid{grid-template-columns:1fr;}
  .cards-grid .f-card{border-left:0!important;padding-left:0!important;border-top:1px solid var(--line-cream);padding-top:24px;}
  .cards-grid .f-card:first-child{border-top:0;padding-top:0;}
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.how{background:var(--navy-900);color:#fff;}
.how-head{position:relative;margin-bottom:64px;max-width:320px;}
.how-head h2{font-size:clamp(30px,3vw,40px);color:#fff;}
.how-head .hand-note{
  position:static;display:inline-block;margin-top:22px;font-size:24px;transform:rotate(-3deg);
}
.how-head .hand-arrow{display:inline-block;vertical-align:middle;margin-left:10px;width:46px;height:26px;}
.steps{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px;position:relative;
  counter-reset:step;
}
.steps::before{
  content:"";position:absolute;top:21px;left:calc(12.5% + 22px);right:calc(12.5% + 22px);
  border-top:2px dashed rgba(147,197,253,.3);
}
.step{position:relative;text-align:center;padding-inline:8px;}
.step .num{
  width:44px;height:44px;border-radius:50%;
  background:var(--blue-500);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:17px;
  margin:0 auto 24px;position:relative;z-index:1;
  box-shadow:0 0 0 8px var(--navy-900);
}
.step h3{
  font-family:var(--font-serif);font-size:19px;color:#fff;margin-bottom:12px;line-height:1.3;
}
.step p{font-size:14px;line-height:1.6;color:#9FB0C8;}
@media (max-width:1023px){
  .steps{grid-template-columns:1fr 1fr;gap:48px 32px;}
  .steps::before{display:none;}
}
@media (max-width:639px){
  .steps{grid-template-columns:1fr;gap:0;}
  .step{
    text-align:left;display:grid;grid-template-columns:44px 1fr;gap:0 20px;
    padding:0 0 40px;
  }
  .step:not(:last-child)::before{
    content:"";position:absolute;left:21px;top:52px;bottom:8px;
    border-left:2px dashed rgba(147,197,253,.3);
  }
  .step .num{margin:0;box-shadow:none;grid-row:1 / span 2;}
  .step h3{padding-top:8px;}
  .step h3,.step p{grid-column:2;}
}

/* ============================================================
   PRICING
   ============================================================ */
.pricing{background:var(--cream);position:relative;}
.pricing-grid{
  display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:start;
}
.pricing-head h2{font-size:clamp(30px,3vw,38px);line-height:1.25;}
.pricing-head .hand-note{
  position:static;display:block;margin-top:26px;
  color:var(--text-dk);font-size:22px;transform:rotate(-4deg);line-height:1.3;
}
.pricing-head .hand-arrow{margin-top:6px;width:52px;height:30px;}
.price-cards{
  display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;
  padding-top:14px;
}
.p-card{
  position:relative;
  background:var(--cream-2);
  border:1px solid var(--line-cream);
  border-radius:var(--radius);
  padding:34px 28px;
  text-align:center;
  display:flex;flex-direction:column;
}
.p-card.featured{border:2px solid var(--navy-900);}
.p-badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--navy-900);color:var(--amber);
  font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 14px;border-radius:100px;white-space:nowrap;
}
.p-card h3{
  font-family:var(--font-serif);font-size:20px;margin-bottom:16px;color:var(--text-dk);
}
.p-price{
  font-family:var(--font-serif);font-weight:600;color:var(--text-dk);
  font-size:clamp(30px,2.6vw,38px);line-height:1;margin-bottom:18px;
}
.p-card .desc{font-size:14px;line-height:1.6;color:var(--text-md);margin-bottom:18px;}
.p-card .fine{
  font-family:var(--font-serif);font-style:italic;font-size:13.5px;color:var(--text-md);
  margin-top:auto;
}
.pricing-note{
  position:absolute;right:10px;top:46%;
  color:var(--blue-500);font-size:20px;line-height:1.25;max-width:118px;
  transform:rotate(6deg);text-align:left;
}
@media (max-width:1439px){
  .pricing-note{display:none;}
}
@media (max-width:1023px){
  .pricing-grid{grid-template-columns:1fr;gap:44px;}
}
@media (max-width:767px){
  .price-cards{grid-template-columns:1fr;gap:28px;}
}

/* ============================================================
   GUARANTEE CARDS
   ============================================================ */
.guarantees{background:var(--cream);padding-top:0;}
.g-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.g-card{
  border-radius:var(--radius);padding:36px 38px;
  display:flex;gap:24px;align-items:flex-start;
}
.g-card.dark{background:var(--navy-900);color:#fff;}
.g-card.outline{background:transparent;border:1.5px solid var(--navy-900);}
.g-card .g-icon{flex:none;margin-top:4px;}
.g-card h3{font-size:21px;line-height:1.3;margin-bottom:10px;}
.g-card.dark h3{color:#fff;}
.g-card p{font-size:14.5px;line-height:1.65;}
.g-card.dark p{color:#B9C4D6;}
.g-card.outline p{color:var(--text-md);}
.g-link{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14px;font-weight:600;color:var(--navy-900);text-decoration:none;
  border-bottom:2px solid var(--amber);padding-bottom:2px;
}
.g-link .arrow{transition:transform .18s ease;}
.g-link:hover .arrow{transform:translateX(3px);}
@media (max-width:1023px){
  .g-grid{grid-template-columns:1fr;}
}
@media (max-width:639px){
  .g-card{flex-direction:column;gap:18px;padding:28px 24px;}
}

/* ============================================================
   FAQ (layout — accordion styles live in main.css)
   ============================================================ */
.faq{background:var(--cream);padding-top:0;}
.faq-grid{display:grid;grid-template-columns:260px 1fr;gap:56px;align-items:start;}
.faq-head h2{font-size:clamp(30px,3vw,38px);line-height:1.25;}
.faq-head .hand-note{
  position:static;display:block;margin-top:24px;
  color:var(--blue-500);font-size:21px;transform:rotate(-3deg);line-height:1.3;max-width:150px;
}
@media (max-width:1023px){
  .faq-grid{grid-template-columns:1fr;gap:36px;}
}