/*
Theme Name: Rental Tab (Blocks)
Theme URI: https://rentaltab.com
Author: WB Capital LLC
Author URI: https://rentaltab.com
Description: Block theme for Rental Tab. Layout and copy are edited in the block editor and Site Editor; price, release and maintenance settings live in Settings > Rental Tab.
Version: 2.0.7
Requires at least: 6.5
Requires PHP: 7.4
License: Proprietary
Text Domain: rentaltab
*/

/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#12161b;
  --ink-2:#39434d;
  --muted:#6a757f;
  --paper:#fbfaf7;
  --paper-2:#f4f1ea;
  --card:#ffffff;
  --line:#e6e2d9;
  --line-2:#d6d0c3;

  --green:#4f6552;
  --green-d:#3f5242;
  --green-l:#ecefeb;
  --green-bright:#a9c0ac;
  --green-soft:#9db6a1;
  --green-deep:#2b3a2e;
  --amber:#a96c11;
  --amber-l:#faf1df;
  --red:#9d3229;
  --red-l:#fbeceb;

  --radius:10px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(18,22,27,.06), 0 1px 3px rgba(18,22,27,.05);
  --shadow:0 2px 4px rgba(18,22,27,.04), 0 8px 24px rgba(18,22,27,.07);
  --shadow-lg:0 4px 8px rgba(18,22,27,.04), 0 24px 56px rgba(18,22,27,.12);

  --serif:"Fraunces", ui-serif, Georgia, "Times New Roman", serif;
  --sans:"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono:ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap:1120px;
  --wrap-narrow:760px;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}

/* Anything the nav jumps to must clear the sticky header, or the section
   heading lands behind it. 66px of header plus a little breathing room. */
[id]{scroll-margin-top:calc(66px + var(--rt-sticky-top, 0px) + 18px);}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;height:auto;display:block;}
a{color:var(--green-d);text-decoration:none;}
a:hover{text-decoration:underline;}
h1,h2,h3,h4{margin:0 0 .5em;line-height:1.15;letter-spacing:-.02em;font-weight:600;}
h1{font-family:var(--serif);font-size:clamp(2.4rem,5.2vw,3.9rem);font-weight:600;letter-spacing:-.03em;line-height:1.05;}
h2{font-family:var(--serif);font-size:clamp(1.85rem,3.6vw,2.7rem);font-weight:600;letter-spacing:-.025em;line-height:1.12;}
h3{font-size:1.16rem;font-weight:650;letter-spacing:-.01em;line-height:1.3;}
p{margin:0 0 1.1em;}
ul,ol{margin:0 0 1.1em;padding-left:1.25em;}
li{margin-bottom:.4em;}
hr{border:0;border-top:1px solid var(--line);margin:0;}
code,kbd{font-family:var(--mono);font-size:.88em;}
:focus-visible{outline:2px solid var(--green);outline-offset:3px;border-radius:4px;}
::selection{background:var(--green-l);}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
.wrap-narrow{max-width:var(--wrap-narrow);margin:0 auto;padding:0 24px;}
.section{padding:92px 0;}
.section-sm{padding:64px 0;}
.section--paper2{background:var(--paper-2);}
.section--ink{background:var(--ink);color:#eef0f2;}
.section--ink h2{color:#fff;}
.section--ink a{color:var(--green-bright);}
.center{text-align:center;}
.lede{font-size:1.2rem;color:var(--ink-2);line-height:1.6;}
.muted{color:var(--muted);}
.small{font-size:.9rem;}
.tiny{font-size:.8rem;line-height:1.55;}
.mb0{margin-bottom:0;}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;
  padding:10px 16px;z-index:999;border-radius:0 0 var(--radius) 0;
}
.skip-link:focus{left:0;}

/* ============================================================
   EYEBROW / SECTION HEADS
   ============================================================ */
.eyebrow{
  font-size:.74rem;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  color:var(--green-d);margin:0 0 14px;
}
.section--ink .eyebrow{color:var(--green-soft);}
.section-head{max-width:660px;margin-bottom:52px;}
.section-head.center{margin-left:auto;margin-right:auto;}
.section-head p:last-child{margin-bottom:0;}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--sans);font-size:1rem;font-weight:600;letter-spacing:-.01em;
  padding:14px 26px;border-radius:var(--radius);border:1px solid transparent;
  cursor:pointer;transition:background .15s ease,border-color .15s ease,transform .08s ease,box-shadow .15s ease;
  text-decoration:none;line-height:1.2;
}
.btn:hover{text-decoration:none;}
.btn:active{transform:translateY(1px);}
.btn--primary{background:var(--green);color:#fff;box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--green-d);color:#fff;}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-2);}
.btn--ghost:hover{background:#fff;border-color:var(--ink-2);color:var(--ink);}
.btn--onink{background:#fff;color:var(--ink);}
.btn--onink:hover{background:#e9ecef;color:var(--ink);}
.btn--sm{padding:9px 17px;font-size:.9rem;}
.btn--lg{padding:17px 34px;font-size:1.06rem;}
.btn--block{display:flex;width:100%;}
.btn[disabled],.btn.is-busy{opacity:.6;pointer-events:none;}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;align-items:center;}
.btn-row.center{justify-content:center;}

/* ============================================================
   HEADER
   ============================================================ */
/* Sticky header offset.
   The WordPress admin bar is position:fixed at the top of the viewport for
   logged-in users, so a header stuck to top:0 sits *underneath* it and loses
   its top edge. Push it down by the admin bar's height when it is present.
   Below 600px WordPress makes the admin bar position:absolute, so it scrolls
   away and no offset is wanted. Visitors never see any of this. */
:root{ --rt-sticky-top:0px; }
body.admin-bar{ --rt-sticky-top:32px; }
@media screen and (max-width:782px){ body.admin-bar{ --rt-sticky-top:46px; } }
@media screen and (max-width:600px){ body.admin-bar{ --rt-sticky-top:0px; } }

.site-header{
  position:sticky;top:var(--rt-sticky-top);z-index:100;
  background:rgba(251,250,247,.9);
  backdrop-filter:saturate(180%) blur(12px);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-header__inner{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:66px;max-width:var(--wrap);margin:0 auto;padding:0 24px;
}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--ink);font-weight:650;font-size:1.09rem;letter-spacing:-.02em;}
.brand:hover{text-decoration:none;color:var(--ink);}
.brand__mark{flex:0 0 auto;}
.brand__name{font-family:var(--serif);font-size:1.22rem;font-weight:600;letter-spacing:-.025em;}

.nav{display:flex;align-items:center;gap:6px;}
.nav a:not(.btn){
  color:var(--ink-2);font-size:.94rem;font-weight:500;padding:8px 12px;border-radius:7px;
}
.nav a:not(.btn):hover{color:var(--ink);background:var(--paper-2);text-decoration:none;}
.nav .btn{margin-left:8px;}

.nav-toggle{
  display:none;background:none;border:1px solid var(--line-2);border-radius:8px;
  padding:8px 10px;cursor:pointer;color:var(--ink);
}
@media (max-width:880px){
  .nav-toggle{display:inline-flex;align-items:center;}
  .nav{
    display:none;position:absolute;top:66px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:2px;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:14px 24px 22px;box-shadow:var(--shadow);
  }
  .nav.is-open{display:flex;}
  .nav a:not(.btn){padding:11px 12px;font-size:1rem;}
  .nav .btn{margin:8px 0 0;justify-content:center;}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:84px 0 72px;position:relative;overflow:hidden;}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 380px at 78% -8%, rgba(79,101,82,.11), transparent 62%),
    radial-gradient(560px 300px at 8% 8%, rgba(169,108,17,.05), transparent 60%);
}
.hero > *{position:relative;}
.hero__inner{max-width:820px;}
.hero h1{margin-bottom:22px;}
.hero h1 em{font-style:normal;color:var(--green-d);}
.hero__lede{font-size:clamp(1.1rem,2vw,1.34rem);color:var(--ink-2);max-width:640px;margin-bottom:32px;line-height:1.55;}
.hero .btn-row{margin-bottom:22px;}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center;
  font-size:.88rem;color:var(--muted);
}
.hero__meta span{display:inline-flex;align-items:center;gap:7px;}
.hero__meta svg{flex:0 0 auto;color:var(--green);}

.pill{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--green-l);color:var(--green-d);
  border:1px solid rgba(79,101,82,.22);
  padding:6px 14px 6px 11px;border-radius:999px;
  font-size:.82rem;font-weight:600;letter-spacing:-.005em;margin-bottom:26px;
}
.pill__dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:0 0 auto;}

/* App window mock */
.appshot{
  margin-top:56px;border-radius:var(--radius-lg);overflow:hidden;
  border:1px solid var(--line-2);background:var(--card);box-shadow:var(--shadow-lg);
}
.appshot__bar{
  display:flex;align-items:center;gap:8px;padding:11px 15px;
  background:var(--paper-2);border-bottom:1px solid var(--line);
}
.appshot__dots{display:flex;gap:6px;}
.appshot__dots i{width:11px;height:11px;border-radius:50%;background:var(--line-2);display:block;}
.appshot__title{font-size:.82rem;color:var(--muted);font-weight:550;margin-left:6px;}
.appshot__body{padding:0;}
.appshot__placeholder{
  aspect-ratio:16/9;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;background:
    linear-gradient(var(--paper) 0 0) padding-box,
    repeating-linear-gradient(180deg, transparent 0 27px, rgba(79,101,82,.055) 27px 28px);
  color:var(--muted);text-align:center;padding:24px;
}
.appshot__placeholder strong{color:var(--ink-2);font-size:.98rem;font-weight:600;}

/* Demo video */
.rt-video{display:block;width:100%;aspect-ratio:16/9;background:#0d1116;object-fit:cover;}
.rt-embed{
  position:relative;aspect-ratio:16/9;width:100%;cursor:pointer;
  background:#0d1116 center/cover no-repeat;
  display:flex;align-items:center;justify-content:center;
}
.rt-embed::after{
  content:"";position:absolute;inset:0;background:rgba(13,17,22,.28);
  transition:background .2s ease;pointer-events:none;
}
.rt-embed:hover::after{background:rgba(13,17,22,.14);}
.rt-embed.is-playing::after{display:none;}
.rt-embed__play{
  position:relative;z-index:1;width:78px;height:78px;border-radius:50%;
  background:rgba(255,255,255,.95);color:var(--green-d);border:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding-left:4px;
  box-shadow:0 8px 30px rgba(0,0,0,.34);transition:transform .16s ease,background .16s ease;
}
.rt-embed:hover .rt-embed__play{transform:scale(1.07);background:#fff;}
.rt-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ============================================================
   PILLARS
   ============================================================ */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;}
.pillar{background:var(--card);padding:34px 30px;}
.pillar__num{
  font-family:var(--serif);font-size:.92rem;font-weight:600;color:var(--green);
  display:block;margin-bottom:16px;letter-spacing:.02em;
}
.pillar h3{margin-bottom:9px;font-size:1.1rem;}
.pillar p{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.6;}

/* ============================================================
   FEATURE GRID
   ============================================================ */
.grid{display:grid;gap:26px;}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(310px,1fr));}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(268px,1fr));}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(214px,1fr));}

.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:28px 26px;box-shadow:var(--shadow-sm);
}
.card h3{margin-bottom:8px;}
.card p:last-child{margin-bottom:0;}
.card p{font-size:.95rem;color:var(--ink-2);}
.card__icon{
  width:38px;height:38px;border-radius:9px;background:var(--green-l);color:var(--green-d);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px;
}

.feature-list{list-style:none;padding:0;margin:0;column-gap:44px;}
.feature-list li{
  display:flex;gap:11px;align-items:flex-start;margin-bottom:13px;
  font-size:.96rem;color:var(--ink-2);break-inside:avoid;
}
.feature-list svg{flex:0 0 auto;margin-top:5px;color:var(--green);}
.feature-list strong{color:var(--ink);font-weight:600;}

.feature-block{margin-bottom:38px;}
.feature-block:last-child{margin-bottom:0;}
.feature-block h3{
  font-size:.78rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  font-weight:650;margin-bottom:16px;padding-bottom:10px;border-bottom:1px solid var(--line);
}

/* ============================================================
   SPLIT (text + panel)
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:40px;}}
.split__text h2{margin-bottom:18px;}
.split__text p{color:var(--ink-2);}

.panel{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--shadow);
}
.panel--dark{background:#1a1f26;border-color:#2b323b;color:#dfe4e8;}
.panel--dark .panel__row{border-color:#2b323b;}
.panel--dark .panel__label{color:#98a4ae;}
.panel__row{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--line);font-size:.94rem;}
.panel__row:last-child{border-bottom:0;padding-bottom:0;}
.panel__row:first-child{padding-top:0;}
.panel__label{color:var(--muted);}
.panel__val{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;}

/* File-on-disk graphic */
.filecard{
  display:flex;align-items:center;gap:15px;padding:17px 19px;
  border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);
  margin-bottom:11px;
}
.filecard:last-child{margin-bottom:0;}
.filecard__icon{
  width:40px;height:46px;flex:0 0 auto;border-radius:5px;background:var(--green-l);
  border:1px solid rgba(79,101,82,.26);position:relative;
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:7px;
  font-size:.56rem;font-weight:700;color:var(--green-d);letter-spacing:.04em;
}
.filecard__name{font-weight:600;font-size:.96rem;letter-spacing:-.01em;}
.filecard__path{font-family:var(--mono);font-size:.76rem;color:var(--muted);margin-top:2px;word-break:break-all;}

/* ============================================================
   PROPERTY / PORTFOLIO SWITCHER
   ============================================================ */
.switcher__tabs{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;}
.switcher__tab{
  font-family:inherit;font-size:.86rem;font-weight:550;letter-spacing:-.005em;
  padding:8px 15px;border-radius:999px;cursor:pointer;white-space:nowrap;
  border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
/* Tighten on small phones so short labels still fit one row. */
@media (max-width:480px){
  .switcher__tabs{gap:5px;}
  .switcher__tab{padding:7px 12px;font-size:.82rem;}
}
.switcher__tab:hover{border-color:var(--ink-2);color:var(--ink);}
.switcher__tab[aria-selected="true"]{
  background:var(--green);border-color:var(--green);color:#fff;
}
.switcher__figs .panel__val{transition:opacity .14s ease;}
.switcher.is-swapping .panel__val{opacity:.3;}

/* ============================================================
   FEATURE DETAIL (the full list, collapsed)
   ============================================================ */
.feature-detail{margin-top:48px;border-top:1px solid var(--line);}
.feature-detail summary{
  cursor:pointer;list-style:none;padding:22px 0 0;text-align:center;
  font-size:.95rem;font-weight:600;color:var(--green-d);
}
.feature-detail summary::-webkit-details-marker{display:none;}
.feature-detail summary::after{content:" ↓";}
.feature-detail[open] summary::after{content:" ↑";}
.feature-detail summary:hover{text-decoration:underline;}
.feature-detail__body{padding-top:34px;}

/* ============================================================
   COMPARISON TABLE
   ============================================================ */
.compare{
  width:100%;border-collapse:separate;border-spacing:0;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
  overflow:hidden;box-shadow:var(--shadow-sm);font-size:.95rem;
}
.compare th,.compare td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top;}
.compare thead th{
  background:var(--paper-2);font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;
  color:var(--muted);font-weight:650;
}
.compare thead th.is-us{color:var(--green-d);background:var(--green-l);}
.compare tbody td.is-us{background:rgba(236,239,235,.5);font-weight:550;color:var(--ink);}
.compare tbody tr:last-child td{border-bottom:0;}
.compare td:first-child{font-weight:600;color:var(--ink);width:28%;}
.compare td.is-other{color:var(--muted);}
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
@media (max-width:700px){.compare{min-width:600px;}}

/* ============================================================
   PRICE
   ============================================================ */
.price-card{
  max-width:520px;margin:0 auto;background:var(--card);
  border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden;
}
.price-card__top{padding:40px 38px 34px;text-align:center;border-bottom:1px solid var(--line);}
.price-card__name{font-size:.8rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-weight:650;margin-bottom:18px;}
.price-card__amount{font-family:var(--serif);font-size:4rem;font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink);}
.price-card__amount sup{font-size:1.7rem;top:-1.4rem;position:relative;font-weight:600;margin-right:2px;}
.price-card__once{display:block;margin-top:12px;font-size:1rem;color:var(--ink-2);font-weight:550;}
.price-card__sub{margin:6px 0 0;font-size:.9rem;color:var(--muted);}
.price-card__body{padding:32px 38px 38px;}
.price-card .btn{margin-bottom:16px;}
.checklist{list-style:none;padding:0;margin:0 0 4px;}
.checklist li{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;color:var(--ink-2);margin-bottom:11px;}
.checklist li:last-child{margin-bottom:0;}
.checklist svg{flex:0 0 auto;margin-top:5px;color:var(--green);}
.notlist li svg{color:var(--red);}

.price-note{
  max-width:520px;margin:26px auto 0;text-align:center;font-size:.86rem;color:var(--muted);
}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:760px;margin:0 auto;border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;padding:22px 44px 22px 0;position:relative;list-style:none;
  font-weight:600;font-size:1.04rem;letter-spacing:-.012em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:8px;top:50%;width:10px;height:10px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg);}
.faq summary:hover{color:var(--green-d);}
.faq__a{padding:0 44px 24px 0;color:var(--ink-2);font-size:.98rem;}
.faq__a p:last-child{margin-bottom:0;}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta-band{background:var(--ink);color:#eef0f2;padding:82px 0;text-align:center;}
.cta-band h2{color:#fff;margin-bottom:16px;}
.cta-band p{color:#b3bcc4;max-width:520px;margin:0 auto 30px;}
.cta-band .btn--primary{background:#fff;color:var(--ink);}
.cta-band .btn--primary:hover{background:#e6eaed;color:var(--ink);}
.cta-band .btn--ghost{color:#fff;border-color:#3c454f;}
.cta-band .btn--ghost:hover{background:#232931;border-color:#586470;color:#fff;}

/* ============================================================
   DOWNLOAD PAGE
   ============================================================ */
.page-hero{padding:64px 0 40px;border-bottom:1px solid var(--line);}
.page-hero h1{font-size:clamp(2.1rem,4.2vw,3rem);margin-bottom:14px;}
.page-hero p{color:var(--ink-2);max-width:600px;margin-bottom:0;}

.release{
  background:var(--card);border:1px solid var(--line-2);border-radius:var(--radius-lg);
  box-shadow:var(--shadow);overflow:hidden;
}
.release__head{
  display:flex;flex-wrap:wrap;gap:14px 24px;align-items:baseline;justify-content:space-between;
  padding:26px 30px;border-bottom:1px solid var(--line);background:var(--paper-2);
}
.release__version{font-family:var(--serif);font-size:1.6rem;font-weight:600;letter-spacing:-.025em;margin:0;}
.release__date{font-size:.9rem;color:var(--muted);}
.release__body{padding:30px;}

.gate__label{display:block;font-weight:600;font-size:.95rem;margin-bottom:8px;}
.gate__hint{font-size:.86rem;color:var(--muted);margin:0 0 16px;}
.gate__form{display:flex;gap:11px;flex-wrap:wrap;align-items:flex-start;}
.gate__form .field{flex:1 1 320px;min-width:0;}
.input{
  width:100%;font-family:var(--mono);font-size:.95rem;
  padding:14px 15px;border:1px solid var(--line-2);border-radius:var(--radius);
  background:var(--paper);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease;
}
.input::placeholder{color:#a9b2ba;letter-spacing:.02em;}
.input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(79,101,82,.17);background:#fff;}
.input.is-error{border-color:var(--red);box-shadow:0 0 0 3px rgba(157,50,41,.11);}

.msg{
  display:none;gap:11px;align-items:flex-start;padding:15px 17px;border-radius:var(--radius);
  font-size:.94rem;margin-top:18px;line-height:1.55;
}
.msg.is-shown{display:flex;}
.msg svg{flex:0 0 auto;margin-top:3px;}
.msg--error{background:var(--red-l);color:#7a2720;border:1px solid rgba(157,50,41,.2);}
.msg--ok{background:var(--green-l);color:var(--green-d);border:1px solid rgba(79,101,82,.24);}
.msg--warn{background:var(--amber-l);color:#7d4f0c;border:1px solid rgba(169,108,17,.22);}

.unlocked{display:none;margin-top:26px;padding-top:26px;border-top:1px solid var(--line);}
.unlocked.is-shown{display:block;}

.dl-meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;margin-top:22px;
}
.dl-meta div{background:var(--paper);padding:14px 16px;}
.dl-meta dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-weight:650;margin-bottom:5px;}
.dl-meta dd{margin:0;font-size:.9rem;font-weight:550;word-break:break-all;}
.dl-meta dd.hash{font-family:var(--mono);font-size:.74rem;font-weight:400;line-height:1.5;letter-spacing:-.01em;}

.steps{counter-reset:s;list-style:none;padding:0;margin:0;}
.steps li{
  counter-increment:s;position:relative;padding-left:44px;margin-bottom:22px;
  color:var(--ink-2);font-size:.97rem;
}
.steps li:last-child{margin-bottom:0;}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:-1px;
  width:28px;height:28px;border-radius:50%;background:var(--green-l);color:var(--green-d);
  display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:650;
  font-family:var(--sans);
}
.steps strong{color:var(--ink);display:block;margin-bottom:2px;font-weight:600;}

.changelog{border-top:1px solid var(--line);}
.changelog__item{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:170px 1fr;gap:26px;}
@media (max-width:700px){.changelog__item{grid-template-columns:1fr;gap:10px;}}
.changelog__ver{font-family:var(--serif);font-size:1.14rem;font-weight:600;letter-spacing:-.02em;}
.changelog__date{font-size:.84rem;color:var(--muted);margin-top:2px;}
.changelog__body{color:var(--ink-2);font-size:.96rem;}
.changelog__body ul{margin:0;padding-left:1.15em;}
.changelog__body p:last-child,.changelog__body ul:last-child{margin-bottom:0;}

/* ============================================================
   PAGE CONTENT (generic)
   ============================================================ */
.entry-content{max-width:var(--wrap-narrow);margin:0 auto;padding:56px 24px 80px;}
.entry-content h2{margin-top:1.6em;}
.entry-content h3{margin-top:1.5em;}
.entry-content img{border-radius:var(--radius);margin:1.5em 0;}
.entry-content blockquote{
  margin:1.6em 0;padding:4px 0 4px 22px;border-left:3px solid var(--green);
  color:var(--ink-2);font-style:italic;
}
.entry-content table{width:100%;border-collapse:collapse;margin:1.5em 0;font-size:.95rem;}
.entry-content th,.entry-content td{padding:11px 14px;border:1px solid var(--line);text-align:left;}
.entry-content th{background:var(--paper-2);font-weight:650;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--paper-2);border-top:1px solid var(--line);padding:56px 0 34px;}
.site-footer__grid{
  display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;margin-bottom:40px;
}
@media (max-width:820px){.site-footer__grid{grid-template-columns:1fr 1fr;gap:32px;}}
@media (max-width:480px){.site-footer__grid{grid-template-columns:1fr;}}
.site-footer h4{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
  font-weight:650;margin-bottom:14px;
}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{margin-bottom:9px;}
.site-footer a{color:var(--ink-2);font-size:.93rem;}
.site-footer a:hover{color:var(--green-d);}
.site-footer__about p{font-size:.92rem;color:var(--muted);margin:14px 0 0;max-width:290px;line-height:1.6;}
.site-footer__bottom{
  border-top:1px solid var(--line);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between;
  font-size:.85rem;color:var(--muted);
}

/* ============================================================
   PRINT
   ============================================================ */
@media print{
  .site-header,.site-footer,.cta-band,.btn{display:none !important;}
  body{background:#fff;}
}

/* ============================================================
   BLOCK EDITOR COMPATIBILITY
   ============================================================
   Core injects its own layout classes onto every group. These rules stop that
   machinery from fighting the section CSS above. Full width sections with an
   inner .wrap is the design; core's constrained layout would clamp them to the
   content width and the page would come out narrow.
   ============================================================ */

/* Sections must span the viewport. Core's constrained layout must not clamp them. */
.wp-block-group.hero,
.wp-block-group.section,
.wp-block-group.section-sm,
.wp-block-group.cta-band,
.wp-block-group.page-hero,
.wp-block-group.site-header,
.wp-block-group.site-footer{
  max-width:none;width:100%;margin-left:0;margin-right:0;
}

/* WordPress adds .entry-content to the core/post-content block on EVERY page,
   including the front page. The narrow reading column defined under PAGE
   CONTENT above is for interior prose pages like /license/ and /privacy/, and
   it must never be allowed to clamp the block that holds the home page's
   full-bleed sections. In the classic theme .entry-content only ever appeared
   on page.php, so this collision did not exist. Two class names beats one, so
   this wins without !important.

   The narrow column still applies: page.html wraps post-content in its own
   .entry-content group, which is not a post-content block. */
.entry-content.wp-block-post-content{max-width:none;margin:0;padding:0;}

/* Core columns compatibility for the two-up sections.
   ------------------------------------------------------------------
   The design's .split is a CSS grid with align-items:center, and README rule 3
   says never build it from core/columns. The page stored in the database
   predates that rule and uses core/columns for all four splits, which brings
   three problems:

     1. .wp-block-column wrappers, so .split's children are no longer the text
        and the panel but two generic divs.
     2. display:flex from core's layout, which beats our display:grid.
     3. align-items:normal !important from core, which beats our
        align-items:center. This is the one that shows: a 439px panel sat
        top-aligned against 581px of text with dead space beneath it.

   Fighting the markup would mean rewriting content the owner has since edited
   by hand. Supporting both shapes is cheaper and safer, so .split works whether
   it is our grid or a columns block. The !important is not laziness here: core
   uses !important first and there is no other way to win. */
.split.wp-block-columns{
  align-items:center !important;
  gap:64px;
}
.split.wp-block-columns > .wp-block-column{
  flex-basis:0;flex-grow:1;min-width:0;
}
/* Our design stacks at 900px; core does not stack until 782px. Match ours. */
@media (max-width:900px){
  .split.wp-block-columns{flex-wrap:wrap;gap:40px;}
  .split.wp-block-columns > .wp-block-column{flex-basis:100% !important;}
}

/* The inner .wrap is what actually centres and limits the content. */
.wp-block-group.wrap{max-width:var(--wrap);margin-left:auto;margin-right:auto;}
.wp-block-group.wrap-narrow{max-width:var(--wrap-narrow);margin-left:auto;margin-right:auto;}

/* Our grids own their own children; core's flow spacing must not add margins
   between grid cells or the columns drift apart. */
.split.wp-block-group,
.pillars.wp-block-group,
.grid.wp-block-group,
.site-footer__grid.wp-block-group{margin-block-start:0;}
.split > *,
.site-footer__grid > *{margin-block-start:0 !important;}

/* Group children inherit a top margin from core; sections set their own rhythm. */
.wp-block-group.section-head > *:first-child,
.wp-block-group.split__text > *:first-child,
.wp-block-group.hero__inner > *:first-child{margin-block-start:0;}

/* Editor: give the canvas the same paper background so sections read correctly. */
.editor-styles-wrapper{background:var(--paper);}

/* Belt and braces: even if a container ends up using the constrained layout,
   these must span the viewport. The design is full-bleed bands of colour with
   an inner .wrap doing the centring. */
.wp-site-blocks > main > .wp-block-group,
main > .wp-block-group.hero,
main > .wp-block-group.section,
main > .wp-block-group.section-sm,
main > .wp-block-group.cta-band,
main > .wp-block-group.page-hero{
  max-width:none !important;width:auto;margin-left:0 !important;margin-right:0 !important;
}