/* PermitLogic and Sully: site additions on top of v3.css.
   Header with two sign-ins, the two-door home page, product frames, pricing. */

/* ---------- header ---------- */
.head-actions{display:flex;align-items:center;gap:10px}
.signin{position:relative}
.signin summary{list-style:none;cursor:pointer;font-weight:600;font-size:15px;padding:10px 12px;color:var(--on-dark-soft);display:flex;align-items:center;gap:8px;transition:color .25s var(--ease)}
.signin summary::-webkit-details-marker{display:none}
.signin summary::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .25s var(--ease)}
.signin summary:hover,.signin[open] summary{color:#fff}
.signin[open] summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.signin summary:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.signin-panel{position:absolute;right:0;top:calc(100% + 12px);width:296px;background:var(--ink-2);border:1px solid #34332f;padding:8px;display:grid;gap:4px;box-shadow:0 24px 48px -16px rgba(0,0,0,.6);z-index:50}
.signin-panel a{display:grid;gap:2px;padding:13px 14px;text-decoration:none;color:#fff}
.signin-panel a b{font-size:16px;letter-spacing:-.01em}
.signin-panel a span{font-size:13px;color:var(--on-dark-soft)}
.signin-panel a:hover,.signin-panel a:focus-visible{background:var(--ink-3);outline:none}
.site-head .head-cta{display:inline-flex}
@media(max-width:1060px){.head-actions{display:none}}

/* ---------- shared bits ---------- */
a[href^="tel:"]{white-space:nowrap}
.sect-h{font-size:var(--t-h2);margin-bottom:clamp(24px,3vw,40px)}
.eyebrow{font-size:16px;font-weight:700;color:var(--y);letter-spacing:.01em}
.see-more{margin-top:28px}

/* ---------- product frames (example data) ---------- */
.frame{margin:0;background:#fff;border:1px solid #d9d6cc;border-radius:12px;overflow:hidden;box-shadow:0 1px 2px rgba(15,15,15,.06),0 28px 56px -28px rgba(15,15,15,.4);color:var(--ink)}
.frame-bar{height:26px;background:#ecebe6;display:flex;align-items:center;gap:6px;padding:0 12px;border-bottom:1px solid #dcdad2}
.frame-bar i{width:9px;height:9px;border-radius:50%;background:#c9c6bc}
.frame img{width:100%;height:auto;aspect-ratio:1280/800;display:block;background:#f3f2ee}
.frame figcaption{padding:10px 14px;font-size:14px;display:flex;gap:10px;align-items:center;background:#fff;border-top:1px solid #ecebe6}
.frame figcaption span{margin-left:auto;font-size:12px;font-weight:700;background:var(--ink);color:var(--y);padding:3px 8px;border-radius:6px;white-space:nowrap}

.phone{margin:0}
.phone img{width:100%;height:auto;aspect-ratio:380/798;display:block;filter:drop-shadow(0 22px 30px rgba(15,15,15,.28))}
.phone figcaption{font-size:13px;color:var(--soft);margin-top:10px;text-align:center}

/* ---------- home: hero with two doors ---------- */
.hero2{background:var(--ink);color:var(--on-dark);padding:clamp(48px,6vw,88px) 0 clamp(64px,7vw,104px);overflow:hidden}
.hero2-head{max-width:900px}
.hero2 h1{font-size:clamp(40px,5.6vw,84px);line-height:1;letter-spacing:-.035em;color:#fff;margin:14px 0 24px;max-width:17ch}
.hero2 .lede{color:var(--on-dark-soft);max-width:36em}
.doors{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:clamp(40px,5vw,64px)}
.door{position:relative;display:flex;flex-direction:column;padding:clamp(26px,3vw,44px);padding-top:clamp(52px,4.6vw,68px);overflow:hidden;min-height:660px}
.door-tab{position:absolute;top:0;left:clamp(18px,2.2vw,30px);height:34px;padding:0 26px;display:flex;align-items:center;font-weight:800;font-size:14px;clip-path:var(--tab)}
.door h2{font-size:clamp(28px,2.7vw,42px);letter-spacing:-.03em;line-height:1.05;max-width:16ch}
.door-copy>p{margin-top:16px;max-width:34em;font-size:17px}
.door-copy .ticks{margin:20px 0 4px;font-size:16px}
.door-ctas{display:flex;gap:22px;align-items:center;flex-wrap:wrap;margin-top:26px}
.door-note{margin-top:18px}
.door-visual{margin-top:auto;padding-top:34px;height:340px;overflow:hidden;margin-bottom:calc(-1 * clamp(26px,3vw,44px));box-sizing:content-box}
.door-home{background:var(--y);color:var(--ink)}
.door-home .door-tab{background:var(--ink);color:var(--y)}
.door-home .ticks li::before{background:var(--ink)}
.door-home .textlink{text-decoration-color:var(--ink)}
.door-pro{background:var(--ink-2);color:var(--on-dark);border:1px solid #34332f}
.door-pro .door-tab{background:var(--y);color:var(--ink)}
.door-pro .door-copy>p,.door-pro .door-note{color:var(--on-dark-soft)}
.door-pro .textlink{color:#fff}
.door-phones{display:flex;gap:18px;justify-content:center;align-items:flex-start}
.door-phones .phone{width:min(42%,210px)}
.door-phones .phone:nth-child(2){margin-top:26px}
.door-phones .phone figcaption{display:none}
.door-pro .door-visual .frame{width:112%;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.door-pro .door-visual .frame figcaption{display:none}

/* ---------- home: facts strip ---------- */
.facts{background:var(--paper);padding:clamp(44px,5vw,72px) 0 clamp(56px,6vw,88px)}
.facts-grid{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0 32px;border-top:3px solid var(--ink);padding-top:22px}
.facts-grid li{display:grid;gap:8px;align-content:start}
.facts-grid b{font-size:18px;letter-spacing:-.015em}
.facts-grid span{font-size:15.5px;color:var(--soft);line-height:1.55}

/* ---------- home: how it works ---------- */
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.how{background:#fff;padding:clamp(24px,3vw,40px)}
.how h3{font-size:22px;margin-bottom:24px;display:inline-block;padding-bottom:6px;border-bottom:3px solid var(--y)}
.steps{list-style:none;counter-reset:s;display:grid;gap:22px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;column-gap:16px;row-gap:4px;align-items:start}
.steps li::before{content:counter(s);grid-row:1/3;width:44px;height:44px;display:grid;place-items:center;background:var(--ink);color:var(--y);font-weight:800;font-size:20px;clip-path:var(--btn)}
.steps b{font-size:19px;letter-spacing:-.015em;line-height:1.3}
.steps span{grid-column:2;color:var(--soft);font-size:16px;line-height:1.55}

/* ---------- home: the loop ---------- */
.loop-head{max-width:760px;margin-bottom:clamp(32px,4vw,52px)}
.loop-head h2{font-size:var(--t-h2)}
.loop-head .lede{margin-top:20px;color:var(--on-dark-soft)}
.loop{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.loop li{background:var(--ink-2);padding:26px 24px 28px;position:relative;display:grid;gap:8px;align-content:start;border-top:4px solid var(--y)}
.loop .who{font-size:13px;font-weight:700;color:var(--y)}
.loop b{font-size:20px;letter-spacing:-.02em;color:#fff;line-height:1.2}
.loop li>span:last-child{color:var(--on-dark-soft);font-size:15.5px;line-height:1.55}
.loop li:not(:last-child)::after{content:"";position:absolute;right:-15px;top:38px;width:11px;height:11px;border-top:3px solid var(--y);border-right:3px solid var(--y);transform:rotate(45deg)}

/* ---------- home: see it ---------- */
.see-block+.see-block{margin-top:clamp(56px,6vw,88px)}
.see-head{display:flex;gap:6px 18px;align-items:baseline;flex-wrap:wrap;margin-bottom:24px}
.see-head h3{font-size:clamp(24px,2.2vw,32px)}
.see-head p{color:var(--soft)}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,230px));gap:24px;justify-content:start}

/* ---------- home: pricing teaser ---------- */
.mini-plans{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.mini-plans li{background:#fff;padding:26px;display:grid;gap:10px;align-content:start;border-top:4px solid var(--y)}
.mini-plans li.mp-pro{background:var(--ink);color:#fff}
.mini-plans h3{font-size:20px}
.mini-plans p{font-size:16px}
.mini-plans .mp-price{font-size:clamp(34px,3vw,46px);font-weight:800;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.mini-plans .mp-quote{font-size:clamp(30px,2.6vw,40px)}
.mp-price small{display:block;font-size:14px;letter-spacing:0;font-weight:600;margin-top:8px;color:var(--soft)}
.mp-pro .mp-price small,.mp-pro p{color:var(--on-dark-soft)}
.mini-plans .mp-pro .mp-price{color:#fff}
.mp-pro .textlink{color:#fff}

/* ---------- pricing page ---------- */
.plan-switch{display:inline-flex;background:var(--tone);padding:5px;gap:4px;margin-bottom:36px;border-radius:14px;max-width:100%}
.plan-switch button{all:unset;cursor:pointer;padding:14px 22px;border-radius:10px;font-weight:700;font-size:17px;display:flex;gap:10px;align-items:baseline;white-space:nowrap}
.plan-switch button small{font-size:13px;font-weight:600;color:var(--soft)}
.plan-switch button[aria-selected=true]{background:var(--ink);color:#fff}
.plan-switch button[aria-selected=true] small{color:var(--y)}
.plan-switch button:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.no-js .plan-switch{display:none}
.pcards{list-style:none;display:grid;gap:20px;grid-template-columns:repeat(2,1fr)}
.pcard{background:#fff;border:1px solid #dedbd1;padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:14px;scroll-margin-top:96px}
.pcard.feature{border:2px solid var(--ink)}
.pcard.dark{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}
.pcard h2{font-size:clamp(24px,2.2vw,30px);letter-spacing:-.02em;line-height:1.1}
.pprice{font-size:clamp(48px,5.4vw,76px);font-weight:800;letter-spacing:-.05em;line-height:1;font-variant-numeric:tabular-nums}
.pprice small{display:block;font-size:17px;letter-spacing:0;font-weight:600;margin-top:10px;color:var(--soft)}
.pprice.quote{font-size:clamp(40px,4.4vw,60px)}
.pdesc{font-size:18px}
.pcard .ticks{margin:6px 0 10px;font-size:16.5px}
.pcta{margin-top:auto;padding-top:16px;display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.pcard.dark .pprice small,.pcard.dark .pdesc{color:var(--on-dark-soft)}
.pcard.dark .textlink{color:#fff}
.pnote{margin-top:24px;font-size:15px;color:var(--soft);max-width:72em;line-height:1.6}
.compare{margin-top:clamp(56px,6vw,88px)}
.table-wrap{overflow-x:auto;border:1px solid #dedbd1;background:#fff}
.table-wrap:focus-visible{outline:3px solid var(--y);outline-offset:2px}
.table-wrap table{width:100%;border-collapse:collapse;min-width:520px;font-size:16px}
.table-wrap th,.table-wrap td{padding:13px 18px;text-align:left;border-bottom:1px solid #ecebe6}
.table-wrap thead th{background:var(--ink);color:#fff;font-size:15px}
.table-wrap thead th:not(:first-child),.table-wrap td{text-align:center;width:150px}
.table-wrap tbody th[scope=row]{font-weight:500}
.table-wrap tr.grp th{background:var(--tone);font-size:13px;font-weight:800;letter-spacing:.02em;text-align:left}
.yes{color:var(--green);font-weight:800;font-size:18px}
.no{color:#a09d94}

/* ---------- responsive ---------- */
@media(max-width:1100px){
 .facts-grid{grid-template-columns:1fr 1fr;row-gap:28px}
 .loop{grid-template-columns:1fr 1fr}
 .loop li:nth-child(2)::after{display:none}
 .mini-plans{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
 .doors{grid-template-columns:1fr}
 .door{min-height:0}
 .how-grid,.frames,.pcards{grid-template-columns:1fr}
 .door-pro .door-visual .frame{width:100%}
 .door-visual{height:300px}
 .phones{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
 .plan-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}
 .plan-switch button{justify-content:center;flex-direction:column;gap:2px;align-items:center;padding:12px 8px;font-size:16px;white-space:normal;text-align:center}
}
@media(max-width:600px){
 .facts-grid,.loop,.mini-plans{grid-template-columns:1fr}
 .loop li::after{display:none!important}
 .door-phones{gap:12px}
 .door-ctas{gap:16px}
}

.pcards.three{grid-template-columns:repeat(3,1fr)}
@media (max-width:1100px){.pcards.three{grid-template-columns:1fr}}
.pcard.dark .pnote{color:var(--on-dark-soft)}