.hpto-page{max-width:1120px;padding:42px 24px 58px}.hpto-guide{font:15px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink,#352d2a);--hpto-line:#e5ddd0;--hpto-muted:#756c61;--hpto-accent:#653a32}.hpto-guide *{box-sizing:border-box}.hpto-guide svg{width:21px;height:21px;flex-shrink:0;vertical-align:middle}.hpto-guide a{color:var(--hpto-accent);text-underline-offset:4px}.hpto-guide h1,.hpto-guide h2,.hpto-guide h3{font-family:Georgia,serif;letter-spacing:-.025em;line-height:1.14;color:inherit}.hpto-intro{display:block;max-width:720px;margin:0 0 38px}.hpto-guide h1{font-size:clamp(38px,5vw,58px);margin:13px 0 18px}.hpto-intro>p{font-size:16px;max-width:600px;margin:0}.hpto-guide .eyebrow{font:650 10px/1.5 system-ui;letter-spacing:.16em;text-transform:uppercase;color:var(--hpto-muted)}.hpto-actions{display:flex;align-items:center;gap:17px;flex-wrap:wrap;margin-top:24px}.hpto-guide .hpto-primary{display:inline-flex;align-items:center;gap:12px;padding:13px 17px;background:var(--hpto-accent);color:#fff;font-weight:600;font-size:14px;border-radius:9px;text-decoration:none}.hpto-free{font-size:12px;color:var(--hpto-muted)}.hpto-walkthrough{scroll-margin-top:100px}.hpto-section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin:0 0 20px}.hpto-guide h2{font-size:31px;margin:8px 0 0}.hpto-section-heading>p{font-size:12px;max-width:270px;margin:0;color:var(--hpto-muted)}.hpto-device-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;margin-bottom:18px}.hpto-guide button{font:inherit;cursor:pointer;border:1px solid var(--hpto-line);color:inherit;min-height:44px}.hpto-device-tabs button{background:var(--card,#fff);border-radius:11px;display:grid;grid-template-columns:26px 1fr;gap:0 7px;text-align:left;padding:13px 17px}.hpto-device-tabs svg{grid-row:1/3;align-self:center}.hpto-device-tabs span{font-size:15px;font-weight:650}.hpto-device-tabs small{font-size:11px;color:var(--hpto-muted)}.hpto-device-tabs button[aria-selected=true]{border-color:var(--hpto-accent);box-shadow:inset 0 0 0 1px var(--hpto-accent);background:#f0e7dc}.hpto-device-panel{background:var(--card,#fff);border:1px solid var(--hpto-line);border-radius:18px;overflow:hidden;margin-bottom:20px}.hpto-browser-note{font-size:12px;background:#f5f0e8;margin:0;padding:10px 24px;color:#655b51}.hpto-step-map{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));padding:21px 24px 13px;gap:4px}.hpto-step-map button{background:none;border:0;display:flex;align-items:center;gap:8px;justify-content:center;padding:5px 2px;min-height:42px}.hpto-step-map button>span{display:grid;place-items:center;border-radius:50%;width:25px;height:25px;background:#f1ece5;color:#776b60;font-size:11px;flex-shrink:0}.hpto-step-map small{font-size:11px;line-height:1.3;text-align:left;color:var(--hpto-muted)}.hpto-step-map button[aria-current=step]>span{background:var(--hpto-accent);color:#fff}.hpto-step-map button[aria-current=step] small{font-weight:650;color:var(--hpto-accent)}.hpto-scene{display:grid;grid-template-columns:1.05fr 1fr;gap:24px;align-items:center;padding:21px 38px 30px;min-height:470px}.hpto-step-number{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--hpto-accent)}.hpto-step-number>span{color:#94897c;font-weight:400}.hpto-scene h3{font-size:34px;margin:13px 0 17px;max-width:420px;outline-offset:5px}.hpto-scene-copy>p{font-size:15px;margin:0 0 19px;max-width:430px}.hpto-scene-tip{display:flex;gap:11px;padding:14px 15px;background:#f8f5ef;border:1px solid #eee5d8;border-radius:9px;margin-top:22px}.hpto-scene-tip>span{color:#a77c37}.hpto-scene-tip svg{width:17px;height:17px}.hpto-scene-tip p{margin:0;font-size:12px;line-height:1.7;color:#6d6155}.hpto-inline-action,.hpto-scene-links{display:flex;align-items:center;gap:13px;margin-top:20px;font-size:13px;font-weight:600}.hpto-guide .hpto-install,.hpto-confirm-test{background:var(--hpto-accent);color:#fff!important;border:0!important;border-radius:8px;padding:12px 16px;margin-top:20px;display:inline-flex;align-items:center;gap:8px;font-size:13px!important;font-weight:600!important}.hpto-confirm-test:disabled{opacity:.7;cursor:default}.hpto-confirm-status{font-size:12px!important;color:#476546;margin:9px 0 0!important}.hpto-step-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:17px 24px;border-top:1px solid var(--hpto-line);background:#fdfbf8}.hpto-step-controls button{background:#fff;border-radius:8px;padding:9px 13px;font-size:13px;display:flex;align-items:center;gap:10px}.hpto-step-controls button:disabled{opacity:.4;cursor:default}.hpto-step-controls .hpto-next{background:var(--hpto-accent);border-color:var(--hpto-accent);color:#fff}.hpto-step-controls>span{font-size:11px;color:var(--hpto-muted)}.hpto-step-controls svg{width:17px;height:17px}.hpto-two-things{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:23px 0 36px}.hpto-two-things>div{border-left:2px solid #c59a54;padding:3px 0 3px 17px;display:grid;grid-template-columns:22px 1fr;column-gap:9px}.hpto-two-things svg{color:var(--hpto-accent);width:18px;height:18px}.hpto-two-things strong{font-size:13px}.hpto-two-things p{grid-column:2;margin:5px 0 0;font-size:12px;color:var(--hpto-muted)}.hpto-block{border-top:1px solid var(--hpto-line);padding-top:30px;scroll-margin-top:100px}.hpto-faq{margin-top:23px}.hpto-faq details{padding:16px 0;border-bottom:1px solid var(--hpto-line)}.hpto-faq summary{cursor:pointer;font-size:14px;font-weight:600}.hpto-faq p{font-size:13px;margin:12px 0 0;max-width:850px}.hpto-small{font-size:11px!important;line-height:1.65;color:var(--hpto-muted)}.hpto-sources{margin-top:24px}.hpto-guide [hidden]{display:none!important}.hpto-guide :focus-visible{outline:3px solid #bd8f42;outline-offset:4px}.hpto-guide:not([data-ready]) .hpto-step-map,.hpto-guide:not([data-ready]) .hpto-step-controls{display:none}
.hpto-picture{margin:0;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:0}.hpto-picture figcaption{font:10px/1.5 system-ui;text-align:center;color:#897e71;margin-top:14px;max-width:280px}.hpto-device-frame{width:218px;height:371px;border:6px solid #302d2a;border-radius:29px;padding:0;background:#fff;box-shadow:0 12px 28px #52311f12;overflow:hidden;position:relative}.hpto-frame-ipad{width:322px;height:346px;border-radius:22px;border-width:8px}.hpto-frame-computer{width:337px;height:290px;border-radius:11px;border-width:6px;box-shadow:0 13px 0 -7px #bdb6ad,0 17px 25px #52311f14}.hpto-screen{height:100%;position:relative;overflow:hidden;background:#fbf8f3;font:11px/1.4 system-ui;color:#352d2a}.hpto-statusbar{display:flex;justify-content:space-between;font-size:8px;font-weight:650;padding:9px 13px 6px;background:#fff}.hpto-browserbar{display:flex;align-items:center;gap:5px;padding:8px;background:#f0eeeb;min-height:32px}.hpto-browserbar svg{width:15px;height:15px}.hpto-browser-symbol{width:16px;color:#747f6c}.hpto-address{font-size:8px;background:#fff;border-radius:10px;padding:6px 8px;flex:1;overflow:hidden;white-space:nowrap;color:#554f48;min-width:0}.hpto-mock-site{padding:17px 14px}.hpto-mock-brand{display:flex;align-items:center;gap:6px;font-size:9px;font-weight:650}.hpto-mock-brand svg{width:17px;height:17px;color:#653a32}.hpto-mock-rule{border-top:1px solid #e6ded1;margin:13px 0}.hpto-mock-kicker{display:block;font-size:7px;letter-spacing:.11em;margin:20px 0 9px;color:#897a65}.hpto-mock-site>strong,.hpto-offline-preview>strong{display:block;font:24px/1.12 Georgia,serif;letter-spacing:-.03em;margin:5px 0 12px}.hpto-mock-site>p{font-size:9px;color:#7a6f61;margin:0 0 17px}.hpto-mock-action{background:#653a32;color:#fff;display:flex;align-items:center;justify-content:space-between;padding:10px 8px;border-radius:5px;font-size:8px;font-weight:600}.hpto-mock-action svg{width:13px;height:13px}.hpto-mock-lines{display:grid;gap:9px;margin-top:20px}.hpto-mock-lines i{height:4px;width:93%;background:#e7e0d5;border-radius:4px;display:block}.hpto-mock-lines i:nth-child(2n){width:74%}.hpto-safari-bottom{position:absolute;bottom:0;left:0;right:0;background:#f0eeeb;padding:8px 10px 9px;display:grid;gap:9px}.hpto-safari-bottom>.hpto-address{text-align:center;display:block}.hpto-safari-bottom>div{display:flex;justify-content:space-between;align-items:center;color:#2871b6}.hpto-safari-bottom svg{width:17px;height:17px}.hpto-spot{outline:2px solid #bf8b35;background:#fff3da;border-radius:5px;display:inline-flex;padding:3px;box-shadow:0 0 0 3px #fff3da}.hpto-menu{position:absolute;right:7px;top:75px;width:185px;background:#fff;border:1px solid #ded8ce;border-radius:11px;box-shadow:0 7px 24px #25170c25;padding:10px 7px;z-index:2}.hpto-menu>span{display:block;font-size:10px;padding:10px 7px}.hpto-menu .hpto-menu-heading{font-size:8px;color:#867c71;text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid #eee5d9;margin-bottom:3px}.hpto-menu .hpto-highlight{display:flex;gap:5px;align-items:center;font-size:9px;padding:10px 6px;margin:1px 0;background:#fff4da;border:2px solid #bc8730;border-radius:6px;color:#5f4219;font-weight:650}.hpto-menu .hpto-highlight svg{width:15px;height:15px}.hpto-menu .hpto-menu-caption{font-size:8px;padding:7px 5px 0;color:#8b7351}.hpto-share-sheet{top:auto;bottom:60px;left:6px;right:6px;width:auto}.hpto-frame-ipad .hpto-share-sheet{left:auto;right:8px;top:65px;bottom:auto;width:224px}.hpto-frame-computer .hpto-menu{width:220px;top:68px}.hpto-callout{position:absolute;bottom:15px;left:9px;right:9px;text-align:center;color:#6b4b21;font-size:8px;font-weight:650;background:#fff4da;padding:6px 3px;border-radius:15px;border:1px solid #ecd6ad;z-index:3}.hpto-frame-iphone .hpto-share-sheet+.hpto-callout{bottom:5px}.hpto-homescreen{padding:15px;background:#f1e6d6;height:100%}.hpto-home-label{font-size:8px;letter-spacing:.12em;color:#8a765f;display:block;margin-bottom:17px}.hpto-app-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px 13px;align-items:start}.hpto-fake-app{width:38px;height:38px;border-radius:10px;background:#d6d6c6;display:block}.hpto-fake-app:nth-child(2n){background:#d4c3b1}.hpto-fake-app:nth-child(3){background:#c3ced3}.hpto-hymn-app{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;width:41px}.hpto-hymn-app>span{display:grid;place-items:center;width:41px;height:41px;background:#653a32;border-radius:11px;color:#fbe9c6;outline:2px solid #b88b3b;outline-offset:4px}.hpto-hymn-app svg{width:25px;height:25px}.hpto-hymn-app small{font-size:8px;color:#574a3d}.hpto-tap-dot{position:absolute;right:-10px;top:-10px;width:17px;height:17px;background:#d5a248;color:white;border:2px solid #fff;border-radius:50%;display:grid;place-items:center;font-size:8px}.hpto-login-preview{margin-top:22px;background:#fff;border:1px solid #e5d5bf;padding:12px;border-radius:10px;display:grid;gap:8px}.hpto-login-preview>span{font-size:7px;color:#7a694e;display:flex;align-items:center;gap:4px}.hpto-login-preview>span svg{width:12px;height:12px}.hpto-login-preview strong{font:14px Georgia,serif}.hpto-login-preview i{border:1px solid #e3ddd3;border-radius:4px;padding:6px;font-size:8px;color:#8e877c;font-style:normal}.hpto-login-preview>b{font-size:9px;color:white;background:#653a32;border-radius:4px;padding:7px;text-align:center}.hpto-mock-reader{padding:15px 12px}.hpto-mock-reader>strong{font:22px Georgia,serif;display:block;margin:8px 0 17px}.hpto-mock-tools{display:flex;gap:8px;align-items:center;font-size:8px}.hpto-mock-tools .hpto-highlight{display:flex;align-items:center;gap:4px;border:2px solid #b9852f;background:#fff4da;border-radius:6px;padding:7px 6px;color:#68491e;font-weight:650}.hpto-mock-tools svg{width:15px;height:15px}.hpto-saved-toast{display:flex;align-items:center;gap:5px;padding:9px 5px;margin-top:23px;background:#e7efe3;border:1px solid #cbdac1;border-radius:6px;color:#4c6842;font-size:9px;font-weight:600}.hpto-saved-toast svg{width:15px;height:15px}.hpto-offline-preview{padding:10px 13px}.hpto-network-off{display:flex;align-items:center;gap:5px;font-size:8px;color:#896122;background:#fff0d8;padding:7px;border-radius:5px;margin-bottom:16px}.hpto-network-off svg{width:14px;height:14px}.hpto-offline-preview>strong{margin-top:14px}.hpto-ready-badge{font-size:8px;background:#e3eedf;color:#47673e;border-radius:20px;padding:5px 8px;display:inline-block}.hpto-search-preview{font-size:8px;border:1px solid #dfd8cb;border-radius:5px;padding:8px;color:#8c7e6b;background:#fff;margin:13px 0}.hpto-downloaded-card{background:#fff;border:1px solid #e2d9ca;border-radius:9px;padding:11px}.hpto-downloaded-card>span{font-size:7px;color:#8a7a65}.hpto-downloaded-card>strong{font:15px Georgia,serif;display:block;margin:7px 0 10px}.hpto-downloaded-card>b{display:flex;gap:7px;align-items:center;font-size:9px;color:#704e20;border:2px solid #c19545;background:#fff5e1;border-radius:6px;padding:7px}.hpto-downloaded-card svg{width:12px;height:12px}.hpto-downloaded-card .hpto-mock-lines{gap:7px;margin-top:12px}.hpto-frame-ipad .hpto-app-grid,.hpto-frame-computer .hpto-app-grid{grid-template-columns:repeat(6,1fr);gap:9px}.hpto-frame-ipad .hpto-login-preview,.hpto-frame-computer .hpto-login-preview{max-width:200px;margin:24px auto 0}.hpto-frame-ipad .hpto-mock-site>strong,.hpto-frame-computer .hpto-mock-site>strong{font-size:27px}.hpto-frame-ipad .hpto-offline-preview,.hpto-frame-computer .hpto-offline-preview{padding:12px 20px}.hpto-frame-ipad .hpto-downloaded-card,.hpto-frame-computer .hpto-downloaded-card{max-width:230px}.hpto-frame-computer .hpto-mock-lines{gap:7px;margin-top:13px}.hpto-frame-computer .hpto-callout{left:auto;right:12px;bottom:12px;width:180px}
@media(max-width:760px){.hpto-page{padding:27px 18px 40px}.hpto-intro{margin-bottom:30px}.hpto-guide h1{font-size:43px}.hpto-intro>p{font-size:15px}.hpto-actions{gap:12px}.hpto-section-heading{display:block;margin-bottom:17px}.hpto-guide h2{font-size:27px}.hpto-section-heading>p{max-width:none;margin-top:10px}.hpto-device-tabs{gap:6px}.hpto-device-tabs button{padding:12px 3px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}.hpto-device-tabs span{font-size:12px}.hpto-device-tabs small{font-size:9px}.hpto-device-tabs svg{width:21px;height:21px}.hpto-browser-note{padding:10px 15px;font-size:11px}.hpto-step-map{padding:15px 10px 9px;gap:3px}.hpto-step-map button{flex-direction:column;gap:5px;align-items:center}.hpto-step-map small{text-align:center;font-size:9px;max-width:60px}.hpto-scene{grid-template-columns:1fr;gap:24px;padding:19px 21px 24px;min-height:0}.hpto-scene h3{font-size:30px;margin:10px 0 14px}.hpto-scene-copy>p{font-size:14px;max-width:none}.hpto-scene-tip{margin-top:17px;padding:12px}.hpto-scene-tip p{font-size:11px}.hpto-step-controls{padding:15px 13px;gap:7px}.hpto-step-controls button{font-size:12px;padding:9px 10px;gap:6px}.hpto-step-controls>span{font-size:10px}.hpto-two-things{gap:20px;grid-template-columns:1fr}.hpto-frame-ipad{width:min(305px,100%)}.hpto-frame-computer{width:min(310px,100%)}.hpto-faq summary{font-size:13px}.hpto-picture{width:100%}.hpto-device-frame{flex-shrink:0}}
@media(prefers-reduced-motion:no-preference){.hpto-scene:not([hidden]){animation:hpto-enter .22s ease-out}@keyframes hpto-enter{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}}
@media print{.hpto-guide [hidden]{display:block!important}.hpto-device-tabs,.hpto-step-map,.hpto-step-controls,.hpto-confirm-test,.hpto-install{display:none!important}.hpto-scene{break-inside:avoid;min-height:0}.hpto-scene{grid-template-columns:1fr 1fr}.hpto-device-frame{box-shadow:none}}

.hpto-frame-android,.hpto-frame-iphone{width:min(242px,100%);height:402px}.hpto-menu>span{font-size:11px}.hpto-menu .hpto-highlight{font-size:11px;line-height:1.45}.hpto-menu .hpto-menu-caption{font-size:9px}.hpto-callout{font-size:9px}.hpto-frame-android .hpto-menu{width:205px}.hpto-frame-iphone .hpto-share-sheet{bottom:66px}.hpto-frame-iphone .hpto-callout{bottom:7px}

.hpto-desktop-title{height:21px;display:flex;align-items:center;gap:13px;background:#efede8;padding:3px 8px;font-size:7px;color:#8a7e71}.hpto-frame-iphone .hpto-share-sheet+.hpto-callout{top:65px;bottom:auto}.hpto-spot{position:relative}.hpto-spot:after{content:"1";position:absolute;right:-9px;top:-9px;width:15px;height:15px;background:#b78530;color:white;font:bold 8px/15px system-ui;border-radius:50%;text-align:center;border:1px solid white}.hpto-menu .hpto-highlight{position:relative}.hpto-menu .hpto-highlight:after{content:"2";position:absolute;right:-6px;top:-8px;width:15px;height:15px;background:#b78530;color:white;font:bold 8px/15px system-ui;border-radius:50%;text-align:center;border:1px solid white}

.hpto-scene{scroll-margin-top:100px}