/* Shared styles for the practice, attorney, and life-event pages.
   Builds on the tokens in style.css (--paper, --paper-warm, --ink, --ink-soft, --forest, --forest-deep, --gold, --line, --white). */

.pg-hero{padding:64px 0 36px; border-bottom:1px solid var(--line);}
.pg-hero h1{font-size:clamp(30px,4.2vw,46px); line-height:1.1; max-width:22ch;}
.answer-first{font-size:18px !important; color:var(--ink) !important; max-width:64ch; margin-top:18px;}
.pg-cta-row{display:flex; gap:12px; flex-wrap:wrap; margin-top:26px;}
.pg-crumbs{font-size:13.5px; color:var(--ink-soft); margin-bottom:18px;}
.pg-crumbs a{color:var(--forest); text-decoration:none;}
.pg-crumbs a:hover{text-decoration:underline;}

.pg-body{padding:48px 0 24px;}
.pg-cols{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:56px; align-items:start;}
.pg-main h2{font-size:28px; line-height:1.2; margin:40px 0 12px;}
.pg-main h2:first-child{margin-top:0;}
.pg-main p{font-size:17px; max-width:none;}
.pg-main ul{color:var(--ink-soft); padding-left:22px; margin:0 0 1.2em;}
.pg-main li{font-size:16.5px; margin-bottom:9px;}
.pg-main li strong{color:var(--ink); font-weight:600;}
.pg-aside{position:sticky; top:96px; display:grid; gap:18px;}
.pg-box{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--forest); border-radius:3px; padding:20px 22px;}
.pg-box h3{font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--forest); margin:0 0 10px;}
.pg-box ul{list-style:none; margin:0; padding:0; display:grid; gap:8px;}
.pg-box a{color:var(--ink); text-decoration:none; font-size:15.5px;}
.pg-box a:hover{color:var(--forest); text-decoration:underline; text-underline-offset:3px;}
.pg-box p{font-size:15px; margin:0 0 6px;}
.pg-box dl{margin:0;}
.pg-box dt{font-size:12.5px; color:var(--forest); font-weight:500; margin-top:10px;}
.pg-box dt:first-child{margin-top:0;}
.pg-box dd{margin:0; font-size:15.5px; color:var(--ink); font-weight:500;}

.pg-faq{padding:24px 0 56px;}
.pg-faq h2{font-size:28px; margin-bottom:14px;}
.faq-list{max-width:760px;}
details.faq{background:var(--white); border:1px solid var(--line); border-radius:3px; margin-bottom:8px;}
details.faq summary{cursor:pointer; list-style:none; padding:15px 48px 15px 18px; font-family:'Fraunces',serif; font-size:18px; line-height:1.3; color:var(--ink); position:relative;}
details.faq summary::-webkit-details-marker{display:none;}
details.faq summary::after{content:"+"; position:absolute; right:18px; top:12px; font:400 22px 'Inter',sans-serif; color:var(--forest);}
details.faq[open] summary{border-bottom:1px solid var(--line);}
details.faq[open] summary::after{content:"\2212";}
details.faq summary:focus-visible{outline:2px solid var(--forest); outline-offset:2px;}
details.faq p{margin:0; padding:14px 18px 16px; font-size:16px; max-width:none;}
details.faq a{color:var(--forest);}

.pg-band{background:var(--paper-warm); padding:48px 0;}
.pg-band h2{font-size:clamp(24px,2.8vw,32px); margin-bottom:12px; max-width:24ch;}
.pg-band p{font-size:16.5px;}
.pg-note{font-size:13.5px; border-top:1px solid var(--line); padding-top:16px; margin:28px 0 0; max-width:80ch;}

.pg-related{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:8px;}
.pg-related a{display:block; background:var(--white); border:1px solid var(--line); border-radius:3px; padding:16px 18px; text-decoration:none; color:var(--ink); font-family:'Fraunces',serif; font-size:18px; line-height:1.3;}
.pg-related a span{display:block; font:400 13.5px 'Inter',sans-serif; color:var(--ink-soft); margin-top:4px;}
.pg-related a:hover{border-color:var(--forest);}

/* attorney page */
.pf-grid{display:grid; grid-template-columns:300px minmax(0,1fr); gap:56px; align-items:start;}
.pf-photo{width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:3px; background:var(--paper-warm); border:1px solid var(--line);}
.pf-facts{margin-top:20px;}
.pf-timeline{list-style:none; padding:0 !important; margin:0 0 1.2em; border-left:1px solid var(--line);}
.pf-timeline li{position:relative; padding:0 0 18px 24px; margin:0 !important;}
.pf-timeline li::before{content:""; position:absolute; left:-6px; top:8px; width:11px; height:11px; border-radius:50%; background:var(--gold);}
.pf-timeline b{display:block; font-family:'Fraunces',serif; font-weight:500; font-size:19px; color:var(--ink);}
.pf-timeline span{display:block; font-size:15px; color:var(--forest); font-weight:500; margin:0 0 2px;}

@media (max-width:980px){
  .pg-cols{grid-template-columns:1fr; gap:32px;}
  .pg-aside{position:static;}
  .pg-related{grid-template-columns:1fr;}
  .pf-grid{grid-template-columns:1fr; gap:28px;}
  .pf-photo{max-width:320px;}
}
@media (max-width:600px){ .pg-hero{padding-top:44px;} }
@media print{ header, footer, .pg-aside, .pg-band, .pg-cta-row{display:none;} }

/* ---- illustrated guide pages (guides/*) ---- */
.hl{background:linear-gradient(transparent 58%, rgba(184,146,63,.40) 58%); color:inherit; padding:0 .08em;}
.pg-main{min-width:0;}
.gd-lead{font-size:17px; max-width:64ch;}
.gd-scen{margin:18px 0 8px;}
.gd-tabs{display:none; gap:8px; flex-wrap:wrap; margin:0 0 16px;}
.gd-scen.js .gd-tabs{display:flex;}
.gd-tab{font:500 14.5px 'Inter',sans-serif; color:var(--ink); background:var(--white); border:1px solid var(--line); border-radius:999px; padding:9px 16px; cursor:pointer;}
.gd-tab:hover{border-color:var(--forest);}
.gd-tab[aria-selected="true"]{background:var(--forest); border-color:var(--forest); color:var(--white);}
.gd-tab:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.gd-panel{background:var(--white); border:1px solid var(--line); border-radius:6px; padding:22px 24px 20px; margin:0 0 16px;}
.gd-scen.js .gd-panel{display:none; margin:0;}
.gd-scen.js .gd-panel.on{display:block;}
.gd-panel h3{font-size:22px; margin:0 0 6px;}
.gd-fig{margin:10px 0 12px; overflow-x:auto;}
.gd-fig svg{display:block; width:100%; height:auto; max-height:340px;}
.gd-why{font-size:16.5px; margin:0; max-width:none;}
.gd-key{display:flex; gap:18px; flex-wrap:wrap; font-size:13.5px; color:var(--ink-soft); margin:0 0 6px;}
.gd-key span{display:inline-flex; align-items:center; gap:7px;}
.gd-key i{display:inline-block; width:16px; height:16px; border-radius:4px; border:2px solid var(--line); background:var(--white);}
.gd-key i.k-heir{border-color:var(--gold); border-width:3px;}
.gd-key i.k-self{background:var(--forest); border-color:var(--forest-deep);}
.gd-key i.k-out{border-style:dashed; border-color:var(--ink-soft); background:var(--paper-warm);}

/* svg parts */
.n{fill:var(--white); stroke:var(--line); stroke-width:1.5;}
.n-self{fill:var(--forest); stroke:var(--forest-deep);}
.n-heir{stroke:var(--gold); stroke-width:3.5;}
.n-out{fill:var(--paper-warm); stroke:var(--ink-soft); stroke-dasharray:6 5;}
.n-ghost{fill:var(--paper); stroke:var(--line); stroke-dasharray:3 4;}
.n-t{font:600 18px 'Inter',sans-serif; fill:var(--ink); text-anchor:middle;}
.n-s{font:400 14px 'Inter',sans-serif; fill:var(--ink-soft); text-anchor:middle;}
.n-self + .n-t, .t-self{fill:var(--white);}
.t-self-s{fill:#DCE3D4;}
.bd{fill:var(--gold);}
.bd-t{font:600 15px 'Inter',sans-serif; fill:var(--white); text-anchor:middle;}
.ln{stroke:var(--ink-soft); stroke-width:1.8; fill:none;}
.ln-f{stroke:var(--line); stroke-width:1.6; stroke-dasharray:4 4; fill:none;}
.xm{stroke:var(--ink-soft); stroke-width:2; fill:none;}
.xc{fill:var(--white); stroke:var(--ink-soft); stroke-width:1.5;}

/* ordered ladder */
.gd-ladder{list-style:none; counter-reset:rung; padding:0 !important; margin:0 0 1.2em; display:grid; gap:8px;}
.gd-ladder li{counter-increment:rung; position:relative; background:var(--white); border:1px solid var(--line); border-radius:4px; padding:12px 16px 12px 56px; margin:0 !important; font-size:16px;}
.gd-ladder li::before{content:counter(rung); position:absolute; left:14px; top:50%; transform:translateY(-50%); width:28px; height:28px; border-radius:50%; background:var(--forest); color:var(--white); font:600 14px 'Inter',sans-serif; display:flex; align-items:center; justify-content:center;}
.gd-ladder li b{color:var(--ink); font-weight:600;}
.gd-ladder li span{color:var(--ink-soft);}

/* two lanes */
.gd-lanes{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:8px 0 6px;}
.gd-lane{background:var(--white); border:1px solid var(--line); border-radius:6px; overflow:hidden;}
.gd-lane h3{margin:0; padding:14px 18px; font:600 15px 'Inter',sans-serif; color:var(--white);}
.gd-lane.l1 h3{background:var(--forest);}
.gd-lane.l2 h3{background:var(--gold);}
.gd-lane p{margin:0; padding:12px 18px 0; font-size:15px; color:var(--ink-soft);}
.gd-lane ul{list-style:none; margin:0; padding:10px 18px 16px; display:grid; gap:8px;}
.gd-lane li{margin:0; padding:9px 12px; border:1px solid var(--line); border-radius:4px; font-size:15.5px; background:var(--paper);}
.gd-lane li small{display:block; color:var(--ink-soft); font-size:13px;}

/* probate road */
.gd-road{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:8px 0 8px; counter-reset:step;}
.gd-step{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:4px; padding:16px 16px 14px; position:relative;}
.gd-step svg{width:44px; height:44px; display:block; margin-bottom:8px;}
.gd-step b{display:block; font:500 17px 'Fraunces',serif; line-height:1.25; margin-bottom:6px; color:var(--ink);}
.gd-step p{font-size:14.5px !important; margin:0 !important; color:var(--ink-soft);}
.gd-step .gd-n{position:absolute; top:-14px; right:12px; background:var(--forest); color:var(--white); width:28px; height:28px; border-radius:50%; font:600 14px 'Inter',sans-serif; display:flex; align-items:center; justify-content:center;}
.gd-time{display:inline-block; background:var(--paper-warm); border:1px solid var(--line); border-radius:999px; padding:7px 16px; font-size:14.5px; color:var(--ink); margin:6px 0 0;}

/* comparison table */
.gd-table-wrap{overflow-x:auto; margin:8px 0 6px;}
.gd-table{width:100%; border-collapse:collapse; font-size:15.5px; background:var(--white); border:1px solid var(--line);}
.gd-table th, .gd-table td{text-align:left; padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:top;}
.gd-table thead th{background:var(--forest); color:var(--white); font:600 14px 'Inter',sans-serif;}
.gd-table tbody th{font-weight:600; color:var(--ink); width:24%; background:var(--paper);}
.gd-table td{color:var(--ink-soft);}

.gd-sources{font-size:14px; color:var(--ink-soft); border-top:1px solid var(--line); padding-top:14px; margin-top:34px;}
.gd-sources a{color:var(--forest);}

@media (max-width:980px){ .gd-road{grid-template-columns:1fr 1fr;} }
@media (max-width:720px){ .gd-lanes{grid-template-columns:1fr;} .gd-road{grid-template-columns:1fr;} .gd-panel{padding:18px 16px;} .gd-table th, .gd-table td{padding:10px;} }

/* ---- guides hub ---- */
.gd-meta{font-size:13.5px; color:var(--ink-soft); margin:12px 0 0;}
.gd-cards{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin:8px 0 8px;}
.gd-card{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--gold); border-radius:4px; padding:20px 22px 18px;}
.gd-card-tag{font:600 12px 'Inter',sans-serif; letter-spacing:.06em; text-transform:uppercase; color:var(--forest); margin:0 0 8px !important;}
.gd-card h3{font-size:21px; line-height:1.25; margin:0 0 8px;}
.gd-card h3 a{color:var(--ink); text-decoration:none;}
.gd-card h3 a:hover{color:var(--forest); text-decoration:underline; text-underline-offset:3px;}
.gd-card p{font-size:15.5px !important; color:var(--ink-soft); margin:0 0 8px !important;}
.gd-card-meta{font-size:13px !important; margin-bottom:0 !important;}
.gd-evlist{display:grid; gap:10px; margin:8px 0 16px;}
.gd-ev{display:grid; grid-template-columns:minmax(0,220px) minmax(0,1fr); gap:6px 18px; background:var(--white); border:1px solid var(--line); border-radius:4px; padding:14px 18px; align-items:baseline;}
.gd-ev-name{font:500 18px 'Fraunces',serif; color:var(--ink); text-decoration:none;}
.gd-ev-name:hover{color:var(--forest); text-decoration:underline;}
.gd-ev ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:6px 16px;}
.gd-ev li{margin:0; font-size:15.5px;}
.gd-ev li a{color:var(--forest);}
@media (max-width:720px){ .gd-cards{grid-template-columns:1fr;} .gd-ev{grid-template-columns:1fr;} }

/* ---- trust guide ---- */
.gd-caption{font-size:14px; color:var(--ink-soft); margin:8px 0 0;}
.tr-cite{font-size:13px; color:var(--ink-soft); white-space:nowrap;}
.tr-cite a{color:var(--forest);}
.tr-ladder{list-style:none; padding:0 !important; margin:10px 0 6px; display:grid; gap:10px;}
.tr-rung{display:grid; grid-template-columns:170px minmax(0,1fr); background:var(--white); border:1px solid var(--line); border-left-width:8px; border-radius:4px; align-items:stretch; margin:0 !important;}
.tr-rung.r1{margin-right:48px !important; border-left-color:#DCCFA6;}
.tr-rung.r2{margin-right:32px !important; border-left-color:#C9AE62;}
.tr-rung.r3{margin-right:16px !important; border-left-color:var(--gold);}
.tr-rung.r4{border-left-color:var(--forest);}
.tr-amt{display:flex; align-items:center; padding:14px 16px; font:500 20px 'Fraunces',serif; line-height:1.15; color:var(--ink); background:var(--paper-warm);}
.tr-rung > div{padding:12px 18px 12px;}
.tr-rung b{display:block; font:600 15px 'Inter',sans-serif; color:var(--forest); margin-bottom:4px;}
.tr-rung p{font-size:15.5px !important; color:var(--ink-soft); margin:0 !important;}
.tr-rung a{color:var(--forest);}
.tr-scen{display:grid; gap:8px; margin:10px 0 6px;}
.tr-item{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:12px 16px;}
.tr-item.on{border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--gold);}
.tr-item label{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:16.5px; color:var(--ink); line-height:1.4;}
.tr-item input{width:20px; height:20px; margin-top:2px; accent-color:var(--forest); flex:none;}
.tr-item input:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.tr-why{margin:8px 0 0 32px !important; font-size:15px !important; color:var(--ink-soft);}
.tr-scen.js .tr-why{display:none;}
.tr-scen.js .tr-item.on .tr-why{display:block;}
.tr-out{display:none; background:var(--paper-warm); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:4px; padding:12px 16px; font-size:16px; color:var(--ink);}
.tr-scen.js .tr-out{display:block;}
.tr-myths{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:8px 0 6px;}
.tr-myth{background:var(--white); border:1px solid var(--line); border-top:3px solid var(--ink-soft); border-radius:4px; padding:16px 18px;}
.tr-myth h3{font-size:18px; margin:0 0 6px;}
.tr-myth p{font-size:15.5px !important; color:var(--ink-soft); margin:0 !important;}
@media (max-width:720px){ .tr-rung{grid-template-columns:1fr;} .tr-rung.r1,.tr-rung.r2,.tr-rung.r3{margin-right:0 !important;} .tr-myths{grid-template-columns:1fr;} .tr-why{margin-left:0 !important;} }

/* ---- marriage guide ---- */
.mr-note{display:grid; gap:6px; background:var(--paper-warm); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:4px; padding:12px 16px; margin:12px 0 14px;}
.mr-note p{margin:0 !important; font-size:15.5px !important; color:var(--ink);}
.mr-steps{list-style:none; padding:0 !important; margin:10px 0 6px; display:grid; gap:8px;}
.mr-step{display:grid; grid-template-columns:48px minmax(0,1fr); background:var(--white); border:1px solid var(--line); border-radius:4px; margin:0 !important; align-items:stretch;}
.mr-num{display:flex; align-items:center; justify-content:center; font:500 20px 'Fraunces',serif; background:var(--paper-warm); color:var(--ink);}
.mr-step > div{padding:10px 16px;}
.mr-step b{display:block; font:600 15.5px 'Inter',sans-serif; color:var(--forest);}
.mr-step p{font-size:15px !important; color:var(--ink-soft); margin:3px 0 0 !important;}
.mr-step.agent{border-left:6px solid var(--forest);}
.mr-step.agent .mr-num{background:var(--forest); color:var(--white);}
.mr-step.spouse, .mr-step.friend{border-left:6px solid var(--gold);}
.mr-list{display:grid; gap:8px; margin:10px 0 6px;}
.mr-item{background:var(--white); border:1px solid var(--line); border-radius:4px; padding:12px 16px;}
.mr-item.on{border-color:var(--forest); box-shadow:inset 0 0 0 1px var(--forest);}
.mr-item label{display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:16.5px; font-weight:600; color:var(--ink); line-height:1.4;}
.mr-item input{width:20px; height:20px; margin-top:2px; accent-color:var(--forest); flex:none;}
.mr-item input:focus-visible{outline:2px solid var(--gold); outline-offset:2px;}
.mr-why{margin:8px 0 0 32px !important; font-size:15px !important; color:var(--ink-soft);}
.mr-out{display:none; background:var(--paper-warm); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:4px; padding:12px 16px; font-size:16px; color:var(--ink);}
.mr-list.js .mr-out{display:block;}
@media (max-width:720px){ .mr-why{margin-left:0 !important;} }