/* =========================================================================
   The Square Footage Calculator — "Blueprint" redesign
   Light measurement/drafting theme. Self-contained; loaded AFTER bootstrap.
   ========================================================================= */

:root{
  --ink:        #0f2540;   /* deep navy text            */
  --ink-soft:   #44587a;   /* secondary text            */
  --ink-faint:  #7689a6;   /* muted / captions          */
  --line:       #d4ddea;   /* hairlines / borders       */
  --line-soft:  #e7edf5;
  --paper:      #ffffff;   /* card surface              */
  --paper-2:    #f5f8fc;   /* page background           */
  --blue:       #1d6fe0;   /* primary accent            */
  --blue-dk:    #1657b5;
  --blue-tint:  #eaf2fd;   /* accent wash               */
  --amber:      #f59e0b;   /* result / highlight accent */
  --green:      #15a36b;   /* success                   */
  --grid:       rgba(29,111,224,.07);
  --shadow-sm:  0 1px 2px rgba(15,37,64,.06);
  --shadow:     0 8px 30px rgba(15,37,64,.10);
  --shadow-lg:  0 20px 50px rgba(15,37,64,.14);
  --radius:     14px;
  --radius-sm:  9px;
  --maxw:       1140px;
  --font-display:"Fraunces","Georgia",serif;
  --font-body:  "Be Vietnam Pro","Segoe UI",system-ui,sans-serif;
  --font-mono:  "JetBrains Mono","SFMono-Regular",Consolas,monospace;
}

/* web fonts are self-hosted — see css/fonts.css (link it before this file) */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper-2);
  /* faint blueprint grid */
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:26px 26px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
.sfc-container{max-width:var(--maxw);margin:0 auto;padding:0 20px;}

h1,h2,h3,h4{font-family:var(--font-display);color:var(--ink);line-height:1.18;font-weight:600;}
a{color:var(--blue);text-decoration:none;}
a:hover{color:var(--blue-dk);}

/* =========================================================================
   HEADER / NAV
   ========================================================================= */
.sfc-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid var(--line);
}
.sfc-nav{
  max-width:var(--maxw);margin:0 auto;padding:12px 20px;
  display:flex;align-items:center;gap:18px;
}
.sfc-brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);
  font-weight:700;font-size:1.12rem;color:var(--ink);letter-spacing:-.01em;}
.sfc-brand .mark{
  width:34px;height:34px;border-radius:8px;flex:none;
  display:grid;place-items:center;color:#fff;font-family:var(--font-mono);
  font-weight:600;font-size:.95rem;
  background:linear-gradient(135deg,var(--blue),var(--blue-dk));
  box-shadow:var(--shadow-sm);
}
.sfc-brand small{display:block;font-family:var(--font-body);font-weight:500;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);}
.sfc-navlinks{display:flex;align-items:center;gap:6px;margin-left:auto;}
.sfc-navlinks a{
  padding:8px 13px;border-radius:8px;color:var(--ink-soft);
  font-weight:500;font-size:.94rem;transition:.16s;
}
.sfc-navlinks a:hover{background:var(--blue-tint);color:var(--blue-dk);}
.sfc-navlinks a.is-active{color:var(--blue-dk);background:var(--blue-tint);}

/* Shapes dropdown */
.sfc-drop{position:relative;}
.sfc-drop>button{
  border:0;background:none;cursor:pointer;font:inherit;
  padding:8px 13px;border-radius:8px;color:var(--ink-soft);font-weight:500;
  display:flex;align-items:center;gap:6px;transition:.16s;
}
.sfc-drop>button:hover,.sfc-drop.open>button{background:var(--blue-tint);color:var(--blue-dk);}
.sfc-drop>button .chev{transition:transform .2s;font-size:.7rem;}
.sfc-drop.open>button .chev{transform:rotate(180deg);}
.sfc-menu{
  position:absolute;top:calc(100% + 10px);right:0;
  width:min(720px,92vw);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:14px;
  display:none;grid-template-columns:repeat(4,1fr);gap:4px;
  max-height:78vh;overflow-y:auto;
}
.sfc-drop.open .sfc-menu{display:grid;animation:fade .18s ease;}
@keyframes fade{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:none;}}
.sfc-menu a{
  padding:8px 11px;border-radius:8px;color:var(--ink-soft);font-size:.9rem;font-weight:500;
  display:flex;align-items:center;gap:8px;
}
.sfc-menu a:hover{background:var(--paper-2);color:var(--blue-dk);}
.sfc-menu a .dot{width:6px;height:6px;border-radius:50%;background:var(--blue);flex:none;opacity:.55;}
.sfc-menu .col-head{grid-column:1/-1;font-family:var(--font-mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);
  padding:8px 11px 4px;}

.sfc-burger{display:none;border:1px solid var(--line);background:var(--paper);
  width:42px;height:38px;border-radius:9px;cursor:pointer;font-size:1.1rem;color:var(--ink);}

@media(max-width:860px){
  .sfc-navlinks{
    position:fixed;inset:62px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:12px 18px 18px;gap:2px;box-shadow:var(--shadow);
    display:none;
  }
  .sfc-navlinks.open{display:flex;}
  .sfc-burger{display:block;margin-left:auto;}
  .sfc-drop>button{width:100%;justify-content:space-between;}
  .sfc-menu{position:static;width:auto;display:grid !important;grid-template-columns:repeat(2,1fr);
    box-shadow:none;border:0;padding:6px 0 2px;background:transparent;
    max-height:0;overflow:hidden;transition:max-height .25s;}
  .sfc-drop:not(.open) .sfc-menu{display:grid !important;}
  .sfc-drop.open .sfc-menu{max-height:600px;}
  .sfc-menu .col-head{display:none;}
}

/* =========================================================================
   HERO
   ========================================================================= */
.sfc-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(1200px 500px at 80% -10%,var(--blue-tint),transparent 60%),
    var(--paper-2);
  border-bottom:1px solid var(--line);
}
.sfc-hero .sfc-container{padding-top:54px;padding-bottom:54px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;}
.sfc-eyebrow{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:14px;
  display:flex;align-items:center;gap:9px;}
.sfc-eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);display:inline-block;}
.sfc-hero h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:700;letter-spacing:-.02em;margin:0 0 16px;}
.sfc-hero h1 em{font-style:italic;color:var(--blue);}
.sfc-hero p.lede{font-size:1.08rem;color:var(--ink-soft);margin:0 0 26px;max-width:46ch;}
.sfc-cta{display:flex;flex-wrap:wrap;gap:12px;}
.sfc-btn{
  display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:10px;
  font-weight:600;font-size:.96rem;transition:.18s;border:1px solid transparent;cursor:pointer;
}
.sfc-btn-primary{background:var(--blue);color:#fff;box-shadow:0 6px 18px rgba(29,111,224,.30);}
.sfc-btn-primary:hover{background:var(--blue-dk);color:#fff;transform:translateY(-1px);}
.sfc-btn-ghost{background:var(--paper);color:var(--ink);border-color:var(--line);}
.sfc-btn-ghost:hover{border-color:var(--blue);color:var(--blue-dk);}

/* decorative ruler card in hero */
.sfc-hero-art{position:relative;}
.ruler-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:26px;position:relative;
}
.ruler-card::before{content:"";position:absolute;inset:0;border-radius:var(--radius);
  background:linear-gradient(transparent 95%,var(--grid) 95%),
            linear-gradient(90deg,transparent 95%,var(--grid) 95%);
  background-size:18px 18px;pointer-events:none;}
.ruler-dim{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-mono);font-size:.8rem;color:var(--ink-faint);margin-bottom:8px;}
.ruler-box{height:118px;border:2px dashed var(--blue);border-radius:8px;
  background:var(--blue-tint);display:grid;place-items:center;position:relative;}
.ruler-box .val{font-family:var(--font-display);font-weight:700;font-size:1.9rem;color:var(--blue-dk);}
.ruler-box .val small{display:block;font-family:var(--font-mono);font-weight:500;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--blue);text-align:center;}
.ruler-tags{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap;}
.ruler-tags span{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-soft);
  background:var(--paper-2);border:1px solid var(--line);border-radius:20px;padding:4px 11px;}

@media(max-width:860px){
  .sfc-hero .sfc-container{grid-template-columns:1fr;gap:30px;padding-top:38px;padding-bottom:38px;}
  .sfc-hero-art{order:-1;}
}

/* =========================================================================
   SECTION HEADINGS
   ========================================================================= */
.sfc-sec{padding:48px 0;}
.sfc-sec-head{text-align:center;max-width:62ch;margin:0 auto 34px;}
.sfc-sec-head .kick{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--blue);font-weight:600;margin-bottom:10px;}
.sfc-sec-head h2{font-size:clamp(1.6rem,3vw,2.1rem);margin:0 0 10px;letter-spacing:-.01em;}
.sfc-sec-head p{color:var(--ink-soft);margin:0;}

/* =========================================================================
   SHAPE PICKER GRID (home)
   ========================================================================= */
.shape-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:14px;}
.shape-card{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:18px 16px;display:flex;flex-direction:column;gap:10px;
  transition:.18s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.shape-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:.22s;}
.shape-card:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px);}
.shape-card:hover::after{transform:scaleX(1);}
.shape-card .ico{width:46px;height:46px;border-radius:10px;background:var(--blue-tint);
  display:grid;place-items:center;color:var(--blue-dk);}
.shape-card .ico svg{width:26px;height:26px;}
.shape-card .nm{font-family:var(--font-display);font-weight:600;font-size:1.02rem;color:var(--ink);}
.shape-card .fm{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);}

/* =========================================================================
   CALCULATOR CARD  (preserves original IDs/handlers inside)
   ========================================================================= */
.calc-wrap{
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.calc-top{display:flex;align-items:center;gap:14px;padding:20px 24px;
  border-bottom:1px solid var(--line-soft);background:linear-gradient(var(--paper),var(--paper-2));}
.calc-top .badge{width:42px;height:42px;border-radius:10px;flex:none;background:var(--blue-tint);
  display:grid;place-items:center;color:var(--blue-dk);}
.calc-top .badge svg{width:24px;height:24px;}
.calc-top h2,.calc-top .calc-title{font-size:1.25rem;margin:0;font-weight:600;}
.calc-top .calc-sub{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);
  letter-spacing:.04em;}
.calc-body{display:grid;grid-template-columns:1fr .8fr;gap:28px;padding:24px;}
@media(max-width:760px){.calc-body{grid-template-columns:1fr;}}

/* the original markup uses <table> for inputs; we style those generically */
.calc-fields table{width:100%;border-collapse:separate;border-spacing:0 12px;}
.calc-fields td{vertical-align:bottom;}
.calc-fields label{display:block;font-weight:500;color:var(--ink-soft);font-size:.9rem;}
.calc-fields input[type=number],
.calc-fields input[type=text]{
  width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);
  border-radius:9px;font:inherit;font-size:1rem;color:var(--ink);background:var(--paper-2);
  transition:.15s;line-height:1.4;box-sizing:border-box;
}
.calc-fields input:focus{outline:none;border-color:var(--blue);background:#fff;
  box-shadow:0 0 0 3px var(--blue-tint);}
.calc-fields select,
.calc-fields .select-feet,.calc-fields .feet{
  width:100%;margin-top:6px;padding:11px 12px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:1rem;color:var(--ink);background:var(--paper);cursor:pointer;
  height:auto;line-height:1.4;box-sizing:border-box;
}
.calc-fields select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-tint);}
.calc-fields td.price32,.calc-fields td.price33,.calc-fields td.price34,.calc-fields td.price35{
  padding-right:10px;}

.button-container{display:flex;gap:12px;margin-top:18px;}
.calculate-btn1,.calculate-btn,.calculate-btn2,.calculate-btn3,
button[class*="calculate-btn"]{
  flex:1;background:var(--blue);color:#fff;border:0;border-radius:10px;
  padding:13px 18px;font:inherit;font-weight:600;font-size:1rem;cursor:pointer;
  transition:.16s;box-shadow:0 6px 16px rgba(29,111,224,.28);
}
.calculate-btn1:hover,button[class*="calculate-btn"]:hover{background:var(--blue-dk);transform:translateY(-1px);}
.clear-btn{
  background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:10px;padding:13px 20px;font:inherit;font-weight:600;cursor:pointer;transition:.16s;
}
.clear-btn:hover{border-color:var(--ink-faint);color:var(--ink);}

/* result box — hidden until JS sets display:block after a calculation */
.result-box{display:none;}
.result-box{
  background:linear-gradient(135deg,#fffaf0,#fff);
  border:1px solid #f3d999;border-radius:var(--radius-sm);
  padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow-sm);
}
.result-box #resultRec,.result-box [id^=result]{font-family:var(--font-display);
  font-size:1.15rem;color:var(--ink);font-weight:600;}
.result-box .amber-key{color:var(--amber);}
/* error / impossible-input message — red */
.result-box [id^=result].error,
[id^=result].error{
  color:#c0392b !important;font-weight:600;
  font-family:var(--font-body);font-size:1rem;line-height:1.5;
}
#unitOptionsRec button,[id^=unitOptions] button{
  margin-top:10px;background:none;border:1px dashed var(--blue);color:var(--blue-dk);
  border-radius:8px;padding:7px 13px;font:inherit;font-size:.85rem;cursor:pointer;font-weight:500;
}
#unitOptionsRec button:hover,[id^=unitOptions] button:hover{background:var(--blue-tint);}
.first-table-result{width:100%;margin-top:10px;border-collapse:collapse;font-size:.9rem;}
.first-table-result th{background:var(--blue-tint);color:var(--blue-dk);text-align:left;
  padding:8px 12px;font-family:var(--font-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;border:1px solid var(--line);}
.first-table-result td{padding:8px 12px;border:1px solid var(--line-soft);color:var(--ink-soft);}
.first-table-result tr:nth-child(even) td{background:var(--paper-2);}

/* shape illustration column */
.calc-figure{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;background:var(--paper-2);border:1px solid var(--line-soft);border-radius:var(--radius-sm);
  padding:22px;text-align:center;}
.calc-figure img{max-width:100%;height:auto;max-height:230px;
  filter:drop-shadow(0 8px 18px rgba(15,37,64,.10));}
.calc-figure .cap{font-family:var(--font-mono);font-size:.74rem;color:var(--ink-faint);}

/* =========================================================================
   ARTICLE / PROSE
   ========================================================================= */
.sfc-article{max-width:820px;margin:0 auto;}
.sfc-article .about-circle{margin-bottom:30px;}
.sfc-article h2{font-size:1.7rem;margin:36px 0 14px;letter-spacing:-.01em;}
.sfc-article h3{font-size:1.32rem;margin:30px 0 12px;color:var(--ink);}
.sfc-article h4{font-size:1.06rem;margin:22px 0 10px;color:var(--blue-dk);
  font-family:var(--font-body);font-weight:700;}
.sfc-article p{color:var(--ink-soft);margin:0 0 15px;}
.sfc-article strong{color:var(--ink);font-weight:600;}
.sfc-article ul,.sfc-article ol{color:var(--ink-soft);padding-left:22px;margin:0 0 16px;}
.sfc-article li{margin-bottom:8px;}
.sfc-article li::marker{color:var(--blue);}
.sfc-article a{font-weight:600;border-bottom:1px solid var(--blue-tint);}
/* pull formula lines */
.sfc-article p strong:only-child{
  display:inline-block;font-family:var(--font-mono);background:var(--blue-tint);
  color:var(--blue-dk);padding:3px 10px;border-radius:7px;font-size:.96rem;font-weight:600;
}

/* =========================================================================
   FAQ
   ========================================================================= */
.faq-list{max-width:820px;margin:8px auto 0;}
.faq-list h2{font-size:1.7rem;margin-bottom:18px;}
.faq-list dl{display:flex;flex-direction:column;gap:0;}
.faq-list dt{
  font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.04rem;
  padding:18px 0 8px;border-top:1px solid var(--line-soft);
}
.faq-list dt:first-of-type{border-top:0;}
.faq-list dd{margin:0 0 14px;color:var(--ink-soft);font-size:.96rem;}

/* =========================================================================
   FOOTER
   ========================================================================= */
.sfc-footer{background:var(--ink);color:#c5d2e6;margin-top:60px;}
.sfc-footer .sfc-container{padding-top:46px;padding-bottom:30px;}
.sfc-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:28px;}
.sfc-footer h4{color:#fff;font-family:var(--font-body);font-weight:600;font-size:.8rem;
  letter-spacing:.13em;text-transform:uppercase;margin:0 0 14px;}
.sfc-footer a{color:#aebfda;font-size:1.02rem;display:block;padding:5px 0;}
.sfc-footer a:hover{color:#fff;}
.sfc-foot-brand p{color:#90a2c4;font-size:.92rem;max-width:34ch;margin:12px 0 0;}
.sfc-foot-brand .sfc-brand{color:#fff;}
.sfc-foot-brand .sfc-brand small{color:#7f93b8;}
.sfc-foot-bottom{border-top:1px solid #1d3556;margin-top:34px;padding-top:18px;
  display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;
  font-size:.85rem;color:#7f93b8;}
@media(max-width:980px){.sfc-foot-grid{grid-template-columns:1fr 1fr 1fr;gap:24px;}}
@media(max-width:760px){.sfc-foot-grid{grid-template-columns:1fr 1fr;gap:22px;}}

/* =========================================================================
   BACK-TO-TOP (reuse original .to-top hook)
   ========================================================================= */
.to-top{
  position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:12px;
  background:var(--blue);color:#fff !important;display:grid;place-items:center;z-index:60;
  box-shadow:var(--shadow);opacity:0;pointer-events:none;transform:translateY(10px);transition:.22s;
}
.to-top.to-top-active{opacity:1;pointer-events:auto;transform:none;}
.to-top:hover{background:var(--blue-dk);}

/* misc resets for leftover legacy wrappers so they don't fight the new layout */
.main#hero{background:none !important;}
.ractangle-mid{display:none;}      /* legacy stray heading on home */
#adsterra-banner-container{min-height:0;}
hr{border:0;border-top:1px solid var(--line-soft);margin:0;}

/* =========================================================================
   MATERIAL DEPTH -> VOLUME panel (ground-area shapes only)
   ========================================================================= */
.material-panel{
  margin-top:22px;border:1px solid var(--line);border-radius:var(--radius-sm);
  background:linear-gradient(135deg,#f0f7f1,#ffffff);overflow:hidden;
}
.material-panel summary{
  list-style:none;cursor:pointer;padding:15px 18px;display:flex;align-items:center;gap:10px;
  font-family:var(--font-display);font-weight:600;color:var(--ink);font-size:1.02rem;
}
.material-panel summary::-webkit-details-marker{display:none;}
.material-panel summary .mp-ico{width:30px;height:30px;border-radius:8px;flex:none;
  background:var(--green);color:#fff;display:grid;place-items:center;}
.material-panel summary .mp-ico svg{width:17px;height:17px;}
.material-panel summary .mp-chev{margin-left:auto;transition:transform .2s;color:var(--ink-faint);}
.material-panel[open] summary .mp-chev{transform:rotate(180deg);}
.material-panel summary small{display:block;font-family:var(--font-body);font-weight:400;
  font-size:.8rem;color:var(--ink-faint);}
.material-body{padding:4px 18px 18px;}
.material-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;align-items:end;}
@media(max-width:560px){.material-fields{grid-template-columns:1fr;}}
.material-fields label{display:block;font-weight:500;color:var(--ink-soft);font-size:.88rem;margin-bottom:5px;}
.material-fields input,.material-fields select{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:.95rem;color:var(--ink);background:#fff;
}
.material-fields input:focus,.material-fields select:focus{
  outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(21,163,107,.15);}
.depth-row{display:flex;gap:8px;}
.depth-row .depth-value{flex:2;}
.depth-row .depth-unit{flex:1.4;}
.material-go{
  margin-top:14px;background:var(--green);color:#fff;border:0;border-radius:10px;
  padding:11px 20px;font:inherit;font-weight:600;cursor:pointer;transition:.16s;
}
.material-go:hover{filter:brightness(1.06);transform:translateY(-1px);}
.material-output{display:none;margin-top:14px;}
.material-result{background:#fff;border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px;}
.mr-row{display:flex;justify-content:space-between;align-items:baseline;padding:7px 0;
  border-bottom:1px solid var(--line-soft);}
.mr-row:last-of-type{border-bottom:0;}
.mr-row span{color:var(--ink-soft);font-size:.92rem;}
.mr-row strong{font-family:var(--font-display);font-size:1.12rem;color:var(--ink);}
.material-note{font-size:.8rem;color:var(--ink-faint);margin-top:8px;font-family:var(--font-mono);}
.material-hint{color:var(--ink-soft);font-size:.92rem;padding:6px 0;}

/* =========================================================================
   EXPORT buttons (Copy / PDF) — secondary row under Calculate/Clear
   ========================================================================= */
.export-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.export-btn{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--paper);color:var(--ink-soft);border:1px solid var(--line);
  border-radius:10px;padding:10px 16px;font:inherit;font-weight:600;font-size:.9rem;
  cursor:pointer;transition:.16s;
}
.export-btn:hover{border-color:var(--blue);color:var(--blue-dk);background:var(--blue-tint);}
.export-btn svg{width:16px;height:16px;}
.export-btn.pdf:hover{border-color:var(--green);color:var(--green);background:#eef8f2;}

/* =========================================================================
   FREE TOOLS directory
   ========================================================================= */
.tool-cat{margin-bottom:36px;}
.tool-cat h2{font-size:1.4rem;margin:0 0 16px;letter-spacing:-.01em;}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;}
.tool-card{
  display:flex;flex-direction:column;gap:5px;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:16px 17px;transition:.18s;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.tool-card::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;
  background:var(--blue);transform:scaleX(0);transform-origin:left;transition:.22s;}
.tool-card:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px);}
.tool-card:hover::after{transform:scaleX(1);}
.tool-name{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink);}
.tool-desc{font-size:.9rem;color:var(--ink-soft);line-height:1.5;}
.tool-host{font-family:var(--font-mono);font-size:.78rem;font-weight:700;color:var(--blue-dk);margin-top:2px;}

/* =========================================================================
   FORMULA display box (on calculator cards)
   ========================================================================= */
.formula-box{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 4px;padding:14px 18px;
  background:var(--blue-tint);border:1px solid var(--line);border-radius:var(--radius-sm);
}
.formula-box .fb-label{
  font-family:var(--font-body);font-weight:600;font-size:.7rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--blue-dk);flex:none;
}
.formula-box code{
  font-family:var(--font-mono),monospace;font-size:1rem;font-weight:600;color:var(--ink);
  background:none;padding:0;letter-spacing:.01em;
}
@media(max-width:560px){.formula-box code{font-size:.88rem;}}

/* =========================================================================
   ADSTERRA BANNER placeholder (after nav, above all content)
   ========================================================================= */
.ad-banner{
  display:flex;justify-content:center;align-items:center;
  width:100%;background:var(--paper-2);border-bottom:1px solid var(--line);
  padding:8px 12px;min-height:66px;box-sizing:border-box;
}
.ad-banner-inner{display:none;justify-content:center;align-items:center;}
/* desktop leaderboard 728x90 */
.ad-banner-inner.desktop{width:728px;height:90px;}
/* mobile 320x50 */
.ad-banner-inner.mobile{width:320px;height:50px;}
@media(min-width:729px){
  .ad-banner-inner.desktop{display:flex;}
  .ad-banner{min-height:106px;}
}
@media(max-width:728px){
  .ad-banner-inner.mobile{display:flex;}
  .ad-banner{min-height:66px;}
}
/* graceful empty state: faint label so an unfilled slot isn't a jarring blank box */
.ad-banner-inner:empty::before{
  content:"Advertisement";
  font-family:var(--font-mono),monospace;font-size:.62rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ink-faint);opacity:.5;
}

/* =========================================================================
   INPUT LIMITS page — constraint cards
   ========================================================================= */
.limit-card{
  background:var(--paper-2);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:var(--radius-sm);padding:16px 18px;margin:14px 0;
}
.limit-card h3{margin:0 0 10px;font-size:1.1rem;}
.limit-card h3 a{color:var(--blue-dk);}
.limit-card p{margin:6px 0;font-size:.95rem;line-height:1.55;}
.limit-card .limit-msg{
  margin-top:12px;padding:10px 12px;background:#fbeae8;border-radius:8px;border:1px solid #f1c9c4;
}
.limit-card .limit-msg-label{font-size:.78rem;font-weight:600;color:#7a342c;text-transform:uppercase;letter-spacing:.06em;display:block;margin-bottom:3px;}
.limit-card .limit-msg-text{color:#c0392b;font-weight:600;font-family:var(--font-mono),monospace;font-size:.9rem;}
.limit-valid-list{columns:2;column-gap:32px;margin:10px 0;padding-left:20px;}
.limit-valid-list li{margin:4px 0;font-size:.95rem;break-inside:avoid;}
@media(max-width:560px){.limit-valid-list{columns:1;}}