/* How To Ads — editorial reading and calm working screens. No billing or access state. */
.hta-design-system{--hta-ease:cubic-bezier(.2,.7,.2,1)}
.hta-design-system :where(.hta-lesson-heading,.hta-library-hero,.hta-member-heading,.htas-page-hero,.hta-workspace-title){position:relative;isolation:isolate}
.hta-design-system :where(.hta-lesson-heading,.hta-library-hero,.hta-workspace-title)::before{content:"";display:block;width:42px;height:3px;background:linear-gradient(90deg,var(--hta-brand),var(--hta-teal));border-radius:4px;margin-bottom:20px}
.hta-design-system :where(.hta-lesson-heading,.hta-library-hero) h1{letter-spacing:-.035em;text-wrap:balance}
.hta-design-system :where(.hta-lesson-heading,.hta-library-hero) p{text-wrap:pretty}
.hta-design-system :where(.hta-lesson-body,.hta-article-content) :where(p,li){overflow-wrap:break-word}
.hta-design-system :where(.hta-button,.ed-button,.hta-learning-select,.htas-button){transition:background-color .18s var(--hta-ease),border-color .18s var(--hta-ease)}
.hta-design-system :where(.ed-text-link,.hta-workspace-tabs a){text-underline-offset:6px}
.hta-design-system :where(.ed-text-link,.hta-workspace-tabs a):focus-visible{outline:3px solid var(--hta-focus);outline-offset:4px}
.hta-editorial-bridge{display:flex;align-items:center;justify-content:space-between;gap:32px;padding:32px 0;margin:36px 0 0;border-block:1px solid var(--hta-line,#dce5f0)}
.hta-editorial-bridge h3{margin:8px 0 10px;font-size:clamp(25px,3vw,34px);font-weight:500;line-height:1.5}
.hta-editorial-bridge p{max-width:650px;font-size:17px;line-height:1.8;color:var(--hta-muted,#526579);margin:0}
.hta-editorial-bridge>a{flex-shrink:0;min-height:44px;display:inline-flex;align-items:center;gap:12px}
.ed-more-topics{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:22px;font-size:15px;color:var(--hta-muted,#526579)}
.ed-more-topics a{border:1px solid var(--hta-line,#dce5f0);border-radius:99px;padding:10px 18px;min-height:44px;display:inline-flex;align-items:center;color:var(--hta-ink,#10264a);text-decoration:none;background:transparent}
.ed-more-topics a:hover,.ed-more-topics a:focus-visible{background:var(--hta-paper,#f4f8ff);border-color:var(--hta-brand,#1559e8)}
.hta-lesson-start{margin:28px 0 36px;padding:26px 0;border-block:1px solid var(--hta-line,#dce5f0);display:grid;grid-template-columns:1fr 1fr;gap:24px}
.hta-lesson-start>div{min-width:0}.hta-lesson-start strong{font-size:16px;font-weight:600;color:var(--hta-teal,#087d84)}
.hta-lesson-start p{font-size:17px!important;line-height:1.9;margin:8px 0 0}
.hta-lesson-start a{display:inline-flex;min-height:44px;align-items:center;font-weight:500;text-decoration-thickness:1px}
.hta-lesson-result{background:var(--hta-paper,#f4f8ff);border-left:3px solid var(--hta-brand,#1559e8);padding:22px 24px;margin:28px 0;border-radius:0 14px 14px 0}
.hta-lesson-result strong{display:block;font-size:17px;color:var(--hta-ink,#10264a)}
.hta-lesson-result p{margin:10px 0 0}
.hta-article-content :where(.hta-workshop-figure,.hta-lesson-figure,.hta-lesson-diagram) dl{display:grid;grid-template-columns:minmax(120px,.55fr) minmax(0,1fr);margin:0}
.hta-article-content :where(.hta-workshop-figure,.hta-lesson-figure,.hta-lesson-diagram) dt{font-weight:600;color:var(--hta-teal,#087d84);padding:16px 16px 16px 0;border-bottom:1px solid var(--hta-line,#dce5f0)}
.hta-article-content :where(.hta-workshop-figure,.hta-lesson-figure,.hta-lesson-diagram) dd{margin:0;padding:16px 0;border-bottom:1px solid var(--hta-line,#dce5f0);line-height:1.85}
.hta-article-content .hta-flow-visual{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:30px 0;padding:24px;background:#f4f8ff;border:1px solid #dce5f0;border-radius:18px}
.hta-flow-visual>div{min-width:0;border-top:2px solid #aac6ee;padding-top:14px}
.hta-flow-visual>div>span{display:block;color:#1559e8;font-size:13px;letter-spacing:.12em;margin-bottom:8px}
.hta-flow-visual strong{display:block;font-size:20px;font-weight:500;line-height:1.6;color:#10264a}
.hta-flow-visual p{font-size:16px!important;line-height:1.8;margin:10px 0 0}
.hta-flow-visual figcaption{grid-column:1/-1;font-size:13px;color:#526579;margin:0!important}
.hta-copy-wrap{position:relative;margin:24px 0}
.hta-copy-wrap>pre,.hta-copy-wrap>.hta-editor-prompt{margin:0!important}
.hta-copy-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px}
.hta-copy-button{font:500 14px/1.5 var(--hta-ui-font,Kanit,sans-serif);min-height:44px;border:1px solid #cad9ed;border-radius:10px;background:#fff;color:#1559e8;padding:10px 16px;cursor:pointer}
.hta-copy-button:hover{background:#edf4ff}
.hta-copy-state{font-size:13px!important;line-height:1.6!important;color:#526579;margin:0!important}
.hta-copy-button:focus-visible,.hta-table-scroll:focus-visible,.hta-lesson-tools a:focus-visible{outline:3px solid #087d84;outline-offset:3px}
.hta-table-note{font-size:13px!important;color:#526579;line-height:1.6!important;display:none;align-items:center;gap:8px;margin:8px 0!important}
.hta-table-note.is-needed{display:flex}
.hta-table-scroll{overscroll-behavior-inline:contain;scrollbar-width:thin;scrollbar-color:#9bb9df #edf3fc}
.hta-table-scroll th{position:sticky;top:0;z-index:1}
.hta-lesson-tools{display:flex;flex-wrap:wrap;gap:8px 24px;align-items:center;margin:28px 0;padding:15px 0;border-block:1px solid #dce5f0}
.hta-lesson-tools a{display:inline-flex;min-height:44px;align-items:center;font-size:15px;color:#1559e8;text-decoration:none}
.hta-design-system :where(.crm-kpi,.htar-kpi,.kpi,.stat) strong{font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hta-owner-workspace :where(.crm-panel,.hta-workspace-cards>a){border-radius:16px;box-shadow:none}
.hta-owner-workspace .crm-panel>h2{font-weight:500;color:#10264a;font-size:21px}
.hta-owner-workspace .crm-panel>p{max-width:85ch;line-height:1.85}
.hta-owner-workspace :where(.crm-panel,.htas-admin-section){scroll-margin-top:72px}
.hta-design-system :where(button,a,input,select,textarea,summary):focus-visible{outline-color:#087d84}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 html:not([data-hta-motion=off]) .hta-design-system .hta-lesson-card img{transition:transform .45s var(--hta-ease)}
 html:not([data-hta-motion=off]) .hta-design-system .hta-lesson-card:hover img{transform:scale(1.025)}
 html:not([data-hta-motion=off]) .hta-design-system .ed-text-link svg{transition:transform .22s var(--hta-ease)}
 html:not([data-hta-motion=off]) .hta-design-system .ed-text-link:hover svg{transform:translate(2px,-2px)}
}
@media(max-width:650px){
 .hta-editorial-bridge{display:block;padding:26px 0}.hta-editorial-bridge>a{margin-top:16px}
 .hta-lesson-start{grid-template-columns:1fr;gap:19px;padding:22px 0}
 .hta-article-content .hta-flow-visual{grid-template-columns:1fr;padding:20px;gap:18px}
 .hta-article-content :where(.hta-workshop-figure,.hta-lesson-figure,.hta-lesson-diagram) dl{grid-template-columns:1fr}
 .hta-article-content :where(.hta-workshop-figure,.hta-lesson-figure,.hta-lesson-diagram) dt{border-bottom:0;padding:16px 0 4px}
 .hta-article-content :where(.hta-workshop-figure,.hta-lesson-figure,.hta-lesson-diagram) dd{padding:0 0 16px}
 .hta-lesson-result{padding:18px}.hta-copy-state{max-width:50%}.hta-copy-button{flex-shrink:0}
 .hta-lesson-tools{gap:4px 20px}
 .hta-owner-workspace .crm-panel>h2{font-size:20px}
}
@media(prefers-reduced-motion:reduce){.hta-design-system *{scroll-behavior:auto!important}}
@media print{.hta-copy-tools,.hta-table-note,.hta-lesson-tools{display:none}}

/* Shared editorial rhythm. Ordinary navigation remains immediate and native. */
.hta-page-context{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1240px;margin:20px auto 12px;padding:0 24px;font:400 14px/1.6 var(--hta-ui-font,Kanit,sans-serif);color:var(--hta-muted,#526579)}
.hta-page-context a{display:inline-flex;align-items:center;gap:10px;min-height:44px;color:var(--hta-ink,#10264a);text-decoration:none}
.hta-page-context a svg{flex-shrink:0}
.hta-page-context a:hover{color:var(--hta-brand,#1559e8)}
.hta-page-context [aria-current]{text-align:right;overflow-wrap:anywhere}
/* The public theme already prints a generic title above the service hero. */
.hta-services-page .hta-standard-page>header{display:none}
.hta-design-system :where(.hta-all-plans,.hta-dashboard-intro,.htas-collection) :where(h1,h2){text-wrap:balance;letter-spacing:-.025em}
.hta-design-system :where(.hta-all-plans,.hta-dashboard-intro,.htas-collection) p{text-wrap:pretty}
.hta-design-system .hta-sp-page-head::after{right:32px}
.hta-design-system :where(.hta-sp-jumps,.htas-work-nav,.hta-member-sidebar){gap:8px}
.hta-design-system :where(.hta-sp-jumps,.htas-work-nav,.hta-member-sidebar) a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.hta-design-system .htas-work-nav{scrollbar-width:thin;scrollbar-color:#adc1de transparent}
.hta-design-system .htas-work-nav a[aria-current]{background:var(--hta-ink,#10264a);border-color:var(--hta-ink,#10264a);color:#fff}
.hta-design-system :where(.hta-auth-card,.hta-plan-entry,.htas-work-card,.hta-learning-card){box-shadow:none}
.hta-design-system :where(.hta-auth-card,.hta-plan-entry){border-color:var(--hta-line,#dce5f0)}
.hta-design-system :where(.hta-auth-card,.hta-simple-form) :where(input:not([type=checkbox]):not([type=radio]):not([type=hidden]),select){min-height:48px}
.hta-design-system :where(.hta-member-main,.hta-dashboard-intro) p{max-width:78ch}
.hta-design-system .hta-di-steps-four{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
#hta-editorial .ed-member-finish{position:relative;padding-block:42px 50px;border-top:1px solid var(--line)}
#hta-editorial .ed-member-finish .ed-button svg{width:21px;height:21px}
.hta-design-system :where(.htas-product-principles,.htas-service-facts){border-color:var(--hta-line,#dce5f0)}
.hta-design-system .hta-workspace-title::before{position:absolute;left:30px;top:12px;margin:0}
.hta-design-system .hta-workspace-title{padding-top:28px}
.hta-design-system .htas-owner .htas-work-head h1{font-size:clamp(28px,3vw,40px);line-height:1.4}
.hta-design-system .htas-owner .htas-work-head{margin:8px 0 16px}
.hta-design-system .htas-owner .htas-owner-nav{margin-bottom:12px}
.hta-design-system .htas-owner .hta-admin-directory{margin-bottom:12px}
.hta-design-system .htas-owner .htas-status-strip{padding-block:10px}
.hta-design-system .htas-owner .htas-section-nav{padding-block:8px}
.hta-design-system .htas-owner .htas-panel{margin-block:16px}
.hta-design-system .hta-task-disclosure{padding:18px 28px}
.hta-design-system .htas-owner .hta-task-disclosure{padding-block:10px}
.hta-task-disclosure>summary{display:flex;align-items:center;gap:20px;min-height:44px;cursor:pointer;font-size:20px;font-weight:500;list-style:none}
.hta-task-disclosure>summary::-webkit-details-marker{display:none}
.hta-task-disclosure>summary::after{content:"+";margin-left:auto;color:#1559e8;font-size:26px}
.hta-task-disclosure[open]>summary::after{content:"−"}
.hta-task-disclosure>summary .htas-eyebrow{margin:0;font-size:11px}
.hta-task-disclosure>summary:focus-visible{outline:3px solid #087d84;outline-offset:3px}
@media(hover:hover) and (prefers-reduced-motion:no-preference){
 html:not([data-hta-motion=off]) .hta-page-context a svg{transition:transform .2s var(--hta-ease)}
 html:not([data-hta-motion=off]) .hta-page-context a:hover svg{transform:translateX(-3px)}
 html:not([data-hta-motion=off]) .hta-design-system :where(.htas-text-link,.hta-sp-link,.hta-lesson-tools a){text-decoration:underline;text-decoration-color:transparent;transition:text-decoration-color .18s var(--hta-ease)}
 html:not([data-hta-motion=off]) .hta-design-system :where(.htas-text-link,.hta-sp-link,.hta-lesson-tools a):hover{text-decoration-color:currentColor}
}
@media(max-width:900px){.hta-design-system .hta-di-steps-four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .hta-page-context{font-size:13px;padding-inline:18px;margin-top:10px;gap:10px}
 .hta-design-system .hta-di-steps-four{grid-template-columns:1fr;gap:4px}
 .hta-design-system .htas-work-nav{flex-wrap:nowrap;overflow-x:auto;max-width:100%;padding-bottom:10px}
 .hta-design-system .htas-work-nav a{flex:0 0 auto}
 .hta-design-system :where(.hta-sp-page-head,.htas-editorial-head) h1{font-size:clamp(30px,8.5vw,40px);line-height:1.45}
 .hta-design-system .hta-sp-page-head::after{right:18px}
 .hta-design-system .hta-workspace-title{padding:28px 20px 16px;gap:10px}
 .hta-design-system .hta-workspace-title::before{left:20px;top:12px}
 .hta-design-system .hta-workspace-tabs{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin}
 .hta-design-system .hta-workspace-tabs a{flex:0 0 auto;white-space:nowrap;min-height:44px;padding-block:6px}
 .hta-design-system .hta-task-disclosure{padding:14px 18px}
 .hta-task-disclosure>summary{font-size:18px;gap:12px}
 .hta-task-disclosure>summary .htas-eyebrow{display:none}
}
@media print{.hta-page-context{display:none}}