/* The door (join.html): the approved design from design/one-door/door (Omar, Oct 14 2026), the "Outlined" plan
   table with ohelloo Work in every plan. Page-only additions are at the end. */
:root{--bg:#FBFAFD;--ink:#22132F;--muted:#6E6579;--line:#E6DFEE;--line2:#F0EBF5;--soft:#F2EEF8;--lilac:#EFE6F7;--purple:#5B2A86;--pop:#F2C14E;--good:#1F7A4D}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.55 Inter,system-ui,sans-serif}
main{max-width:1512px;margin:0 auto;padding:24px 24px 64px}
@media (max-width:620px){main{padding:20px 12px 48px}}
/* the browser frame */
.win{border:1px solid var(--line);border-radius:18px;background:#fff;overflow:hidden}
.top{display:flex;align-items:center;justify-content:space-between;padding:12px 32px}
.top a{font-size:13px;color:var(--muted);text-decoration:none}
.prog{display:flex;gap:6px;padding:0 32px}
.prog i{flex:1;height:4px;border-radius:2px;background:var(--line2);transition:background .3s}
.prog i.on{background:var(--purple)}
.body{padding:26px 32px 32px;min-height:560px}
.body:has(.pxg){padding-top:18px;padding-bottom:20px}
.step{font-size:12px;font-weight:600;color:var(--purple);letter-spacing:.05em;margin:0 0 4px}
.q{font-size:26px;font-weight:700;letter-spacing:-.02em;margin:0 0 4px;line-height:1.15}
.qs{color:var(--muted);margin:0 0 18px}
/* type cards: color block + one premium symbol, faint */
.blocks{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.blk{all:unset;cursor:pointer;position:relative;overflow:hidden;border-radius:18px;aspect-ratio:3/4.1;padding:16px 15px;display:flex;flex-direction:column;justify-content:flex-end;transition:opacity .25s,box-shadow .25s;background:var(--cb)}
.blk:focus-visible{outline:2px solid var(--purple);outline-offset:3px}
.blk .pic{position:absolute;inset:0;background-size:cover;background-position:center}
.blk .scrim{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 52%,var(--cb) 84%)}
.blk .n{position:absolute;top:14px;left:15px;font-size:11px;font-weight:600;letter-spacing:.08em;opacity:.7}
.blk .w{position:relative;font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.05;margin:0 0 6px}
.blk .ex{position:relative;font-size:12.5px;line-height:1.45;opacity:.85}
.c-trades{--cb:#4e2473;background:#4e2473;color:#fff;--edge:rgba(255,255,255,.55)}.c-food{--cb:#edb941;background:#edb941;color:#22132F;--edge:rgba(34,19,47,.35)}.c-bakery{--cb:#efedfb;background:#efedfb;color:#22132F;--edge:rgba(91,42,134,.4)}.c-salon{--cb:#201626;background:#201626;color:#EFE6F7;--edge:rgba(239,230,247,.5)}.c-shops{--cb:#efedfa;background:#efedfa;color:#5B2A86;box-shadow:inset 0 0 0 1px #E6DFEE;--edge:rgba(91,42,134,.45)}
.blocks .blk{transition:opacity .25s,box-shadow .2s}
.blocks .blk:hover{box-shadow:0 0 0 3px #fff,0 0 0 5px #CDB3E8,0 18px 34px -20px rgba(91,42,134,.45)}
.blocks.picked .blk:not(.on){opacity:.45}
.blocks.picked .blk:not(.on):hover{opacity:1}
.blocks .blk.on{opacity:1;box-shadow:0 0 0 3px #fff,0 0 0 5px #5B2A86}
.chk{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:#fff;color:#5B2A86;display:grid;place-items:center;opacity:0;transform:scale(.6);transition:opacity .2s,transform .25s cubic-bezier(.3,1.5,.5,1);z-index:2;box-shadow:0 0 0 2px #5B2A86}
.blk.on .chk{opacity:1;transform:none}
.else{margin:14px 0 0;font-size:13px;color:var(--muted)}.else a{color:var(--purple)}
/* header band for later steps: their color and symbol */
.band{position:relative;overflow:hidden;border-radius:12px;padding:16px 18px;margin:0 0 20px;display:flex;align-items:center;gap:12px;min-height:84px}
.band .pic{position:absolute;top:0;bottom:0;right:0;background-size:cover;background-position:center 35%;-webkit-mask-image:linear-gradient(to left,#000 55%,transparent);mask-image:linear-gradient(to left,#000 55%,transparent)}
.band .pic{width:150px;right:78px;-webkit-mask-image:linear-gradient(to left,transparent,#000 25%,#000 60%,transparent);mask-image:linear-gradient(to left,transparent,#000 25%,#000 60%,transparent)}
.band b{position:relative;font-size:18px;font-weight:700;letter-spacing:-.01em}
.band span{position:relative;font-size:13px;opacity:.8}
.band a{position:relative;margin-left:auto;font-size:13px;color:inherit;opacity:.85}
/* pills, inputs, buttons */
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{all:unset;cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-weight:500;font-size:14px;background:#fff;transition:border-color .2s,box-shadow .2s,background .2s}
.pill:hover{border-color:#CBBEDB}
.pill.on{border-color:var(--purple);box-shadow:0 0 0 1px var(--purple);background:#FAF7FD}
.pill:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
.qq{margin:0 0 18px}.qq p{font-weight:600;margin:0 0 8px}
.field{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:11px 14px;background:#fff;max-width:560px}
.field input{all:unset;flex:1;font-size:15px}
.found{border:1px solid var(--line);border-radius:12px;padding:14px;max-width:560px;margin-top:12px;display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:center}
.found .ph{width:52px;height:52px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--purple);font-weight:700}
.found b{display:block}.found small{color:var(--muted);display:block}
.stars{color:#C9922A;font-size:13px}
.row{display:flex;gap:10px;align-items:center;margin-top:22px;flex-wrap:wrap}
.btn{all:unset;cursor:pointer;border-radius:12px;padding:11px 18px;font-weight:600;font-size:14px;text-align:center}
.btn.dark{background:#5B2A86;color:#fff}
.btn.dark.off{opacity:.3;cursor:default}
.btn.ghost{color:var(--muted)}
.btn.line{border:1px solid var(--line);background:#fff}
.btn.g{display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);background:#fff}
.btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px}
/* step 2-5: the card they picked stays on the left */
.split{display:grid;grid-template-columns:240px minmax(0,1fr);gap:36px;align-items:start}
.main{min-width:0}
.pcard{position:sticky;top:16px;overflow:hidden;border-radius:18px;aspect-ratio:3/4.1;display:flex;flex-direction:column;justify-content:flex-end;padding:16px 15px;background:var(--cb);box-shadow:0 0 0 3px #fff,0 0 0 5px #5B2A86}
.pcard .pic{position:absolute;inset:0;background-size:cover;background-position:center}
.pcard .scrim{position:absolute;inset:0;background:linear-gradient(to bottom,transparent 52%,var(--cb) 84%)}
.pcard .nm{position:relative}
.pcard b{display:block;font-size:21px;font-weight:700;letter-spacing:-.02em;line-height:1.08}
.pcard small{display:block;font-size:13px;opacity:.85;margin-top:4px}
.pcard .chg:hover{background:#fff!important}
.pcard .chg{position:absolute;top:12px;right:12px;z-index:2;background:rgba(255,255,255,.92)!important;color:#5B2A86!important;box-shadow:0 0 0 1px rgba(91,42,134,.18),0 4px 12px -6px rgba(34,19,47,.4);transition:background .2s;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:inherit;text-decoration:none;padding:6px 11px;border-radius:8px;background:color-mix(in srgb,currentColor 14%,transparent)}
.pcard .ck{position:absolute;top:12px;right:12px;width:28px;height:28px;border-radius:50%;background:#fff;color:#5B2A86;display:grid;place-items:center;box-shadow:0 0 0 2px #5B2A86}
@media (max-width:900px){.split .plans{grid-template-columns:1fr}}
@media (max-width:620px){.split{grid-template-columns:1fr;gap:18px}.pcard{position:relative;top:auto;aspect-ratio:auto;flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;padding:10px 12px 10px 10px}.pcard .pic{position:relative;inset:auto;flex:none;width:60px;height:60px;border-radius:12px;background-color:var(--cb);background-image:var(--tile)!important;background-size:cover;background-position:center;background-repeat:no-repeat}.pcard .scrim,.pcard .ck{display:none}.pcard b{font-size:16px}.pcard small{margin-top:1px}.pcard .chg{position:relative;top:auto;right:auto;margin:0 0 0 auto;align-self:center}}
.pill{display:inline-flex;align-items:center;gap:6px}
.pill svg{width:13px;height:13px;flex:none;color:#5B2A86}
.multi{font-size:12px;font-weight:600;color:#8A7F97;margin-left:6px}
.pcard small,.pxme small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pxme small{max-width:260px}
.pill.else{display:inline-flex;align-items:center;gap:6px;border-style:dashed;color:#5B2A86}
.pill.else.on{border-style:solid}
.otherbox{margin-top:16px;max-width:560px}
.otherbox label{display:block;font-weight:600;margin:0 0 8px}
.otherbox .field:focus-within{border-color:#5B2A86;box-shadow:0 0 0 3px rgba(91,42,134,.12)}
/* plans */
/* plan cards, in the ohelloo.com package-card style (site/packages.js), tailored for picking */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding-top:12px;align-items:stretch}
.plan{all:unset;box-sizing:border-box;cursor:pointer;position:relative;background:#F5F3F8;border:1.5px solid #fff;border-radius:18px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0;font-variant-numeric:tabular-nums;transition:opacity .25s,box-shadow .25s,border-color .25s,background .25s}
.plan:hover{border-color:#B996E6;background:#FBF8FE;box-shadow:0 0 0 4px rgba(185,150,230,.18),0 18px 34px -22px rgba(91,42,134,.35)}
.plan:hover .pick{background:#F3EEF8;border-color:#5B2A86;color:#5B2A86}
.plan.on:hover .pick{background:#4E2375;color:#fff}
.plan .pick{transition:background .2s,border-color .2s,color .2s}
.plan:focus-visible{outline:2px solid #5B2A86;outline-offset:3px}
.plan .tag{position:absolute;z-index:2;left:50%;top:0;transform:translate(-50%,-50%);height:26px;display:grid;place-items:center;padding:0 12px;background:linear-gradient(180deg,#F7D27A,#F2C14E);color:#3A2400;font-size:12.5px;font-weight:700;border:1px solid #E2AE34;border-radius:8px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.55)}
.plan .pnm{display:flex;align-items:center;gap:10px}
.plan .ic{width:34px;height:34px;flex:none;border-radius:12px;background:#fff;border:1px solid #DCD3E6;color:#5B2A86;display:grid;place-items:center}
.plan .ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.plan .pnm b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.plan .ln{font-size:14px;color:#6E6579;line-height:1.4;margin-top:-4px;min-height:2.8em}
.plan .amt{font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1}
.plan .amt small{font-size:16px;font-weight:600;letter-spacing:0;color:#6E6579;margin-left:2px}
.plan .plus{font-size:12.5px;font-weight:700;margin-bottom:-6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plan .more{flex:1;padding:2px 0 0;border-top:1px solid #E8E1EF;padding-top:14px}
.plan .ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:14.5px;line-height:1.45}
.plan .ticks li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px}
.plan .ticks li::before{content:"";width:20px;height:20px;border-radius:99px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%235B2A86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.plan .wkl{display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-size:13px;line-height:1.35;color:#4A3F57;background:#F7F2FC;border:1px solid #E9DFF4;border-radius:12px;padding:9px 11px}
.plan .wkl .wm{font-size:15px}
.plan .pick{display:block;text-align:center;font-weight:700;font-size:15px;padding:11px 16px;border-radius:12px;border:1.5px solid #5B2A86;background:#fff;color:#5B2A86}
.plan.on{border:1.5px solid #B996E6;background:linear-gradient(180deg,#FFFFFF,#F4EEFA);box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(185,150,230,.2),0 0 34px rgba(155,107,206,.32),0 26px 46px -22px rgba(91,42,134,.45)}
.plan.on .pick{background:#5B2A86;border-color:#5B2A86;color:#fff}
.plans.picked .plan:not(.on){opacity:.6}
.plans.picked .plan:not(.on):hover{opacity:1}
@media (max-width:900px){.plan .ln{min-height:0}}
.free{margin-top:14px;font-size:13.5px;color:var(--muted)}.free a{color:var(--purple);cursor:pointer}
/* ohelloo Work on its own, with the founder offer */
.wk{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:18px;align-items:center;margin-top:16px;border:1px solid #fff;border-radius:18px;padding:18px;background:#F5F3F8;transition:border-color .2s,box-shadow .25s,opacity .25s}
.wk:hover{border-color:#B996E6;background:#FBF8FE;box-shadow:0 0 0 4px rgba(185,150,230,.18),0 18px 34px -22px rgba(91,42,134,.35)}
.wk.on{border:1.5px solid #B996E6;background:linear-gradient(180deg,#FFFFFF,#F4EEFA);box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(185,150,230,.2),0 0 34px rgba(155,107,206,.32),0 26px 46px -22px rgba(91,42,134,.45)}
.plans.picked.wkon .plan{opacity:.55}
.wk.off{opacity:.6}.wk.off:hover{opacity:1}
.wk .lock{display:flex;align-items:baseline;gap:6px;font-size:17px;font-weight:700;letter-spacing:-.01em}
.wk .lock i{font-style:normal;color:#5B2A86}
.wk .lead2{font-size:13.5px;color:var(--muted);margin:2px 0 8px}
.wk ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:14px;line-height:1.45}
.wk ul li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px}
.wk ul li::before{content:'';width:20px;height:20px;border-radius:99px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%235B2A86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat}
.fo{border-radius:12px;background:#FFF8E6;border:1px solid #F4DFA6;padding:12px 14px}
.fo .fb{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:#7A5A0E;background:#F2C14E;border-radius:8px;padding:3px 8px}
.fo .fp{font-size:24px;font-weight:700;letter-spacing:-.02em;margin:6px 0 0}.fo .fp small{font-size:13px;font-weight:500;color:var(--muted)}
.pr2{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;margin:10px 0 2px}
.pr2 .now{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;color:#22132F}
.pr2 .per{font-size:14px;font-weight:600;color:#5c4a1f;margin-left:-4px}
.pr2 .was{font-size:17px;font-weight:500;color:#9A8A6A;text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:#B42318}
.pr2 .save{align-self:center;font-size:12px;font-weight:700;color:#fff;background:#B42318;border-radius:8px;padding:3px 8px;letter-spacing:.02em}
.free3{display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:#1F7A4D;margin:6px 0 2px}
.fo .fl{font-size:12.5px;color:#5c4a1f;margin-top:2px}
.fo.full{background:#FBFAFD;border-color:var(--line)}.fo.full .fb{background:#EFE6F7;color:#5B2A86}
.demo{margin-top:10px;font-size:12.5px;color:var(--muted)}.demo a{color:var(--purple);cursor:pointer;text-decoration:underline}
@media (max-width:900px){.wk{grid-template-columns:1fr}}
/* the ohelloo logo: waving-hand icon + wordmark (same as ohelloo.com) */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.brand img{width:32px;height:32px;border-radius:8px;flex:none}
.brand .word{height:19px;width:auto;fill:#5B2A86;display:block}
.wm{display:inline-flex;align-items:center;gap:.32em;line-height:1;font-size:20px}
.wm img{width:1.2em;height:1.2em;border-radius:.26em;flex:none}
.wm .word{height:.92em;width:auto;fill:#5B2A86;display:block}
.wm b{font-weight:800;letter-spacing:-.02em;color:#22132F}
/* step 5: the plan picker, one screen on a 14-inch laptop */
.pxtop{display:flex;justify-content:space-between;align-items:center;gap:24px;margin:0 0 12px}
.pxtop .q{font-size:26px;margin:0 0 8px;display:flex;align-items:baseline;gap:12px}
.pxst{white-space:nowrap;font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:#5B2A86;background:#F3EEF8;border-radius:8px;padding:3px 8px;align-self:center}
.pxwhy{display:inline-flex;gap:8px;align-items:center;max-width:1120px;margin:0;font-size:13.5px;line-height:1.4;color:#4A3F57;background:#FFF8E6;border:1px solid #F4DFA6;border-radius:12px;padding:6px 12px}
.pxwhy svg{flex:none;color:#C9922A}
.pxme{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:8px 10px 8px 8px;background:#fff;flex:none}
.pxth{width:44px;height:44px;border-radius:12px;background-size:cover;background-position:center;flex:none}
.pxme b{display:block;font-size:14px}.pxme small{display:block;font-size:12.5px;color:var(--muted)}
.chg2{display:inline-flex;align-items:center;gap:5px;font-size:12.5px;font-weight:600;color:#5B2A86;text-decoration:none;padding:6px 10px;border-radius:8px;background:#F3EEF8;margin-left:6px}
.pxg{position:relative;display:grid;grid-template-columns:210px repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(8,auto) 14px;column-gap:12px}

.pxbg{grid-row:1/-1;border-radius:12px;background:#F7F4FA;border:1.5px solid transparent;cursor:pointer;transition:background .2s,border-color .2s,box-shadow .25s}
.pxbg.rec{background:#F5EFFB}
.pxbg.on{border-color:#B996E6;background:linear-gradient(180deg,#FFFFFF,#F4EEFA);box-shadow:inset 0 1px 0 #fff,0 0 0 5px rgba(185,150,230,.2),0 0 34px rgba(155,107,206,.28),0 22px 40px -22px rgba(91,42,134,.45)}
.pxbg.hov:not(.on){border-color:#CDB3E8;background:#FBF8FE;box-shadow:0 0 0 4px rgba(185,150,230,.16)}
.pxh0{grid-row:1;grid-column:1;align-self:end;padding:0 0 12px}
.pxtr{display:grid;gap:7px;font-size:13px;font-weight:600;color:#4A3F57}
.pxtr span{display:flex;align-items:center;gap:7px}
.pxtr svg{color:#1F7A4D;flex:none}
.pxh{grid-row:1;position:relative;z-index:1;padding:16px 18px 10px;cursor:pointer}
.pxtag{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);height:26px;display:grid;place-items:center;padding:0 12px;background:linear-gradient(180deg,#F7D27A,#F2C14E);color:#3A2400;font-size:12px;font-weight:700;border:1px solid #E2AE34;border-radius:8px;white-space:nowrap;box-shadow:inset 0 1px 0 rgba(255,255,255,.55);max-width:calc(100% - 24px);overflow:hidden;text-overflow:ellipsis}
.pxn{display:flex;align-items:center;gap:10px}
.pxn .ic{width:32px;height:32px;flex:none;border-radius:12px;background:#fff;border:1px solid #DCD3E6;color:#5B2A86;display:grid;place-items:center}
.pxn .ic svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pxn b{font-size:19px;font-weight:800;letter-spacing:-.02em}
.pxl{margin:4px 0 8px;font-size:13.5px;color:#6E6579;min-height:1.4em}
.pxp{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pxp .amt{font-size:34px;font-weight:800;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.pxp .amt small{font-size:15px;font-weight:600;color:#6E6579;letter-spacing:0;margin-left:2px}
.pxb{all:unset;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:14px;padding:9px 16px;border-radius:12px;border:1.5px solid #5B2A86;background:#fff;color:#5B2A86;transition:background .2s,color .2s,border-color .2s}
.pxh.hov:not(.on) .pxb{background:#F3EEF8;border-color:#5B2A86;color:#5B2A86}
.pxh.on .pxb{background:#5B2A86;color:#fff;border-color:#5B2A86}
.pxr{grid-column:1;display:flex;align-items:center;gap:10px;padding:5px 0;border-top:1px solid #EDE7F3;font-size:14px}
.pxi{width:26px;height:26px;flex:none;border-radius:8px;background:#F3EEF8;color:#5B2A86;display:grid;place-items:center}
.pxi svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pxc{position:relative;z-index:1;display:flex;align-items:center;gap:9px;padding:5px 18px;min-height:37px;border-top:1px solid #EDE7F3;font-size:13.5px;line-height:1.35;color:#3A2E47;cursor:pointer}
.pxc.up span{font-weight:600;color:#22132F}
.pxc.none{color:#A79BB5}
.tk{flex:none;width:18px;height:18px;border-radius:99px;margin-top:0;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%235B2A86' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:inset 0 0 0 1px #E3D8EE}
.pxc.on .tk{background-color:#5B2A86;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:none}
.pxfoot{display:grid;grid-template-columns:1fr;gap:12px;align-items:stretch;margin-top:18px}
.pxo{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;justify-content:center;gap:2px;border:1.5px solid #ECE6F2;border-radius:18px;padding:9px 16px;background:#fff;transition:border-color .2s,box-shadow .2s,background .2s}
.pxo:hover{border-color:#CDB3E8;background:#FBF8FE}
.pxo.on{border-color:#B996E6;box-shadow:0 0 0 4px rgba(185,150,230,.2)}
.pxo b{font-size:15px}
.pxot{font-size:13px;color:#6E6579}
.wkx{background:#FFFBF0;border-color:#F4DFA6;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;align-items:center}
.wkx:hover{background:#FFF6DE;border-color:#EBCB78}
.wkx .wm{font-size:18px}
.wkx .pxot{grid-column:1;grid-row:2}
.pxof{grid-column:2;grid-row:1;justify-self:end;display:flex;align-items:baseline;gap:6px}
.pxof .now{font-size:26px;font-weight:800;letter-spacing:-.03em}
.pxof .per{font-size:13px;font-weight:600;color:#5c4a1f}
.pxof s{font-size:15px;color:#9A8A6A;text-decoration-color:#B42318;text-decoration-thickness:2px}
.pxof .save{white-space:nowrap;align-self:center;font-size:11.5px;font-weight:700;color:#fff;background:#B42318;border-radius:8px;padding:2px 7px}
.pxog{grid-column:1/3;grid-row:3;display:flex;white-space:nowrap;align-items:center;gap:5px;font-size:12.5px;font-weight:700;color:#1F7A4D}
.pxgo{display:flex;align-items:center;gap:14px;border-radius:18px;background:#22132F;color:#fff;padding:10px 10px 10px 18px}
.pxsum span{display:block;font-size:12.5px;opacity:.75}
.pxsum b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
.pxsum small{display:block;font-size:11.5px;opacity:.7;white-space:nowrap}
@media (min-width:1101px){.pxfoot{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) 600px}.pxfoot:not(:has(.wkx)){grid-template-columns:minmax(0,1fr) 600px}.pxgo{width:600px}.pxsum{width:210px;flex:none}.pxsum small{white-space:normal!important;line-height:1.3}.pxcta{flex:1;justify-content:center;min-width:0}.pxsum span,.pxsum b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.pxcta{display:inline-flex!important;align-items:center;gap:8px;background:#F2C14E!important;color:#3A2400!important;padding:14px 20px!important;font-size:15px!important;white-space:nowrap}
.pxcta:hover{background:#F7D27A!important}
.pxgo .btn.ghost{color:#CDB3E8;padding:8px 6px}

/* calmer plan step: one accent, plain rows, quiet type */
.pxwhy{display:flex!important;align-items:center;gap:10px;background:none!important;border:0!important;padding:0!important;max-width:none!important;font-size:14.5px!important;color:#6E6579!important;white-space:nowrap;overflow:hidden}
.pxwt{overflow:hidden;text-overflow:ellipsis}
.pxpk{flex:none;display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;color:#3A2400;background:#FCEFC7;border:1px solid #F2D58A;border-radius:8px;padding:3px 10px 3px 8px}
.pxpk svg{width:13px;height:13px;color:#C9922A}
.pxtop .q{margin-bottom:6px!important}
.pxcap{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5B2A86}
.pxcap2{display:block;font-size:13px;color:#8A7F97;margin-top:4px}
.pxh0{padding-bottom:16px!important}
.pxbg{background:transparent!important;border-color:transparent!important;box-shadow:none!important}
.pxbg.hov:not(.on){background:#FAF8FC!important}
.pxbg.on{background:#F8F4FC!important;border:1.5px solid #D6C2EE!important;box-shadow:0 18px 40px -26px rgba(91,42,134,.45)!important}
.pxn b{font-size:18px!important;font-weight:700!important;letter-spacing:-.015em}
.pxl{font-size:13px!important;color:#8A7F97!important;margin:2px 0 10px!important}
.pxp .amt{font-size:32px!important;font-weight:700!important}
.pxh .pxb{font-size:13.5px!important;padding:8px 14px!important;border:1px solid #D9D0E3!important;color:#4A3F57!important;font-weight:600!important}
.pxh.hov:not(.on) .pxb{border-color:#5B2A86!important;color:#5B2A86!important;background:#fff!important}
.pxh.on .pxb{background:#5B2A86!important;border-color:#5B2A86!important;color:#fff!important}
.pxtag{font-size:11.5px!important;height:22px!important}
.pxr{padding:0!important;border-top:1px solid #F1ECF6!important;font-size:13px!important}
.pxr b{font-weight:600;color:#8A7F97}
.pxc{border-top:1px solid #F1ECF6!important;font-size:13.5px!important;color:#9A90A6!important;font-weight:400!important;min-height:38px!important;padding:6px 18px!important}
.pxc span{font-weight:400!important}
.pxc.up span{color:#3A2E47!important}
.pxc.on span{color:#22132F!important}

.pxc .dash::before{background:#E3DCEA!important}
.pxo{border-color:#EFEAF4!important}
.wkx{background:#FFFCF4!important;border-color:#F4E6BF!important}
.pxgo{background:#22132F}

/* ---- picked-plan style options (switcher on the options link) ---- */
.pxc:not(.none)::before{content:"";flex:none;width:18px;height:18px;border-radius:99px;background:#F3EFF7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23B9ADC6' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
.pxc.on:not(.none)::before{content:"";flex:none;width:18px;height:18px;border-radius:99px;background:#5B2A86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat}
/* A: purple header */
/* B: gold spotlight */
/* C: lifted card */
/* D: dark column */
/* switcher */

/* plan headers: outcome headline + who-it's-for subcopy do the lifting */
.pxey{margin:0;font-size:13px;font-weight:700;color:#5B2A86;letter-spacing:.01em}
.pxhl{margin:3px 0 0;font-size:20px;font-weight:800;letter-spacing:-.022em;line-height:1.15;color:#22132F}
.pxsb{margin:5px 0 10px;font-size:13.5px;line-height:1.45;color:#6E6579;min-height:2.9em}
.pxh{padding:20px 20px 12px!important}
.pxp .amt{font-size:30px!important}
.pxc{min-height:34px!important;padding:4px 18px!important}
.pxtag{top:0}
@media (max-width:1100px){.pxmc .pxhl{font-size:19px}.pxmc .pxsb{margin:0;min-height:0}.pxwhy{white-space:normal!important;flex-wrap:wrap;align-items:flex-start!important}.pxwt{overflow:visible;text-overflow:clip}.pxtop{align-items:stretch!important;min-width:0}.pxtop>div{min-width:0}.pxtop .q{font-size:22px!important}.pxme{align-self:flex-start}}

/* 3 or 4 plan columns */
.pxg{grid-template-columns:200px repeat(var(--n,3),minmax(0,1fr))!important}
.pxpr{display:flex;align-items:baseline;gap:8px}
.pxpr .was{font-size:15px;color:#9A8A6A;text-decoration:line-through;text-decoration-color:#B42318;text-decoration-thickness:2px}
.pxnote{display:flex;align-items:center;gap:5px;margin:8px 0 0;font-size:12px;font-weight:700;color:#1F7A4D}
.pxtag.fo{background:#B42318;border-color:#9A1C13;color:#fff;box-shadow:none}
.wkh .pxey .wm{font-size:15px}
.pxbg.wk{background:#FFFCF4!important}
.pxbg.wk.on{background:#FFF8E6!important}
.pxfoot{grid-template-columns:minmax(0,1fr) 600px!important}
.pxmc .pxpr{margin-left:auto}.pxmc .pxpr .amt{font-size:26px;font-weight:800}
@media (max-width:1100px){.pxfoot{grid-template-columns:1fr!important}}

.pxg{grid-template-columns:168px repeat(var(--n,3),minmax(0,1fr))!important}
.pxg[style*="--n:4"] .pxhl{font-size:18.5px}
.pxg[style*="--n:4"] .pxsb{font-size:13px}
.pxg[style*="--n:4"] .pxh{padding:18px 16px 10px!important}
.pxg[style*="--n:4"] .pxc{padding:4px 14px!important}
.pxg[style*="--n:4"] .pxp .amt{font-size:28px!important}

.pxh{display:flex;flex-direction:column}
.pxsp{flex:1}
.pxnote{margin:0 0 6px!important}
/* card design options */
.pxbg{background:#fff!important;border:1px solid #DDD5E6!important;border-radius:12px;box-shadow:none!important}
.pxbg.wk{background:#FFFCF4!important}
.pxbg.on{border:2px solid #5B2A86!important;background:#FCFAFE!important}
.pxtag:not(.fo){background:#EFE6F7;color:#5B2A86;border-color:#D6C2EE;box-shadow:none}
.pxp{flex-direction:column;align-items:stretch;gap:8px}
.pxc{min-height:30px!important;padding-top:3px!important;padding-bottom:3px!important}
.pxsb{margin-bottom:6px}
.pxg .pxh{padding-top:15px!important}
.pxh .pxb{justify-content:center;border-radius:12px!important;padding:8px!important;background:#5B2A86!important;color:#fff!important;border-color:#5B2A86!important}
.pxh.on .pxb{background:#5B2A86!important;border-color:#5B2A86!important}
.pxh.hov:not(.on) .pxb,.pxh .pxb:hover{background:#5B2A86!important;border-color:#5B2A86!important;color:#fff!important}
.pxh.on .pxb:hover{background:#4E2375!important;color:#fff!important}

/* badges sit on their card: a strip across the top, inside the outline */
.pxg{grid-template-rows:28px auto repeat(8,auto) 14px!important}
.pxbg{grid-row:auto}
.pxh0{grid-row:2!important}
.pxband{grid-row:1;position:relative;z-index:2;display:flex;align-items:center;justify-content:center;margin:0;font-size:12px;font-weight:700;letter-spacing:.01em;color:#5B2A86;background:#EFE6F7;border-radius:12px 12px 0 0;cursor:pointer}
.pxband.fo{background:#FDECEA;color:#B42318}
.pxband.on{background:#5B2A86;color:#fff}
.pxband.fo.on{background:#B42318;color:#fff}
.pxbg.tagged{border:1.5px solid #D6C2EE!important}
.pxbg.wk.tagged{border-color:#F3C4BD!important}
.pxbg.tagged.on{border-color:#5B2A86!important}
.pxbg.wk.tagged.on{border-color:#B42318!important}
.pxbg.tagged:not(.on){border:1px solid #D6C2EE!important}
.pxband{border-radius:12px 12px 0 0;margin:1px 1px 0}
.pxbg.on .pxband{margin:0}
.pxsb{min-height:0!important;margin:3px 0 10px!important;font-size:14px!important}


/* ohelloo Work inside every plan */
.pxr.wkr{gap:6px;flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 0!important}
.pxr.wkr .wm{font-size:15px}
.wkin{font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#1F7A4D}
.pxc.wkr{background:#FFF8E6!important;border-top-color:#F4E2B0!important}
.pxc.wkr+.pxc:not(.wkr),.pxr.wkr+*{}
.pxc.wkr span{color:#3A2E47!important}
.wkx.app{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:14px;row-gap:4px;align-items:center}
.wkt{display:flex;align-items:center;gap:8px;grid-column:1;grid-row:1}
.wkt b{font-size:14.5px}
.wkx.app .wm{font-size:16px}
.wkx.app .pxof{grid-column:2;grid-row:1/3;align-self:center;flex-wrap:wrap;justify-content:flex-end;max-width:190px}
.wkx.app .pxog{grid-column:1;grid-row:2;white-space:normal}
.wkx.app.on{border-color:#B42318!important;box-shadow:0 0 0 4px rgba(180,35,24,.12)!important}
@media (min-width:1101px){.pxfoot:has(.wkx.app){grid-template-columns:minmax(0,.75fr) minmax(0,1.35fr) 560px!important}.pxfoot:has(.wkx.app) .pxgo{width:560px}}

/* simple footer */
.pxft{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:16px;padding-top:14px;border-top:1px solid #EDE7F3}
.pxalt{display:flex;flex-direction:column;gap:6px}
.pxlk{all:unset;cursor:pointer;display:block;line-height:1.45;font-size:14px;color:#4A3F57}
.pxlk u{color:#5B2A86;font-weight:600;text-underline-offset:3px}
.pxlk span{color:#8A7F97}
.pxlk s{text-decoration-color:#B42318}
.pxlk.on{color:#22132F;font-weight:600}
.pxlk > svg{margin-right:6px;color:#5B2A86;vertical-align:-2px}
.pxlk:focus-visible{outline:2px solid #5B2A86;outline-offset:3px;border-radius:4px}
.pxgo2{display:flex;align-items:center;gap:14px}
.pxtot{display:flex;flex-direction:column;align-items:flex-end;font-size:15px;color:#22132F}
.pxtot b{font-weight:700}
.pxtot small{font-size:12px;color:#8A7F97}
.pxcta2{display:inline-flex!important;align-items:center;gap:8px;padding:13px 26px!important;font-size:15px!important;background:#5B2A86!important}
.pxcta2:hover{background:#4A1F72!important}
@media (max-width:1100px){.pxft{flex-direction:column;align-items:stretch}.pxgo2{flex-wrap:wrap;justify-content:space-between}.pxtot{align-items:flex-start;flex:1 1 100%}.pxcta2{flex:1;justify-content:center}}
.wml{font-size:14px;gap:.3em;display:inline-flex;align-items:center}.wml .word{width:3.36em!important;height:.92em}.wml .word{fill:#5B2A86}.wml b{font-weight:800;color:#22132F}.wml i{font-style:normal;font-weight:600;color:#8A7F97;margin-left:1px}
.pxr .wml{font-size:13.5px}.pxr .wml i{color:#8A7F97}
.pxmc li .wml{font-size:13.5px;vertical-align:-2px}
.pxtot .wml{font-size:15px}
.pxlk .wml{font-size:14px;vertical-align:-3px;margin:0 1px}
.wklink{display:inline-flex;align-items:center;gap:5px;padding:1px 2px 2px;border-bottom:1.5px solid #5B2A86;color:#5B2A86!important;vertical-align:-3px;transition:background .15s}
.wklink .wml{vertical-align:0;margin:0}
.wkarr{transition:transform .15s}
.pxlk:hover .wklink{background:#F3EEF8;border-radius:5px 5px 0 0}
.pxlk:hover .wkarr{transform:translateX(2px)}
.pxlk:hover u{color:#4A1F72}
.pxpk{background:linear-gradient(135deg,#6B35A0,#5B2A86)!important;color:#fff!important;border:0!important;padding:5px 12px 5px 10px!important;font-size:12.5px!important;box-shadow:0 6px 14px -8px rgba(91,42,134,.7),inset 0 1px 0 rgba(255,255,255,.18)}
.pxpk svg{color:#F2C14E!important;width:14px!important;height:14px!important}
.pxwt{color:#4A3F57}

/* checkout: benefits, price, trust */
.ck{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start}
.cks{margin:0 0 10px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5B2A86}
.ckl .btn.g{width:100%;justify-content:center;box-sizing:border-box;padding:13px}
.ckor{display:flex;align-items:center;gap:10px;margin:12px 0;color:#A79BB5;font-size:12.5px}.ckor::before,.ckor::after{content:"";flex:1;height:1px;background:#EDE7F3}
.ckf{max-width:none}
.ckcard{display:flex;justify-content:space-between;margin:0}
.ckgo{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin-top:18px;padding:15px;border-radius:12px;background:#5B2A86;color:#fff;font-weight:700;font-size:16px;box-shadow:0 12px 24px -14px rgba(91,42,134,.8)}
.ckgo:hover{background:#4A1F72}
/* "I agree to the ohelloo terms and privacy policy", ticked before the last button (Oct 25 2026): a form box, the whole
   row a tap target, one line on a phone */
.ckagree{display:flex;align-items:center;gap:10px;box-sizing:border-box;min-height:48px;margin-top:18px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:14px;line-height:1.35;color:var(--ink);cursor:pointer;transition:border-color .2s,box-shadow .2s,background .2s}
.ckagree:has(input:checked){border-color:var(--purple);box-shadow:0 0 0 1px var(--purple);background:#FAF7FD}
.ckagree:has(input:focus-visible){outline:2px solid var(--purple);outline-offset:2px}
.ckagree input{flex:none;width:20px;height:20px;margin:0;accent-color:#5B2A86;cursor:pointer}
.ckagree a{color:var(--purple);font-weight:600}
.ckagree+.ckgo{margin-top:12px}
/* Stripe's own form inside the last step (Oct 25 2026), instead of a trip to Stripe's checkout page */
.pay .paytop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px}
.pay .paysafe{display:flex;align-items:center;gap:7px;margin:0;font-size:13px;font-weight:600;color:var(--muted)}
.pay .paysafe svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8}
.payform{min-height:520px;margin:6px 0 0}
/* Stripe's form has a white background here (functions/shop.js EMBED_LOOK, Omar, Oct 25 2026), so it blends into the
   window with nothing to line up; the account's purple looked cropped inside it */
@media (max-width:620px){.pay{padding:18px 14px 24px}}
@media (max-width:420px){.ckagree{gap:7px;padding:10px 9px;font-size:13px;letter-spacing:-.01em}.ckagree input{width:18px;height:18px}}
.ckgo svg{color:#F2C14E}
.ckback{display:block;margin:10px auto 0}
.ckr{border:1.5px solid #D6C2EE;border-radius:18px;padding:20px 22px;background:linear-gradient(180deg,#FFFFFF,#FAF7FD)}
.ckhead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.ckhead .chg2{flex:none;white-space:nowrap}
.ckname{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em}.ckname .wml{font-size:20px}
.ckline{margin:2px 0 0;font-size:14px;color:#6E6579}
.ckprice{display:flex;align-items:baseline;gap:8px;margin:12px 0 4px}
.ckamt{font-size:44px;font-weight:800;letter-spacing:-.035em;line-height:1}
.ckper{font-size:16px;font-weight:600;color:#6E6579;margin-left:-4px}
.ckwas{font-size:18px;color:#9A8A6A;text-decoration-color:#B42318;text-decoration-thickness:2px}
.cksave{align-self:center;font-size:12px;font-weight:700;color:#fff;background:#B42318;border-radius:8px;padding:3px 8px}
.ckfree{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:13px;font-weight:700;color:#1F7A4D}
/* Monthly or yearly on the last step (the pricing page's Yearly arrives as ?bill=year) */
.ckevery{display:flex;gap:4px;padding:4px;border-radius:12px;background:#F2EEF8;margin:14px 0 0}
.ckevery button{flex:1;font:inherit;font-size:14px;font-weight:600;border:0;background:none;color:#6E6579;padding:8px 6px;border-radius:12px;cursor:pointer}
.ckevery button[aria-pressed="true"]{background:#fff;color:#22132F;box-shadow:0 1px 3px rgba(34,19,47,.12)}
.ckevery button span{display:inline-block;margin-left:4px;padding:1px 6px;border-radius:8px;background:#F2C14E;color:#3A2400;font-size:11.5px;font-weight:700}
.ckyr{align-self:center;font-size:12px;font-weight:700;color:#3A2400;background:#F2C14E;border-radius:8px;padding:3px 8px}
.ckbill{margin:4px 0 0;font-size:13px;font-weight:600;color:#5B2A86}
.ckwh{margin:16px 0 8px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A7F97}
.ckul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 18px}
.ckul li{display:flex;gap:9px;align-items:flex-start;font-size:13.5px;line-height:1.35;color:#3A2E47}
.ckul li .tk{margin-top:1px;background-color:#5B2A86;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");box-shadow:none}
.ckul b{display:block;font-size:12px;font-weight:600;color:#8A7F97;margin-bottom:1px}.ckul b .wml{font-size:12px}
.cktot{margin-top:16px;border-top:1px solid #EDE7F3;padding-top:10px;display:grid;gap:6px}
.cktot div{display:flex;justify-content:space-between;font-size:14px;color:#4A3F57}
.cktot .today{font-size:17px;color:#22132F;border-top:1px dashed #E3DCEA;padding-top:8px;margin-top:2px}.cktot .today b{font-weight:800}
.cktr{display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;margin-top:20px;padding-top:16px;border-top:1px solid #EDE7F3;font-size:13px;font-weight:600;color:#4A3F57}
.cktr span{display:inline-flex;align-items:center;gap:7px}
.cktr svg{width:17px;height:17px;fill:none;stroke:#1F7A4D;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:900px){.ck{grid-template-columns:1fr}.ckr{order:-1}.ckul{grid-template-columns:1fr}.cktr{justify-content:flex-start;flex-direction:column}}
.pxm{display:none}
@media (max-width:1100px){.pxg{display:none}.pxm{display:grid;gap:14px;padding-top:12px}.pxfoot{grid-template-columns:1fr}.pxtop{flex-direction:column}
 .pxmc{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:grid;gap:8px;background:#F5F3F8;border:1.5px solid #fff;border-radius:18px;padding:16px}
 .pxmc.on{border-color:#B996E6;background:linear-gradient(180deg,#FFFFFF,#F4EEFA);box-shadow:0 0 0 5px rgba(185,150,230,.2)}
 .pxmc .pxn .amt{margin-left:auto;font-size:26px;font-weight:800;letter-spacing:-.03em}.pxmc .pxn .amt small{font-size:13px;color:#6E6579}
 .pxmc .pxtag{left:16px;transform:translateY(-50%)}
 .pxmc .pxl{margin:0;min-height:0}
 .pxmc ul{list-style:none;margin:0;padding:0;display:grid;gap:7px;font-size:13.5px;line-height:1.4}.pxmc li{display:flex;gap:9px}
 .pxgo{flex-wrap:wrap;padding:14px}.pxsum{flex:1 1 100%}.pxcta{flex:1;justify-content:center}.pxtop .q{flex-direction:column;align-items:flex-start;gap:6px}.pxsum small{white-space:normal}}
/* account + pay */
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:22px;align-items:start}
.sum{border:1px solid var(--line);border-radius:18px;padding:18px;background:#FCFBFE}
.sum .li{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--line2);font-size:14px}
.sum .li:first-of-type{border-top:none}
.sum .tot{font-weight:700}
.card{border:1px solid var(--line);border-radius:18px;padding:12px 14px;background:#fff;color:var(--muted);font-size:14px;margin-top:10px}
.note{font-size:12.5px;color:var(--muted);margin-top:10px}
/* their home */
@media (max-width:900px){.blocks{grid-template-columns:repeat(3,minmax(0,1fr))}.plans{grid-template-columns:1fr}.two{grid-template-columns:1fr}}
@media (max-width:620px){.blocks{grid-template-columns:repeat(2,minmax(0,1fr))}.blk .w{font-size:21px}.body{padding:18px 14px 22px}.q{font-size:22px}.top,.prog{padding-left:14px;padding-right:14px}}

/* ---- the real page ---- */
[hidden]{display:none!important}
button,input,select{font:inherit;color:inherit}
.win{min-height:calc(100vh - 88px)}
@media (max-width:620px){main{padding:0 0 32px}.win{border:0;border-radius:0}}
/* On a phone, Continue stays at the bottom of the screen on the question steps (Oct 20 2026: Clarity counted rage clicks
   on the door, people tapping a card with Continue out of sight below the cards). overflow:clip, not hidden, so it can stick. */
@media (max-width:620px){.win{overflow:clip}.row:has(> #go){position:sticky;bottom:0;z-index:5;margin:22px -14px -22px;padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 -1px 0 var(--line2)}}
.top .who{display:flex;align-items:center;gap:14px}
.top .who b{font-weight:600;color:var(--ink)}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.msg{margin:14px 0 0;padding:10px 14px;border-radius:12px;background:#FDECEA;color:#8A1C12;font-size:14px;max-width:640px}
.msg:empty{display:none}
.btn.dark[disabled],.ckgo[disabled]{opacity:.45;cursor:default}
.spin{display:inline-block;width:15px;height:15px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;animation:spin .8s linear infinite;vertical-align:-3px}
@keyframes spin{to{transform:rotate(360deg)}}
/* step 1: their own words */
.elsebox{margin-top:16px;max-width:560px}
.elsebox label{display:block;font-weight:600;margin:0 0 8px}
.else button{all:unset;cursor:pointer;color:var(--purple);text-decoration:underline;text-underline-offset:3px}
/* step 3: their Google listing */
.findrow{display:flex;gap:10px;max-width:640px;flex-wrap:wrap}
.findrow .field{flex:1 1 300px}
.findrow .zip{flex:0 0 120px}
.field:focus-within{border-color:#5B2A86;box-shadow:0 0 0 3px rgba(91,42,134,.12)}
.field .mag{color:#8A7F97;font-size:17px}
.places{display:grid;gap:8px;max-width:640px;margin-top:12px}
.place{all:unset;box-sizing:border-box;cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:12px;align-items:center;background:#fff;transition:border-color .2s,box-shadow .2s}
.place:hover{border-color:#CDB3E8}
.place.on{border-color:#5B2A86;box-shadow:0 0 0 1px #5B2A86;background:#FCFAFE}
.place .ph{width:44px;height:44px;border-radius:10px;background:var(--soft);display:grid;place-items:center;color:var(--purple);font-weight:700}
.place b{display:block;font-size:15px}
.place small{display:block;color:var(--muted);font-size:13px;line-height:1.4}
.place .us{font-size:13px;font-weight:600;color:#5B2A86;background:#F3EEF8;border-radius:8px;padding:5px 11px;white-space:nowrap}
.place.on .us{background:#5B2A86;color:#fff}
.plook{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin:12px 0 0}
.lnk{all:unset;cursor:pointer;color:var(--purple);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.nolist{margin-top:12px;max-width:640px;border:1px dashed #D6C2EE;border-radius:12px;padding:12px 14px;background:#FCFAFE;font-size:14px}
/* step 6: account and payment */
.ckl .field{max-width:none}
.ckway{display:flex;gap:8px}
.ckway .field{flex:1}
.ckway .btn{border:1px solid var(--line);background:#fff}
.sms{display:flex;gap:9px;align-items:flex-start;margin-top:10px;font-size:12.5px;line-height:1.45;color:#5E5470}
.sms input{margin-top:2px;accent-color:#5B2A86}
.fine{font-size:12.5px;color:var(--muted);margin:8px 0 0;line-height:1.5}
.fine a{color:var(--purple)}
.ckme{display:flex;align-items:center;gap:10px;border:1px solid #CFE8DA;background:#F3FBF6;border-radius:12px;padding:10px 12px;font-size:14px}
.ckme svg{color:#1F7A4D;flex:none}
.ckme span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ckname2{margin-top:12px}
.ckname2 label{display:block;font-size:13px;font-weight:600;margin:0 0 6px;color:#4A3F57}
.code{letter-spacing:.4em;font-size:20px!important;font-variant-numeric:tabular-nums}
.ckpay{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff;font-size:14px;color:#4A3F57}
.ckpay svg{flex:none;width:18px;height:18px;fill:none;stroke:#1F7A4D;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.ckhave{margin-top:12px;border-radius:12px;background:#FFF8E6;border:1px solid #F4DFA6;padding:10px 14px;font-size:14px}
.top a.call{font-size:13px;color:var(--muted);text-decoration:none}
.top a.call:hover{color:var(--purple)}

/* ---- premium look (Oct 15 2026, Omar picked "B2"): on the steps with their card (2 to 4), the card is the whole left
   side of the window, edge to edge in one color, its picture big, glossy and slowly floating. The steps without a card
   (picking the business, the plans, checkout) keep their own layout. body[data-type] carries their pick's tone. ---- */
body{--tone:#5B2A86;--tint:#EFE6F7}
body[data-type="trades"]{--tone:#4e2473;--tint:#E9DDF5}
body[data-type="food"]{--tone:#C98F12;--tint:#FBEFCF}
body[data-type="bakery"]{--tone:#8A5CC2;--tint:#EFE8FB}
body[data-type="salon"]{--tone:#2A1B33;--tint:#E7E0EE}
body[data-type="shops"],body[data-type="other"]{--tone:#7B4FB3;--tint:#EEEAFB}
.win{box-shadow:0 30px 80px -50px rgba(34,19,47,.35)}

/* the pictures: bigger, a light sweeping across now and then, a slow float; still for reduced motion */
.blk .pic{transform-origin:50% 42%;transform:scale(1.12);transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.blk:hover .pic{transform:scale(1.2)}
.pcard::after,.blk::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.15) 52%,transparent 64%) 0 0/260% 100% no-repeat;
  mix-blend-mode:soft-light;animation:shine 6.5s ease-in-out infinite}
.blk::after{animation-delay:calc(var(--i,0) * .35s)}
.pcard .nm,.pcard .chg,.blk .w,.blk .ex,.blk .n,.blk .chk{z-index:2}
.pcard{animation:pop .55s cubic-bezier(.2,.9,.3,1.2) both}
.pcard .pic{transform-origin:50% 42%;transform:scale(1.16)}
@keyframes shine{0%,62%{background-position:130% 0}100%{background-position:-40% 0}}
@keyframes picfloat{0%,100%{transform:scale(1.16) translateY(0)}50%{transform:scale(1.18) translateY(-6px)}}
@keyframes picfloat2{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes pop{0%{transform:scale(.96);opacity:0}100%{transform:none;opacity:1}}

/* the card as the whole left side, on laptops (phones keep the slim row) */
@media (min-width:621px){
.win{display:flex;flex-direction:column}
.body{flex:1}
.body:has(>.split){display:flex;position:relative;padding:0 32px 0 0}
.body>.split{flex:1;grid-template-columns:372px minmax(0,1fr);gap:48px;align-items:stretch}
.split>.pcard{position:relative;top:auto;aspect-ratio:auto;min-height:0;height:100%;border-radius:0 0 0 18px;box-shadow:none;padding:26px 26px 30px}
.split>.pcard b{font-size:26px}.split>.pcard small{font-size:14px}
.split>.pcard .chg{top:20px;right:20px}
.split>.pcard .pic{background-size:118% auto;background-position:50% 18%;transform:none}
.split>.main{padding:26px 0 32px}
.split .qq{border-bottom:1px solid #F1ECF6;padding-bottom:16px}
}
@media (prefers-reduced-motion:reduce){.pcard .pic,.split>.pcard .pic,.pcard::after,.blk::after,.pcard{animation:none}}
@media (max-width:620px){.win{box-shadow:none}}

/* The steps beside their card (Omar picked "D", Oct 15 2026): bigger choices that fill the side, as big tappable
   tiles, with the step centred beside the card. */
@media (min-width:621px){
.split>.main{display:flex;flex-direction:column;justify-content:center;max-width:860px}
.split .q{font-size:34px}
.split .qs{font-size:16px}
.split .pills{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.split .pill{min-height:58px;box-sizing:border-box;padding:14px 18px;font-size:15.5px;font-weight:600;border-radius:12px;background:#fff;box-shadow:0 1px 0 #fff inset,0 10px 24px -18px rgba(34,19,47,.35);border-color:#E9E2F1}
.split .pill.on{background:#FAF6FE;box-shadow:0 0 0 2px #5B2A86,0 14px 28px -18px rgba(91,42,134,.6)}
.split .pill svg{width:16px;height:16px}
.split .qq p{font-size:16px}
.split .qq{margin-bottom:22px}
.split .row .btn.dark{padding:14px 26px;font-size:15px}
}
/* tablets: a narrower card, so the tiles sit two across */
@media (min-width:621px) and (max-width:1099px){
.body>.split{grid-template-columns:250px minmax(0,1fr);gap:28px}
.split .pills{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.split .q{font-size:28px}
.split>.pcard b{font-size:21px}
}
/* Every step in the same window (Omar, Oct 15 2026: nothing should change size between steps; all of them like the
   plans and payment steps). On laptops the window fills the screen, the same height on every step, and each step
   starts at the same top-left spot, its questions using the full width, as the plans do. */
@media (min-width:1100px){
main{padding:24px}
.win{min-height:calc(100vh - 48px)}
.split>.main{justify-content:flex-start;max-width:none}
.split>.main>.step:first-child{margin-top:0}
.split .pills{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
}
/* a picked tile shows its tick without the words moving */
.split .pill{position:relative}
.split .pills .pill:not(.else){padding-left:40px}
.split .pills .pill:not(.else) svg{position:absolute;left:16px;top:50%;margin-top:-8px}
/* steps 1 to 4 name their step as the plans and payment steps do: a small pill inside the heading, so every heading
   starts in the same place and at the same size */
.q.qx{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
@media (min-width:1100px){
.body{padding-top:18px}
.split>.main{padding-top:18px}
.split .q{font-size:26px}
.body:not(:has(>.split)) .qs,.split .qs{font-size:15px}
}
/* Every tile the same size (Omar, Oct 15 2026: the boxes were different sizes). Each row is as tall as the tallest
   tile, every row matches, and "Something else" is the same size as the rest. The space on the left holds a circle,
   ticked when picked, so the words line up the same in every tile. */
@media (min-width:621px){
.split .pills{grid-auto-rows:1fr}
.split .pills .pill{display:flex;align-items:center;height:100%;min-height:64px;line-height:1.3}
.split .pills .pill.else{padding-left:40px;position:relative}
.split .pills .pill.else svg{position:absolute;left:16px;top:50%;margin-top:-8px}
}
/* The circle shows on phones too (Omar, Oct 18 2026: on a phone a picked answer only changed its outline, so
   "2 to 5" and "Not yet" didn't look picked) */
.split .pills .pill:not(.else)::before{content:"";position:absolute;left:15px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #CFC4DC;background:#fff;box-sizing:border-box}
.split .pills .pill.on::before{background:#5B2A86;box-shadow:none}
.split .pills .pill.on svg{color:#fff;width:12px;height:12px;left:18px;margin-top:-6px;z-index:1}
/* The plan step's lines are the pricing page's (js/door-plans.js, Oct 22 2026): the kind's own four share one label,
   and each line says what it means in a bubble on hover or focus, as on ohelloo.com/pricing (site/pages.css .ptip). */
.pxr.own{align-items:flex-start!important;padding-top:9px!important}
.pxc:hover,.pxc:focus-within{z-index:5}
.ptip{position:relative;cursor:help;outline:none}
.pxc .ptip{text-decoration:underline dotted #CDBFDB;text-underline-offset:3px}
.ptip-b{position:absolute;z-index:6;left:0;top:calc(100% + 10px);width:max-content;max-width:min(280px,80vw);padding:12px 14px;border-radius:12px;background:#22132F;color:#fff!important;font-size:13px;line-height:1.45;font-weight:400!important;text-align:left;box-shadow:0 12px 28px -10px rgba(34,19,47,.5);opacity:0;visibility:hidden;transition:opacity .15s;pointer-events:none}
.ptip-b::before{content:"";position:absolute;left:16px;bottom:100%;border:7px solid transparent;border-bottom-color:#22132F}
.ptip:hover .ptip-b,.ptip:focus .ptip-b{opacity:1;visibility:visible}
.pxc .ptip-b,.pxc.up .ptip-b,.pxc.on .ptip-b{color:#fff!important;font-weight:400!important}
.pxc[data-plan=grow] .ptip-b{left:auto;right:0}.pxc[data-plan=grow] .ptip-b::before{left:auto;right:16px}
@media (prefers-reduced-motion:reduce){.ptip-b{transition:none}}

/* ---- Four screens (Oct 30 2026, Omar: fewer screens, pictures and a little motion) ---- */
/* Screen 3: their page builds itself, a line at a time, under their kind's picture. */
.pv{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:#fff;box-shadow:0 10px 30px rgba(34,19,47,.08);max-width:440px;animation:pvpop .5s cubic-bezier(.2,.9,.3,1.1) both}
.pvhero{height:108px;background-size:cover;background-position:center;position:relative}
.pvhero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 30%,rgba(34,19,47,.35))}
.pvlogo{position:absolute;left:16px;bottom:-22px;z-index:1;width:52px;height:52px;border-radius:14px;background:#fff;color:var(--purple);font-weight:800;font-size:22px;display:grid;place-items:center;box-shadow:0 4px 14px rgba(34,19,47,.18)}
.pvbody{padding:30px 16px 16px;display:grid;gap:8px}
.pvname{font-size:20px;font-weight:700;letter-spacing:-.01em}
.pvkind{color:var(--muted);margin-top:-6px}
.pvst{margin:0;font-size:13.5px;color:var(--muted)}.pvst .stars{color:#B07A12;font-weight:700}
.pvr{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;font-size:14px}
.pvi{color:var(--purple);text-align:center}
.pvcta{justify-self:start;margin-top:4px;background:var(--purple);color:#fff;font-weight:700;font-size:14px;border-radius:10px;padding:10px 16px}
.pvbody>*{animation:pvline .45s ease-out both}
.pvbody>*:nth-child(1){animation-delay:.25s}.pvbody>*:nth-child(2){animation-delay:.4s}.pvbody>*:nth-child(3){animation-delay:.55s}
.pvbody>*:nth-child(4){animation-delay:.7s}.pvbody>*:nth-child(5){animation-delay:.85s}.pvbody>*:nth-child(6){animation-delay:1s}.pvbody>*:nth-child(7){animation-delay:1.15s}
.pvsave{margin-top:22px;max-width:440px;animation:pvline .45s ease-out 1.1s both}
.pvsave .ckl.acct{display:grid;gap:10px}
@keyframes pvpop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes pvline{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* Screen 4: the quick taps above the plan, the plan card with their kind's picture, every plan a tap away. */
.taps{margin:0 0 22px;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:#fff;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:4px 24px}.taps .cks{grid-column:1/-1}
.taps .qq{margin:0 0 14px}.taps .qq p{margin:0 0 8px;font-weight:600}
.ckpic{height:92px;margin:-20px -22px 14px;border-radius:16px 16px 0 0;background-size:cover;background-position:center}
.ckhead .chg2{all:unset;cursor:pointer;color:var(--purple);font-weight:600;font-size:13px;display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.pxin{margin:6px 0 4px;animation:pvline .35s ease-out both}
.pxclose{margin:4px 0 18px;text-align:center}
/* a card picked: its options slide in under it */
.body .pills{animation:pvline .35s ease-out both}
@media (max-width:820px){.pxin .pxg{display:none}.pxin .pxm{display:grid;gap:10px}}
@media (prefers-reduced-motion:reduce){.pv,.pvbody>*,.pvsave,.pxin,.body .pills{animation:none}}