/* TerraTakeoff website */
@font-face{font-family:"Barlow"; font-weight:400; font-style:normal; font-display:swap; src:url(fonts/barlow-latin-400-normal.woff2) format("woff2");}
@font-face{font-family:"Barlow"; font-weight:500; font-style:normal; font-display:swap; src:url(fonts/barlow-latin-500-normal.woff2) format("woff2");}
@font-face{font-family:"Barlow"; font-weight:600; font-style:normal; font-display:swap; src:url(fonts/barlow-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Barlow Condensed"; font-weight:600; font-style:normal; font-display:swap; src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2");}
@font-face{font-family:"Barlow Condensed"; font-weight:700; font-style:normal; font-display:swap; src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2");}

:root{
  --paper:#f4f7f3;      /* page */
  --sheet:#ffffff;      /* drawing sheet, panels */
  --ink:#1a2a21;        /* plan ink */
  --ink2:#4b5a51;       /* secondary text */
  --rule:#d9e1da;       /* hairlines */
  --grid:#e7ede8;       /* plan grid */
  --plan:#a1aca4;       /* linework */
  --brand:#1f8a4c;      /* buttons, links */
  --brand-dk:#176b3a;
  --lawn:#2fae3f; --edge:#0a8fd0; --count:#e6479a; --mulch:#8a6a4b;
  --wrap:1120px;
  --r:10px;
}
*{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{margin:0; background:var(--paper); color:var(--ink);
  font:400 18px/1.55 "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;}
img,svg{display:block; max-width:100%;}
a{color:var(--brand);}
a:hover{color:var(--brand-dk);}
:focus-visible{outline:3px solid var(--edge); outline-offset:2px; border-radius:4px;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
h1,h2,h3{font-family:"Barlow Condensed", "Barlow", sans-serif; font-weight:700; line-height:1.02; margin:0; letter-spacing:-.005em;}
h1{font-size:clamp(44px, 6.4vw, 78px);}
h2{font-size:clamp(34px, 4.2vw, 50px); margin-bottom:28px;}
h3{font-size:24px; font-weight:600; line-height:1.15;}
p{margin:0 0 16px;}

/* ---------- header ---------- */
.top{position:sticky; top:0; z-index:20; background:rgba(244,247,243,.92); backdrop-filter:saturate(1.4) blur(8px);
  -webkit-backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--rule);}
.top .wrap{display:flex; align-items:center; gap:22px; height:64px;}
.logo{display:flex; align-items:center; gap:9px; text-decoration:none; color:var(--ink); margin-right:auto;}
.logo img{width:30px; height:30px; border-radius:8px;}
.logo b{font:700 21px/1 "Barlow Condensed", sans-serif; letter-spacing:.02em;}
.logo b i{font-style:normal; color:var(--brand);}
.nav{display:flex; align-items:center; gap:22px; font-weight:500; font-size:16px;}
.nav a{color:var(--ink); text-decoration:none;}
.nav a:hover{color:var(--brand);}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--brand); color:#fff !important;
  text-decoration:none; font:600 17px/1 "Barlow", sans-serif; padding:15px 22px; border-radius:var(--r); border:0; cursor:pointer;
  transition:background .15s;}
.btn:hover{background:var(--brand-dk);}
.btn.sm{font-size:15px; padding:10px 15px;}
.lang{font-size:15px;}

/* ---------- hero ---------- */
.hero{padding:56px 0 64px;}
.hero .wrap{display:grid; grid-template-columns:minmax(0, 5fr) minmax(0, 6fr); gap:56px; align-items:center;}
.hero h1{margin-bottom:22px; max-width:11ch;}
.hero .lead{font-size:20px; color:var(--ink2); max-width:34em; margin-bottom:28px;}
.hero .fine{font-size:15px; color:var(--ink2); margin:14px 0 0;}
.hero .fine a{font-weight:600;}
.hero .made{display:flex; align-items:center; gap:9px; margin:12px 0 0; font-size:15px; font-weight:600; color:var(--ink2);}
.flag{width:21px; height:11px; flex:none; border-radius:2px; box-shadow:0 0 0 1px rgba(26,42,33,.12);}

/* the drawing sheet */
.sheet{position:relative; background:var(--sheet); border:1px solid var(--rule); border-radius:6px;
  box-shadow:0 1px 0 var(--rule), 0 24px 48px -28px rgba(26,42,33,.35);}
.sheet svg{width:100%; height:auto; touch-action:none; user-select:none; -webkit-user-select:none;}
.sheet .cap{display:flex; justify-content:space-between; gap:12px; padding:9px 14px; border-top:1px solid var(--rule);
  font-size:14px; color:var(--ink2);}
.sheet .cap b{color:var(--ink); font-weight:600;}
.vtx{cursor:grab;}
.vtx:active{cursor:grabbing;}
.vtx:focus{outline:none;}
.vtx:focus-visible circle.ring{stroke:var(--edge); stroke-width:3;}
.chip text{font:600 13px "Barlow", sans-serif; fill:var(--ink); font-variant-numeric:tabular-nums;}
.plabel{font:500 11px "Barlow", sans-serif; fill:#7d8a82;}

/* title block under the drawing: the takeoff for this plan */
.tblock{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); border-top:2px solid var(--ink);}
.tblock > div{padding:10px 14px 12px; border-left:1px solid var(--rule); min-width:0;}
.tblock > div:first-child{border-left:0;}
.tblock .tl{display:flex; align-items:flex-start; gap:7px; font-size:13.5px; line-height:1.25; color:var(--ink2); min-height:34px;}
.tblock .tl .sw{margin-top:3px;}
.tblock .tv{font:700 26px/1.1 "Barlow Condensed", sans-serif; font-variant-numeric:tabular-nums; margin-top:3px; white-space:nowrap;}
.tblock .tv small{font:500 14px "Barlow", sans-serif; color:var(--ink2); margin-left:3px;}
.tblock .hot{background:#eef8f0;}
.sw{width:12px; height:12px; border-radius:3px; flex:none; display:inline-block;}
.sw.line{height:4px; border-radius:2px;}
.sw.dot{border-radius:50%;}

/* ---------- sections ---------- */
section{padding:72px 0;}
.alt{background:var(--sheet); border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);}
.steps{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:40px; counter-reset:step; margin:0; padding:0; list-style:none;}
.steps li{position:relative; padding-top:62px;}
.steps li::before{counter-increment:step; content:counter(step); position:absolute; top:0; left:0;
  font:700 54px/1 "Barlow Condensed", sans-serif; color:var(--brand);}
.steps li::after{content:""; position:absolute; top:26px; left:46px; right:-28px; border-top:2px dashed var(--plan);}
.steps li:last-child::after{display:none;}
.steps h3{margin-bottom:8px;}
.steps p{color:var(--ink2); margin:0;}

.spec{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0 56px;}
.spec h3{font-size:28px; padding-bottom:12px; border-bottom:2px solid var(--ink);}
.spec ul{list-style:none; margin:0; padding:0;}
.spec li{display:grid; grid-template-columns:34px 1fr; gap:4px 12px; padding:16px 0; border-bottom:1px solid var(--rule);}
.spec li svg{width:26px; height:26px; margin-top:2px; grid-row:span 2;}
.spec li b{font-weight:600; font-size:18px;}
.spec li span{color:var(--ink2); font-size:16px; line-height:1.45;}

/* pricing, set like an estimate */
.est{background:var(--sheet); border:1px solid var(--rule); border-radius:8px; max-width:760px;}
.est table{width:100%; border-collapse:collapse; font-size:17px;}
.est th{text-align:left; font-weight:500; color:var(--ink2); font-size:14px; padding:14px 22px; border-bottom:2px solid var(--ink);}
.est th:last-child, .est td:last-child{text-align:right;}
.est td{padding:20px 22px; border-bottom:1px solid var(--rule); vertical-align:top;}
.est td b{font-weight:600; font-size:19px;}
.est td small{display:block; color:var(--ink2); font-size:15px; margin-top:2px;}
.est .amt{font:700 34px/1 "Barlow Condensed", sans-serif; font-variant-numeric:tabular-nums; white-space:nowrap;}
.est .amt small{display:inline; font:500 16px "Barlow", sans-serif; color:var(--ink2);}
.est tfoot td{border-bottom:0; color:var(--ink2); font-size:15px; text-align:left !important;}
.est .save{display:inline-block; background:#e5f4e9; color:var(--brand-dk); font-weight:600; font-size:14px; padding:2px 8px;
  border-radius:6px; margin-left:8px; vertical-align:2px;}
.priceCta{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px;}
.priceCta p{margin:0; color:var(--ink2); font-size:15px;}
.vs{margin-top:18px; color:var(--ink2); font-size:16px;}

/* questions */
.faq{max-width:780px;}
.faq details{border-bottom:1px solid var(--rule);}
.faq summary{cursor:pointer; list-style:none; padding:18px 36px 18px 0; position:relative; font-weight:600; font-size:19px;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+"; position:absolute; right:4px; top:12px; font:400 28px/1 "Barlow", sans-serif; color:var(--brand);}
.faq details[open] summary::after{content:"−";}
.faq details p{color:var(--ink2); margin:-4px 0 20px; max-width:62ch;}

.end{text-align:left;}
.end .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;}
.end h2{margin:0; max-width:18ch;}

/* ---------- footer ---------- */
footer{padding:36px 0 48px; font-size:15px; color:var(--ink2); border-top:1px solid var(--rule);}
footer .wrap{display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center;}
footer .made{display:inline-flex; align-items:center; gap:8px; margin-right:auto;}
footer a{color:var(--ink2);}
footer a:hover{color:var(--brand);}

/* ---------- legal pages ---------- */
.doc{max-width:760px; padding:48px 24px 72px; margin:0 auto;}
.doc h1{font-size:clamp(40px, 5vw, 56px); margin-bottom:8px;}
.doc .upd{color:var(--ink2); font-size:15px; margin-bottom:32px;}
.doc h2{font-size:28px; margin:36px 0 10px;}
.doc p, .doc li{font-size:17px; line-height:1.6;}
.doc ul{padding-left:22px; margin:0 0 16px;}
.doc li{margin-bottom:6px;}
.doc .note{background:var(--sheet); border:1px solid var(--rule); border-radius:8px; padding:14px 18px; font-size:16px; color:var(--ink2);}
.unset{background:#fff3c4; color:#6b4e00; padding:0 4px; border-radius:3px;}

/* ---------- small screens ---------- */
@media (max-width:960px){
  .hero .wrap{grid-template-columns:minmax(0, 1fr); gap:40px;}
  .hero h1{max-width:14ch;}
  .steps{grid-template-columns:minmax(0, 1fr); gap:30px;}
  .steps li::after{display:none;}
  .spec{grid-template-columns:minmax(0, 1fr); gap:40px;}
}
@media (max-width:640px){
  body{font-size:17px;}
  .wrap{padding:0 16px;}
  .top .wrap{gap:14px; height:58px;}
  .nav{gap:14px;}
  .nav .hide-sm{display:none;}
  .logo b{font-size:19px;}
  .hero{padding:32px 0 48px;}
  .hero .lead{font-size:18px;}
  section{padding:52px 0;}
  .est th, .est td{padding:14px 14px;}
  .est .amt{font-size:28px;}
  .sheet .cap{flex-direction:column; gap:2px;}
  .tblock{grid-template-columns:repeat(2, minmax(0, 1fr));}
  .tblock > div:nth-child(3){border-left:0;}
  .tblock > div:nth-child(n+3){border-top:1px solid var(--rule);}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important;} }