/*
Theme Name: Finance Gate
Theme URI: https://financegate.io/
Description: Custom lightweight theme for Finance Gate. No page builder, no jQuery, no external requests. Replaces Stereo Bank + Elementor.
Author: Finance Gate
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: financegate
*/

/* ==========================================================================
   1. Fonts (self hosted, font-display:swap so text paints immediately)
   ========================================================================== */
@font-face{font-family:"Cabin";src:url("assets/fonts/Cabin-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Cabin";src:url("assets/fonts/Cabin-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Cabin";src:url("assets/fonts/Cabin-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("assets/fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* ==========================================================================
   2. Tokens
   ========================================================================== */
:root{
  --fg-primary:#dd572d;
  --fg-primary-dark:#c44a24;
  --fg-heading:#303030;
  --fg-text:#696969;
  --fg-muted:#9f9f9f;
  --fg-accent:#ecbd15;
  --fg-alt:#f4f4f4;
  --fg-border:#eaeaea;
  --fg-bg:#fff;
  --fg-hero-grad:linear-gradient(100deg,#fff7dc 0%,#ffe9e2 100%);

  --fg-font-head:"Cabin",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fg-font-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;

  --fg-h1:72px;
  --fg-h2:36px;
  --fg-h3:20px;
  --fg-body:15px;
  --fg-small:13px;

  /* Layout: content is 1280 wide, centred, with an equal gutter each side.
     This single rule keeps desktop and mobile aligned. */
  --fg-content:1280px;
  --fg-gutter:40px;
  --fg-section:120px;
  --fg-radius:10px;
}
@media (max-width:1024px){:root{--fg-gutter:30px;--fg-h1:64px;--fg-section:100px}}
@media (max-width:767px){:root{--fg-gutter:20px;--fg-h1:56px;--fg-h2:26px;--fg-section:80px}}

/* ==========================================================================
   3. Reset and base
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
body{
  margin:0;
  background:var(--fg-bg);
  color:var(--fg-text);
  font-family:var(--fg-font-body);
  font-size:var(--fg-body);
  font-weight:400;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:var(--fg-primary);text-decoration:none;transition:color .2s}
a:hover,a:focus-visible{color:var(--fg-muted)}
:focus-visible{outline:2px solid var(--fg-primary);outline-offset:3px}
h1,h2,h3,h4,h5,h6{
  font-family:var(--fg-font-head);
  color:var(--fg-heading);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-1px;
  margin:0 0 .5em;
}
h1{font-size:var(--fg-h1);line-height:1.1}
h2{font-size:var(--fg-h2)}
h3{font-size:var(--fg-h3);line-height:1.4;letter-spacing:0}
h4{font-size:17px;letter-spacing:0}
p{margin:0 0 1.2em}
p:last-child{margin-bottom:0}
ul,ol{margin:0 0 1.2em;padding-left:1.2em}
blockquote{margin:2em 0;padding:1em 0 1em 1.5em;border-left:3px solid var(--fg-primary);font-family:var(--fg-font-head);font-size:18px;color:var(--fg-heading)}
hr{border:0;border-top:1px solid var(--fg-border);margin:3em 0}
table{width:100%;border-collapse:collapse;margin-bottom:1.5em}
th,td{border:1px solid var(--fg-border);padding:10px 14px;text-align:left}
th{background:var(--fg-alt);color:var(--fg-heading);font-family:var(--fg-font-head);font-weight:700}
code,pre{background:var(--fg-alt);font-size:.9em}
code{padding:2px 6px;border-radius:4px}
pre{padding:16px;border-radius:var(--fg-radius);overflow:auto}
pre code{padding:0;background:none}

.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;background:var(--fg-primary);color:#fff;font-family:var(--fg-font-head);font-weight:700}
.skip-link:focus{left:0;color:#fff}

/* ==========================================================================
   4. Layout
   ========================================================================== */
.container{
  width:100%;
  max-width:calc(var(--fg-content) + (var(--fg-gutter) * 2));
  margin-inline:auto;
  padding-inline:var(--fg-gutter);
}
.section{padding-block:var(--fg-section)}
.section--alt{background:var(--fg-alt)}
.section--tight{padding-block:calc(var(--fg-section) / 2)}
.section__head{max-width:720px;margin:0 auto 60px;text-align:center}
.section__head p{margin-bottom:0}
.eyebrow{
  display:block;
  font-family:var(--fg-font-head);
  font-size:var(--fg-small);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--fg-primary);
  margin-bottom:14px;
}
.grid{display:grid;gap:30px}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1024px){.grid--3,.grid--4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:767px){.grid--2,.grid--3,.grid--4{grid-template-columns:1fr}}

/* ==========================================================================
   5. Buttons
   ========================================================================== */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--fg-font-head);
  font-size:var(--fg-small);
  font-weight:700;
  letter-spacing:1px;
  text-transform:uppercase;
  padding:15px 30px;
  border:0;
  border-radius:var(--fg-radius);
  background:var(--fg-primary);
  color:#fff;
  cursor:pointer;
  transition:background-color .2s,color .2s,transform .2s;
}
.btn:hover,.btn:focus-visible{background:var(--fg-primary-dark);color:#fff;transform:translateY(-2px)}
.btn--light{background:#fff;color:var(--fg-heading)}
.btn--light:hover,.btn--light:focus-visible{background:var(--fg-primary);color:#fff}
.btn--ghost{background:transparent;color:var(--fg-heading);box-shadow:inset 0 0 0 1px var(--fg-border)}
.btn--ghost:hover,.btn--ghost:focus-visible{background:var(--fg-primary);color:#fff;box-shadow:none}
/* Compact button, used for the header call to action so the bar stays slim. */
.btn--sm{padding:11px 22px;font-size:12px;letter-spacing:.8px}
.btn__icon{width:12px;height:12px;fill:currentColor;flex:none}

/* ==========================================================================
   6. Header (CSS only menu, works with JavaScript disabled)
   ========================================================================== */
.site-header{position:relative;z-index:50;background:transparent}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:74px}
.site-logo{flex:0 1 auto;min-width:0}
.site-logo img{height:40px;width:auto;max-width:100%}
.nav-toggle{display:none}
/* Visually hidden but still focusable and still announced, so the menu can be
   opened from the keyboard. `display:none` or `hidden` would break that. */
.nav-toggle-check{
  position:absolute;width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}
/* The checkbox itself is invisible, so show focus on the label it drives. */
.nav-toggle-check:focus-visible ~ .header-actions .nav-toggle{
  outline:2px solid var(--fg-primary);outline-offset:3px;
}

.main-nav ul{list-style:none;margin:0;padding:0;display:flex;align-items:center;gap:32px}
.main-nav li{position:relative}
.main-nav a{
  font-family:var(--fg-font-head);
  font-size:15px;
  font-weight:500;
  color:var(--fg-heading);
  padding:8px 0;
  display:block;
}
.main-nav a:hover,.main-nav a:focus-visible,
.main-nav .current-menu-item > a,
.main-nav .current_page_item > a{color:var(--fg-primary)}
/* Dropdown: opens on hover and on keyboard focus, no script needed */
.main-nav .sub-menu,
.main-nav .children{
  position:absolute;
  top:100%;left:0;
  min-width:230px;
  flex-direction:column;
  align-items:stretch;
  gap:0;
  padding:10px 0;
  background:#fff;
  border-radius:var(--fg-radius);
  box-shadow:0 10px 40px rgba(0,0,0,.1);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s,transform .2s,visibility .2s;
}
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu,
.main-nav li:hover > .children,
.main-nav li:focus-within > .children{opacity:1;visibility:visible;transform:translateY(0)}
.main-nav .sub-menu a,
.main-nav .children a{padding:8px 20px;font-size:14px}
.header-actions{display:flex;align-items:center;gap:16px;flex:none}

@media (max-width:1024px){
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;
    width:44px;height:44px;border-radius:var(--fg-radius);
    background:var(--fg-primary);color:#fff;cursor:pointer;
  }
  .nav-toggle svg{width:18px;height:18px;fill:currentColor}
  .nav-toggle .icon-close,.nav-toggle-check:checked ~ .header-actions .nav-toggle .icon-open{display:none}
  .nav-toggle-check:checked ~ .header-actions .nav-toggle .icon-close{display:block}
  .main-nav{
    position:absolute;top:100%;left:0;right:0;
    background:#fff;
    box-shadow:0 20px 40px rgba(0,0,0,.1);
    padding:10px var(--fg-gutter) 24px;
    display:none;
  }
  .nav-toggle-check:checked ~ .main-nav{display:block}
  .main-nav ul{flex-direction:column;align-items:stretch;gap:0}
  .main-nav > ul > li{border-bottom:1px solid var(--fg-border)}
  .main-nav a{padding:14px 0;font-size:16px}
  .main-nav .sub-menu,
.main-nav .children{
    position:static;opacity:1;visibility:visible;transform:none;
    box-shadow:none;padding:0 0 10px 16px;min-width:0;
  }
  .main-nav .sub-menu a,
  .main-nav .children a{padding:8px 0}
}

/* On a phone the logo plus the CTA plus the toggle cannot all fit, so the CTA
   drops out of the bar. It is still the first item inside the open menu. */
/* Must out-specify `.main-nav a`, which sets display:block. */
.main-nav a.main-nav__cta{display:none}
@media (max-width:767px){
  .header-actions .btn{display:none}
  /* Specificity has to beat `.main-nav a`, which would strip the padding. */
  .main-nav a.main-nav__cta{
    display:flex;justify-content:center;
    margin-top:18px;padding:15px 30px;
    font-size:var(--fg-small);color:#fff;
  }
  .main-nav a.main-nav__cta:hover,
  .main-nav a.main-nav__cta:focus-visible{color:#fff}
  .site-header__inner{gap:12px;min-height:62px}
  .site-logo img{height:30px}
}

/* ==========================================================================
   7. Hero
   ========================================================================== */
.hero{background:var(--fg-hero-grad);padding-block:80px 120px;text-align:center}
.hero__inner{max-width:900px;margin-inline:auto}
.hero h1{margin-bottom:24px}
.hero h1 .accent{color:var(--fg-primary)}
.hero__text{max-width:620px;margin:0 auto 36px}
@media (max-width:767px){.hero{padding-block:50px 80px}}

/* ==========================================================================
   8. Cards
   ========================================================================== */
.card{
  background:#fff;
  border:1px solid var(--fg-border);
  border-radius:var(--fg-radius);
  padding:30px;
  transition:transform .25s,box-shadow .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.card__icon{width:56px;height:56px;margin-bottom:20px}
.card h3{margin-bottom:10px}
.card p:last-child{margin-bottom:0}

/* Post card */
.post-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--fg-border);border-radius:var(--fg-radius);transition:transform .25s,box-shadow .25s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,0,0,.08)}
.post-card__media{aspect-ratio:16/10;overflow:hidden;background:var(--fg-alt)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{padding:26px 30px 30px}
.post-card__meta{font-family:var(--fg-font-head);font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--fg-primary);margin-bottom:12px}
.post-card h3{margin-bottom:10px}
.post-card h3 a{color:var(--fg-heading)}
.post-card h3 a:hover,.post-card h3 a:focus-visible{color:var(--fg-primary)}

/* Counters */
.counter{text-align:center}
.counter__num{display:block;font-family:var(--fg-font-head);font-size:52px;font-weight:700;color:var(--fg-primary);line-height:1.1;letter-spacing:-1px}
.counter__label{font-size:14px}

/* ==========================================================================
   9. FAQ (native details, works with JavaScript disabled)
   ========================================================================== */
.faq{max-width:820px;margin-inline:auto}
.faq__item{border-bottom:1px solid var(--fg-border)}
.faq__item summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 0;
  font-family:var(--fg-font-head);font-size:17px;font-weight:700;color:var(--fg-heading);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"";flex:none;width:10px;height:10px;
  border-right:2px solid var(--fg-primary);border-bottom:2px solid var(--fg-primary);
  transform:rotate(45deg);transition:transform .25s;
}
.faq__item[open] summary::after{transform:rotate(-135deg)}
.faq__item summary:hover{color:var(--fg-primary)}
.faq__answer{padding:0 0 22px}

/* ==========================================================================
   10. Entry / single post
   ========================================================================== */
.entry-header{text-align:center;padding-block:70px 40px;background:var(--fg-hero-grad)}
.entry-header h1{font-size:clamp(32px,5vw,52px);max-width:880px;margin-inline:auto}
.entry-meta{font-family:var(--fg-font-head);font-size:13px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--fg-primary)}
.entry-content{max-width:820px;margin-inline:auto;font-size:16px;line-height:1.8}
.entry-content > *{margin-bottom:1.4em}
.entry-content h2{margin-top:1.6em}
.entry-content h3{margin-top:1.4em}
.entry-content img{border-radius:var(--fg-radius)}
.entry-thumb{max-width:1000px;margin:0 auto 50px}
.entry-thumb img{width:100%;border-radius:var(--fg-radius)}

.pagination{display:flex;justify-content:center;gap:8px;margin-top:60px;flex-wrap:wrap}
.pagination .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 12px;
  border:1px solid var(--fg-border);border-radius:var(--fg-radius);
  font-family:var(--fg-font-head);font-weight:700;color:var(--fg-heading);
}
.pagination .page-numbers:hover,.pagination .page-numbers:focus-visible{border-color:var(--fg-primary);color:var(--fg-primary)}
.pagination .current{background:var(--fg-primary);border-color:var(--fg-primary);color:#fff}

/* Search form */
.search-form{display:flex;gap:10px;max-width:520px}
.search-form input[type="search"]{
  flex:1;min-width:0;
  padding:14px 18px;
  border:1px solid var(--fg-border);border-radius:var(--fg-radius);
  font-family:var(--fg-font-body);font-size:15px;color:var(--fg-heading);background:#fff;
}
.search-form input[type="search"]:focus{outline:2px solid var(--fg-primary);outline-offset:0;border-color:var(--fg-primary)}

/* Back to top: anchor based, no script */
.to-top{
  position:fixed;right:20px;bottom:20px;z-index:40;
  width:44px;height:44px;border-radius:var(--fg-radius);
  display:flex;align-items:center;justify-content:center;
  background:var(--fg-primary);color:#fff;
  box-shadow:0 8px 24px rgba(221,87,45,.35);
}
.to-top:hover,.to-top:focus-visible{background:var(--fg-primary-dark);color:#fff}
.to-top svg{width:14px;height:14px;fill:currentColor}
@media (max-width:767px){.to-top{right:14px;bottom:14px}}

/* ==========================================================================
   12. Homepage sections
   Colours sampled from the live site and from the reference screenshots.
   ========================================================================== */

/* Gradient button: #dd572d to #ecbd15, left to right */
.btn--grad{background-image:linear-gradient(90deg,var(--fg-primary) 0%,var(--fg-accent) 100%);background-color:transparent;color:#fff}
.btn--grad:hover,.btn--grad:focus-visible{background-image:linear-gradient(90deg,var(--fg-accent) 0%,var(--fg-primary) 100%);color:#fff}

/* --- 12.1 Hero with the two 3D characters ------------------------------- */
.hero--home{position:relative;overflow:hidden}
.hero--home .container{position:relative}
.hero__figure{position:absolute;bottom:-120px;pointer-events:none;user-select:none;z-index:0}
.hero__figure img{width:100%;height:auto}
.hero__figure--left{left:0;width:clamp(180px,20vw,278px)}
.hero__figure--right{right:0;width:clamp(120px,13vw,190px)}
.hero--home .hero__inner{position:relative;z-index:1}
/* Below the desktop breakpoint the characters would crowd the text */
@media (max-width:1200px){.hero__figure{display:none}}

/* --- 12.2 Features: copy left, 2x2 icon grid right ---------------------- */
.features__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
@media (max-width:1024px){.features__grid{grid-template-columns:1fr;gap:40px}}
.features__copy h2{margin-bottom:20px}
.features__copy .accent{color:var(--fg-primary)}
.features__boxes{
  display:grid;grid-template-columns:1fr 1fr;
  border:1px solid var(--fg-border);border-radius:var(--fg-radius);
  overflow:hidden;background:#fff;
}
@media (max-width:480px){.features__boxes{grid-template-columns:1fr}}
.feature{
  padding:46px 34px;text-align:center;
  border-right:1px solid var(--fg-border);
  border-bottom:1px solid var(--fg-border);
}
.feature:nth-child(2n){border-right:0}
.feature:nth-last-child(-n+2){border-bottom:0}
@media (max-width:480px){.feature{border-right:0}.feature:nth-last-child(-n+2){border-bottom:1px solid var(--fg-border)}.feature:last-child{border-bottom:0}}
.feature__icon{
  width:85px;height:85px;margin:0 auto 22px;
  display:flex;align-items:center;justify-content:center;
  background:var(--fg-primary);border-radius:20px;color:#fff;
}
.feature__icon svg{width:45px;height:45px;fill:currentColor}
.feature h3{margin-bottom:12px}
.feature p{margin-bottom:0}

/* --- 12.3 Tools: three tinted cards ------------------------------------- */
.tools__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:1024px){.tools__grid{grid-template-columns:1fr;max-width:560px;margin-inline:auto}}
.tool{padding:34px 30px 40px;border-radius:20px;text-align:center}
.tool--blue{background:#f0f6fe}
.tool--cream{background:#fff2de}
.tool--rose{background:#f9efef}
.tool__media{margin-bottom:26px}
.tool__media img{width:100%;height:auto;border-radius:12px}
.tool h3{margin-bottom:12px}
.tool p{margin-bottom:0}

/* --- 12.4 Get started: four numbered steps ------------------------------ */
.section--tinted{background:linear-gradient(90deg,#f0f5fc 0%,#f7f0f0 50%,#fdeae5 100%)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;padding-top:26px}
@media (max-width:1024px){.steps{grid-template-columns:repeat(2,1fr);gap:40px 26px}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.step{position:relative;background:#fff;border-radius:16px;padding:34px 28px 30px;box-shadow:0 10px 40px rgba(0,0,0,.06)}
.step__num{
  position:absolute;top:-24px;right:-14px;
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--fg-primary);color:#fff;
  font-family:var(--fg-font-head);font-size:20px;font-weight:700;
}
.step h3{font-size:16px;letter-spacing:.5px;text-transform:uppercase;margin-bottom:14px}
.step p{margin-bottom:0}

/* --- 12.5 Safeguard: copy left, layered art right ----------------------- */
.section--warm{background:var(--fg-hero-grad)}
.safeguard{display:grid;grid-template-columns:1fr 1fr;gap:50px;align-items:center}
@media (max-width:1024px){.safeguard{grid-template-columns:1fr;gap:40px}}
.safeguard h2{margin-bottom:20px}
.safeguard .accent{color:var(--fg-primary)}
.safeguard__art{position:relative;min-height:480px}
@media (max-width:1024px){.safeguard__art{min-height:380px}}
.safeguard__cards{position:absolute;right:0;top:50%;transform:translateY(-50%);width:72%;max-width:593px}
.safeguard__person{position:absolute;left:4%;bottom:0;width:34%;max-width:263px;z-index:1}

/* --- 12.6 Counters: white card lifted over the section edge ------------- */
.counters-wrap{position:relative;z-index:2;margin-top:-90px}
@media (max-width:767px){.counters-wrap{margin-top:-50px}}
.counters{
  display:grid;grid-template-columns:repeat(4,1fr);gap:30px;
  background:#fff;border-radius:20px;padding:50px;
  box-shadow:5px 5px 50px rgba(0,0,0,.14);
}
@media (max-width:767px){.counters{grid-template-columns:repeat(2,1fr);padding:34px 24px;gap:26px}}
.counter__num{font-size:82px}
@media (max-width:767px){.counter__num{font-size:52px}}

/* --- 12.7 FAQ ----------------------------------------------------------- */
.faq__grid{display:grid;grid-template-columns:1fr 1.35fr auto;gap:50px;align-items:center}
@media (max-width:1100px){.faq__grid{grid-template-columns:1fr 1.25fr;gap:44px}}
@media (max-width:1024px){.faq__grid{grid-template-columns:1fr;gap:40px}}
.faq__copy h2{margin-bottom:20px}
.faq__copy .accent{color:var(--fg-primary)}
.faq__copy .btn{margin-top:14px}
.faq__panel{position:relative;min-width:0}
.faq__list{display:flex;flex-direction:column;gap:18px}
/* The accordion is native <details>, so it opens with JavaScript disabled */
.faq__item{
  background:#fff;border:0;border-radius:16px;
  box-shadow:0 8px 30px rgba(0,0,0,.05);
  padding:6px 30px;
}
.faq__item summary{padding:22px 0;font-size:18px}
.faq__item .faq__answer{padding:0 0 22px;max-width:62ch}
/* She used to sit on top of the accordion and cover the answers. Now the grid
   reserves a third column for her, so she stands beside the questions. */
.faq__person{
  position:static;
  width:100%;max-width:210px;
  align-self:end;justify-self:center;
  pointer-events:none;
}
@media (max-width:1100px){.faq__person{display:none}}

/* --- 12.8 Blog teaser --------------------------------------------------- */
.blog-teaser__foot{text-align:center;margin-top:50px}
.post-card__foot{
  display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;
  margin-top:18px;padding-top:16px;border-top:1px solid var(--fg-border);
  font-size:13px;color:var(--fg-muted);
}
.post-card__foot strong{color:var(--fg-heading);font-weight:500}

/* ==========================================================================
   13. Inner pages: About, Contact, Tools
   Same tokens as the homepage. Spacing here is deliberately generous.
   ========================================================================== */

.page-hero{background:var(--fg-hero-grad);padding-block:90px 100px;text-align:center}
.page-hero__inner{max-width:820px;margin-inline:auto}
.page-hero h1{font-size:clamp(38px,6vw,68px);line-height:1.1;margin-bottom:22px}
.page-hero h1 .accent{color:var(--fg-primary)}
.page-hero p{max-width:640px;margin-inline:auto;font-size:16px}
@media (max-width:767px){.page-hero{padding-block:56px 64px}}

.prose{max-width:820px}
.prose--center{margin-inline:auto;text-align:center}
.lead{font-size:17px;line-height:1.75}

/* Split: copy on one side, art on the other */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split--wide{grid-template-columns:1.15fr .85fr}
@media (max-width:1024px){.split,.split--wide{grid-template-columns:1fr;gap:44px}}
.split h2{margin-bottom:20px}
.split h2 .accent{color:var(--fg-primary)}
.split__art{display:flex;justify-content:center}
/* A definite height keeps tall and short illustrations at a similar visual
   size, and lets the browser reserve the box from the width/height attributes
   before the file arrives, so the image cannot shift the layout. */
.split__art img{height:clamp(300px,34vw,480px);width:auto;max-width:100%}

/* Checklist with an orange tick */
.checklist{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding-left:34px;margin-bottom:14px}
.checklist li::before{
  content:"";position:absolute;left:0;top:4px;
  width:18px;height:18px;border-radius:50%;
  background:var(--fg-primary);
}
.checklist li::after{
  content:"";position:absolute;left:6px;top:8px;
  width:5px;height:9px;
  border-right:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(45deg);
}

/* Value cards (About) */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:1024px){.values{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.values{grid-template-columns:1fr}}
.value-card{background:#fff;border:1px solid var(--fg-border);border-radius:20px;padding:40px 34px}
.value-card__icon{
  width:72px;height:72px;margin-bottom:24px;border-radius:18px;
  background:var(--fg-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.value-card__icon svg{width:38px;height:38px;fill:currentColor}
.value-card h3{margin-bottom:12px}
.value-card p:last-child{margin-bottom:0}

/* --- Tools page: roomy cards ------------------------------------------- */
.tools-page{display:grid;grid-template-columns:repeat(2,1fr);gap:40px}
@media (max-width:900px){.tools-page{grid-template-columns:1fr;gap:30px}}
.tool-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--fg-border);border-radius:24px;
  padding:60px 50px;
  transition:transform .25s,box-shadow .25s,border-color .25s;
}
@media (max-width:767px){.tool-card{padding:40px 28px}}
.tool-card:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(0,0,0,.09);border-color:transparent}
.tool-card__icon{
  width:96px;height:96px;margin-bottom:34px;border-radius:24px;
  background:var(--fg-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.tool-card__icon svg{width:50px;height:50px;fill:currentColor}
.tool-card__tag{
  align-self:flex-start;margin-bottom:18px;
  padding:6px 14px;border-radius:999px;
  background:var(--fg-alt);color:var(--fg-primary);
  font-family:var(--fg-font-head);font-size:12px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;
}
.tool-card h2{font-size:28px;margin-bottom:16px}
.tool-card > p{margin-bottom:26px}
.tool-card .checklist{margin-bottom:36px}
.tool-card__foot{margin-top:auto}
.tool-card--soon{background:var(--fg-alt);border-style:dashed}
.tool-card--soon:hover{transform:none;box-shadow:none;border-color:var(--fg-border)}

/* Wide band used for the closing call to action */
.cta-band{
  background:linear-gradient(90deg,var(--fg-primary) 0%,var(--fg-accent) 100%);
  border-radius:24px;padding:70px 60px;text-align:center;color:#fff;
}
@media (max-width:767px){.cta-band{padding:48px 26px}}
.cta-band h2{color:#fff;margin-bottom:16px}
.cta-band p{max-width:620px;margin:0 auto 32px;color:rgba(255,255,255,.92)}

/* --- Contact page ------------------------------------------------------- */
.contact__grid{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:start}
@media (max-width:1024px){.contact__grid{grid-template-columns:1fr;gap:44px}}

.info-card{
  display:flex;gap:20px;align-items:flex-start;
  background:#fff;border:1px solid var(--fg-border);border-radius:20px;
  padding:30px;margin-bottom:22px;
}
.info-card:last-child{margin-bottom:0}
.info-card__icon{
  flex:none;width:56px;height:56px;border-radius:16px;
  background:var(--fg-primary);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.info-card__icon svg{width:26px;height:26px;fill:currentColor}
.info-card h3{font-size:17px;margin-bottom:6px}
.info-card p{margin-bottom:0}
.info-card a{color:var(--fg-text)}
.info-card a:hover,.info-card a:focus-visible{color:var(--fg-primary)}

/* Form. Plain HTML, posts to the server, no JavaScript involved. */
.form{background:#fff;border:1px solid var(--fg-border);border-radius:24px;padding:50px}
@media (max-width:767px){.form{padding:32px 24px}}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:640px){.form__row{grid-template-columns:1fr;gap:0}}
.form__field{margin-bottom:22px}
.form__field label{
  display:block;margin-bottom:8px;
  font-family:var(--fg-font-head);font-size:14px;font-weight:700;color:var(--fg-heading);
}
.form__field .req{color:var(--fg-primary)}
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form select,
.form textarea{
  width:100%;
  padding:14px 18px;
  border:1px solid var(--fg-border);border-radius:var(--fg-radius);
  background:#fff;color:var(--fg-heading);
  font-family:var(--fg-font-body);font-size:15px;line-height:1.5;
}
.form textarea{min-height:150px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{
  outline:2px solid var(--fg-primary);outline-offset:0;border-color:var(--fg-primary);
}
.form__hp{position:absolute;left:-9999px}
.form__note{font-size:13px;color:var(--fg-muted);margin-top:18px}

.notice{border-radius:var(--fg-radius);padding:16px 20px;margin-bottom:26px;font-size:15px}
.notice--ok{background:#eef8f0;border:1px solid #cbe7d2;color:#256b39}
.notice--err{background:#fdf0ec;border:1px solid #f6d3c7;color:#9c3417}

/* ==========================================================================
   14. Calculators
   ========================================================================== */

.calc{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:1024px){.calc{grid-template-columns:1fr;gap:30px}}

/* .calc__panel and its fields are defined once, in section 24. */

.calc__results{
  background:linear-gradient(90deg,#f0f5fc 0%,#f7f0f0 50%,#fdeae5 100%);
  border-radius:24px;padding:40px;
}
@media (max-width:767px){.calc__results{padding:28px 22px}}

/* Headline figure */
.calc__headline{margin-bottom:30px}
.calc__headline .label{
  display:block;font-family:var(--fg-font-head);font-size:var(--fg-small);
  font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--fg-primary);
  margin-bottom:8px;
}
.calc__headline .value{
  display:block;font-family:var(--fg-font-head);font-weight:700;
  font-size:clamp(40px,5vw,60px);line-height:1.05;letter-spacing:-1px;color:var(--fg-heading);
}

/* Small stat tiles */
.calc__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-bottom:30px}
@media (max-width:480px){.calc__stats{grid-template-columns:1fr}}
.stat{background:#fff;border-radius:16px;padding:20px 22px}
.stat .label{display:block;font-size:13px;color:var(--fg-muted);margin-bottom:6px}
.stat .value{
  display:block;font-family:var(--fg-font-head);font-weight:700;
  font-size:24px;color:var(--fg-heading);line-height:1.2;
}
.stat--wide{grid-column:1 / -1}

.calc__table{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden}
.calc__table caption{
  caption-side:top;text-align:left;padding:0 0 12px;
  font-family:var(--fg-font-head);font-weight:700;color:var(--fg-heading);
}
.calc__table th,.calc__table td{border:0;border-bottom:1px solid var(--fg-border);padding:12px 16px;font-size:14px}
.calc__table thead th{background:#fff;color:var(--fg-muted);font-family:var(--fg-font-body);font-weight:500;font-size:13px}
.calc__table tbody th{font-family:var(--fg-font-head);font-weight:700;color:var(--fg-primary)}
.calc__table td{text-align:right}
.calc__table th{text-align:left}
.calc__table tr:last-child th,.calc__table tr:last-child td{border-bottom:0}
.calc__table--scroll{display:block;overflow-x:auto}

.calc__note{font-size:13px;color:var(--fg-muted);margin-top:22px}

/* Reuses the form field styles from section 13 */
.calc__panel .form__field:last-of-type{margin-bottom:0}
.calc__panel .form__row{gap:18px}

.notice--warn{background:#fff8e6;border:1px solid #f2dfa8;color:#7a5a05}

/* ==========================================================================
   15. Motion
   Rules applied, from the UX guidance: honour prefers-reduced-motion, use
   deceleration on entrance, keep the final state readable without motion, and
   never make correctness depend on an animation finishing.

   Scroll reveals use CSS scroll-driven animations (animation-timeline: view()).
   No JavaScript and no library. In browsers without support the content simply
   renders in its final state, which is why `animation` is only applied inside
   the @supports block.
   ========================================================================== */

:root{
  --fg-ease-out:cubic-bezier(.22,.61,.36,1);   /* arriving, decelerates */
  --fg-ease-in:cubic-bezier(.55,.06,.68,.19);  /* leaving, accelerates */
  --fg-dur-fast:.18s;
  --fg-dur:.28s;
  --fg-dur-slow:.5s;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    @keyframes fg-rise{
      from{opacity:0;transform:translateY(26px)}
      to{opacity:1;transform:none}
    }
    @keyframes fg-fade{
      from{opacity:0}
      to{opacity:1}
    }
    @keyframes fg-rise-sm{
      from{opacity:0;transform:translateY(14px)}
      to{opacity:1;transform:none}
    }

    /* Section headings and copy blocks */
    .section__head,
    .features__copy,
    .safeguard__copy,
    .faq__copy,
    .split > div:not(.split__art),
    .page-hero__inner{
      animation:fg-rise linear both;
      animation-timeline:view();
      animation-range:entry 5% cover 22%;
    }

    /* Cards. The stagger comes from each card entering the viewport in turn,
       which is steadier than a fixed delay chain. */
    .feature,
    .tool,
    .step,
    .value-card,
    .tool-card,
    .post-card,
    .info-card,
    .counter,
    .faq__item{
      animation:fg-rise-sm linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 18%;
    }

    /* Artwork fades rather than moves, so nothing shifts layout */
    .split__art img,
    .safeguard__art img,
    .faq__person,
    .hero__figure{
      animation:fg-fade linear both;
      animation-timeline:view();
      animation-range:entry 0% cover 20%;
    }
  }
}

/* Hero is above the fold, so it animates on load rather than on scroll. */
@media (prefers-reduced-motion: no-preference){
  @keyframes fg-hero-in{
    from{opacity:0;transform:translateY(18px)}
    to{opacity:1;transform:none}
  }
  .hero__inner > *{
    animation:fg-hero-in .6s var(--fg-ease-out) both;
  }
  .hero__inner > *:nth-child(1){animation-delay:.05s}
  .hero__inner > *:nth-child(2){animation-delay:.14s}
  .hero__inner > *:nth-child(3){animation-delay:.22s}
  .hero__figure{animation:fg-hero-in .7s var(--fg-ease-out) .18s both}
}

/* --- Interaction polish --------------------------------------------------- */

.btn{transition:background-color var(--fg-dur) var(--fg-ease-out),
                color var(--fg-dur) var(--fg-ease-out),
                transform var(--fg-dur-fast) var(--fg-ease-out),
                box-shadow var(--fg-dur) var(--fg-ease-out)}
.btn:hover,.btn:focus-visible{box-shadow:0 10px 24px rgba(221,87,45,.28)}
.btn:active{transform:translateY(0) scale(.98);transition-duration:var(--fg-dur-fast)}

.card,.tool,.step,.value-card,.tool-card,.post-card,.info-card{
  transition:transform var(--fg-dur) var(--fg-ease-out),
             box-shadow var(--fg-dur) var(--fg-ease-out),
             border-color var(--fg-dur) var(--fg-ease-out);
}
.post-card__media img{transition:transform .6s var(--fg-ease-out)}
.post-card:hover .post-card__media img{transform:scale(1.05)}

.feature__icon,.value-card__icon,.tool-card__icon{
  transition:transform var(--fg-dur) var(--fg-ease-out);
}
.feature:hover .feature__icon,
.value-card:hover .value-card__icon,
.tool-card:hover .tool-card__icon{transform:translateY(-4px) rotate(-4deg)}

.main-nav > ul > li > a{position:relative}
.main-nav > ul > li > a::after{
  content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;
  background:var(--fg-primary);
  transform:scaleX(0);transform-origin:left;
  transition:transform var(--fg-dur) var(--fg-ease-out);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li > a:focus-visible::after{transform:scaleX(1)}
@media (max-width:1024px){.main-nav > ul > li > a::after{display:none}}

/* FAQ open/close. The marker rotates; the panel itself is native <details>,
   so the content is correct whether or not the animation runs. */
.faq__item summary::after{transition:transform var(--fg-dur) var(--fg-ease-out)}
@media (prefers-reduced-motion: no-preference){
  .faq__item[open] .faq__answer{animation:fg-answer .3s var(--fg-ease-out) both}
  @keyframes fg-answer{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
}

/* ==========================================================================
   18. Calculator, second pass
   The first version was a plain form beside plain numbers. This adds a real
   input treatment, a segmented filing-status control, and a proportion bar so
   the result is readable at a glance rather than as a wall of figures.
   ========================================================================== */

.calc{grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:44px}



/* Results */
.calc__results{
  border-radius:24px;padding:40px;
  background:linear-gradient(135deg,#fff7ef 0%,#f7f2fb 55%,#eef4fd 100%);
  border:1px solid rgba(221,87,45,.10);
}
.calc__headline .value{
  font-size:clamp(44px,5.4vw,68px);
  background:linear-gradient(90deg,var(--fg-primary),#e08a1e);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.calc__headline .sub{display:block;margin-top:6px;font-size:14px;color:var(--fg-text)}

/* Proportion bar: what is kept vs what is paid */
.calc__bar{display:flex;height:16px;border-radius:999px;overflow:hidden;margin:6px 0 14px;background:var(--fg-alt)}
.calc__bar span{display:block;height:100%;transition:width .5s var(--fg-ease-out)}
.calc__bar .is-keep{background:linear-gradient(90deg,#2f9e63,#57c088)}
.calc__bar .is-tax{background:linear-gradient(90deg,var(--fg-primary),var(--fg-accent))}
.calc__legend{display:flex;gap:20px;flex-wrap:wrap;font-size:13px;color:var(--fg-text);margin-bottom:30px}
.calc__legend b{display:block;font-family:var(--fg-font-head);font-size:16px;color:var(--fg-heading)}
.calc__legend span::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:3px;
  margin-right:8px;vertical-align:middle;
}
.calc__legend .k::before{background:#2f9e63}
.calc__legend .t::before{background:var(--fg-primary)}

.stat{
  background:rgba(255,255,255,.82);border:1px solid rgba(255,255,255,.9);
  backdrop-filter:blur(4px);
  transition:transform var(--fg-dur) var(--fg-ease-out);
}
.stat:hover{transform:translateY(-2px)}
.stat .value{font-variant-numeric:tabular-nums}

/* Bracket table with a bar behind each row */
.calc__table tbody th{position:relative}
.bracket-bar{
  display:block;height:6px;border-radius:999px;margin-top:6px;
  background:linear-gradient(90deg,var(--fg-primary),var(--fg-accent));
  transition:width .5s var(--fg-ease-out);
}
.calc__table td{font-variant-numeric:tabular-nums}

@media (max-width:1024px){
  .calc{grid-template-columns:1fr}
  .calc__panel,.calc__results{padding:28px 22px}
}

/* ==========================================================================
   19. Article and blog, matching the Free Essay Writer reader
   ========================================================================== */

#fg-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:100;
  background:linear-gradient(90deg,var(--fg-primary),var(--fg-accent));
  transition:width .1s linear;
}

.article > .container{padding-block:34px 90px}
@media (max-width:767px){.article > .container{padding-block:22px 64px}}

.breadcrumb{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:14px;color:var(--fg-muted);margin-bottom:28px;
}
.breadcrumb a{color:var(--fg-muted)}
.breadcrumb a:hover,.breadcrumb a:focus-visible{color:var(--fg-primary)}
.breadcrumb__current{color:var(--fg-heading);max-width:44ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.article__head h1{
  font-size:clamp(32px,4.4vw,52px);line-height:1.12;
  margin:18px 0 26px;max-width:22ch;
}
@media (max-width:1024px){.article__head h1{max-width:none}}

.byline-card{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  background:#fff;border:1px solid var(--fg-border);border-radius:18px;
  padding:16px 20px;margin-bottom:44px;
  box-shadow:0 8px 28px rgba(0,0,0,.05);
}
.byline{display:flex;align-items:center;gap:12px}
.byline__avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;flex:none}
.byline__name{font-family:var(--fg-font-head);font-weight:700;font-size:15px;color:var(--fg-heading);margin:0}
.byline__role{font-size:13px;color:var(--fg-muted);margin:0}
.byline-card__meta{display:flex;flex-wrap:wrap;gap:8px}
.meta-chip{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 13px;border-radius:999px;background:var(--fg-alt);
  font-family:var(--fg-font-head);font-size:12px;font-weight:700;color:var(--fg-heading);
}
.meta-chip svg{width:13px;height:13px;fill:var(--fg-primary);flex:none}

.article__layout{display:grid;grid-template-columns:260px minmax(0,1fr);gap:44px;align-items:start}
/* A post with too few headings has no contents card, so the article takes
   the full width instead of being squeezed into the sidebar column. */
.article__layout--single{grid-template-columns:minmax(0,1fr)}
.article__layout--single .article__body{max-width:820px;margin-inline:auto}
@media (max-width:1024px){.article__layout{grid-template-columns:1fr;gap:28px}}

.toc-aside{position:relative}
@media (min-width:1025px){.toc-aside{position:sticky;top:26px}}
.toc-card{
  background:#fff;border:1px solid var(--fg-border);border-radius:18px;
  padding:18px 20px;box-shadow:0 8px 28px rgba(0,0,0,.05);
}
.toc-card > summary{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  list-style:none;cursor:pointer;
}
.toc-card > summary::-webkit-details-marker{display:none}
.toc-card__title{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--fg-font-head);font-size:14px;font-weight:700;color:var(--fg-heading);
}
.toc-card__title svg{width:16px;height:16px;fill:var(--fg-primary)}
.toc-card__pct{
  display:grid;place-items:center;flex:none;
  width:38px;height:38px;border-radius:50%;
  background:var(--fg-alt);color:var(--fg-primary);
  font-family:var(--fg-font-head);font-size:11px;font-weight:700;
  font-variant-numeric:tabular-nums;
}
.toc-card__nav{margin-top:16px;max-height:60vh;overflow-y:auto}
@media (max-width:1024px){.toc-card__nav{max-height:none}}
.toc-card__nav ol{list-style:none;margin:0;padding:0}
.toc__item{margin-bottom:4px}
.toc__item a{
  display:block;padding:7px 10px;border-radius:9px;
  font-size:14px;line-height:1.4;color:var(--fg-text);
  border-left:2px solid transparent;
  transition:background-color var(--fg-dur) var(--fg-ease-out),
             color var(--fg-dur) var(--fg-ease-out),
             border-color var(--fg-dur) var(--fg-ease-out);
}
.toc__item a:hover,.toc__item a:focus-visible{background:var(--fg-alt);color:var(--fg-heading)}
.toc__item a.is-active{
  background:var(--fg-alt);color:var(--fg-primary);font-weight:600;
  border-left-color:var(--fg-primary);
}
.toc__item--h3 a{padding-left:24px;font-size:13px}

.article__thumb{margin:0 0 40px}
.article__thumb img{width:100%;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.10)}
.article__body .entry-content{max-width:none;margin-inline:0;font-size:17px;line-height:1.78}
.article__body .entry-content h2{font-size:28px;margin-top:1.8em;scroll-margin-top:26px}
.article__body .entry-content h3{font-size:21px;margin-top:1.5em;scroll-margin-top:26px}
.article__body .entry-content li{margin-bottom:.5em}
.article__body .entry-content a{text-decoration:underline;text-underline-offset:3px}

.article__tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:40px}
.article__tags-label{font-size:14px;font-weight:600;color:var(--fg-muted)}

.tag-pill{
  display:inline-flex;align-items:center;
  padding:6px 13px;border-radius:999px;
  background:var(--fg-alt);color:var(--fg-primary);
  font-family:var(--fg-font-head);font-size:12px;font-weight:700;letter-spacing:.4px;
}
.tag-pill:hover,.tag-pill:focus-visible{background:var(--fg-primary);color:#fff}

.author-bio{
  display:flex;gap:22px;align-items:flex-start;flex-wrap:wrap;
  background:#fff;border:1px solid var(--fg-border);border-radius:22px;
  padding:30px;margin-top:48px;box-shadow:0 10px 34px rgba(0,0,0,.05);
}
.author-bio__avatar{width:72px;height:72px;border-radius:18px;object-fit:cover;flex:none}
.author-bio__label{
  font-family:var(--fg-font-head);font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-primary);margin-bottom:4px;
}
.author-bio__name{font-size:20px;margin-bottom:8px}
.author-bio__name a{color:var(--fg-heading)}
.author-bio__name a:hover,.author-bio__name a:focus-visible{color:var(--fg-primary)}
.author-bio__text{font-size:15px;margin-bottom:12px}
.author-bio__more{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--fg-font-head);font-size:14px;font-weight:700;
}
.author-bio__more svg{width:11px;height:11px;fill:currentColor;transition:transform var(--fg-dur) var(--fg-ease-out)}
.author-bio__more:hover svg{transform:translateX(3px)}

.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:40px}
@media (max-width:640px){.post-nav{grid-template-columns:1fr}}
.post-nav__item{
  display:block;background:#fff;border:1px solid var(--fg-border);border-radius:18px;
  padding:22px;transition:transform var(--fg-dur) var(--fg-ease-out),box-shadow var(--fg-dur) var(--fg-ease-out);
}
.post-nav__item:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.08)}
.post-nav__item--next{text-align:right}
.post-nav__label{
  display:block;font-family:var(--fg-font-head);font-size:11px;font-weight:700;
  letter-spacing:1.2px;text-transform:uppercase;color:var(--fg-primary);margin-bottom:8px;
}
.post-nav__title{display:block;font-family:var(--fg-font-head);font-weight:700;color:var(--fg-heading);line-height:1.35}

.article__comments{margin-top:56px}

/* ==========================================================================
   20. Blog listing
   ========================================================================== */

.blog-head{background:var(--fg-hero-grad);padding-block:72px 60px;text-align:center}
.blog-head__inner{max-width:760px;margin-inline:auto}
.blog-head h1{font-size:clamp(36px,5vw,58px);line-height:1.08;margin:22px 0 18px}
.blog-head h1 .accent{color:var(--fg-primary)}
.blog-head__inner > p{font-size:17px;max-width:600px;margin-inline:auto}
@media (max-width:767px){.blog-head{padding-block:48px 44px}}

.pill{
  display:inline-flex;align-items:center;gap:9px;
  padding:8px 16px;border-radius:999px;background:#fff;
  border:1px solid var(--fg-border);
  font-family:var(--fg-font-head);font-size:13px;font-weight:700;color:var(--fg-heading);
  box-shadow:0 6px 18px rgba(0,0,0,.05);
}
.pill__dot{width:8px;height:8px;border-radius:50%;background:var(--fg-primary);flex:none}

.blog-head__search{display:flex;justify-content:center;margin-top:30px}
.blog-head__search .search-form{width:100%;max-width:520px}

.blog-stats{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:18px 38px;margin-top:36px;
}
.blog-stats__num{
  font-family:var(--fg-font-head);font-size:34px;font-weight:700;
  color:var(--fg-heading);line-height:1.1;margin:0;
}
.blog-stats__num span{color:var(--fg-primary)}
.blog-stats__label{
  font-size:12px;font-weight:600;letter-spacing:.6px;text-transform:uppercase;
  color:var(--fg-muted);margin:4px 0 0;
}
.blog-stats__rule{width:1px;height:38px;background:var(--fg-border)}
@media (max-width:560px){.blog-stats__rule{display:none}}

.tabs{
  display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:38px;
}
.tab{
  display:inline-flex;align-items:center;gap:8px;flex:none;
  padding:10px 18px;border-radius:999px;
  background:#fff;border:1px solid var(--fg-border);
  font-family:var(--fg-font-head);font-size:14px;font-weight:700;color:var(--fg-heading);
  transition:background-color var(--fg-dur) var(--fg-ease-out),
             border-color var(--fg-dur) var(--fg-ease-out),
             color var(--fg-dur) var(--fg-ease-out);
}
.tab:hover,.tab:focus-visible{border-color:var(--fg-primary);color:var(--fg-primary)}
.tab.is-active{background:var(--fg-primary);border-color:var(--fg-primary);color:#fff}
.tab__count{
  display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;
  border-radius:999px;background:var(--fg-alt);color:var(--fg-text);font-size:11px;
}
.tab.is-active .tab__count{background:rgba(255,255,255,.25);color:#fff}

.list-head{display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between;margin-bottom:26px}
.list-head h2{margin:0;font-size:clamp(24px,2.6vw,32px)}
.list-head .accent{color:var(--fg-primary)}
.count-pill{
  padding:7px 15px;border-radius:999px;background:#fff;border:1px solid var(--fg-border);
  font-size:14px;color:var(--fg-muted);
}

.post-feature{
  display:grid;grid-template-columns:1.05fr .95fr;
  background:#fff;border:1px solid var(--fg-border);border-radius:24px;
  overflow:hidden;margin-bottom:42px;
  transition:transform var(--fg-dur) var(--fg-ease-out),box-shadow var(--fg-dur) var(--fg-ease-out);
}
.post-feature:hover{transform:translateY(-4px);box-shadow:0 24px 56px rgba(0,0,0,.10)}
@media (max-width:900px){.post-feature{grid-template-columns:1fr}}
.post-feature__media{position:relative;display:block;background:var(--fg-alt);overflow:hidden;aspect-ratio:16/10}
.post-feature__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--fg-ease-out)}
.post-feature:hover .post-feature__media img{transform:scale(1.04)}
.post-feature__body{padding:40px;display:flex;flex-direction:column;justify-content:center}
@media (max-width:767px){.post-feature__body{padding:26px 22px}}
.post-feature__tags{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
.post-feature__date{font-size:13px;color:var(--fg-muted)}
.post-feature__body h2{font-size:clamp(22px,2.4vw,32px);line-height:1.2;margin-bottom:14px}
.post-feature__body h2 a{color:var(--fg-heading)}
.post-feature:hover .post-feature__body h2 a{color:var(--fg-primary)}
.post-feature__body .btn{align-self:flex-start;margin-top:8px}
.post-feature .byline{margin-top:26px;padding-top:20px;border-top:1px solid var(--fg-border)}

.badge{
  position:absolute;left:12px;top:12px;z-index:2;
  display:inline-flex;align-items:center;gap:6px;
  padding:5px 11px;border-radius:999px;
  background:var(--fg-heading);color:#fff;
  font-family:var(--fg-font-head);font-size:11px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;
}
.badge--accent{background:var(--fg-primary)}
.badge--time{
  left:auto;right:12px;top:auto;bottom:12px;
  background:rgba(255,255,255,.95);color:var(--fg-heading);text-transform:none;letter-spacing:0;
}
.badge--time svg{width:11px;height:11px;fill:var(--fg-primary)}

.post-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid var(--fg-border);border-radius:18px}
.post-card__media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:var(--fg-alt)}
.post-card__media img{width:100%;height:100%;object-fit:cover}
.post-card__body{display:flex;flex-direction:column;flex:1;padding:24px}
.post-card__meta{
  font-family:var(--fg-font-body);font-size:12px;font-weight:600;color:var(--fg-muted);
  letter-spacing:0;text-transform:none;margin-bottom:8px;
}
.post-card h3{font-size:18px;line-height:1.35;margin-bottom:10px}
.post-card__excerpt{font-size:14px;flex:1;margin-bottom:18px}
.post-card__foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-top:16px;border-top:1px solid var(--fg-border);margin:0;
}
.post-card__author{display:inline-flex;align-items:center;gap:8px;font-family:var(--fg-font-head);font-size:12px;font-weight:700;color:var(--fg-heading)}
.post-card__avatar{width:28px;height:28px;border-radius:50%;object-fit:cover}
.post-card__more{display:inline-flex;align-items:center;gap:6px;font-family:var(--fg-font-head);font-size:13px;font-weight:700;color:var(--fg-primary)}
.post-card__more svg{width:10px;height:10px;fill:currentColor;transition:transform var(--fg-dur) var(--fg-ease-out)}
.post-card:hover .post-card__more svg{transform:translateX(3px)}

.empty-state{
  background:#fff;border:1px solid var(--fg-border);border-radius:24px;
  padding:64px 30px;text-align:center;
}
.empty-state__icon{
  width:64px;height:64px;margin:0 auto 22px;border-radius:18px;
  background:var(--fg-alt);display:grid;place-items:center;
}
.empty-state__icon svg{width:32px;height:32px;fill:var(--fg-primary)}

/* ==========================================================================
   21. Footer, 40 / 60
   ========================================================================== */

.site-footer{background:var(--fg-alt);padding-block:70px 0;margin-top:0}
.site-footer__grid{display:grid;grid-template-columns:40% 60%;gap:40px;align-items:start}
@media (max-width:900px){.site-footer__grid{grid-template-columns:1fr;gap:40px}}

.site-footer__brand{padding-right:50px}
@media (max-width:900px){.site-footer__brand{padding-right:0}}
.site-footer__brand img{height:46px;width:auto;margin-bottom:20px}
.site-footer__brand p{font-size:15px;max-width:42ch;margin-bottom:0}

.site-footer__cols{display:grid;grid-template-columns:repeat(3,1fr);gap:34px}
@media (max-width:640px){.site-footer__cols{grid-template-columns:1fr;gap:30px}}

.site-footer h3{
  font-family:var(--fg-font-head);font-size:16px;font-weight:700;
  color:var(--fg-heading);margin-bottom:18px;
}
.site-footer ul{list-style:none;margin:0;padding:0}
.site-footer li{margin-bottom:11px;font-size:15px;line-height:1.5}
.site-footer li:last-child{margin-bottom:0}
.site-footer a{color:var(--fg-text)}
.site-footer a:hover,.site-footer a:focus-visible{color:var(--fg-primary)}

.site-footer__contact li{display:flex;gap:11px;align-items:flex-start}
.site-footer__contact svg{
  width:15px;height:15px;flex:none;margin-top:4px;
  fill:var(--fg-primary);
}

.site-footer__bottom{
  display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  margin-top:60px;padding-block:22px;
  border-top:1px solid var(--fg-border);
  font-size:14px;
}
.site-footer__bottom p{margin:0}
.site-footer__sitemap{
  font-family:var(--fg-font-head);font-weight:700;color:var(--fg-text);
}
.site-footer__sitemap:hover,.site-footer__sitemap:focus-visible{color:var(--fg-primary)}
@media (max-width:560px){
  .site-footer__bottom{justify-content:center;text-align:center}
}

/* ==========================================================================
   22. Legal pages
   ========================================================================== */

.legal-head{background:var(--fg-hero-grad);padding-block:70px 60px;text-align:center}
.legal-head h1{font-size:clamp(32px,4.4vw,50px);line-height:1.12;margin:22px 0 14px}
.legal-head__updated{
  font-family:var(--fg-font-head);font-size:14px;font-weight:700;
  color:var(--fg-muted);margin-bottom:0;
}
@media (max-width:767px){.legal-head{padding-block:48px 44px}}

.section--legal{padding-block:70px 100px}
@media (max-width:767px){.section--legal{padding-block:48px 70px}}

.legal{max-width:760px;margin-inline:auto;font-size:16px;line-height:1.8}
.legal h2{
  font-size:23px;margin-top:2em;margin-bottom:.6em;
  padding-top:1.2em;border-top:1px solid var(--fg-border);
}
.legal h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.legal ul{padding-left:1.2em;margin-bottom:1.4em}
.legal li{margin-bottom:.6em}
.legal a{text-decoration:underline;text-underline-offset:3px}
.legal__contact{
  margin-top:50px;padding-top:26px;
  border-top:1px solid var(--fg-border);
  font-size:15px;color:var(--fg-muted);
}

/* ==========================================================================
   23. Sitemap
   ========================================================================== */

.sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:900px){.sitemap{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.sitemap{grid-template-columns:1fr}}

.sitemap__group{
  background:#fff;border:1px solid var(--fg-border);border-radius:20px;
  padding:30px 28px;
}
.sitemap__title{
  display:flex;align-items:center;gap:11px;
  font-size:18px;margin-bottom:18px;
}
.sitemap__title svg{
  width:34px;height:34px;padding:8px;flex:none;
  background:var(--fg-primary);border-radius:10px;fill:#fff;
  box-sizing:content-box;
}
.sitemap__list{list-style:none;margin:0;padding:0}
.sitemap__list > li{
  display:flex;flex-wrap:wrap;gap:8px;align-items:baseline;
  padding:9px 0;border-bottom:1px solid var(--fg-border);
}
.sitemap__list > li:last-child{border-bottom:0}
.sitemap__list a{font-family:var(--fg-font-head);font-weight:700;font-size:15px;color:var(--fg-heading)}
.sitemap__list a:hover,.sitemap__list a:focus-visible{color:var(--fg-primary)}
.sitemap__list ul{list-style:none;margin:8px 0 0;padding:0 0 0 16px;flex-basis:100%}
.sitemap__list ul li{padding:6px 0;border:0}
.sitemap__list ul a{font-size:14px;font-weight:400;color:var(--fg-text)}
.sitemap__count{
  display:inline-grid;place-items:center;min-width:24px;height:22px;padding:0 7px;
  border-radius:999px;background:var(--fg-alt);
  font-family:var(--fg-font-head);font-size:11px;font-weight:700;color:var(--fg-primary);
}

.sitemap__articles{
  margin-top:30px;background:#fff;border:1px solid var(--fg-border);
  border-radius:20px;padding:34px 30px;
}
.sitemap__posts{list-style:none;margin:0;padding:0;columns:2;column-gap:40px}
@media (max-width:767px){.sitemap__posts{columns:1}}
.sitemap__posts li{
  break-inside:avoid;
  display:flex;gap:14px;align-items:baseline;justify-content:space-between;
  padding:10px 0;border-bottom:1px solid var(--fg-border);
}
.sitemap__posts a{font-size:15px;color:var(--fg-heading)}
.sitemap__posts a:hover,.sitemap__posts a:focus-visible{color:var(--fg-primary)}
.sitemap__posts time{flex:none;font-size:13px;color:var(--fg-muted)}
.sitemap__note{margin-top:50px}

/* ==========================================================================
   24. Calculator fields
   The earlier rules were scoped to `.form`, but the calculator form carries
   `.calc__panel`, so none of them applied and the browser default inputs
   showed through. These are scoped to both.
   ========================================================================== */

.calc__panel{
  border-radius:24px;padding:34px;
  background:#fff;border:1px solid var(--fg-border);
  box-shadow:0 18px 50px rgba(0,0,0,.06);
}
@media (max-width:767px){.calc__panel{padding:26px 20px}}
.calc__panel h2{
  font-size:13px;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--fg-primary);margin-bottom:26px;
}

.field{margin-bottom:22px;border:0;padding:0;min-width:0}
.field:last-of-type{margin-bottom:0}
.field--group{margin-bottom:24px}

.field__label{
  display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  margin-bottom:9px;padding:0;
  font-family:var(--fg-font-head);font-size:14px;font-weight:700;color:var(--fg-heading);
}
.field__hint{
  font-family:var(--fg-font-body);font-size:12px;font-weight:400;
  color:var(--fg-muted);
}

.field-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:420px){.field-row{grid-template-columns:1fr}}

/* Input shell */
.field-money{
  position:relative;display:flex;align-items:center;
  background:var(--fg-alt);
  border:1px solid transparent;border-radius:14px;
  transition:border-color var(--fg-dur) var(--fg-ease-out),
             background-color var(--fg-dur) var(--fg-ease-out),
             box-shadow var(--fg-dur) var(--fg-ease-out);
}
.field-money:hover{background:#fff;border-color:var(--fg-border)}
.field-money:focus-within{
  background:#fff;border-color:var(--fg-primary);
  box-shadow:0 0 0 4px rgba(221,87,45,.14);
}

.field-money__prefix{
  flex:none;padding-left:16px;
  font-family:var(--fg-font-head);font-size:17px;font-weight:700;
  color:var(--fg-muted);
  transition:color var(--fg-dur) var(--fg-ease-out);
}
.field-money:focus-within .field-money__prefix{color:var(--fg-primary)}

.field-money__suffix{
  flex:none;padding-right:16px;white-space:nowrap;
  font-family:var(--fg-font-head);font-size:13px;font-weight:700;
  color:var(--fg-muted);
}

.calc__panel input[type="text"],
.field__input{
  width:100%;min-width:0;
  padding:15px 14px;
  border:0;background:transparent;outline:none;
  font-family:var(--fg-font-head);font-size:19px;font-weight:700;
  color:var(--fg-heading);
  font-variant-numeric:tabular-nums;
  -moz-appearance:textfield;
}
.calc__panel input[type="text"]::-webkit-outer-spin-button,
.calc__panel input[type="text"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.field__input::placeholder{color:var(--fg-muted);font-weight:400}
/* The wrapper already shows focus, so the input itself does not need a ring. */
.calc__panel input[type="text"]:focus,
.field__input:focus{outline:none}

/* Segmented control, built from radios so it works with JavaScript off */
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.segmented--3{grid-template-columns:repeat(3,1fr)}
@media (max-width:420px){.segmented--3{grid-template-columns:repeat(2,1fr)}}
.segmented input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.segmented label{
  display:flex;align-items:center;justify-content:center;text-align:center;
  min-height:46px;padding:10px 12px;border-radius:12px;cursor:pointer;
  background:var(--fg-alt);border:1px solid transparent;
  font-family:var(--fg-font-head);font-size:13px;font-weight:700;
  line-height:1.25;color:var(--fg-text);margin:0;
  transition:background-color var(--fg-dur) var(--fg-ease-out),
             border-color var(--fg-dur) var(--fg-ease-out),
             color var(--fg-dur) var(--fg-ease-out),
             transform var(--fg-dur-fast) var(--fg-ease-out);
}
.segmented label:hover{background:#fff;border-color:var(--fg-border);color:var(--fg-heading)}
.segmented label:active{transform:scale(.98)}
.segmented input:checked + label{
  background:var(--fg-primary);border-color:var(--fg-primary);color:#fff;
  box-shadow:0 8px 20px rgba(221,87,45,.25);
}
.segmented input:focus-visible + label{outline:2px solid var(--fg-primary);outline-offset:2px}

.calc__disclaimer{
  display:flex;gap:10px;align-items:flex-start;
  margin:26px 0 0;padding-top:20px;
  border-top:1px solid var(--fg-border);
  font-size:13px;line-height:1.55;color:var(--fg-muted);
}
.calc__disclaimer svg{width:15px;height:15px;flex:none;margin-top:2px;fill:var(--fg-primary)}