/* E-commerce page (pen.dev "Page / E-commerce"): comparison table, buyer/owner previews, safe strip; plus the live page's quote form and FAQ */
.ec-sec{padding:0 0 100px}
.ec-sec .sh h2{font-size:52px;letter-spacing:-2px}
.ec-feat .wrap{gap:80px}
.ec-feat .sh{margin-bottom:-32px}
/* comparison */
.ec-cmp{border-radius:24px;overflow:hidden}
.ec-tr{display:grid;grid-template-columns:260px repeat(3,1fr);border-bottom:1px solid var(--line)}
.ec-tr:last-child{border-bottom:0}
.ec-tr>*{display:flex;align-items:center;gap:10px;padding:24px;font-size:15px;color:var(--mut)}
.ec-tr>b{gap:12px;font-size:16px;font-weight:700;color:var(--ink)}
.ec-tr .ib{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:11px;background:#8B5CF61F;color:var(--p)}
.ec-tr .ib svg{width:21px;height:21px}
.ec-tr>span svg{width:18px;height:18px;flex:none;color:#A5A3C2}
.ec-tr .us{background:#8B5CF614;color:var(--ink);font-weight:700}
.ec-tr .us svg{color:var(--ok)}
.ec-th>*{padding:22px 24px;font:700 12px "JetBrains Mono",monospace;letter-spacing:1.2px}
.ec-th .us{background:var(--p);color:#fff}
/* buyer/owner previews: reuse .dprev; the owner row has the window on the right */
.ec-rev{grid-template-columns:1fr 720px}
.ec-safe{display:flex;align-items:center;gap:16px;padding:20px 24px;border-radius:20px}
.ec-safe>*{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;font-size:14px;font-weight:600}
.ec-safe>b{justify-content:flex-start;gap:10px;font:700 18px Manrope,sans-serif}
.ec-safe .ib{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--p);color:#fff}
.ec-safe .ib svg{width:23px;height:23px}
.ec-safe>span svg{width:18px;height:18px;color:var(--p)}
/* quote form (markup and field names kept from the live page; v2-core.js sends it) */
.ec-form{position:relative;width:100%;max-width:880px;margin:0 auto;padding:40px;border-radius:28px}
.ec-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.qbadge{display:flex;align-items:center;gap:12px;margin:0 0 28px;padding:14px 18px;border-radius:14px;background:#16A34A14;outline:1px solid #16A34A40;outline-offset:-.5px;font-size:14px}
.qbadge svg{width:22px;height:22px;flex:none;color:var(--ok)}
.qbadge b{display:block}.qbadge small{display:block;color:var(--mut);font-size:13px}
.fsec{padding:28px 0 0;border-top:1px solid var(--line)}
.fsec+.fsec{margin-top:28px}
.ec-form .fsec:nth-of-type(2){ /* first .fsec (the honeypot div comes first) */ border-top:0;padding-top:0}
.fsec h4{display:flex;align-items:center;gap:10px;margin:0 0 4px;font:700 18px Manrope,sans-serif}
.fsec h4 small{font:700 12px "JetBrains Mono",monospace;color:var(--p)}
.fsec>p{margin:0 0 20px;font-size:14px;color:var(--mut)}
.fsec h4+.fgrid{margin-top:20px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px 16px}
.fld{display:flex;flex-direction:column;gap:8px;min-width:0}.fld.full{grid-column:1/-1}
.fld label,.fld .lb{font-size:14px;font-weight:600}
.fld em{font-style:normal;font-weight:400;color:var(--mut)}
.fld input,.fld textarea,.xsel-b{width:100%;height:50px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);font:400 15px Inter,sans-serif;outline:0;transition:border-color .2s,box-shadow .2s}
.fld textarea{height:auto;min-height:130px;resize:vertical}
.fld input:focus,.fld textarea:focus,.xsel-b:focus-visible,.xsel.open .xsel-b{border-color:var(--p);box-shadow:0 0 0 3px #8B5CF633}
.fld .msg,.consent .msg{display:none;font-size:12px;color:#DC2626}
.fld.err input,.fld.err textarea{border-color:#DC2626}.fld.err .msg,.consent.err .msg{display:block}
.count{font:400 11px "JetBrains Mono",monospace;color:var(--mut);text-align:right}
.chipsel{display:flex;flex-wrap:wrap;gap:8px}
.chipsel button{display:flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--mut);font:500 14px Inter,sans-serif;cursor:pointer;transition:border-color .2s,background .2s,color .2s}
.chipsel button:hover{border-color:#8B5CF680}
.chipsel button.on{border-color:var(--p);background:#8B5CF61A;color:var(--ink)}
.chipsel button.on::before{content:"✓";color:var(--p)}
.consent{grid-column:1/-1;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--mut)}
.consent label{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.consent input{width:16px;height:16px;flex:none;margin-top:2px;accent-color:#8B5CF6}
.consent .msg{padding-left:26px}
.fend{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:32px;text-align:center}
.fend small{font-size:13px;color:var(--mut)}.fend small a{color:var(--p);font-weight:600}
.send{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;max-width:480px;padding:18px 28px;border:0;border-radius:12px;background:var(--p);color:#fff;font:600 16px Inter,sans-serif;cursor:pointer;box-shadow:0 16px 40px #15123A14;transition:background .25s,box-shadow .4s var(--ease)}
.send:hover{background:#7C3AED;box-shadow:0 18px 40px #8B5CF64D}.send svg{width:18px;height:18px}
.send[disabled]{opacity:.6;cursor:wait}
.sentmsg{display:none;padding:48px 0;text-align:center}
.sentmsg .ok{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 18px;border-radius:50%;background:var(--p);color:#fff;font-size:28px}
.sentmsg h3{font-size:26px;margin-bottom:8px}.sentmsg p{color:var(--mut)}
.form.sent>:not(.sentmsg){display:none}.form.sent .sentmsg{display:block}
.failmsg{margin-top:20px;padding:20px 22px;border-radius:14px;background:#DB27770F;outline:1px solid #DB277740;outline-offset:-.5px}
.failmsg h3{font-size:18px;margin-bottom:6px}.failmsg p{color:var(--mut)}.failmsg a{color:var(--p)}
/* custom dropdown made by v2-core.js for every <select> */
.xsel{position:relative;display:block;width:100%}
.xsel select{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none;margin:0}
.xsel-b{display:block;padding-right:40px;text-align:left;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B5880' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 16px center}
.xsel-m{position:fixed;z-index:200;max-height:320px;overflow:auto;padding:6px;border-radius:12px;background:#fff;outline:1px solid var(--line);box-shadow:0 16px 40px #15123A1F}
.xsel-m button{display:block;width:100%;padding:10px 12px;border:0;border-radius:8px;background:none;color:var(--ink);font:500 14px Inter,sans-serif;text-align:left;cursor:pointer}
.xsel-m button:hover,.xsel-m button:focus-visible,.xsel-m .on{background:#8B5CF614;outline:0}
/* FAQ */
.ec-faq{width:100%;max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.qa{border-radius:18px;background:var(--glass);outline:1px solid #fff;outline-offset:-.5px;box-shadow:var(--sh)}
.qa button{display:flex;align-items:center;gap:14px;width:100%;padding:22px 24px;border:0;background:none;color:var(--ink);font:700 17px Manrope,sans-serif;text-align:left;cursor:pointer}
.qa button small{font:700 12px "JetBrains Mono",monospace;color:var(--p)}
.qa .pl{margin-left:auto;font:400 22px/1 Inter,sans-serif;color:var(--p);transition:rotate .3s var(--ease)}
.qa.open .pl{rotate:45deg}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
.qa.open .a{grid-template-rows:1fr}
.qa .a>div{overflow:hidden;padding:0 24px 0 58px;font-size:15px;line-height:24px;color:var(--mut)}
.qa.open .a>div{padding-bottom:22px}
@media (max-width:1280px){.ec-rev{grid-template-columns:1fr 560px}.ec-feat .dprev:not(.ec-rev){grid-template-columns:560px 1fr}}
@media (max-width:1024px){
  .ec-rev,.ec-feat .dprev:not(.ec-rev){grid-template-columns:1fr}
  .ec-rev .dwin{order:-1}
  .ec-sec .sh h2{font-size:40px}
  .ec-safe{flex-wrap:wrap}.ec-safe>b{flex-basis:100%}
}
@media (max-width:760px){
  .ec-tr{grid-template-columns:1fr;padding:8px 0}
  .ec-th{display:none}
  .ec-tr>*{flex-wrap:wrap;gap:2px 8px;padding:6px 18px}
  .ec-tr>b{padding:12px 18px 8px}
  .ec-tr>span::before{content:attr(data-l);flex-basis:100%;font:700 10px "JetBrains Mono",monospace;letter-spacing:1px;color:#A5A3C2}
  .ec-tr .us{margin:4px 12px 10px;padding:10px 12px;border-radius:12px}
  .ec-tr .us::before{color:var(--p)}
}
@media (max-width:640px){
  .ec-sec{padding:0 0 64px}
  .ec-feat .wrap{gap:48px}.ec-feat .sh{margin-bottom:-16px}
  .ec-sec .sh h2{font-size:32px;letter-spacing:-1.2px}
  .ec-safe{flex-direction:column;align-items:flex-start}.ec-safe>*{justify-content:flex-start}
  .ec-form{padding:22px 18px;border-radius:22px}
  .fgrid{grid-template-columns:1fr}
  .qa button{padding:18px;font-size:16px}.qa .a>div{padding:0 18px}
}
.phero .sub{text-wrap:balance}
/* phones: compact 3-column comparison. Headers shown once, row title on its own line, three short cells side by side */
@media (max-width:640px){
  .ec-tr{grid-template-columns:repeat(3,1fr);padding:0}
  .ec-th{display:grid}.ec-th>:first-child{display:none}
  .ec-th>*{padding:12px 8px;font-size:9.5px;letter-spacing:.6px;line-height:1.3;align-items:flex-end}
  .ec-tr>b{grid-column:1/-1;padding:12px 12px 6px;font-size:14px}
  .ec-tr .ib{width:28px;height:28px;border-radius:9px}.ec-tr .ib svg{width:16px;height:16px}
  .ec-tr>span{padding:4px 8px 12px;font-size:12px;line-height:1.35;align-items:flex-start}
  .ec-tr>span::before{content:none}
  .ec-tr>span svg{display:none}
  .ec-tr .us{margin:0;padding:4px 8px 12px;border-radius:0}
}
/* phones: "Safe by design" as title + three small tiles in one row */
@media (max-width:640px){
  .ec-safe{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:16px}
  .ec-safe>b{grid-column:1/-1;font-size:16px}.ec-safe .ib{width:32px;height:32px;border-radius:10px}.ec-safe .ib svg{width:18px;height:18px}
  .ec-safe>span{flex-direction:column;justify-content:flex-start;gap:6px;padding:10px 6px;border-radius:12px;background:#FFFFFFB3;font-size:12px;line-height:1.3;text-align:center}
}