:root{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:#193047;background:#eef3f7}*{box-sizing:border-box}body{margin:0}header{background:linear-gradient(120deg,#0d2944,#145e78);color:#fff;padding:20px clamp(16px,4vw,55px);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-weight:900;letter-spacing:.04em;font-size:24px}.brand span{font-weight:400}.brand small{font-size:13px;background:#f5bf4f;color:#1e2d41;padding:4px;border-radius:6px}header p{margin:6px 0 0;color:#cce2ec;font-size:12px}.header-pill{border:1px solid #72a5b9;border-radius:40px;padding:10px 14px;font-size:12px;white-space:nowrap}main{max-width:1750px;margin:auto;padding:20px}.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:15px}.tabs button{border:1px solid #d7e0e8;background:#fff;color:#244a62;padding:13px 17px;border-radius:11px}.tabs button.active{background:#144a68;color:white}.tab{display:none}.tab.active{display:block}.cols{display:grid;grid-template-columns:minmax(255px,1.05fr) minmax(300px,1.2fr) minmax(300px,1fr);gap:14px;align-items:start}.pane,.toolpane{background:#fff;border:1px solid #e0e7ee;border-radius:15px;padding:20px;box-shadow:0 2px 12px #142d420b;min-width:0}h2{margin:0 0 16px;font-size:19px}h3{font-size:15px;margin:22px 0 9px;color:#1c4664}.hint{color:#667a8b;font-size:12px;line-height:1.6}label{display:block;margin:12px 0;font-size:13px;font-weight:650}label output{float:right;color:#23628b}input[type=range]{width:100%;display:block;accent-color:#1778a1;margin-top:8px}input[type=file]{width:100%;margin:12px 0 2px;font-size:12px}.drop{border:2px dashed #a7becc;padding:14px;border-radius:13px;background:#f4faff}.drop small{display:block;color:#698092;font-weight:400}.row{display:flex;flex-wrap:wrap;gap:6px}.row button{flex:1;min-width:65px}button{cursor:pointer;border:1px solid #cddce8;background:#f5f9fc;border-radius:8px;padding:10px 9px;font:inherit;color:#1d526e;font-weight:650;font-size:12px}button:hover{background:#e8f1f7}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #89c4ee;outline-offset:2px}.mode.active,button.primary{background:#0e668d;color:white;border-color:#0e668d}.divider{height:1px;background:#e5edf2;margin:20px 0}.preview-wrap{display:flex;justify-content:center;background:repeating-conic-gradient(#f4f4f4 0 25%,#e8e8e8 0 50%) 50%/18px 18px;border-radius:12px;padding:12px;min-height:250px}#photoPreview{display:block;max-width:100%;width:min(100%,350px);height:auto;aspect-ratio:35/45;touch-action:none;cursor:grab;border:1px solid #cad9df;object-fit:contain}.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px}.fields label{margin:8px 0}.fields input:not([type=checkbox]):not([type=color]),.fields select{display:block;width:100%;border:1px solid #c9d9e4;border-radius:8px;background:#fff;padding:10px;margin-top:5px;font-size:14px;color:#193047}.fields input[type=color],.controls input[type=color]{display:block;width:65px;height:38px;margin-top:6px}.inline{display:flex;align-items:center;gap:6px;grid-column:span 2}.inline input{accent-color:#11688d}.actions{margin-top:16px}.vertical{display:grid;gap:9px}.pages{display:grid;gap:14px;justify-items:center;margin:15px 0}.pages canvas{display:block;max-width:100%;height:auto;background:white;box-shadow:0 2px 12px #1b3b542b;border:1px solid #c9d6df}.summary{background:#eaf4f9;padding:10px;border-radius:8px;color:#185474;font-weight:650;font-size:13px}.thumbs{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}.thumb{width:67px;position:relative}.thumb img{width:67px;height:78px;object-fit:cover;border:2px solid #c3d2dc;border-radius:6px}.thumb.selected img{border:3px solid #0682b0}.thumb button{font-size:10px;padding:3px;width:100%}.toolpane{max-width:800px;margin:0 auto;line-height:1.65}.mini-preview{background:#eceff3;padding:10px;margin:16px 0}.mini-preview canvas{width:100%;height:auto;background:#fff}.toolpane input[type=file]{display:block}#toast{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);background:#13384d;color:#fff;padding:12px 22px;border-radius:8px;display:none;z-index:20;max-width:92vw}footer{text-align:center;padding:22px;color:#60758a;font-size:12px}@media(max-width:1100px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-pane{grid-column:span 2}}@media(max-width:650px){header{display:block}.header-pill{display:inline-block;margin-top:12px}.cols{display:block}.pane{margin-bottom:15px}.sheet-pane{grid-column:auto}main{padding:10px}.pane{padding:14px}.fields{gap:8px}.brand{font-size:21px}}

/* Static HTML content for discoverability and accessibility */
.seo-hero,.seo-content{max-width:1180px;margin:22px auto;padding:24px 28px;background:#fff;color:#19334a;border:1px solid #d9e3ed;border-radius:18px;line-height:1.65}
.seo-hero{background:linear-gradient(125deg,#eef6ff,#fff)}.seo-hero h1{font-size:clamp(1.5rem,3.2vw,2.35rem);line-height:1.18;margin:.4rem 0 .8rem}.seo-hero p{font-size:1.05rem;max-width:840px}.seo-eyebrow{font-size:.85rem;font-weight:700;letter-spacing:.05em;color:#205c80}.seo-quicklinks{display:flex;flex-wrap:wrap;gap:10px;margin-top:15px}.seo-quicklinks a,.seo-guides a{display:inline-block;border:1px solid #b7d0e6;border-radius:9px;padding:8px 12px;color:#114a76;text-decoration:none;background:#f8fcff;font-weight:600}.seo-quicklinks a:hover,.seo-guides a:hover{background:#e8f3ff}.seo-content h2{font-size:1.3rem;margin:24px 0 7px;color:#143f60}.seo-content h3{font-size:1.06rem;margin:16px 0 5px}.seo-content p{margin:6px 0 13px}.seo-content ol{padding-left:22px}.seo-guides>div{display:flex;gap:10px;flex-wrap:wrap}.seo-disclaimer{font-size:.86rem;color:#526679;margin-top:24px!important}@media(max-width:600px){.seo-hero,.seo-content{padding:18px;margin:14px 8px}.seo-quicklinks a{width:100%;text-align:center}}


/* PEARL Pro UI — design layer, standalone and framework-free */
:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;color:#16263b;background:#f4f7fb;--primary:#124f85;--navy:#112c4a;--line:#dfe8f1}
body{color:#172b41;background:#f4f7fb}
header{background:#fff;color:#18314a;padding:17px clamp(20px,4vw,65px);border-bottom:1px solid var(--line);box-shadow:0 2px 14px #09254007}
.brand{color:#113e68;font-size:21px;letter-spacing:-.025em}.brand span{font-weight:650}.brand small{font-size:10px;border-radius:100px;padding:5px 9px;margin-left:6px;background:#e5f2ff;color:#175b97}
header p{color:#6a7c90;font-size:12px}.header-pill{color:#1d7566;border:1px solid #bbdfd4;background:#effbf6;font-weight:700;font-size:11px}
main{padding:18px clamp(12px,2.5vw,36px);max-width:1600px}
.hero-pro{max-width:none;position:relative;overflow:hidden;border:1px solid #d8e8f8;background:radial-gradient(circle at 96% 25%,#d9eefe,transparent 32%),linear-gradient(125deg,#eaf4ff,#fff 69%);padding:clamp(22px,3vw,43px);margin:8px 0 20px;box-shadow:0 12px 35px #163d6710;border-radius:22px}
.hero-pro h1{font-size:clamp(1.8rem,3.7vw,3.2rem);letter-spacing:-.045em;line-height:1.08;max-width:770px;color:#10385e;margin:12px 0 14px}
.hero-pro p{max-width:710px;font-size:clamp(.95rem,1.25vw,1.1rem);color:#4c647c;line-height:1.65}
.seo-eyebrow{font-weight:850;font-size:11px;letter-spacing:.12em;color:#1e78a5}
.seo-quicklinks{gap:9px;margin-top:20px}.seo-quicklinks a{border-radius:10px;padding:11px 17px;font-size:13px;border:1px solid #cbddea;background:#fff}
.seo-quicklinks a.hero-main{background:#165b94;border-color:#165b94;color:white;box-shadow:0 3px 7px #165b9424}.seo-quicklinks a:hover{filter:brightness(.96)}
.hero-proof{display:flex;flex-wrap:wrap;gap:8px 23px;font-size:12px;font-weight:650;color:#4b6a80;margin-top:22px}
.tabs{display:flex;gap:9px;background:#eaf0f6;padding:6px;border-radius:14px;width:max-content;max-width:100%;margin:0 0 17px}
.tabs button{font-size:13px;border:0;border-radius:10px;padding:13px 18px;background:transparent;color:#42627e;white-space:nowrap}
.tabs button.active{background:#fff;color:#104d80;box-shadow:0 2px 10px #0d315617}
.workflow-strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:17px}
.workflow-step{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;border:1px solid #dfebf5;background:#fff;min-width:0}
.workflow-step b{display:grid;place-items:center;flex-shrink:0;background:#e8f3ff;border-radius:9px;color:#145c98;font-size:12px;width:35px;height:35px}
.workflow-step span{display:grid;gap:2px}.workflow-step strong{font-size:13px;color:#193c5b}.workflow-step small{font-size:11px;color:#758a9d}
.cols{grid-template-columns:minmax(255px,1.04fr) minmax(325px,1.3fr) minmax(310px,1fr);gap:15px}
.pane,.toolpane{border:1px solid #e0e8f0;border-radius:17px;padding:22px;background:#fff;box-shadow:0 7px 24px #132d4810}
.pane h2{font-size:18px;letter-spacing:-.025em;color:#173b59;margin-bottom:6px}
.section-intro{font-size:12px;line-height:1.55;color:#667e90;margin:0 0 16px}
h3{color:#274f6a}.hint{font-size:12px;color:#718398}
label{font-size:12px;color:#2c4960}input[type=file]{font-size:12px}.drop{display:block;border:2px dashed #7daed5;background:linear-gradient(140deg,#f1f8ff,#fff);padding:18px;border-radius:14px;font-size:14px;color:#155987;text-align:center}
.drop input{color:#225877}.drop small{line-height:1.5}button{font-size:12px;border:1px solid #d6e3ed;background:#f7fafc;color:#28536f;border-radius:9px;min-height:37px;transition:background .15s,transform .15s}
button.primary{background:#155d99;border-color:#155d99;color:#fff}button:hover{background:#eaf4fb}button.primary:hover{background:#0f4e82}
button:active{transform:translateY(1px)}.row{gap:7px}
.controls .row button{min-width:76px}input[type=range]{accent-color:#226fa8}
.preview-wrap{background:repeating-conic-gradient(#eaf0f4 0 25%,#f9fbfc 0 50%) 50%/18px 18px;min-height:270px;padding:16px}
#photoPreview{width:min(100%,300px);box-shadow:0 5px 26px #1b3d5e35;border-color:#becfe1}.divider{margin:24px 0}
.fields{gap:5px 12px}.fields label{font-size:12px;margin:8px 0}.fields input:not([type=checkbox]):not([type=color]),.fields select{min-height:41px;font-size:13px;border-color:#ccdce8;background:#fff;border-radius:9px}
.advanced-group{border:1px solid #dfeaf2;border-radius:12px;background:#fbfdff;padding:0 13px;margin:17px 0}
.advanced-group>summary{cursor:pointer;padding:15px 1px;font-weight:800;font-size:13px;color:#1a527c;list-style-position:inside}.advanced-group>summary:hover{color:#0d72ae}
.advanced-group[open]>summary{border-bottom:1px solid #e2eaf1;margin-bottom:8px}.advanced-group>.fields{padding-bottom:12px}
.advanced-group .hint{line-height:1.65}.sheet-pane .summary{border-radius:11px;background:#edf7fc;color:#205977;padding:12px;line-height:1.6}.pages{background:#f4f7fa;border:1px solid #e1e8ef;border-radius:13px;padding:16px 8px;margin:13px 0;min-height:130px}.pages canvas{box-shadow:0 5px 20px #20435a21}
.actions.vertical{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.actions.vertical button{min-height:43px}.actions.vertical #downloadPDF{grid-column:span 2;font-size:14px}
.print-tip{margin-top:15px;padding:12px 14px;background:#fff9e9;border:1px solid #f4e2b0;border-radius:11px;display:grid;gap:4px;color:#66532a;font-size:11px;line-height:1.55}
.print-tip strong{font-size:12px}.print-tip span{display:block}.thumb{width:72px}.thumb img{width:72px;border-radius:9px}.toolpane{max-width:940px;margin:0 auto;padding:28px}.toolpane>h2{font-size:25px}
.knowledge-center{max-width:none;border-radius:17px;border:1px solid #e0e9f1;box-shadow:none;padding:clamp(18px,3vw,35px);margin:26px 0}.knowledge-center>h2:first-child{font-size:1.5rem;margin-top:0}.seo-content h2{color:#174d79}footer{background:#eaf0f5;margin-top:35px}
@media(max-width:1230px){.cols{grid-template-columns:repeat(2,minmax(0,1fr))}.sheet-pane{grid-column:1/-1}.pages{min-height:200px}.workflow-step small{font-size:10px}}
@media(max-width:780px){.workflow-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.tabs{width:100%;overflow:auto;flex-wrap:nowrap}.tabs button{flex-shrink:0}.cols{grid-template-columns:1fr}.sheet-pane{grid-column:auto}.controls,.preview-pane,.sheet-pane{margin-bottom:14px}.hero-pro{padding:22px}.header-pill{white-space:normal}}
@media(max-width:480px){header{padding:15px}.header-pill{margin-top:9px}.brand{font-size:19px}.hero-pro{margin:3px 0 14px}.hero-proof{gap:9px}.workflow-step{padding:10px;gap:8px}.workflow-step small{font-size:10px}.pane{padding:16px}.fields{column-gap:8px}.actions.vertical{grid-template-columns:1fr}.actions.vertical #downloadPDF{grid-column:auto}.seo-quicklinks a{width:100%}.seo-content{margin:15px 0}}

/* 2.1.1: accessible, intentional hero design; explicit selectors prevent CSS collisions */
body .pearl-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,.85fr);gap:clamp(22px,4vw,70px);align-items:center;margin:6px 0 24px;padding:clamp(28px,4.4vw,70px);border:1px solid #d9e5f0;border-radius:24px;background:linear-gradient(115deg,#fff 0%,#f8fbff 56%,#eaf4ff 100%);box-shadow:0 12px 40px rgba(19,50,84,.055);min-height:390px;max-width:none}
.pearl-hero-copy{min-width:0}.pearl-hero .pearl-kicker{display:flex;align-items:center;flex-wrap:wrap;gap:9px;color:#1e6797;letter-spacing:.11em;font-size:11px;font-weight:800;line-height:1.5}.pearl-kicker-dot{display:inline-block;width:8px;height:8px;background:#12a586;border-radius:50%;box-shadow:0 0 0 4px #d8f5ed}.pearl-kicker-sep{opacity:.35}
body .pearl-hero h1{font-size:clamp(34px,4.3vw,64px);font-weight:850;letter-spacing:-.055em;line-height:1.08;color:#123554;max-width:790px;margin:21px 0 18px}body .pearl-hero h1 span{color:#1767a2}
body .pearl-hero .pearl-lede{color:#546d80;font-size:clamp(15px,1.15vw,18px);line-height:1.7;max-width:650px;margin:0}
.pearl-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:29px}.pearl-hero-actions a{display:inline-flex;align-items:center;justify-content:center;gap:15px;min-height:50px;padding:12px 22px;border-radius:11px;font-size:14px;font-weight:750;text-decoration:none;transition:transform .15s,background .15s;line-height:1.2}.pearl-hero-actions a:hover{transform:translateY(-1px)}.pearl-cta{background:#155b93;color:white!important;box-shadow:0 5px 15px #155b9329}.pearl-cta:hover{background:#0d4979}.pearl-cta-secondary{color:#174c77!important;background:#fff;border:1px solid #cedce9}.pearl-cta-secondary:hover{background:#eff7fd}
.pearl-trust{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:28px;font-size:12px;color:#536e80;font-weight:650;line-height:1.5}.pearl-trust span{white-space:nowrap}
.pearl-hero-visual{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;padding:18px 42px 20px 8px}.pearl-paper{background:#fff;width:min(100%,305px);aspect-ratio:210/260;max-height:340px;border:1px solid #dce5ed;box-shadow:0 22px 45px #16416125,0 3px 8px #16416110;border-radius:8px;transform:rotate(3deg);padding:19px;display:flex;flex-direction:column;gap:15px}.pearl-paper-header{display:flex;justify-content:space-between;align-items:center;color:#8897a6;font-size:8px;letter-spacing:.07em;font-weight:800;gap:4px}.pearl-sample-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;align-content:start}.pearl-sample-photo{background:linear-gradient(160deg,#dceaf4,#f4f7fa);aspect-ratio:35/45;border:1px solid #bfd5e4;border-radius:2px;position:relative;overflow:hidden}.pearl-sample-photo:before{content:'';position:absolute;width:26%;aspect-ratio:1;border-radius:50%;left:37%;top:20%;background:#8bb0c7}.pearl-sample-photo:after{content:'';position:absolute;width:68%;height:43%;border-radius:45% 45% 0 0;left:16%;bottom:0;background:#5c89ab}.pearl-paper-footer{display:flex;gap:6px;margin-top:auto}.pearl-paper-footer i{height:4px;width:22px;border-radius:8px;background:#dce8ef}.pearl-float-card{position:absolute;bottom:26px;left:0;background:#fff;border:1px solid #daebe4;box-shadow:0 10px 25px #14446822;border-radius:11px;padding:13px 16px;color:#118767;font-size:15px;white-space:nowrap}.pearl-float-card strong{font-size:12px;color:#1d4259;margin-left:4px}.pearl-float-card small{display:block;color:#79909e;font-size:10px;margin:3px 0 0 25px}
.pearl-toolnav-wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;margin:0 0 21px}.pearl-toolnav-heading span{font-size:10px;font-weight:800;letter-spacing:.13em;color:#26749d}.pearl-toolnav-heading p{margin:4px 0 0;font-size:17px;font-weight:750;color:#1d3c56}.pearl-toolnav-wrap .pearl-tools{margin:0;padding:5px;gap:3px;background:#e9f0f6;border:1px solid #dae5ed;width:auto;max-width:100%;border-radius:12px}.pearl-toolnav-wrap .pearl-tools button{font-size:13px;display:flex;align-items:center;gap:9px;padding:13px 15px;min-height:45px}.pearl-toolnav-wrap .pearl-tools button.active{color:#fff;background:#175c92;box-shadow:0 4px 12px #175c9229}.pearl-tools button>span{font-size:15px}
.pearl-workflow-title{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:10px 2px 12px;flex-wrap:wrap}.pearl-workflow-title strong{font-size:15px;color:#213f56}.pearl-workflow-title span{font-size:12px;color:#738698}.workflow-step{min-height:66px;gap:12px}.workflow-step b{font-size:12px;width:37px;height:37px}.workflow-step strong{font-size:13px}.workflow-step small{font-size:11px;line-height:1.4}
@media(max-width:1050px){body .pearl-hero{grid-template-columns:minmax(0,1fr) minmax(220px,.65fr);padding:32px}.pearl-hero-visual{padding:10px 23px 20px 0}.pearl-paper{padding:15px;gap:12px}.pearl-sample-grid{gap:6px}}
@media(max-width:760px){body .pearl-hero{grid-template-columns:1fr;min-height:0;gap:13px;padding:26px 22px}.pearl-hero-visual{display:none}.pearl-toolnav-wrap{display:block}.pearl-toolnav-heading{margin-bottom:12px}.pearl-toolnav-wrap .pearl-tools{width:100%;overflow-x:auto;flex-wrap:nowrap}.pearl-toolnav-wrap .pearl-tools button{flex-shrink:0}.pearl-hero-actions a{flex:1}.pearl-trust{gap:8px 14px}}
@media(max-width:460px){body .pearl-hero h1{font-size:35px}.pearl-hero-actions{display:grid;grid-template-columns:1fr}.pearl-hero-actions a{width:100%}.pearl-hero .pearl-kicker{font-size:9px}.pearl-kicker-sep{display:none}.workflow-step{padding:9px}.pearl-workflow-title span{display:none}}