/* iDefender inner pages. Built on base.css + home.css (tokens, .sec, .split, .h2, .h2s, .btn, .rv, .faq, .ask-bar).
   Components — compose pages from these, do not invent new ones:
     .ph          page hero: .crumb, h1, .lead, .acts; add .ph-media (a .mock or <img>) for a two-column hero
     .facts       <dl> row of key facts: <div><dt>label</dt><dd>value</dd></div>
     .ticks       <ul> two-column checklist with hairlines
     .blocks      grid of text blocks: <div><h3/><p/></div> (add .b3 for three columns)
     .cards       grid of raised cards: <article><h3/><p/><a class="lnk"/></article> (img optional, first child)
     .statement   one large sentence in display type
     .related     grid of link cards: <a href><h3/><p/></a>
     .prose       long-form text (legal pages, blog articles)
     .form        quote/contact form: <label>text<input|select|textarea></label>, .row for two fields side by side
   Sizes are written in px and converted to calc(N*var(--u)) by scale_px.py so the page grows with the screen like the home page. */

.page{padding-top:var(--nav)}
.btn-line{border:1px solid var(--ink);color:var(--ink)}.btn-line:hover{background:var(--ink);color:#fff}
[data-theme="dark"] .btn-line{border-color:#f2f5f8;color:#f2f5f8}[data-theme="dark"] .btn-line:hover{background:#f2f5f8;color:#000}
.ask-bar .btn-ghost{color:#fff}

/* page hero */
.ph{padding:clamp(calc(48*var(--u)),6vw,calc(120*var(--u))) var(--gut) clamp(calc(40*var(--u)),4.5vw,calc(88*var(--u)));display:grid;gap:clamp(calc(32*var(--u)),4vw,calc(80*var(--u)));align-items:center}
.ph:has(.ph-media){grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.crumb{display:inline-block;font-size:calc(14*var(--u));color:var(--mute);margin-bottom:calc(22*var(--u));text-decoration:none}
.crumb:hover{color:var(--ink)}
.ph h1{font:400 clamp(calc(44*var(--u)),5.2vw,calc(104*var(--u)))/1.02 var(--display);letter-spacing:-.025em;max-width:16ch}
.ph h1 em{font-style:normal;color:var(--mute)}
.ph .lead{font-size:clamp(calc(18*var(--u)),1.3vw,calc(24*var(--u)));line-height:1.45;max-width:calc(640*var(--u));margin-top:clamp(calc(20*var(--u)),2vw,calc(32*var(--u)))}
.ph .acts{display:flex;flex-wrap:wrap;gap:calc(10*var(--u));margin-top:clamp(calc(24*var(--u)),2.4vw,calc(40*var(--u)))}
.ph-media .mock{width:100%;aspect-ratio:70/52;border-radius:calc(16*var(--u));box-shadow:0 0 0 1px rgba(0,0,0,.05),0 calc(34*var(--u)) calc(80*var(--u)) rgba(30,60,90,.18)}
.ph-media .mk{--w:46}.ph-media .mk.ph{--w:20}
.ph-media img{display:block;width:100%;height:auto;border-radius:calc(24*var(--u));box-shadow:0 0 0 1px rgba(0,0,0,.05),0 calc(24*var(--u)) calc(60*var(--u)) rgba(30,60,90,.12)}

/* key facts */
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(220*var(--u)),1fr));border-top:1px solid var(--line);margin:0 var(--gut)}
.facts>div{padding:calc(22*var(--u)) calc(24*var(--u)) calc(24*var(--u)) 0;border-bottom:1px solid var(--line)}
.facts dt{font-size:calc(13*var(--u));color:var(--mute);margin-bottom:calc(8*var(--u))}
.facts dd{font:500 clamp(calc(16*var(--u)),1.05vw,calc(20*var(--u)))/1.35 var(--display)}

/* checklist */
.ticks{list-style:none;display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(calc(32*var(--u)),4vw,calc(80*var(--u)));border-top:1px solid var(--line)}
.ticks li{display:flex;gap:calc(14*var(--u));padding:calc(20*var(--u)) 0;border-bottom:1px solid var(--line);font-size:clamp(calc(16*var(--u)),1.05vw,calc(20*var(--u)));line-height:1.5}
.ticks li::before{content:"✓";color:var(--brand);font-weight:600;flex:none}
.ticks b{font-weight:600}

/* text blocks */
.blocks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(calc(36*var(--u)),3.6vw,calc(64*var(--u))) clamp(calc(32*var(--u)),4vw,calc(80*var(--u)))}
.blocks.b3{grid-template-columns:repeat(3,1fr)}
.blocks>div{border-top:1px solid var(--line);padding-top:calc(22*var(--u))}
.blocks h3,.cards h3,.related h3{font:500 clamp(calc(19*var(--u)),1.35vw,calc(26*var(--u)))/1.25 var(--display);margin-bottom:calc(12*var(--u))}
.blocks p,.cards p,.related p{font-size:clamp(calc(16*var(--u)),1vw,calc(19*var(--u)));line-height:1.6;color:var(--mute)}
.blocks p+p{margin-top:calc(12*var(--u))}

/* raised cards */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(calc(300*var(--u)),1fr));gap:calc(20*var(--u))}
.cards>article{background:#fff;border:1px solid var(--line);border-radius:calc(20*var(--u));padding:clamp(calc(24*var(--u)),2vw,calc(36*var(--u)));box-shadow:0 1px calc(2*var(--u)) rgba(0,0,0,.04),0 calc(12*var(--u)) calc(32*var(--u)) rgba(30,60,90,.06);display:flex;flex-direction:column}
.cards>article>img:first-child{height:auto;width:calc(100% + 2*clamp(calc(24*var(--u)),2vw,calc(36*var(--u))));max-width:none;margin:calc(-1*clamp(calc(24*var(--u)),2vw,calc(36*var(--u)))) calc(-1*clamp(calc(24*var(--u)),2vw,calc(36*var(--u)))) calc(22*var(--u));aspect-ratio:4/3;object-fit:cover;border-radius:calc(20*var(--u)) calc(20*var(--u)) 0 0;transition:transform .6s var(--ease)}
.cards>article:has(>img:first-child){overflow:hidden}
.cards.sq{grid-template-columns:repeat(auto-fill,minmax(calc(240*var(--u)),1fr))}
.cards.sq>article>img:first-child{aspect-ratio:1/1;object-fit:contain;background:var(--soft)}
.cards .lnk{margin:auto 0 0;padding-top:calc(18*var(--u))}
.cards small{display:block;font-size:calc(13*var(--u));color:var(--mute);margin-bottom:calc(10*var(--u))}
[data-theme="dark"] .cards>article{background:#121820;border-color:rgba(255,255,255,.1);box-shadow:none}

/* statement */
.statement{font:400 clamp(calc(28*var(--u)),2.8vw,calc(56*var(--u)))/1.2 var(--display);letter-spacing:-.015em;max-width:24ch}
.statement+p{margin-top:calc(24*var(--u));font-size:clamp(calc(16*var(--u)),1.05vw,calc(20*var(--u)));line-height:1.6;color:var(--mute);max-width:calc(720*var(--u))}

/* related links */
.related{display:grid;grid-template-columns:repeat(auto-fit,minmax(calc(260*var(--u)),1fr));border-top:1px solid var(--line)}
.related a{display:block;padding:calc(28*var(--u)) calc(28*var(--u)) calc(32*var(--u)) 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.related h3::after{content:" →";color:var(--brand);opacity:0;transition:opacity .3s}
.related a:hover h3::after{opacity:1}

/* long-form text */
.prose{max-width:calc(760*var(--u));font-size:clamp(calc(17*var(--u)),1.1vw,calc(20*var(--u)));line-height:1.7}
.prose h2{font:500 clamp(calc(24*var(--u)),1.8vw,calc(34*var(--u)))/1.25 var(--display);margin:2em 0 .6em}
.prose h3{font:500 clamp(calc(19*var(--u)),1.3vw,calc(24*var(--u)))/1.3 var(--display);margin:1.6em 0 .5em}
.prose p,.prose ul,.prose ol{margin-bottom:1em}
.prose ul,.prose ol{padding-left:1.3em}
.prose a{text-decoration:underline;text-underline-offset:calc(3*var(--u))}
.prose img{max-width:100%;height:auto;border-radius:calc(16*var(--u));margin:1em 0}

.prose table{width:100%;border-collapse:collapse;margin:1.2em 0 1.6em;font-size:.9em}
.prose th,.prose td{text-align:left;vertical-align:top;padding:calc(12*var(--u)) calc(14*var(--u)) calc(12*var(--u)) 0;border-bottom:1px solid var(--line)}
.prose th{font-weight:500;color:var(--mute);border-bottom-color:var(--ink)}

/* forms */
.form{display:grid;gap:calc(18*var(--u));max-width:calc(720*var(--u))}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:calc(18*var(--u))}
.form label{display:grid;gap:calc(8*var(--u));font-size:calc(14*var(--u));color:var(--mute)}
.form input,.form select,.form textarea{font:400 calc(16*var(--u))/1.4 var(--text);color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:calc(12*var(--u));padding:calc(14*var(--u)) calc(16*var(--u));width:100%}
.form textarea{min-height:calc(140*var(--u));resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:calc(2*var(--u)) solid var(--brand);outline-offset:1px;background:#fff}
.form small{font-size:calc(13*var(--u));color:var(--mute)}
[data-theme="dark"] .form input,[data-theme="dark"] .form select,[data-theme="dark"] .form textarea{background:#121820;border-color:rgba(255,255,255,.12);color:#f2f5f8}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .ph-media .mock,.ph-media img{transition:transform .6s var(--ease)}
  .ph-media>:hover,.cards>article:hover>img:first-child{transform:scale(1.03)}
}

/* form with a panel beside it (contact: brief form + office map) */
.form-map{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:calc(48*var(--u));align-items:start}
.form-map .form{max-width:none}
.form-map aside{display:grid;gap:calc(12*var(--u))}
.form-map aside h3{font:500 clamp(calc(19*var(--u)),1.35vw,calc(26*var(--u)))/1.25 var(--display)}
.form-map aside p{color:var(--mute);font-size:calc(15*var(--u))}
.form-map aside iframe{display:block;width:100%;height:clamp(300px,28vw,460px);border:0;border-radius:calc(20*var(--u));margin-top:calc(8*var(--u))}
@media (max-width:900px){
  .ph:has(.ph-media){grid-template-columns:1fr}
  .ticks,.blocks,.blocks.b3,.form .row,.form-map{grid-template-columns:1fr}
}
/* FAQ questions that are also headings (v2 SEO parity): <summary><h2|h3>Q</h3></summary> keeps the summary look */
.faq summary>:is(h2,h3){font:inherit;letter-spacing:inherit;margin:0}