/* Partial editorial redesign. Scoped to Hub pages; no checkout, scoring or storage changes. */
body.ontype-hub-page #content,body.ontype-hub-page #content.container,body.ontype-hub-page #content>.container,body.ontype-hub-page .site-content>.container{width:100%;max-width:none;padding-left:0;padding-right:0}
.ot-hub.ot4.ot-rd{width:100%;max-width:none;margin:0;padding:0 0 var(--ot-sp-64,64px);background:#f8f7f2;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-rd .ot-hub__layout,.ot-rd .ot-hub__layout:has(>.ot4-nav){display:block;width:100%;max-width:1384px;padding:var(--ot-sp-24,24px) var(--ot-sp-32,32px) 0;margin:0 auto;box-sizing:border-box}
.ot-rd .ot-hub__main{min-width:0;width:100%;padding:0}
.ot-rd h2{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2);letter-spacing:-.3px}
.ot-rd h3{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}
.ot-rd p{margin:0 0 16px}
.ot-rd small,.ot-rd .ot-help{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);color:#4a4f60}
.ot-rd .ot-eyebrow{font-size:var(--ot-fs-caption,14px);letter-spacing:1.1px;margin:0 0 12px;color:var(--hub-dark);line-height:var(--ot-lh-caption,1.45)}
.ot-rd .ot-btn{font-size:var(--ot-fs-body,17px);min-height:46px;padding:var(--ot-sp-12,12px) var(--ot-sp-20,20px);white-space:normal;text-align:center;line-height:var(--ot-lh-body,1.65)}
.ot-rd :is(a,button,input,summary):focus-visible{outline:3px solid #23697a;outline-offset:4px}
.ot-rd-banner{position:relative;isolation:isolate;overflow:hidden;background:#f8f1e5;margin:0;width:100%}
.ot-rd .ot-rd-banner__background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;z-index:-1;max-width:none}
.ot-rd-banner__inner{max-width:1384px;margin:auto;padding:var(--ot-sp-48,48px) var(--ot-sp-32,32px);min-height:420px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);align-items:center;gap:var(--ot-sp-64,64px);box-sizing:border-box}
.ot-rd-banner__copy{max-width:600px;min-width:0}
.ot-rd .ot-rd-banner h1{font-size:var(--ot-fs-display,48px);line-height:var(--ot-lh-display,1.06);letter-spacing:-1.2px;margin:0 0 20px;color:#20263c;font-weight:400}
.ot-rd-banner__copy>p:not(.ot-eyebrow){font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);max-width:48ch;color:#293446}
.ot-rd-banner__actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--ot-sp-12,12px) var(--ot-sp-24,24px);margin:24px 0 16px}
.ot-rd-banner__source,.ot-rd-banner__copy>small{display:block;max-width:58ch}
.ot-rd-banner__avatar{display:block;width:360px;height:340px;max-width:100%;object-fit:contain;justify-self:center;align-self:center}
.ot-rd-banner--intp .ot-rd-banner__avatar{visibility:hidden}
.ot-rd-banner__ensemble{display:flex;justify-content:center;align-items:end;max-width:100%;gap:0}
.ot-rd-banner__ensemble img{width:25%;height:290px;object-fit:cover;object-position:center;min-width:0}
.ot-rd .ot4-nav{padding:0 var(--ot-sp-20,20px);margin:0 0 24px;border:1px solid #e0dfd8;border-top:0;border-radius:14px;background:#fff;box-shadow:none}
.ot-rd .ot4-nav__top{padding:var(--ot-sp-12,12px) 0;gap:var(--ot-sp-16,16px);min-height:50px}
.ot-rd .ot4-nav__identity img{width:32px;height:38px;object-fit:contain}
.ot-rd .ot4-nav__identity strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-rd .ot4-nav__utility{gap:var(--ot-sp-8,8px) var(--ot-sp-24,24px)}
.ot-rd .ot4-nav__utility a{font-size:var(--ot-fs-caption,14px);min-height:40px;line-height:var(--ot-lh-caption,1.45)}
.ot-rd .ot4-nav__links{gap:var(--ot-sp-4,4px)}
.ot-rd .ot4-nav__links a{font-size:var(--ot-fs-body,17px);min-height:52px;padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px);line-height:var(--ot-lh-body,1.65)}
.ot-rd .ot4-nav__links a[aria-current=page]{border-radius:8px 8px 0 0;background:var(--hub-dark);color:#fff}
.ot-rd-resume{display:flex;justify-content:space-between;align-items:center;gap:var(--ot-sp-24,24px);padding:var(--ot-sp-20,20px) var(--ot-sp-24,24px);margin:0 0 16px;background:#edf3ef;border-radius:14px;border:1px solid #d9e3db}
.ot-rd-resume h2{font-size:var(--ot-fs-h2,28px);margin:0 0 6px;line-height:var(--ot-lh-h2,1.2)}
.ot-rd-resume p:last-child{margin:0;font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
.ot-rd-resume .ot-eyebrow{margin-bottom:6px}
.ot-rd-resume>a{flex-shrink:0}
.ot-rd-setup{margin:0 0 16px;border-block:1px solid #dddcd4;padding:0 var(--ot-sp-4,4px)}
.ot-rd-setup>summary{display:flex;justify-content:space-between;align-items:center;gap:var(--ot-sp-16,16px);cursor:pointer;padding:var(--ot-sp-16,16px) 0;list-style:none}
.ot-rd-setup>summary>span:first-child{display:flex;gap:var(--ot-sp-12,12px);align-items:baseline;flex-wrap:wrap}
.ot-rd-setup>summary:after{content:'+';font-size:var(--ot-fs-h2,28px);margin-left:8px;line-height:var(--ot-lh-h2,1.2)}
.ot-rd-setup[open]>summary:after{content:'−'}
.ot-rd-setup__owned{font-size:var(--ot-fs-caption,14px);color:#4d5361;margin-left:auto;line-height:var(--ot-lh-caption,1.45)}
.ot-rd-setup>p{max-width:70ch;font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
.ot-rd-setup__steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ot-sp-12,12px);padding:0;list-style:none}
.ot-rd-setup__steps li{display:flex;flex-direction:column;align-items:start;padding:var(--ot-sp-16,16px);background:white;border-radius:10px}
.ot-rd-setup__steps span{font-size:var(--ot-fs-caption,14px);color:#505565;line-height:var(--ot-lh-caption,1.45)}
.ot-rd-report-areas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-16,16px);padding:var(--ot-sp-12,12px) 0}
.ot-rd-report-areas p{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}.ot-rd-report-areas span{display:block}
.ot-rd-other-reports{font-size:var(--ot-fs-small,15px);margin:0 0 24px;padding:var(--ot-sp-12,12px) 0;line-height:var(--ot-lh-small,1.5)}
.ot-rd-other-reports summary{cursor:pointer}.ot-rd-other-reports ul{margin:12px 0}
.ot-rd-free{margin:40px 0}
.ot-rd-strengths{padding:0 0 var(--ot-sp-32,32px);border-bottom:1px solid #e1dfd7}
.ot-rd-strengths h2{margin:0 0 24px}
.ot-rd-strengths>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ot-sp-24,24px)}
.ot-rd-strengths>div>p{padding:var(--ot-sp-20,20px) var(--ot-sp-24,24px);background:#eeede6;border-radius:12px;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin:0;color:#30374b}
.ot-rd-examples{margin:40px 0}
.ot-rd-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--ot-sp-32,32px);margin-bottom:24px}
.ot-rd-heading h2{margin:0 0 12px}.ot-rd-heading>small,.ot-rd-heading>p{max-width:32ch;margin:0;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-rd-examples__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ot-sp-32,32px)}
.ot-rd-examples__grid article{padding-left:var(--ot-sp-24,24px);border-left:3px solid var(--hub-light)}
.ot-rd-examples__grid h3{margin:0 0 12px}.ot-rd-examples__grid article>p:last-child{max-width:65ch;margin-bottom:0}
.ot-rd .ot-rd-functions{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:var(--ot-sp-32,32px);margin:40px 0;padding:var(--ot-sp-32,32px);background:#eef4ee;border:1px solid #dce7da;border-radius:18px}
.ot-rd .ot23-overview__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ot-sp-16,16px);min-width:0}
.ot-rd .ot23-overview__grid article{display:flex;align-items:start;gap:var(--ot-sp-12,12px);padding:var(--ot-sp-16,16px);background:#fff;border:1px solid #dee4db;border-radius:12px;min-width:0}
.ot-rd .ot23-overview__grid article>div{min-width:0}
.ot-rd .ot23-overview__grid strong{font-size:var(--ot-fs-small,15px);overflow-wrap:anywhere;line-height:var(--ot-lh-small,1.5)}
.ot-rd .ot23-overview__grid p{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);margin:8px 0 0}
.ot-rd .ot23-overview__code{font-size:var(--ot-fs-h3,20px);background:#e8f0e1;padding:var(--ot-sp-8,8px);border-radius:8px;flex-shrink:0;line-height:var(--ot-lh-h3,1.3)}
.ot-rd .ot23-growth-hint{margin:24px 0}
.ot-rd .ot24-deep-reading{margin:24px 0 0;background:#fff;border-radius:12px}
.ot-rd-shortcuts{margin:44px 0}
.ot-rd .ot4-category-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-16,16px)}
.ot-rd .ot4-category{min-height:0;box-shadow:none;border-radius:14px;display:flex;background:var(--area-tint);overflow:hidden}
.ot-rd .ot4-category__copy{padding:var(--ot-sp-24,24px);min-height:210px}
.ot-rd .ot4-category h3{font-size:var(--ot-fs-h2,28px);margin:14px 0 10px;line-height:var(--ot-lh-h2,1.2)}
.ot-rd .ot4-category p{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5);margin:0}
.ot-rd .ot4-category__top{gap:var(--ot-sp-12,12px);font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-rd .ot4-category__go{padding-top:var(--ot-sp-16,16px);font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-rd .ot24-upgrade{margin:44px 0 24px;padding:var(--ot-sp-32,32px);gap:var(--ot-sp-32,32px)}
.ot-rd .ot24-upgrade__body>p{max-width:70ch;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-rd .ot-product-difference p{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
.ot-rd-chapter-links{display:flex;flex-wrap:wrap;gap:var(--ot-sp-12,12px);margin:16px 0}
.ot-rd-future{border-left:3px solid #aaa8b0;padding:0 0 0 var(--ot-sp-20,20px);margin:28px 0 36px;font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}.ot-rd-future p{margin:6px 0 0;max-width:80ch}
.ot-rd .ot25-type-library{margin:28px 0}.ot-rd .ot4-library-link{font-size:var(--ot-fs-small,15px);gap:var(--ot-sp-16,16px) var(--ot-sp-32,32px);padding:var(--ot-sp-20,20px) 0; border-top:1px solid #dddcd4;line-height:var(--ot-lh-small,1.5)}
.ot-rd-preview-content{scroll-margin-top:24px;margin:20px 0 48px}
.ot-rd-public-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ot-sp-48,48px);align-items:center;margin:28px 0 36px}
.ot-rd-public-intro>img{width:100%;height:auto;max-height:360px;object-fit:contain;border-radius:16px}
.ot-rd-public-intro p{max-width:65ch}
.ot-rd-public-intro details{padding:var(--ot-sp-16,16px);background:#edf2eb;border-radius:12px;margin:20px 0}
.ot-rd-public-intro summary{cursor:pointer;font-weight:600}
.ot-rd-public-paths .ot4-category__copy{min-height:160px}
.ot-rd-conversation [data-demo-prompt]{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);padding:var(--ot-sp-20,20px);background:#edf4ee;border-radius:12px;margin:20px 0}
.ot-rd-conversation>a{display:block;margin-top:18px}.ot-rd-conversation small{display:block}
.ot-rd-type-browser{margin:48px 0;scroll-margin-top:24px}
.ot-rd-type-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:var(--ot-sp-16,16px);margin:24px 0}
.ot-rd-type-tile{display:flex;flex-direction:column;text-align:center;align-items:center;padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px) var(--ot-sp-20,20px);background:#fff;border:1px solid #e2dfd6;border-radius:14px;text-decoration:none;color:#30354b;transition:background .15s}
.ot-rd-type-tile img{width:100%;height:140px;object-fit:contain}.ot-rd-type-tile strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}.ot-rd-type-tile span{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);margin-top:5px}.ot-rd-type-tile:hover,.ot-rd-type-tile[aria-current]{background:#eaf2e5;border-color:#78977a}
.ot-rd-type-example{display:grid;grid-template-columns:220px minmax(0,1fr);align-items:center;gap:var(--ot-sp-40,40px);padding:var(--ot-sp-32,32px);background:#f0f2e9;border-radius:16px;margin:24px 0}.ot-rd-type-example img{width:220px;height:260px;object-fit:contain}.ot-rd-type-example p{max-width:70ch}
.ot-rd-public-reports{display:grid;grid-template-columns:minmax(0,1fr) 220px;align-items:center;gap:var(--ot-sp-48,48px);padding:var(--ot-sp-32,32px);background:#f1eee7;border-radius:18px;margin:48px 0}.ot-rd-public-reports p{max-width:65ch}.ot-rd-public-reports figure{margin:0}.ot-rd-public-reports img{width:190px;max-width:100%;height:auto;border:1px solid #d9d6cc}.ot-rd-public-reports figcaption{font-size:var(--ot-fs-caption,14px);margin-top:10px;line-height:var(--ot-lh-caption,1.45)}
.ot-rd-signin{scroll-margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ot-sp-64,64px);padding:var(--ot-sp-40,40px);background:#fff;border:1px solid #deded7;border-radius:18px;margin:48px 0 0}.ot-rd-signin h2{margin-top:0}.ot-rd-signin .ot-form{margin:0;align-self:center}.ot-rd-signin label{display:block;margin-bottom:8px}.ot-rd-signin button{margin:12px 0}.ot-rd-signin input{font-size:var(--ot-fs-body,17px);min-height:48px;line-height:var(--ot-lh-body,1.65)}
@media(min-width:1600px){.ot-rd-banner__inner{min-height:460px}.ot-rd-banner--public .ot-rd-banner__inner{min-height:480px}}
@media(max-width:1050px){.ot-rd-banner__inner{gap:var(--ot-sp-24,24px)}.ot-rd-banner__ensemble img{height:230px}.ot-rd .ot4-category-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ot-rd-type-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.ot-rd .ot-rd-functions{grid-template-columns:1fr}.ot-rd-signin{gap:var(--ot-sp-32,32px)}}
@media(max-width:700px){
 .ot-hub.ot4.ot-rd{padding:0 0 var(--ot-sp-32,32px)}.ot-rd .ot-hub__layout,.ot-rd .ot-hub__layout:has(>.ot4-nav){padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px) 0}
 .ot-rd-banner__inner{display:flex;flex-direction:column;align-items:stretch;padding:var(--ot-sp-32,32px) var(--ot-sp-20,20px) var(--ot-sp-16,16px);min-height:0;gap:var(--ot-sp-8,8px)}.ot-rd-banner__copy{max-width:none}.ot-rd .ot-rd-banner h1{font-size:var(--ot-fs-h1,36px);letter-spacing:-.6px;line-height:var(--ot-lh-h1,1.12)}.ot-rd-banner__copy>p:not(.ot-eyebrow){font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}.ot-rd-banner__actions{gap:var(--ot-sp-12,12px) var(--ot-sp-20,20px);margin-top:20px}.ot-rd-banner__source{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}.ot-rd-banner__avatar{width:240px;height:220px;align-self:center}.ot-rd-banner--intp .ot-rd-banner__avatar{visibility:visible}.ot-rd-banner--intp{background-image:url('banners/landscape.webp');background-size:cover}.ot-rd-banner--intp .ot-rd-banner__background{display:none}.ot-rd-banner__ensemble{align-self:center;width:100%;max-width:390px}.ot-rd-banner__ensemble img{height:160px}
 .ot-rd .ot4-nav{padding:0 var(--ot-sp-12,12px)}.ot-rd .ot4-nav__top{align-items:start}.ot-rd .ot4-nav__identity{flex:1 1 auto}.ot-rd .ot4-nav__utility{justify-content:start;gap:var(--ot-sp-8,8px) var(--ot-sp-16,16px);flex-wrap:wrap}.ot-rd .ot4-nav__utility a{font-size:var(--ot-fs-caption,14px);white-space:normal;min-height:44px;line-height:var(--ot-lh-caption,1.45)}.ot-rd .ot4-nav__links{gap:0}.ot-rd .ot4-nav__links a{font-size:var(--ot-fs-caption,14px);min-height:48px;padding:var(--ot-sp-8,8px) 3px;line-height:var(--ot-lh-caption,1.45)}.ot-rd .ot4-nav__identity strong{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
 .ot-rd h2{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)}.ot-rd h3{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}.ot-rd-resume{padding:var(--ot-sp-20,20px);flex-direction:column;align-items:start;gap:var(--ot-sp-16,16px)}.ot-rd-resume h2{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}.ot-rd-resume>a{width:100%}.ot-rd-setup>summary{flex-wrap:wrap;gap:var(--ot-sp-8,8px)}.ot-rd-setup__owned{margin-left:0;flex:1 1 80%}.ot-rd-setup__steps,.ot-rd-report-areas{grid-template-columns:1fr 1fr}.ot-rd-free{margin:32px 0}.ot-rd-strengths>div{grid-template-columns:1fr;gap:var(--ot-sp-12,12px)}.ot-rd-strengths>div>p{font-size:var(--ot-fs-body,17px);padding:var(--ot-sp-20,20px) var(--ot-sp-20,20px);line-height:var(--ot-lh-body,1.65)}.ot-rd-examples{margin:32px 0}.ot-rd-heading{display:block}.ot-rd-heading>small,.ot-rd-heading>p{display:block;max-width:65ch;margin-top:12px}.ot-rd-examples__grid{grid-template-columns:1fr;gap:var(--ot-sp-24,24px)}.ot-rd .ot-rd-functions{padding:var(--ot-sp-20,20px);margin:32px 0;gap:var(--ot-sp-20,20px)}.ot-rd .ot23-overview__grid{grid-template-columns:1fr}.ot-rd .ot23-overview__grid article{padding:var(--ot-sp-16,16px)}.ot-rd .ot4-category-grid{grid-template-columns:1fr 1fr;gap:var(--ot-sp-12,12px)}.ot-rd .ot4-category__copy{padding:var(--ot-sp-16,16px);min-height:230px}.ot-rd .ot4-category h3{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}.ot-rd .ot4-category__top{flex-wrap:wrap}.ot-rd .ot24-upgrade{padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px);gap:var(--ot-sp-24,24px)}.ot-rd .ot24-upgrade__visual{min-height:0}.ot-rd-public-intro{grid-template-columns:1fr;gap:var(--ot-sp-24,24px)}.ot-rd-public-intro>img{max-height:280px}.ot-rd-type-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-8,8px)}.ot-rd-type-tile{padding:var(--ot-sp-8,8px) 3px var(--ot-sp-12,12px)}.ot-rd-type-tile img{height:100px}.ot-rd-type-tile strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}.ot-rd-type-tile span{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}.ot-rd-type-example{grid-template-columns:1fr;gap:var(--ot-sp-12,12px);padding:var(--ot-sp-20,20px)}.ot-rd-type-example img{width:180px;height:210px;justify-self:center}.ot-rd-public-reports{grid-template-columns:1fr;padding:var(--ot-sp-24,24px);gap:var(--ot-sp-24,24px)}.ot-rd-public-reports figure{justify-self:center}.ot-rd-signin{grid-template-columns:1fr;gap:var(--ot-sp-20,20px);padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px)}.ot-rd-public-paths .ot4-category__copy{min-height:190px}
}
@media(max-width:360px){.ot-rd .ot4-nav__links a{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}.ot-rd .ot4-category-grid{grid-template-columns:1fr}.ot-rd .ot4-category__copy{min-height:0}.ot-rd-type-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ot-rd-type-tile img{height:120px}}
@media(prefers-reduced-motion:reduce){.ot-rd-type-tile{transition:none}}

/* Keep the landscape softly behind mobile copy rather than across the heading. */
@media(max-width:700px){.ot-rd .ot-rd-banner__background{height:100%;opacity:.22;object-position:65% center}.ot-rd-banner--intp{background-image:linear-gradient(#fbf6edf0,#fbf6edb8),url('banners/landscape.webp')}.ot-public-hub .ot4-nav__utility{gap:var(--ot-sp-8,8px) var(--ot-sp-16,16px)}}

.ot-public-hub:is(.ot-public-hub--overview,.ot-public-hub--relationships,.ot-public-hub--career) .ot-rd-public-intro>img{height:320px;object-fit:cover;object-position:center 47%}
@media(max-width:700px){.ot-public-hub:is(.ot-public-hub--overview,.ot-public-hub--relationships,.ot-public-hub--career) .ot-rd-public-intro>img{height:240px}}
/* Human review follow-up: continuous landscape, readable inline free guide. */
.ot-rd .ot-rd-banner__inner{min-height:330px;padding-block:var(--ot-sp-40,40px);grid-template-columns:minmax(0,1.08fr) minmax(0,1fr)}
.ot-rd .ot-rd-banner h1{font-size:var(--ot-fs-display,48px);line-height:var(--ot-lh-display,1.06)}
.ot-rd .ot-rd-banner__copy>p:not(.ot-eyebrow){font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-rd .ot-rd-guide{margin:40px 0;min-width:0;scroll-margin-top:24px}
.ot-rd .ot-rd-guide>.ot-personality{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;min-width:0}
.ot-rd .ot-rd-guide .ot-intro{display:block;grid-template-columns:1fr;margin:0 0 32px;padding:0}
.ot-rd .ot-rd-guide .ot-intro__text{max-width:76ch}
.ot-rd .ot-rd-guide .ot-personality__summary{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin:0 0 18px}
.ot-rd .ot-rd-guide .ot-opening{max-width:none}
.ot-rd .ot-rd-context{padding:var(--ot-sp-32,32px);margin:28px 0 36px;background:#eef3eb;border-radius:16px}
.ot-rd .ot-rd-context h3{margin-top:0}
.ot-rd .ot-rd-context .ot-facts{display:grid;grid-template-columns:1fr 1fr;gap:var(--ot-sp-32,32px)}
.ot-rd .ot-rd-context .ot-facts>div{min-width:0}
.ot-rd .ot-rd-context .ot-explainer{max-width:76ch;margin-top:24px}
.ot-rd .ot-rd-guide .ot-tabs{min-width:0}
.ot-rd .ot-rd-guide .ot-personality__body{grid-template-columns:minmax(0,1fr);min-width:0}
.ot-rd .ot-rd-guide .ot-tabs__panels{min-width:0}
.ot-rd .ot-rd-guide .ot-tabs__panel{max-width:100%;box-sizing:border-box}
.ot-rd .ot-rd-guide .ot-card__foot{flex-wrap:wrap;gap:var(--ot-sp-16,16px) var(--ot-sp-32,32px)}
.ot-rd .ot-prep-banner{gap:var(--ot-sp-24,24px);padding:var(--ot-sp-24,24px) var(--ot-sp-32,32px)}
.ot-rd .ot-prep-banner>div{flex:1 1 0;min-width:0}
.ot-rd .ot-prep-banner>.ot-btn{flex:0 0 auto;min-width:142px;white-space:nowrap}
.ot-rd .ot-prep-banner p{max-width:82ch}
.ot-rd .ot-prep-banner h2{line-height:1.35}
.ot-rd .ot-btn{word-break:normal;overflow-wrap:normal;line-height:1.45}
.ot-rd .ot24-deep-reading>summary>span:not([aria-hidden]){min-width:0;width:auto;height:auto;display:block;flex:1 1 auto;border:0;border-radius:0}
@media(max-width:700px){
 .ot-rd .ot-rd-banner__inner{min-height:0;padding:var(--ot-sp-32,32px) var(--ot-sp-20,20px) var(--ot-sp-32,32px);display:block}
 .ot-rd .ot-rd-banner h1{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12)}
 .ot-rd .ot-rd-banner__copy>p:not(.ot-eyebrow){font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-rd .ot-rd-context{padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px)}
 .ot-rd .ot-rd-context .ot-facts{grid-template-columns:1fr;gap:var(--ot-sp-20,20px)}
 .ot-rd .ot-prep-banner{flex-direction:column;align-items:stretch;padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px)}
 .ot-rd .ot-prep-banner>.ot-btn{width:100%;box-sizing:border-box}
}

.ot-rd .ot-rd-guide .ot-personality::before{display:none}
.ot-rd .ot-rd-guide>h2{margin:0 0 24px}
.ot-rd .ot-rd-guide .ot-tabs__panel{animation:none!important;transition:none!important}
.ot-rd .ot-rd-guide :is(.ot-panel__about,.ot-panel__example>p,.ot-panel__block>p){max-width:78ch}

/* Approved integrated INTP scene: mobile art gets its own space below the copy. */
@media(max-width:700px){
 .ot-rd .ot-rd-banner--integrated{display:flex;flex-direction:column}
 .ot-rd .ot-rd-banner--integrated .ot-rd-banner__inner{order:1;width:100%;background:#fbf6ed}
 .ot-rd .ot-rd-banner--integrated .ot-rd-banner__background{position:relative;inset:auto;order:2;z-index:0;width:100%;height:220px;object-fit:cover;object-position:right center;opacity:1;display:block}
}
/* Journey fixes: useful actions before deeper theory, compact section navigation. */
.ot-rd .ot-rd-report-action{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ot-sp-32,32px);padding:var(--ot-sp-24,24px) var(--ot-sp-32,32px);margin:32px 0 0;background:#edf1e8;border:1px solid #d5dfcd;border-radius:16px}
.ot-rd .ot-rd-report-action h2{font-size:var(--ot-fs-h2,28px);margin:0 0 12px;line-height:var(--ot-lh-h2,1.2)}
.ot-rd .ot-rd-report-action p:last-child{max-width:68ch;margin:0}
.ot-rd .ot-rd-report-action__links{display:flex;flex-direction:column;align-items:center;gap:var(--ot-sp-12,12px);max-width:310px;min-width:0}
.ot-rd .ot-rd-report-action__links .ot-link{min-height:44px;display:inline-flex;align-items:center}
.ot-rd .ot-rd-jumps{display:flex;align-items:stretch;gap:var(--ot-sp-20,20px);padding:var(--ot-sp-8,8px) 0 var(--ot-sp-16,16px);margin:0 0 28px;border-bottom:1px solid #dddcd4}
.ot-rd .ot-rd-jumps a{display:flex;align-items:center;justify-content:center;gap:var(--ot-sp-12,12px);flex:1 1 0;min-width:0;min-height:44px;padding:var(--ot-sp-8,8px) var(--ot-sp-4,4px);background:transparent;border:0;border-radius:0;box-shadow:none;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-rd .ot-rd-jumps a span{display:inline;font-size:var(--ot-fs-caption,14px);margin:0;color:var(--hub-dark);line-height:var(--ot-lh-caption,1.45)}
@media(max-width:700px){.ot-rd .ot-rd-report-action{grid-template-columns:1fr;padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px);gap:var(--ot-sp-20,20px)}.ot-rd .ot-rd-report-action__links{align-items:stretch;max-width:none}.ot-rd .ot-rd-report-action__links .ot-link{justify-content:center}.ot-rd .ot-rd-jumps{gap:var(--ot-sp-8,8px)}.ot-rd .ot-rd-jumps a{font-size:var(--ot-fs-caption,14px);gap:var(--ot-sp-4,4px);line-height:var(--ot-lh-caption,1.45)}.ot-rd .ot-rd-jumps a span{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}}
@media(min-width:720px){.ot-shop-page .ot-shop__grid--pair{grid-template-columns:repeat(2,minmax(0,1fr))}}

.ot-rd .ot-rd-report-action{scroll-margin-top:24px}

/* ─── 4.4.0 reveal and report landing ─────────────────────────── */
.ot-reveal{background:linear-gradient(135deg,#fbf8f1 0%,color-mix(in srgb,var(--hub-light,#b5d8cc) 55%,#fff) 100%);border-bottom:1px solid rgba(29,38,34,.08);padding:var(--ot-sp-32,32px) var(--ot-sp-16,16px) var(--ot-sp-32,32px)}
.ot-reveal__inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ot-sp-16,16px);align-items:center}
.ot-reveal__avatar{margin:0 auto;width:min(220px,60vw)}
.ot-reveal__avatar img{width:100%;height:auto;display:block;filter:drop-shadow(0 12px 22px rgba(20,30,25,.14))}
.ot-reveal__copy{text-align:center}
.ot-reveal h1{font-size:var(--ot-fs-display,48px);line-height:1.08;margin:.2em 0 .3em;color:#1d2622}
.ot-reveal__essence{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);max-width:38em;margin:0 auto 16px;color:#34413b}
.ot-reveal__chips{list-style:none;padding:0;margin:0 0 20px;display:flex;flex-wrap:wrap;gap:var(--ot-sp-8,8px);justify-content:center}
.ot-reveal__chips li{display:flex;align-items:center;gap:var(--ot-sp-8,8px);background:#fff;border:1px solid rgba(29,38,34,.12);border-radius:999px;padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-reveal__chips strong{color:var(--hub-dark,#23697a)}
.ot-reveal__chips .ot-dots{display:inline-flex;gap:3px}
.ot-reveal__chips .ot-dots__dot{width:7px;height:7px;border-radius:50%;background:rgba(29,38,34,.15)}
.ot-reveal__chips .ot-dots__dot[data-on="true"]{background:var(--hub-dark,#23697a)}
.ot-reveal__actions{display:flex;flex-wrap:wrap;gap:var(--ot-sp-12,12px);justify-content:center;align-items:center}
.ot-reveal__copylink{background:none;border:0;cursor:pointer;font:inherit;text-decoration:underline;color:var(--hub-dark,#23697a);padding:var(--ot-sp-8,8px)}
.ot-reveal__status{min-height:1.2em;margin:8px 0 0;font-size:var(--ot-fs-caption,14px);color:var(--hub-dark,#23697a);line-height:var(--ot-lh-caption,1.45)}
.ot-reveal__source{display:block;color:#5b6862;margin-top:4px}
.ot-btn--buy{background:var(--hub-dark,#23697a);color:#fff;border:2px solid var(--hub-dark,#23697a);font-weight:600;padding:var(--ot-sp-16,16px) var(--ot-sp-24,24px);border-radius:999px;text-decoration:none;display:inline-block;text-align:center}
.ot-btn--buy:hover,.ot-btn--buy:focus-visible{filter:brightness(1.08);color:#fff}
.ot-btn--block{display:block;width:100%;box-sizing:border-box;margin-top:14px}
@media (min-width:860px){
 .ot-reveal{padding:var(--ot-sp-48,48px) var(--ot-sp-24,24px)}
 .ot-reveal__inner{grid-template-columns:300px minmax(0,1fr);gap:var(--ot-sp-40,40px)}
 .ot-reveal__avatar{width:300px}
 .ot-reveal__copy{text-align:left}
 .ot-reveal__essence{margin-left:0}
 .ot-reveal__chips,.ot-reveal__actions{justify-content:flex-start}
}
.ot-toast{display:flex;align-items:center;justify-content:space-between;gap:var(--ot-sp-12,12px);background:#eef6f0;border:1px solid #cfe3d5;border-radius:10px;padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);font-size:var(--ot-fs-caption,14px);margin:0 0 16px;line-height:var(--ot-lh-caption,1.45)}
.ot-toast[hidden]{display:none}
.ot-toast__close{background:none;border:0;font-size:var(--ot-fs-h3,20px);line-height:1;cursor:pointer;color:#34413b;padding:var(--ot-sp-4,4px) var(--ot-sp-8,8px)}
.ot-scores,.ot-offer-main,.ot-chapters,.ot-bundles,.ot-profile-tools,.ot-library-more{margin:0 0 36px}
.ot-scores{background:#fff;border:1px solid rgba(29,38,34,.1);border-radius:16px;padding:var(--ot-sp-20,20px)}
.ot-scores h2,.ot-offer-main h2,.ot-chapters h2,.ot-bundles h2,.ot-profile-tools h2{margin:.2em 0 .4em}
.ot-snapshot__cols{display:grid;gap:var(--ot-sp-16,16px)}
.ot-snapshot__cols h3{margin:0 0 6px;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-snapshot__cols p{margin:0 0 8px}
@media (min-width:760px){.ot-snapshot__cols{grid-template-columns:1fr 1fr}}
.ot-offer-main{background:#fff;border:2px solid color-mix(in srgb,var(--hub-dark,#23697a) 30%,#fff);border-radius:20px;padding:var(--ot-sp-24,24px)}
.ot-offer-main__grid{display:grid;gap:var(--ot-sp-24,24px)}
@media (min-width:900px){.ot-offer-main__grid{grid-template-columns:1.2fr 1fr}}
.ot-inside{list-style:none;padding:0;margin:0}
.ot-inside li{display:flex;gap:var(--ot-sp-12,12px);padding:var(--ot-sp-12,12px) 0;border-bottom:1px solid rgba(29,38,34,.08)}
.ot-inside li>span{font-weight:700;color:var(--hub-dark,#23697a);min-width:2ch}
.ot-inside p{margin:2px 0 0;color:#4a5751;font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
.ot-offer-main__samples{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ot-sp-8,8px)}
.ot-offer-main__samples figure{margin:0}
.ot-offer-main__samples img{width:100%;height:auto;border-radius:6px;box-shadow:0 4px 12px rgba(0,0,0,.1)}
.ot-offer-main__samples figcaption{font-size:var(--ot-fs-caption,14px);color:#5b6862;margin-top:4px;line-height:var(--ot-lh-caption,1.45)}
.ot-trust{list-style:none;padding:0;margin:12px 0 0;display:flex;flex-wrap:wrap;gap:var(--ot-sp-8,8px) var(--ot-sp-16,16px);font-size:var(--ot-fs-caption,14px);color:#4a5751;line-height:var(--ot-lh-caption,1.45)}
.ot-trust li::before{content:"✓ ";color:var(--hub-dark,#23697a)}
.ot-trust__refund{flex-basis:100%;font-weight:600;color:#34413b}
.ot-testimonials{display:grid;gap:var(--ot-sp-12,12px);margin-top:20px}
@media (min-width:760px){.ot-testimonials{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
.ot-testimonials figure{margin:0;background:#fbf8f1;border-radius:12px;padding:var(--ot-sp-16,16px)}
.ot-testimonials blockquote{margin:0}
.ot-testimonials figcaption{font-size:var(--ot-fs-caption,14px);color:#5b6862;line-height:var(--ot-lh-caption,1.45)}
.ot-chapters__grid{display:grid;gap:var(--ot-sp-16,16px)}
@media (min-width:860px){.ot-chapters__grid{grid-template-columns:repeat(3,1fr)}}
.ot-chapter{background:#fff;border:1px solid rgba(29,38,34,.1);border-radius:14px;padding:var(--ot-sp-16,16px);display:flex;flex-direction:column}
.ot-chapter h3{margin:.1em 0 .4em;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-chapter__excerpt{margin:0;max-height:5.6em;overflow:hidden;color:#34413b;-webkit-mask-image:linear-gradient(#000 30%,transparent);mask-image:linear-gradient(#000 30%,transparent);user-select:none}
.ot-chapter__lock{font-size:var(--ot-fs-caption,14px);font-weight:600;color:var(--hub-dark,#23697a);margin:8px 0;line-height:var(--ot-lh-caption,1.45)}
.ot-chapter__lock::before{content:"🔒 ";font-size:.85em}
.ot-chapter__links{display:flex;flex-wrap:wrap;gap:var(--ot-sp-12,12px);margin-top:auto}
.ot-cta-repeat{display:flex;flex-direction:column;align-items:center;gap:var(--ot-sp-8,8px);margin:0 0 36px;text-align:center}
.ot-cta-repeat small{color:#5b6862}
.ot-tiers{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:var(--ot-sp-12,12px)}
@media (min-width:700px){.ot-tiers{grid-template-columns:repeat(3,1fr);align-items:stretch}}
.ot-tier a{display:flex;flex-direction:column;gap:2px;height:100%;box-sizing:border-box;background:#fff;border:1px solid rgba(29,38,34,.14);border-radius:14px;padding:var(--ot-sp-16,16px);text-decoration:none;color:#1d2622;position:relative}
.ot-tier--recommended a{border:2px solid var(--hub-dark,#23697a);box-shadow:0 8px 20px rgba(20,30,25,.08)}
.ot-tier__badge{align-self:flex-start;background:var(--hub-dark,#23697a);color:#fff;border-radius:999px;font-size:var(--ot-fs-caption,14px);padding:2px var(--ot-sp-12,12px);margin-bottom:4px;line-height:var(--ot-lh-caption,1.45)}
.ot-tier__for{font-size:var(--ot-fs-caption,14px);color:#5b6862;line-height:var(--ot-lh-caption,1.45)}
.ot-tier__price{font-size:var(--ot-fs-h3,20px);font-weight:700;color:var(--hub-dark,#23697a);margin-top:6px;line-height:var(--ot-lh-h3,1.3)}
.ot-tier__price small{font-size:var(--ot-fs-caption,14px);font-weight:600;background:#e4f1e8;color:#2d6a43;border-radius:999px;padding:2px var(--ot-sp-8,8px);vertical-align:middle;line-height:var(--ot-lh-caption,1.45)}
.ot-guide-collapsed{border:1px solid rgba(29,38,34,.12);border-radius:14px;padding:var(--ot-sp-4,4px) var(--ot-sp-16,16px);margin:0 0 36px;background:#fff}
.ot-guide-collapsed>summary{cursor:pointer;font-weight:600;padding:var(--ot-sp-12,12px) 0}
.ot-profile-tools__links,.ot-profile-page__links,.ot-library-more__links{display:flex;flex-wrap:wrap;gap:var(--ot-sp-8,8px) var(--ot-sp-20,20px)}
.ot-public-reveal__test,.ot-public-reveal__more{text-align:center}
.ot-shop__anchor{margin:0 0 28px}
.ot-shop-art{margin:0 0 12px;display:flex;flex-direction:column;align-items:center;gap:var(--ot-sp-4,4px);background:color-mix(in srgb,var(--hub-light,#b5d8cc) 30%,#fff);border-radius:12px;padding:var(--ot-sp-12,12px)}
.ot-shop-art__avatars{display:flex;flex-wrap:wrap;justify-content:center}
.ot-shop-art--single img{width:120px;height:120px}
.ot-shop-art--cluster img{width:64px;height:64px;margin:0 -6px}
.ot-shop-art--grid .ot-shop-art__avatars{display:grid;grid-template-columns:repeat(8,1fr);max-width:320px}
.ot-shop-art--grid img{width:100%;height:auto}
.ot-shop-art figcaption{font-size:var(--ot-fs-caption,14px);color:#4a5751;line-height:var(--ot-lh-caption,1.45)}
.ot-duo-covers img{object-fit:contain;background:color-mix(in srgb,var(--hub-light,#b5d8cc) 30%,#fff)}
@media (max-width:859px){
 .ot-reveal{padding:var(--ot-sp-20,20px) var(--ot-sp-16,16px) var(--ot-sp-24,24px)}
 .ot-reveal__avatar{width:150px}
 .ot-reveal__chips{display:grid;grid-template-columns:1fr 1fr;gap:var(--ot-sp-8,8px)}
 .ot-reveal__chips li{justify-content:center;flex-wrap:wrap;font-size:var(--ot-fs-caption,14px);padding:var(--ot-sp-4,4px) var(--ot-sp-8,8px);border-radius:12px;line-height:var(--ot-lh-caption,1.45)}
 .ot-reveal__actions .ot-btn{flex:1 1 100%}
 .ot-inside li{padding:var(--ot-sp-8,8px) 0}
 .ot-inside p{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
 .ot-chapter__excerpt{max-height:4.2em}
 .ot-offer-main{padding:var(--ot-sp-16,16px)}
}
@media (max-width:599px){
 .ot-inside p{display:none}
 .ot-tiers{grid-template-columns:repeat(3,1fr);gap:var(--ot-sp-8,8px)}
 .ot-tier a{padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px)}
 .ot-tier__for{display:none}
 .ot-tier strong{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
 .ot-tier__price{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-tier__price small{display:block;width:max-content;margin-top:4px}
 .ot-tier__badge{font-size:var(--ot-fs-caption,14px);padding:1px var(--ot-sp-8,8px);line-height:var(--ot-lh-caption,1.45)}
 .ot-chapter__excerpt{max-height:3.2em}
}
.ot-chart__shadow>summary{cursor:pointer}
.ot-scores .ot-chart__title{display:none}
.ot-shop__grid--pair{align-items:start}.ot-shop__grid--pair .ot-shop-card__form{margin-top:4px}

/* ─── 4.4.1: illustrations and report covers (scene art from 4.3.1, applied to the 4.4.0 layout) ─── */
.ot-reveal{position:relative;overflow:hidden}
.ot-reveal__art{position:relative;margin:0 auto;width:100%;max-width:420px}
.ot-reveal__scene{display:block;width:100%;aspect-ratio:4/3;height:auto;object-fit:cover;border-radius:20px;box-shadow:0 18px 40px -22px rgba(20,30,25,.45);border:4px solid #fff}
.ot-reveal__inner--scene .ot-reveal__avatar{position:absolute;left:-6px;bottom:-14px;width:42%;max-width:170px;margin:0}
.ot-reveal__inner--scene .ot-reveal__avatar img{filter:drop-shadow(0 10px 16px rgba(20,30,25,.28))}
.ot-reveal__inner--scene .ot-reveal__art{padding-bottom:var(--ot-sp-8,8px)}
@media (min-width:860px){
 .ot-reveal__inner--scene{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--ot-sp-48,48px)}
 .ot-reveal__inner--scene .ot-reveal__art{order:2;max-width:none}
 .ot-reveal__inner--scene .ot-reveal__avatar{width:38%;max-width:210px;left:-34px;bottom:-22px}
}
@media (max-width:599px){
 .ot-reveal__inner--scene .ot-reveal__art{max-width:360px}
 .ot-reveal__inner--scene .ot-reveal__scene{aspect-ratio:16/10;border-radius:16px}
 .ot-reveal__inner--scene .ot-reveal__avatar{width:34%;left:-2px;bottom:-10px}
}
.ot-cover{margin:0;position:relative}
.ot-cover img,.ot-cover-img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:4px 10px 10px 4px;box-shadow:0 14px 28px -14px rgba(20,30,25,.55),inset 0 0 0 1px rgba(0,0,0,.05);background:color-mix(in srgb,var(--hub-light,#b5d8cc) 35%,#fff)}
.ot-cover figcaption{position:absolute;left:8px;right:8px;bottom:8px;font-size:var(--ot-fs-caption,14px);letter-spacing:.08em;text-transform:uppercase;color:#fff;background:rgba(20,30,25,.55);border-radius:6px;padding:3px var(--ot-sp-8,8px);text-align:center;line-height:var(--ot-lh-caption,1.45)}
.ot-offer-main__cover{transform:rotate(-3deg)}
.ot-offer-main__head--cover{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--ot-sp-16,16px);align-items:center}
@media (min-width:760px){.ot-offer-main__head--cover{grid-template-columns:150px minmax(0,1fr);gap:var(--ot-sp-32,32px)}}
.ot-chapter__art{margin:-16px -16px 12px;position:relative;overflow:hidden;border-radius:14px 14px 0 0}
.ot-chapter__art img{display:block;width:100%;height:150px;object-fit:cover;object-position:center 35%}
.ot-chapter__art::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(transparent,rgba(255,255,255,.85))}
@media (max-width:599px){.ot-chapter__art img{height:130px}}
.ot-shop-art--covers{padding:var(--ot-sp-16,16px) var(--ot-sp-12,12px) var(--ot-sp-12,12px)}
.ot-shop-art__covers{display:flex;justify-content:center;align-items:flex-end;position:relative;min-height:150px}
.ot-shop-art__covers .ot-cover-img{width:96px}
.ot-shop-art--covers-1 .ot-cover-img{width:110px}
.ot-shop-art--covers-3 .ot-cover-img{width:88px;margin:0 -10px}
.ot-shop-art--covers-3 .ot-cover-img:nth-child(1){transform:rotate(-6deg)}
.ot-shop-art--covers-3 .ot-cover-img:nth-child(2){width:104px;margin-bottom:6px;position:relative;z-index:1}
.ot-shop-art--covers-3 .ot-cover-img:nth-child(3){transform:rotate(6deg)}
.ot-shop-art__more{position:absolute;right:8px;bottom:6px;z-index:3;background:var(--hub-dark,#23697a);color:#fff;font-size:var(--ot-fs-caption,14px);font-weight:700;border-radius:999px;padding:3px var(--ot-sp-8,8px);line-height:var(--ot-lh-caption,1.45)}
.ot-shop-card .ot-duo-covers img{aspect-ratio:2/3;height:auto;object-fit:cover;border-radius:4px 10px 10px 4px;box-shadow:0 12px 24px -14px rgba(20,30,25,.5)}
.ot-issued__cover{aspect-ratio:2/3;object-fit:cover;border-radius:4px 10px 10px 4px}
.ot-owned__cover{width:40px;height:60px;object-fit:cover;border-radius:3px 7px 7px 3px;box-shadow:0 6px 12px -8px rgba(0,0,0,.5);flex:none}
.ot-reveal__inner--scene .ot-reveal__avatar{width:96px;height:96px;max-width:none;left:14px;bottom:-18px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--hub-light,#b5d8cc) 55%,#fff);border:4px solid #fff;box-shadow:0 10px 22px -12px rgba(20,30,25,.5)}
.ot-reveal__inner--scene .ot-reveal__avatar img{width:100%;height:220%;object-fit:cover;object-position:center top;filter:none;transform:translateY(4%)}
@media (min-width:860px){.ot-reveal__inner--scene .ot-reveal__avatar{width:120px;height:120px;left:-24px;bottom:-24px}}
@media (max-width:599px){.ot-reveal__inner--scene .ot-reveal__avatar{width:76px;height:76px;left:10px;bottom:-14px}}
.ot-cover img[src$=".jpg"],.ot-cover-img[src$=".jpg"],.ot-issued__cover[src$=".jpg"],.ot-owned__cover[src$=".jpg"]{aspect-ratio:612/735}

/* ─── 4.4.2: interactive results (profile line graph, axes, stack wheel, Four Sides) ─── */
.ot-results,.ot-explore{background:#fff;border:1px solid rgba(29,38,34,.1);border-radius:20px;padding:var(--ot-sp-24,24px);margin:0 0 36px}
.ot-results h2,.ot-explore h2{margin:.2em 0 .35em}
.ot-results--sample{border:2px dashed color-mix(in srgb,var(--pg-dark) 40%,#fff)}
.ot-results__badge{display:inline-block;margin:4px 0 0;padding:var(--ot-sp-4,4px) var(--ot-sp-12,12px);border-radius:999px;background:#fff4d6;color:#6b4e00;font-weight:700;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-results__controls{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-sp-8,8px);margin:14px 0 6px}
.ot-chip-btn{min-height:44px;padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);border-radius:999px;border:1px solid #c7d0ca;background:#fff;color:#1d2622;font:inherit;font-size:var(--ot-fs-caption,14px);cursor:pointer;line-height:var(--ot-lh-caption,1.45)}
.ot-chip-btn[aria-pressed=true]{background:var(--pg-dark);border-color:var(--pg-dark);color:#fff}
.ot-chip-btn:focus-visible,.ot-pg__pt:focus-visible,.ot-wheel__node:focus-visible,.ot-fsides__cell:focus-visible{outline:3px solid var(--pg-mid);outline-offset:3px}
.ot-results__legend{margin-left:auto;display:flex;align-items:center;gap:var(--ot-sp-8,8px);font-size:var(--ot-fs-caption,14px);color:#4a5751;flex-wrap:wrap;line-height:var(--ot-lh-caption,1.45)}
.ot-results__key{display:inline-block;width:26px;height:0;border-top:3px solid var(--pg-mid);margin-left:8px}
.ot-results__key--ideal{border-top:2px dashed #5d6762}
.ot-pg{position:relative;margin:4px -6px 0}
.ot-pg__svg{display:block;width:100%;height:auto;font-family:Alata,Inter,system-ui,sans-serif;overflow:visible}
.ot-pg__pt{cursor:pointer;outline:none;transition:opacity .25s}
.ot-pg__pt .ot-pg__dot{transition:r .15s}
.ot-pg__pt:hover .ot-pg__dot,.ot-pg__pt.is-open .ot-pg__dot,.ot-pg__pt:focus-visible .ot-pg__dot{stroke-width:4}
.ot-pg__pt:focus-visible{outline:none}
.ot-pg__pt:focus-visible .ot-pg__dot{stroke:#1d2622;stroke-width:4}
.ot-pg[data-view=main] .ot-pg__pt.is-background,.ot-pg[data-view=background] .ot-pg__pt.is-main{opacity:.18}
.ot-pg[data-view=background] .ot-pg__band--main{fill-opacity:0}
.ot-pg[data-view=main] .ot-pg__line,.ot-pg[data-view=background] .ot-pg__line{stroke-opacity:.35}
.ot-pg.js-anim .ot-pg__line{stroke-dasharray:1;stroke-dashoffset:1}
.ot-pg.js-anim .ot-pg__pt{opacity:0;transform:translateY(8px);transform-box:fill-box}
.ot-pg.js-anim.is-in .ot-pg__line{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s ease-out}
.ot-pg.js-anim.is-in .ot-pg__pt{opacity:1;transform:none;transition:opacity .4s ease-out,transform .4s ease-out}
.ot-pg.js-anim.is-in .ot-pg__pt:nth-of-type(2){transition-delay:.1s}
.ot-pg.js-anim.is-in[data-view=main] .ot-pg__pt.is-background,.ot-pg.js-anim.is-in[data-view=background] .ot-pg__pt.is-main{opacity:.18}
.ot-pg__halo{animation:ot-pg-pulse 2.4s ease-in-out infinite}
@keyframes ot-pg-pulse{50%{fill-opacity:.2}}
@media (prefers-reduced-motion:reduce){.ot-pg__halo{animation:none}.ot-pg__pt,.ot-pg__line{transition:none!important}}
.ot-pg__tip{position:absolute;z-index:5;width:min(300px,86vw);background:#fff;border:1px solid rgba(29,38,34,.14);border-radius:14px;box-shadow:0 18px 36px -18px rgba(20,30,25,.45);padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-pg__tip p{margin:0 0 6px}
.ot-pg__tip-head{display:flex;justify-content:space-between;gap:var(--ot-sp-8,8px);align-items:baseline}
.ot-pg__tip-val{font-size:var(--ot-fs-h3,20px);font-weight:700;color:var(--pg-dark);line-height:var(--ot-lh-h3,1.3)}
.ot-pg__tip-val small{font-size:var(--ot-fs-caption,14px);color:#5d6762;font-weight:400;line-height:var(--ot-lh-caption,1.45)}
.ot-pg__tip-role{color:var(--pg-dark);font-weight:600}
.ot-pg__tip-teaser{margin:8px 0 0!important;padding-top:var(--ot-sp-8,8px);border-top:1px dashed #d6ddd8;color:#4a5751;font-style:italic}
.ot-results__strongest{margin:6px 0 4px;padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);border-radius:12px;background:color-mix(in srgb,var(--pg-light) 35%,#fff);font-weight:600}
.ot-results__strongest span{color:var(--pg-dark)}
.ot-results__table{margin:10px 0}
.ot-results__table summary{cursor:pointer;font-weight:600;color:var(--pg-dark);min-height:44px;display:flex;align-items:center}
.ot-results__table table{width:100%;border-collapse:collapse;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-results__table th,.ot-results__table td{padding:var(--ot-sp-8,8px) var(--ot-sp-8,8px);border-bottom:1px solid #e6e9e4;text-align:left}
.ot-lockcard{margin:16px 0 4px;padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px);border-radius:16px;background:linear-gradient(135deg,color-mix(in srgb,var(--pg-light) 30%,#fff),#fff);border:1px solid color-mix(in srgb,var(--pg-dark) 22%,#fff);display:grid;gap:var(--ot-sp-8,8px);justify-items:start}
.ot-lockcard p{margin:0}
.ot-lockcard__title{font-weight:700;color:var(--pg-dark);display:flex;align-items:center;gap:var(--ot-sp-8,8px)}
.ot-axes{margin-top:22px}
.ot-axes h3{margin:0 0 4px}
.ot-axes__list{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:var(--ot-sp-16,16px)}
@media (min-width:760px){.ot-axes__list{grid-template-columns:1fr 1fr;column-gap:var(--ot-sp-32,32px)}}
.ot-axis__ends{display:flex;justify-content:space-between;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-axis__track{position:relative;height:12px;margin:6px 0;border-radius:999px;background:linear-gradient(90deg,var(--pg-mid),color-mix(in srgb,var(--pg-light) 60%,#fff) 50%,#9aa39e)}
.ot-axis__mid{position:absolute;left:50%;top:-3px;bottom:-3px;width:2px;background:#fff}
.ot-axis__thumb{position:absolute;top:50%;left:var(--pos);width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;border:3px solid var(--pg-dark);box-shadow:0 4px 10px -4px rgba(0,0,0,.4)}
.ot-axis__line{margin:2px 0 0;font-size:var(--ot-fs-caption,14px);color:#34413b;line-height:var(--ot-lh-caption,1.45)}
.ot-share-shape{margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-sp-12,12px) var(--ot-sp-16,16px)}
.ot-share-shape__opt{display:flex;align-items:center;gap:var(--ot-sp-8,8px);min-height:44px;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-share-shape__opt input{width:20px;height:20px}
.ot-share-shape .ot-help{flex-basis:100%;margin:0}
.ot-share-shape__status{flex-basis:100%;margin:0;font-size:var(--ot-fs-caption,14px);color:var(--pg-dark);line-height:var(--ot-lh-caption,1.45)}
.ot-explore__grid{display:grid;gap:var(--ot-sp-24,24px)}
@media (min-width:900px){.ot-explore__grid{grid-template-columns:1.15fr 1fr;align-items:start}}
.ot-wheel{position:relative;width:min(100%,380px);aspect-ratio:1;margin:12px auto 8px}
.ot-wheel__ring{position:absolute;border-radius:50%;border:2px dashed #cfd6d1}
.ot-wheel__ring--outer{inset:6%}
.ot-wheel__ring--inner{inset:24%;border:2px solid color-mix(in srgb,var(--pg-mid) 45%,#fff);background:color-mix(in srgb,var(--pg-light) 25%,#fff)}
.ot-wheel__avatar{position:absolute;left:50%;top:50%;width:24%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 6px 10px rgba(0,0,0,.15))}
.ot-wheel__node{position:absolute;transform:translate(-50%,-50%);min-width:64px;min-height:56px;padding:var(--ot-sp-8,8px) var(--ot-sp-8,8px);border-radius:14px;border:2px solid #c7d0ca;background:#fff;color:#1d2622;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:center;line-height:1.1;box-shadow:0 6px 14px -10px rgba(0,0,0,.5);transition:transform .15s}
.ot-wheel__node strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-wheel__node span{font-size:var(--ot-fs-caption,14px);color:#5b6862;line-height:var(--ot-lh-caption,1.45)}
.ot-wheel__node.is-main{border-color:var(--pg-mid)}
.ot-wheel__node.is-background{background:#f6f7f5;color:#4a5751}
.ot-wheel__node[aria-pressed=true]{background:var(--pg-dark);border-color:var(--pg-dark);color:#fff;transform:translate(-50%,-50%) scale(1.08)}
.ot-wheel__node[aria-pressed=true] span{color:#e6efe9}
.ot-wheel__panel{min-height:150px;padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px);border-radius:14px;background:#fafaf6;border:1px solid #e6e9e4}
.ot-wheel__info p{margin:0 0 6px}
.ot-wheel__plain{font-weight:600;color:var(--pg-dark)}
.ot-wheel__snippet{margin:8px 0 0;padding:var(--ot-sp-8,8px) 0 var(--ot-sp-8,8px) var(--ot-sp-12,12px);border-left:3px solid var(--pg-mid);font-style:italic;color:#34413b}
.ot-fsides h3{margin:0 0 4px}
.ot-fsides__grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--ot-sp-8,8px);margin:10px 0}
.ot-fsides__cell{display:flex;align-items:center;gap:var(--ot-sp-8,8px);min-height:64px;padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);border-radius:14px;border:2px solid #dfe4df;background:#fff;font:inherit;text-align:left;cursor:pointer;color:#1d2622}
.ot-fsides__cell img{width:40px;height:40px;object-fit:cover;object-position:top;border-radius:50%;background:color-mix(in srgb,var(--pg-light) 40%,#fff)}
.ot-fsides__cell span{display:flex;flex-direction:column}
.ot-fsides__cell small{color:#5b6862;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-fsides__cell[aria-pressed=true]{border-color:var(--pg-dark);background:color-mix(in srgb,var(--pg-light) 30%,#fff)}
.ot-fsides__panel p{margin:0 0 6px}
.ot-lockcard--small{margin-top:10px}
@media (max-width:599px){
 .ot-results,.ot-explore{padding:var(--ot-sp-16,16px);border-radius:16px}
 .ot-results__legend{margin-left:0}
 .ot-pg{margin:4px -10px 0}
 .ot-wheel__node{min-width:54px;min-height:48px;padding:var(--ot-sp-4,4px) var(--ot-sp-8,8px)}
 .ot-wheel__node strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-wheel__node span{font-size:.62rem}
}
@media (max-width:599px){
 .ot-pg__role{display:none}
 .ot-pg__svg .ot-pg__fn{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)}
 .ot-pg__svg .ot-pg__num{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)}
 .ot-pg__svg .ot-pg__cap{font-size:var(--ot-fs-h3,20px);letter-spacing:1px;line-height:var(--ot-lh-h3,1.3)}
 .ot-results__controls .ot-chip-btn{flex:1 1 auto}
}

/* ─── 4.4.3: interactive section in the 4.4.1 illustrated language ─── */
:root{--ot-card-radius:20px;--ot-section-gap:36px}
.ot-results,.ot-explore,.ot-offer-main,.ot-chapters,.ot-bundles,.ot-rd-free{margin-bottom:var(--ot-section-gap)}
.ot-results,.ot-explore,.ot-offer-main{border-radius:var(--ot-card-radius);box-shadow:0 18px 40px -32px rgba(20,30,25,.45)}
.ot-results{padding:0;overflow:hidden;border:1px solid color-mix(in srgb,var(--pg-dark) 18%,#fff);background:linear-gradient(180deg,#fff 0%,#fff 60%,color-mix(in srgb,var(--pg-light) 14%,#fff) 100%)}
.ot-results>*:not(.ot-results__head){margin-left:22px;margin-right:22px}
.ot-results>.ot-pg{margin-left:16px;margin-right:16px}
.ot-results>:last-child{margin-bottom:22px}
.ot-results__head{position:relative;padding:var(--ot-sp-24,24px) var(--ot-sp-24,24px) var(--ot-sp-20,20px);background:linear-gradient(135deg,#fbf8f1 0%,color-mix(in srgb,var(--pg-light) 45%,#fff) 100%);border-bottom:1px solid color-mix(in srgb,var(--pg-dark) 12%,#fff)}
.ot-results__head--scene{padding-right:min(42%,420px);min-height:170px}
.ot-results__head--scene::after{content:"";position:absolute;inset:0 0 0 auto;width:min(42%,420px);background:linear-gradient(90deg,color-mix(in srgb,var(--pg-light) 45%,#fff) 0%,rgba(255,255,255,0) 38%),var(--pg-scene) center 40%/cover no-repeat}
.ot-results__head>*{position:relative;z-index:1}
.ot-results__head h2{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12)}
.ot-results__controls{margin-top:18px}
.ot-pg{padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px) var(--ot-sp-4,4px);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--pg-light) 18%,#fff),#fff 70%);border:1px solid color-mix(in srgb,var(--pg-dark) 10%,#fff)}
.ot-pg__svg--tall{display:none}
.ot-results__strongest{display:flex;align-items:center;gap:var(--ot-sp-12,12px);padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px) var(--ot-sp-12,12px) var(--ot-sp-12,12px);border-radius:16px;background:linear-gradient(90deg,color-mix(in srgb,var(--pg-light) 45%,#fff),#fff);border:1px solid color-mix(in srgb,var(--pg-dark) 14%,#fff)}
.ot-results__strongest-emblem{display:flex;color:var(--pg-dark)}
.ot-lockcard--cover{grid-template-columns:84px minmax(0,1fr);align-items:center;gap:var(--ot-sp-16,16px)}
.ot-lockcard__cover{width:84px;transform:rotate(-3deg)}
.ot-lockcard__body{display:grid;gap:var(--ot-sp-8,8px);justify-items:start}
.ot-wheel__node .ot-emblem{color:var(--pg-mid);margin-bottom:2px}
.ot-wheel__node.is-background .ot-emblem{color:#9aa39e}
.ot-wheel__node[aria-pressed=true] .ot-emblem{color:#fff}
.ot-wheel__node{min-height:66px}
.ot-wheel__info-head{display:flex;align-items:center;gap:var(--ot-sp-12,12px);flex-wrap:wrap}
.ot-wheel__info-emblem{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border-radius:12px;background:color-mix(in srgb,var(--pg-light) 40%,#fff)}
.ot-explore{background:linear-gradient(160deg,#fff 0%,#fff 55%,color-mix(in srgb,var(--pg-light) 20%,#fff) 100%);border:1px solid color-mix(in srgb,var(--pg-dark) 14%,#fff)}
.ot-wheel__ring--inner{background:radial-gradient(circle,color-mix(in srgb,var(--pg-light) 55%,#fff) 0%,color-mix(in srgb,var(--pg-light) 20%,#fff) 70%)}
.ot-wheel__avatar{width:30%;object-fit:contain}
.ot-fsides__grid{gap:var(--ot-sp-12,12px)}
.ot-fsides__cell{position:relative;flex-direction:column;align-items:flex-start;gap:var(--ot-sp-8,8px);padding:0 var(--ot-sp-12,12px) var(--ot-sp-12,12px);min-height:150px;overflow:hidden;border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--side-light) 55%,#fff) 0 64px,#fff 64px)}
.ot-fsides__fns{font-style:normal;font-size:var(--ot-fs-caption,14px);letter-spacing:.06em;color:var(--side-dark);font-weight:700;line-height:var(--ot-lh-caption,1.45)}
.ot-fsides__cell[aria-pressed=true]{border-color:var(--side-dark);box-shadow:0 10px 22px -16px rgba(0,0,0,.5)}
@media (max-width:599px){
 .ot-results>*:not(.ot-results__head){margin-left:14px;margin-right:14px}
 .ot-results>.ot-pg{margin-left:8px;margin-right:8px}
 .ot-results__head{padding:0 var(--ot-sp-16,16px) var(--ot-sp-16,16px)}
 .ot-results__head--scene{padding-right:var(--ot-sp-16,16px);min-height:0}
 .ot-results__head--scene::before{content:"";display:block;height:130px;margin:0 -16px 14px;background:var(--pg-scene) center 38%/cover no-repeat}
 .ot-results__head--scene::after{display:none}
 .ot-results__head:not(.ot-results__head--scene){padding-top:var(--ot-sp-20,20px)}
 .ot-pg__svg--wide{display:none}
 .ot-pg__svg--tall{display:block}
 .ot-pg{padding:var(--ot-sp-8,8px) 2px var(--ot-sp-4,4px)}
 .ot-pg__tip{position:relative;left:auto!important;top:auto!important;width:auto;margin:10px 4px 4px;box-shadow:none;border-color:color-mix(in srgb,var(--pg-dark) 25%,#fff);background:color-mix(in srgb,var(--pg-light) 18%,#fff)}
 .ot-pg__tip::before{content:"";display:block;width:36px;height:4px;border-radius:2px;background:color-mix(in srgb,var(--pg-dark) 30%,#fff);margin:-4px auto 8px}
 .ot-lockcard--cover{grid-template-columns:64px minmax(0,1fr);gap:var(--ot-sp-12,12px)}
 .ot-lockcard__cover{width:64px}
 .ot-lockcard .ot-btn{width:100%;justify-content:center;text-align:center}
 .ot-fsides__cell{min-height:140px}
}
/* Head-and-shoulders crop of a full-body avatar (1080x1080, figure centred, head at the top). */
.ot-headshot{display:block;position:relative;flex:none;width:56px;height:56px;border-radius:50%;overflow:hidden;background:color-mix(in srgb,var(--pg-light,#b5d8cc) 55%,#fff);border:3px solid #fff;box-shadow:0 6px 14px -8px rgba(0,0,0,.45)}
.ot-headshot img{position:absolute;max-width:none;width:260%;height:auto;left:-80%;top:-6%}
.ot-fsides__cell .ot-headshot{width:72px;height:72px;margin-top:6px;background:color-mix(in srgb,var(--side-light) 35%,#fff)}
.ot-pg .ot-pg__pt:focus,.ot-pg .ot-pg__pt:focus-visible{outline:none}
.ot-results>p.ot-help{padding:var(--ot-sp-8,8px) var(--ot-sp-24,24px) 2px}
.ot-lockcard{text-align:left}
@media (max-width:599px){
 .ot-results>p.ot-help{padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px) 2px}
 .ot-lockcard--cover{grid-template-columns:56px minmax(0,1fr);align-items:center;row-gap:var(--ot-sp-12,12px)}
 .ot-lockcard--cover .ot-lockcard__cover{width:56px;grid-row:1}
 .ot-lockcard--cover .ot-lockcard__body{display:contents}
 .ot-lockcard--cover .ot-lockcard__title{grid-column:2;grid-row:1;margin:0}
 .ot-lockcard--cover .ot-lockcard__body>p:not(.ot-lockcard__title),.ot-lockcard--cover .ot-lockcard__body>.ot-btn{grid-column:1/-1}
}
.ot-scores.ot-scores--results{background:none;border:0;padding:0;border-radius:0}
.ot-results,.ot-explore,.ot-lockcard,.ot-results__strongest{text-align:left}
.ot-results>p.ot-help{margin-left:0!important;margin-right:0!important}
.ot-results__strongest{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
/* 4.4.3 Overview consistency: one card language from reveal to bundles. */
.ot-rd .ot-rd-free{background:#fff;border:1px solid rgba(29,38,34,.1);border-radius:var(--ot-card-radius);padding:var(--ot-sp-24,24px);box-shadow:0 18px 40px -32px rgba(20,30,25,.45)}
.ot-rd .ot-rd-free>section:last-child,.ot-rd .ot-rd-free>*:last-child{margin-bottom:0}
.ot-rd :is(.ot-results,.ot-explore,.ot-offer-main,.ot-chapters,.ot-bundles,.ot-rd-free) h2{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)}
.ot-chapter{border-radius:16px}
.ot-chapter__art{border-radius:16px 16px 0 0}
.ot-offer-main__cover:has(img[src$=".jpg"]) figcaption{display:none}
@media (max-width:599px){.ot-rd .ot-rd-free{padding:var(--ot-sp-16,16px)}}
@media (max-width:599px){.ot-offer-main__head--cover{grid-template-columns:72px minmax(0,1fr);gap:var(--ot-sp-16,16px);align-items:start}}
/* 4.4.3: draw the line with a keyframe so no dash pattern is left once it has drawn. */
.ot-pg.js-anim .ot-pg__line{stroke-dasharray:none;stroke-dashoffset:0}
.ot-pg.js-anim:not(.is-in) .ot-pg__line{opacity:0}
.ot-pg.js-anim.is-in .ot-pg__line{transition:none;animation:ot-pg-draw 1.2s ease-out}
@keyframes ot-pg-draw{from{stroke-dasharray:1 1;stroke-dashoffset:1}to{stroke-dasharray:1 1;stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.ot-pg.js-anim.is-in .ot-pg__line{animation:none}}

/* ─── Hub 4.5.0: one type experience on four tabs ─────────────────────────── */
.ot-type-tabs{position:sticky;top:0;z-index:20;display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-sp-8,8px) var(--ot-sp-16,16px);justify-content:space-between;max-width:1180px;margin:0 auto;padding:var(--ot-sp-8) clamp(16px,3vw,32px);background:rgba(255,255,255,.96);border-bottom:1px solid #e4e7ec;box-sizing:border-box}
.ot-type-tabs__list{display:flex;gap:var(--ot-sp-4,4px);margin:0;padding:0;list-style:none;overflow-x:auto;max-width:100%;scrollbar-width:none}
.ot-type-tabs__list a{display:inline-flex;align-items:center;min-height:44px;padding:0 var(--ot-sp-16,16px);border-radius:999px;color:#2b3340;font-weight:600;text-decoration:none;white-space:nowrap}
.ot-type-tabs__list a[aria-current="page"]{background:var(--hub-dark);color:#fff}
.ot-type-tabs__list a:focus-visible,.ot-type-switch summary:focus-visible,.ot-type-switch a:focus-visible{outline:3px solid var(--hub-mid);outline-offset:2px}
.ot-type-switch{position:relative}
.ot-type-switch summary{display:inline-flex;align-items:center;gap:var(--ot-sp-8,8px);min-height:44px;padding:0 var(--ot-sp-16,16px);border:1px solid #d5dae2;border-radius:999px;cursor:pointer;list-style:none;font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
.ot-type-switch summary::-webkit-details-marker{display:none}
.ot-type-switch summary::after{content:"▾";font-size:.8em}
.ot-type-switch__panel{position:absolute;right:0;top:calc(100% + 6px);width:min(320px,calc(100vw - 32px));padding:var(--ot-sp-12,12px);background:#fff;border:1px solid #e4e7ec;border-radius:14px;box-shadow:0 12px 32px rgba(23,26,34,.12);box-sizing:border-box}
.ot-type-switch__panel ul{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--ot-sp-8,8px);margin:0 0 8px;padding:0;list-style:none}
.ot-type-switch__panel a{display:flex;align-items:center;justify-content:center;min-height:44px;border-radius:10px;background:#f4f6f9;color:#1f2a37;font-weight:700;text-decoration:none}
.ot-type-switch__panel a[aria-current="true"]{background:var(--hub-dark);color:#fff}
.ot-type-switch__panel small{display:block;color:#5d6673;line-height:1.4}
.ot-type-examples{margin:clamp(24px,4vw,48px) 0}
.ot-type-examples__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:var(--ot-sp-16,16px)}
.ot-type-example{padding:var(--ot-sp-20,20px) var(--ot-sp-24,24px);border-radius:20px;background:#fff;border:1px solid #e4e7ec;box-shadow:0 6px 20px rgba(23,26,34,.05)}
.ot-type-example h3{margin:0 0 10px;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:var(--hub-dark)}
.ot-type-example p{margin:0 0 10px;line-height:1.6}
.ot-type-example__tag{display:block;margin-bottom:2px;font-size:var(--ot-fs-caption,14px);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#5d6673;line-height:var(--ot-lh-caption,1.45)}
.ot-type-example__insight{padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);border-radius:12px;background:color-mix(in srgb,var(--hub-light) 35%,#fff)}
.ot-public-tab__intro{display:grid;grid-template-columns:1.2fr 1fr;gap:var(--ot-sp-24,24px);align-items:center;margin:clamp(20px,3vw,40px) 0}
.ot-public-tab__intro img{width:100%;height:auto;border-radius:20px;object-fit:cover}
.ot-public-tab__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--ot-sp-16,16px);margin:0 0 24px}
.ot-results__primer{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--ot-sp-20,20px);margin:0 0 20px;padding:var(--ot-sp-20,20px) var(--ot-sp-20,20px);border-radius:20px;background:#fff;border:1px solid #e4e7ec}
.ot-results__primer h3{margin:0 0 8px;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-results__primer-list{margin:0 0 8px;padding:0;list-style:none;display:grid;gap:var(--ot-sp-8,8px)}
.ot-results__primer-list strong{display:inline-block;min-width:2.2em;padding:2px var(--ot-sp-8,8px);border-radius:6px;background:var(--pg-dark,#23697a);color:#fff;text-align:center}
.ot-results__primer-list span{font-weight:600}
.ot-results__illustrative{grid-column:1/-1;margin:0;padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);border-radius:12px;background:#fff6dc;color:#4a3b00}
.ot-lockcard__link{font-weight:600}
.ot-taboffer{margin:clamp(32px,5vw,64px) 0;padding:clamp(20px,3vw,36px);border-radius:24px;background:linear-gradient(160deg,color-mix(in srgb,var(--hub-light) 40%,#fff),#fff 60%);border:1px solid #e4e7ec}
.ot-taboffer__head{display:grid;grid-template-columns:160px 1fr;gap:var(--ot-sp-24,24px);align-items:start}
.ot-taboffer__cover{margin:0}
.ot-taboffer__cover img{width:100%;height:auto;border-radius:10px;box-shadow:0 10px 28px rgba(23,26,34,.18)}
.ot-taboffer h2{margin:4px 0 12px}
.ot-taboffer__benefits{margin:0;padding-left:1.2em;line-height:1.6}
.ot-taboffer__benefits li{margin-bottom:6px}
.ot-taboffer__choices{display:grid;grid-template-columns:1fr 1fr;gap:var(--ot-sp-16,16px);margin:24px 0}
.ot-taboffer__choice{padding:var(--ot-sp-20,20px);border-radius:18px;background:#fff;border:1px solid #d5dae2;display:flex;flex-direction:column;gap:var(--ot-sp-8,8px)}
.ot-taboffer__choice--main{border:2px solid var(--hub-dark)}
.ot-taboffer__choice h3{margin:0;display:flex;justify-content:space-between;gap:var(--ot-sp-8,8px);flex-wrap:wrap;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-taboffer__choice p{margin:0;line-height:1.5}
.ot-taboffer__choice .ot-btn{margin-top:auto;align-self:flex-start;min-height:44px}
.ot-taboffer__price{font-weight:800;color:var(--hub-dark)}
.ot-taboffer__badge{font-size:var(--ot-fs-caption,14px);font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--hub-dark);line-height:var(--ot-lh-caption,1.45)}
.ot-taboffer__previews{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--ot-sp-16,16px)}
.ot-taboffer__previews figure{margin:0}
.ot-taboffer__previews img{width:100%;height:auto;border-radius:8px;border:1px solid #e4e7ec;box-shadow:0 6px 18px rgba(23,26,34,.08)}
.ot-taboffer__previews figcaption{margin-top:6px;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-taboffer__sample{display:inline-block;padding:1px var(--ot-sp-8,8px);border-radius:999px;background:#1f2a37;color:#fff;font-size:var(--ot-fs-caption,14px);font-weight:700;text-transform:uppercase;line-height:var(--ot-lh-caption,1.45)}
.ot-taboffer__foot{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:var(--ot-sp-8,8px) var(--ot-sp-16,16px);align-items:baseline}
.ot-subtle-links{margin:16px 0}
.ot-shop__pick{padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);border-radius:12px;background:#eef6f8}
@media (max-width:760px){
 .ot-public-tab__intro,.ot-results__primer,.ot-taboffer__choices{grid-template-columns:1fr}
 .ot-public-tab__intro img{max-height:180px}
 .ot-taboffer__head{grid-template-columns:96px 1fr;gap:var(--ot-sp-16,16px)}
 .ot-taboffer__previews{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ot-sp-8,8px)}
 .ot-taboffer__previews figcaption{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
 .ot-type-tabs{padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);gap:var(--ot-sp-8,8px)}
 .ot-type-tabs__list{order:2;width:100%}
 .ot-type-tabs__list a{padding:0 var(--ot-sp-12,12px);font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
 .ot-public-reveal .ot-reveal__chips{gap:var(--ot-sp-8,8px)}
 .ot-type-example{padding:var(--ot-sp-16,16px)}
 .ot-type-examples,.ot-taboffer{margin:24px 0}
}
@media (max-width:360px){
 .ot-taboffer__head{grid-template-columns:1fr}
 .ot-taboffer__cover{max-width:110px}
 .ot-type-tabs__list a{padding:0 var(--ot-sp-12,12px)}
}
.ot-public-tab__intro img{aspect-ratio:16/10;max-height:300px}
@media (max-width:760px){
 .ot-public-tab__intro img{max-height:170px}
 .ot-public-reveal .ot-reveal__actions{display:flex;flex-wrap:wrap;gap:var(--ot-sp-8,8px);align-items:center}
 .ot-public-reveal .ot-reveal__actions .ot-btn{flex:1 1 100%;min-height:44px}
 .ot-public-reveal .ot-reveal__actions .ot-btn--quiet{flex:1 1 auto}
 .ot-public-reveal .ot-reveal__copylink{min-height:44px}
 .ot-public-reveal--relationships .ot-reveal__scene,.ot-public-reveal--career .ot-reveal__scene,.ot-public-reveal--growth .ot-reveal__scene{max-height:150px;object-fit:cover;object-position:50% 25%}
}
@media (max-width:760px){
 /* The hero already shows this scene: no second copy straight below it on phones. */
 .ot-public-reveal .ot-results__head--scene::before{display:none}
 .ot-results__primer{padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px);gap:var(--ot-sp-12,12px)}
}
.ot-explore-more{margin:24px 0;border:1px solid #e4e7ec;border-radius:20px;background:#fff}
.ot-explore-more>summary{display:flex;align-items:center;min-height:52px;padding:var(--ot-sp-8,8px) var(--ot-sp-20,20px);font-weight:700;cursor:pointer;color:var(--hub-dark)}
.ot-explore-more>summary::after{content:"+";margin-left:auto;font-size:1.3em}
.ot-explore-more[open]>summary::after{content:"−"}
.ot-explore-more>summary:focus-visible{outline:3px solid var(--hub-mid);outline-offset:2px}
.ot-explore-more>.ot-explore{margin:0;border:0}

/* 4.6.0 A1: shop, two primary products first, everything else under "More purchase options". */
.ot-shop__group--primary .ot-shop__grid--pair { align-items: stretch; }
.ot-shop-card__benefits { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.ot-shop-card__benefits li { position: relative; padding-left: 1.5rem; line-height: 1.45; }
.ot-shop-card__benefits li::before { content: ""; position: absolute; left: .2rem; top: .45em; width: .55rem; height: .3rem; border-left: 2px solid var(--hub-dark, #23697A); border-bottom: 2px solid var(--hub-dark, #23697A); transform: rotate(-45deg); }
.ot-shop__more { margin: 2rem 0; border: 1px solid #dfe5ea; border-radius: 14px; background: #fff; }
.ot-shop__more-toggle { cursor: pointer; padding: 1rem 1.25rem; min-height: 44px; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; font-weight: 600; color: var(--hub-dark, #23697A); }
.ot-shop__more-toggle small { font-weight: 400; color: #5b6470; }
.ot-shop__more-toggle:focus-visible { outline: 3px solid var(--hub-mid, #409CAF); outline-offset: 2px; border-radius: 14px; }
.ot-shop__more[open] > .ot-shop__more-toggle { border-bottom: 1px solid #dfe5ea; }
.ot-shop__more > .ot-shop__anchor, .ot-shop__more > .ot-shop__grid { padding: 1rem 1.25rem; }
@media (max-width: 600px) { .ot-shop__more > .ot-shop__anchor, .ot-shop__more > .ot-shop__grid { padding: .75rem; } }

/* 4.6.0 A3: free vs paid, and type vs answer-personalized, in the one report panel per tab. */
.ot-taboffer__compare p { margin: .25rem 0; }
.ot-taboffer__compare p:first-child { padding: .6rem .8rem; background: #f3f7f8; border-radius: 8px; margin-bottom: .6rem; }
.ot-taboffer__tag { display: inline-block; width: fit-content; justify-self: start; align-self: flex-start; margin: 0 0 .35rem; padding: .15rem .55rem; border-radius: 999px; font-size:var(--ot-fs-caption,14px); font-weight: 600; background: #eef1f4; color: #3c4652;line-height:var(--ot-lh-caption,1.45) }
.ot-taboffer__tag--you { background: #e3f3f6; color: #1d5c6b; }
.ot-taboffer__open { color: #5b6470; }

/* 4.6.0 B4: "Closer look" keeps the full approved example text one tap away. */
.ot-closer { margin-top: .5rem; border-top: 1px solid #e4e7ec; padding-top: .5rem; }
.ot-closer > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--hub-dark, #23697A); }
.ot-closer > summary:focus-visible { outline: 3px solid var(--hub-mid, #409CAF); outline-offset: 2px; }
.ot-closer p { font-size:var(--ot-fs-small,15px); color: #3c4652;line-height:var(--ot-lh-small,1.5) }

/* 4.6.0 B6: one-sentence interpretation beside each visual. */
.ot-interpret { margin: .5rem 0 .9rem; padding: .65rem .85rem; border-left: 3px solid var(--pg-mid, var(--hub-mid, #409CAF)); background: #f6f9f9; border-radius: 0 8px 8px 0; font-size:var(--ot-fs-small,15px); line-height:var(--ot-lh-small,1.5); color: #2a333c; }
/* 4.6.0 B5: "Explore the theory" toggle and tighter mobile rhythm. */
.ot-explore-more > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-height: 44px; }
.ot-explore-more > summary small { font-weight: 400; color: #5b6470; }
@media (max-width: 600px) {
  .ot-public-reveal .ot-hub__main > section, .ot-public-reveal .ot-hub__main > details { margin-top: 1.25rem; margin-bottom: 1.25rem; }
  .ot-type-examples__grid { gap: .75rem; }
}

/* 4.6.0 C7: Careers situations. */
.ot-cx { margin: 2rem 0; padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid #e4e7ec; }
.ot-cx__tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.ot-cx__tab { min-height: 44px; padding: .5rem 1rem; border-radius: 999px; border: 1px solid var(--hub-mid, #409CAF); background: #fff; color: var(--hub-dark, #23697A); font: inherit; font-weight: 600; cursor: pointer; }
.ot-cx__tab[aria-selected="true"] { background: var(--hub-dark, #23697A); color: #fff; border-color: var(--hub-dark, #23697A); }
.ot-cx__tab:focus-visible { outline: 3px solid var(--hub-mid, #409CAF); outline-offset: 2px; }
.ot-cx.is-enhanced .ot-cx__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ot-cx__panel { padding: 1rem; border-radius: 14px; background: #f6f9f9; }
.ot-cx:not(.is-enhanced) .ot-cx__panel + .ot-cx__panel { margin-top: .75rem; }
@media (max-width: 600px) { .ot-cx { padding: 1rem; } .ot-cx__tab { flex: 1 1 auto; } }

/* 4.6.0 C7: Growth demo. */
.ot-gd { margin: 2rem 0; padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid #e4e7ec; }
.ot-gd__steps { list-style: none; margin: 1rem 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; }
.ot-gd__step { width: 100%; min-height: 44px; border-radius: 999px; border: 1px solid var(--hub-mid, #409CAF); background: #fff; color: var(--hub-dark, #23697A); font: inherit; font-weight: 600; cursor: pointer; }
.ot-gd__step[aria-current="step"] { background: var(--hub-dark, #23697A); color: #fff; }
.ot-gd__panel h3:focus { outline: none; }
.ot-gd__step:focus-visible { outline: 3px solid var(--hub-mid, #409CAF); outline-offset: 2px; }
.ot-gd__panel { padding: 1rem; border-radius: 14px; background: #f6f9f9; }
.ot-gd:not(.is-enhanced) .ot-gd__panel + .ot-gd__panel { margin-top: .75rem; }
.ot-gd__notes { width: 100%; box-sizing: border-box; }
.ot-gd__nav { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin: .75rem 0 0; }
@media (max-width: 600px) { .ot-gd { padding: 1rem; } .ot-gd__steps { grid-template-columns: 1fr; } }

/* 4.6.0 D8: illustration framing. The scenes put the figure's head in the top third, so crops anchor
   near the top instead of the centre (no cropped heads, less empty sky); phone heroes get a taller frame. */
.ot-reveal__scene { object-position: 50% 12%; }
@media (max-width: 700px) { .ot-reveal__inner--scene .ot-reveal__scene { aspect-ratio: 4/3; } }
.ot-public-reveal--relationships .ot-reveal__scene, .ot-public-reveal--career .ot-reveal__scene, .ot-public-reveal--growth .ot-reveal__scene { object-position: 50% 10%; }
.ot-public-tab__intro img { object-position: 50% 18%; }
/* INTJ and ENTP scenes place the figure low in the frame: anchor near the bottom to drop the empty sky. */
.ot-reveal__scene[src*="/scenes/intj/"], .ot-reveal__scene[src*="/scenes/entp/"] { object-position: 50% 92%; }
/* Per-image anchors for area art whose figures sit low (relationships NF/INTJ/ENTP, career INTJ/ENTP, growth chapter art)
   or high (Four Sides scenes used as Growth art). */
.ot-public-tab__intro img[src*="/scenes/infj/relationships"], .ot-public-tab__intro img[src*="/scenes/enfj/relationships"],
.ot-public-tab__intro img[src*="/scenes/infp/relationships"], .ot-public-tab__intro img[src*="/scenes/enfp/relationships"],
.ot-public-tab__intro img[src*="/scenes/intj/relationships"], .ot-public-tab__intro img[src*="/scenes/entp/relationships"] { object-position: 50% 42%; }
.ot-public-tab__intro img[src*="/scenes/intj/career"], .ot-public-tab__intro img[src*="/scenes/entp/career"] { object-position: 50% 46%; }

.ot-public-tab__intro img[src*="/sides.webp"] { object-position: 50% 0%; }

/* Reading depth: useful examples first; advanced information remains accessible. */
.ot-reading-path{display:flex;flex-wrap:wrap;gap:var(--ot-sp-12,12px);margin:20px 0 28px;padding:var(--ot-sp-12,12px) 0;border-block:1px solid #d8ddd4}
.ot-reading-path a{display:flex;align-items:center;min-height:44px;padding:var(--ot-sp-8,8px) var(--ot-sp-16,16px);border-radius:24px;background:#edf1e8;color:#28483b;text-decoration:underline;text-underline-offset:4px}
.ot-reading-depth{margin:28px 0;border-block:1px solid #d8ddd4;padding:0 0 var(--ot-sp-12,12px)}
.ot-reading-depth>summary{cursor:pointer;padding:var(--ot-sp-20,20px) var(--ot-sp-8,8px);font-size:var(--ot-fs-h3,20px);font-weight:600;line-height:var(--ot-lh-h3,1.3)}
.ot-reading-depth>summary small{display:block;font-size:var(--ot-fs-small,15px);font-weight:400;margin:8px 0 0;line-height:var(--ot-lh-small,1.5)}
.ot-reading-depth[open]>summary{margin-bottom:16px}
@media(max-width:600px){.ot-reading-path{gap:var(--ot-sp-8,8px);margin:12px 0 20px}.ot-reading-path a{font-size:var(--ot-fs-caption,14px);padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);line-height:var(--ot-lh-caption,1.45)}.ot-reading-depth>summary{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}.ot-type-example p{max-width:66ch}.ot-public-reveal .ot-hub__layout{padding-top:var(--ot-sp-16,16px)}}

.ot-report-compare-wrap{margin:24px 0;max-width:100%}.ot-report-compare{width:100%;table-layout:fixed;border-collapse:collapse;font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}.ot-report-compare caption{text-align:left;font-size:var(--ot-fs-h3,20px);font-weight:600;margin:0 0 14px;line-height:var(--ot-lh-h3,1.3)}.ot-report-compare th,.ot-report-compare td{text-align:left;vertical-align:top;padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px);border-bottom:1px solid #d4dbd1;overflow-wrap:anywhere}.ot-report-compare th{background:#edf2e7;color:#24382d}.ot-report-compare td{line-height:1.65}.ot-report-compare th+th,.ot-report-compare td+td{border-left:1px solid #d4dbd1}@media(max-width:600px){.ot-report-compare{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}.ot-report-compare th,.ot-report-compare td{padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px)}}
/* Keep reading anchors visible beneath the sticky type tabs. */
.ot-reading-depth,.ot-public-reveal #quick-read,.ot-rd #type-information,.ot-type-examples h2{scroll-margin-top:100px}

/* 4.6.1 visual pass, round 1. Presentation only. */
/* 01: consistent desktop measure, illustration scale and generous but bounded gutters. */
.ot-rd .ot-hub__layout,.ot-rd .ot-hub__layout:has(>.ot4-nav){max-width:1320px;padding-inline:clamp(20px,3vw,48px)}
.ot-reveal__inner{max-width:1224px}.ot-reveal{padding-block:var(--ot-sp-40,40px)}
.ot-reveal__inner--scene{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ot-sp-48,48px)}
.ot-reveal__inner--scene .ot-reveal__art{max-width:590px;padding:0}
/* 02: integrated painted figure carries recognition; remove duplicate floating badge. */
.ot-reveal__inner--scene .ot-reveal__avatar{display:none}
/* 03: natural composition and full faces in approved landscape artwork. */
.ot-reveal__inner--scene .ot-reveal__scene{aspect-ratio:4/3;object-fit:contain;object-position:center;border:0;border-radius:18px;box-shadow:0 15px 32px -24px #20352b55}
.ot-public-reveal--relationships .ot-reveal__scene,.ot-public-reveal--career .ot-reveal__scene,.ot-public-reveal--growth .ot-reveal__scene{object-position:center;max-height:none}
/* 04: editorial type hierarchy and readable captions. */
.ot-rd{color:#25342d}.ot-rd h2{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12)}.ot-rd h3{line-height:1.35}
.ot-rd p{line-height:1.7}.ot-rd .ot-help,.ot-rd small,.ot-taboffer__previews figcaption{color:#46564c;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-type-example__tag{font-size:var(--ot-fs-caption,14px);letter-spacing:.06em;color:#4a5b50;line-height:var(--ot-lh-caption,1.45)}.ot-taboffer__badge{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
/* 05: examples read as an editorial pair, with fewer repeated card borders. */
.ot-type-examples__grid{gap:var(--ot-sp-32,32px)}.ot-type-example{padding:var(--ot-sp-20,20px) 0;border:0;border-top:2px solid color-mix(in srgb,var(--hub-dark) 30%,white);border-radius:0;background:transparent;box-shadow:none}
.ot-type-example p{max-width:68ch}.ot-type-example__insight{padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px);border-radius:10px;background:color-mix(in srgb,var(--hub-light) 24%,#fff)}
/* 06: category art fills an intentional, face-safe composition. */
.ot-public-tab__intro{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:var(--ot-sp-48,48px);margin:28px 0 36px}
.ot-public-tab__intro img{max-height:380px;aspect-ratio:4/3;object-fit:contain;background:transparent;border-radius:16px}
.ot-public-tab__intro img[src*="/intj/career"],.ot-public-tab__intro img[src*="/entp/career"]{object-fit:cover;object-position:center 35%}
/* 07: report cover and head share a deliberate baseline and useful size. */
.ot-taboffer{padding:var(--ot-sp-32,32px);background:linear-gradient(130deg,color-mix(in srgb,var(--hub-light) 25%,#fff),#fbfaf6);border-color:#d5ded0;box-shadow:none;border-radius:20px}
.ot-taboffer__head{grid-template-columns:190px minmax(0,1fr);gap:var(--ot-sp-40,40px);align-items:center}.ot-taboffer__cover{max-width:190px}.ot-taboffer__head>div{max-width:76ch}
.ot-taboffer__compare p:first-child{background:transparent;padding:0}.ot-taboffer__cover img{border-radius:8px;box-shadow:0 12px 25px -13px #20352b70}
/* 08: purchase choices, buttons and sample captions have consistent rhythm. */
.ot-taboffer__choice{padding:var(--ot-sp-24,24px);border-radius:14px;gap:var(--ot-sp-12,12px)}.ot-taboffer__choice h3{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}.ot-taboffer__choice .ot-btn{min-height:48px;padding:var(--ot-sp-12,12px) var(--ot-sp-20,20px);align-self:stretch;text-align:center}
.ot-taboffer__previews{gap:var(--ot-sp-24,24px)}.ot-taboffer__previews img{box-shadow:0 6px 16px #20352b12;border-radius:6px}.ot-taboffer__previews figcaption{margin-top:12px}.ot-taboffer__sample{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
/* 09: comparison looks like one quiet editorial table. */
.ot-report-compare{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}.ot-report-compare th,.ot-report-compare td{padding:var(--ot-sp-20,20px) var(--ot-sp-16,16px)}.ot-report-compare th{background:#edf2e8}.ot-report-compare th+th,.ot-report-compare td+td{border-left:0}
/* 10: shop artwork and cover labels are prominent, without tall empty panels. */
.ot-shop-art{padding:var(--ot-sp-20,20px);background:linear-gradient(140deg,color-mix(in srgb,var(--hub-light) 24%,white),#f8f6ee)}
.ot-shop-art--single img{width:150px;height:225px;object-fit:contain}.ot-shop-art figcaption{font-size:var(--ot-fs-caption,14px);margin-top:8px;color:#364a40;line-height:var(--ot-lh-caption,1.45)}
.ot-reading-path{gap:var(--ot-sp-12,12px);padding-block:var(--ot-sp-12,12px);margin:16px 0 28px}.ot-reading-path a{min-height:44px}.ot-reading-depth{margin:28px 0 36px}
@media(max-width:850px){.ot-reveal__inner--scene{gap:var(--ot-sp-32,32px)}.ot-public-tab__intro{gap:var(--ot-sp-32,32px)}.ot-taboffer__head{grid-template-columns:150px minmax(0,1fr);gap:var(--ot-sp-24,24px)}.ot-taboffer__cover{max-width:150px}}
@media(max-width:700px){
 .ot-rd .ot-hub__layout,.ot-rd .ot-hub__layout:has(>.ot4-nav){padding-inline:var(--ot-sp-20,20px)}
 .ot-reveal{padding:var(--ot-sp-20,20px) var(--ot-sp-20,20px) var(--ot-sp-24,24px)}.ot-reveal__inner--scene{display:flex;flex-direction:column;gap:var(--ot-sp-20,20px)}
 .ot-reveal__inner--scene .ot-reveal__art{width:100%;max-width:340px;order:0}.ot-reveal__inner--scene .ot-reveal__scene{max-height:230px;aspect-ratio:4/3;object-fit:contain;border-radius:12px}
 .ot-reveal h1{font-size:var(--ot-fs-h2,28px);margin:0 0 12px;line-height:var(--ot-lh-h2,1.2)}.ot-reveal__essence{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin-bottom:14px}.ot-reveal__chips{margin-bottom:14px}
 .ot-public-reveal .ot-reveal__actions{display:flex;gap:var(--ot-sp-8,8px);justify-content:center}.ot-public-reveal .ot-reveal__actions .ot-btn{flex:1 1 42%;padding-inline:var(--ot-sp-12,12px);font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}.ot-public-reveal .ot-reveal__copylink{font-size:var(--ot-fs-caption,14px);min-height:40px;line-height:var(--ot-lh-caption,1.45)}
 .ot-reveal__status:empty{min-height:0;margin:0}.ot-reveal__source{font-size:var(--ot-fs-caption,14px);margin-top:8px;line-height:var(--ot-lh-caption,1.45)}
 .ot-public-tab__intro{grid-template-columns:1fr;gap:var(--ot-sp-20,20px);margin:24px 0}.ot-public-tab__intro img{display:block!important;width:100%;max-height:300px;aspect-ratio:4/3;object-fit:contain}
 .ot-type-examples__grid{gap:var(--ot-sp-12,12px)}.ot-type-example{padding:var(--ot-sp-20,20px) 0}.ot-rd .ot-type-example p{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-taboffer{padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px);margin:32px 0}.ot-taboffer__head{grid-template-columns:100px minmax(0,1fr);gap:var(--ot-sp-20,20px);align-items:start}.ot-taboffer__cover{max-width:100px}.ot-taboffer h2{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)}
 .ot-taboffer__head .ot-taboffer__compare,.ot-taboffer__head .ot-taboffer__benefits{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}.ot-taboffer__choices{gap:var(--ot-sp-16,16px);margin:24px 0}.ot-taboffer__choice{padding:var(--ot-sp-20,20px)}
 .ot-taboffer__previews{gap:var(--ot-sp-12,12px)}.ot-taboffer__previews figcaption{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}.ot-report-compare{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}.ot-report-compare th,.ot-report-compare td{padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px);line-height:1.6}
 .ot-reading-path{gap:var(--ot-sp-8,8px);margin:12px 0 24px}.ot-reading-path a{font-size:var(--ot-fs-caption,14px);padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);line-height:var(--ot-lh-caption,1.45)}.ot-reading-depth>summary{padding:var(--ot-sp-20,20px) var(--ot-sp-4,4px)}
}

/* Round 2: screenshot-confirmed anchor clearance and phone offer measures. */
.ot-public-tab__intro,.ot-public-tab__intro h2,#report,.ot-report-compare-wrap{scroll-margin-top:100px}
.ot-taboffer__choice .ot-btn{justify-content:center}
.ot-public-tab__intro{align-items:center}
@media(max-width:700px){
 .ot-taboffer__head{display:block}.ot-taboffer__cover{float:right;width:100px;margin:0 0 16px 20px}
 .ot-taboffer__head>div{max-width:none}.ot-taboffer__compare{clear:both;padding-top:var(--ot-sp-12,12px)}
 .ot-taboffer__benefits{padding-left:var(--ot-sp-20,20px)}.ot-taboffer__head:after{content:"";display:block;clear:both}
 .ot-public-tab__intro,.ot-public-tab__intro h2,#report,.ot-report-compare-wrap{scroll-margin-top:128px}
 .ot-reveal__chips{gap:var(--ot-sp-8,8px)}.ot-reveal__chips span{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
}

/* 4.6.1 completion: area illustrations fill a consistent 4:3 frame. Round 1 used object-fit:contain, which shrank the
   eight portrait-format scenes (NF/INTJ/ENTP relationships, INTJ/ENTP careers) to narrow strips. The frame now covers,
   and portrait scenes are anchored so both faces and the bench or desk stay in view. */
.ot-public-tab__intro img{width:100%;max-height:none;aspect-ratio:4/3;object-fit:cover;object-position:50% 50%}
.ot-public-tab__intro img[src*="/relationships."],.ot-public-tab__intro img[src*="/intj/career"],.ot-public-tab__intro img[src*="/entp/career"]{object-position:50% 56%}
@media(max-width:700px){.ot-public-tab__intro img{max-height:none;aspect-ratio:4/3;object-fit:cover}}
/* Shop: the personalized card's figure cluster matched the height of the cover fan beside it, instead of 64 px figures
   floating in a tall empty panel. */
.ot-shop-art--cluster{justify-content:center;min-height:208px}
.ot-shop-art--cluster img{width:132px;height:132px;margin:0 -26px}
@media(max-width:700px){.ot-shop-art--cluster{min-height:0}.ot-shop-art--cluster img{width:96px;height:96px;margin:0 -18px}}
/* Phone sample captions: three narrow columns wrapped into four ragged lines. Badge and title now sit on one line and
   the enlarge hint on its own quieter line. */
@media(max-width:520px){
 .ot-taboffer__previews{gap:var(--ot-sp-12,12px)}
 .ot-taboffer__previews figcaption{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);margin-top:8px}
 .ot-taboffer__previews .ot-taboffer__sample{display:inline-block;margin:0 0 4px}
 .ot-taboffer__previews .ot-taboffer__open{display:block;color:#5a6a60;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
}

/* ===== Hub 4.6.1 final polish ============================================================================== */
/* Theme defence. A WordPress theme (Astra, Hello Elementor, Twenty Twenty-Four) styles bare elements and content
   wrappers. These scoped resets keep the Hub's own box model, images, buttons, headings and tables intact inside it.
   Doubled class raises them above typical theme selectors such as .entry-content h2 without touching our components,
   which set their own values afterwards or with more specific selectors. */
.ot-hub,.ot-hub *,.ot-hub *::before,.ot-hub *::after{box-sizing:border-box}
.ot-hub.ot-hub img{max-width:100%}
.ot-hub :where(img){border:0;box-shadow:none}
.ot-hub.ot-hub :where(img){height:auto}
.ot-hub.ot-hub :where(h1,h2,h3,h4){margin-top:0;text-transform:none;letter-spacing:normal;font-family:inherit;color:inherit;clear:none}
.ot-hub.ot-hub :where(figure){margin:0}
.ot-hub.ot-hub :where(button){text-transform:none;letter-spacing:normal;font-family:inherit}
.ot-hub.ot-hub :where(table){margin:0;border:0}
.ot-hub.ot-hub :where(th,td){border-top:0;border-right:0}
.ot-hub.ot-hub :where(a){box-shadow:none}
.ot-hub.ot-hub :where(details>summary){list-style-position:outside}
.ot-hub.ot-hub :where(svg){max-width:100%}
/* Block themes constrain every child of the post content; the Hub manages its own widths. */
:where(.is-layout-constrained,.entry-content)>.ot-hub{max-width:none!important;width:auto}

/* Type scale. Readable minimums: labels and eyebrows 13 px, captions and notes 15 px, body 17 px. */
.ot-hub .ot-eyebrow{font-size:var(--ot-fs-caption,14px);letter-spacing:.08em;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-type-example__tag,.ot-hub .ot24-reading__tag,.ot-hub .ot-taboffer__tag,.ot-hub .ot-taboffer__badge{font-size:var(--ot-fs-caption,14px);letter-spacing:.06em;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-taboffer__sample{font-size:var(--ot-fs-caption,14px);letter-spacing:.06em;padding:2px var(--ot-sp-8,8px);line-height:var(--ot-lh-caption,1.45)}
.ot-hub.ot-rd .ot-help,.ot-hub.ot-rd small,.ot-hub .ot-taboffer__previews figcaption,.ot-hub .ot-results__legend{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-taboffer__open,.ot-hub .ot4-category__go,.ot-hub .ot-chapter__lock{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
/* Desktop hero: the heading and line were small beside a 600 px scene. */
@media(min-width:1000px){
 .ot-hub .ot-reveal h1{font-size:var(--ot-fs-display,48px);line-height:1.08;letter-spacing:-.01em}
 .ot-hub .ot-reveal__essence{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2);max-width:30em}
 .ot-hub .ot-reveal .ot-eyebrow{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
}

/* Area intros: art was a 4:3 half-width frame next to two short lines, leaving a tall empty text column. The art
   now takes seven twelfths at a 3:2 crop, the heading and lead are larger, and the row is tighter. */
.ot-hub .ot-public-tab__intro{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);margin:clamp(20px,2.4vw,32px) 0 clamp(24px,2.6vw,36px);align-items:center}
.ot-hub .ot-public-tab__intro h2{font-size:var(--ot-fs-display,48px);line-height:var(--ot-lh-display,1.06);margin-bottom:14px}
.ot-hub .ot-public-tab__intro p:not(.ot-eyebrow){font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);max-width:30em}
.ot-hub .ot-public-tab__intro img{aspect-ratio:3/2;border-radius:20px;box-shadow:0 10px 30px rgba(32,53,43,.10)}
.ot-hub .ot-public-tab__intro img[src*="/relationships."],.ot-hub .ot-public-tab__intro img[src*="/intj/career"],.ot-hub .ot-public-tab__intro img[src*="/entp/career"]{object-position:50% 52%}
.ot-hub .ot-public-tab__intro img[src*="/sides.webp"]{object-fit:contain;background:#fff;aspect-ratio:4/3}
@media(max-width:700px){
 .ot-hub .ot-public-tab__intro{grid-template-columns:1fr;gap:var(--ot-sp-20,20px)}
 .ot-hub .ot-public-tab__intro img{order:-1;aspect-ratio:4/3}
 .ot-hub .ot-public-tab__intro h2{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)}
 .ot-hub .ot-public-tab__intro p:not(.ot-eyebrow){font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
}

/* Compare: a table from 601 px, three stacked cards on phones. */
.ot-report-compare-cards{display:none}
@media(max-width:600px){
 .ot-hub .ot-report-compare-wrap{display:none}
 .ot-hub .ot-report-compare-cards{display:block;margin:24px 0}
 .ot-report-compare-cards__title{font-size:var(--ot-fs-h3,20px);font-weight:600;margin:0 0 12px;line-height:var(--ot-lh-h3,1.3)}
 .ot-report-compare-cards ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--ot-sp-12,12px)}
 .ot-report-compare-cards li{margin:0;padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px);border:1px solid #d4dbd1;border-radius:14px;background:#fff}
 .ot-report-compare-cards li.is-main{border-color:var(--hub-dark,#3f5e46)}
 .ot-report-compare-cards li p{margin:0;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-report-compare-cards li p:first-child{display:flex;justify-content:space-between;gap:var(--ot-sp-12,12px);align-items:baseline;margin-bottom:4px}
 .ot-report-compare-cards li span{font-weight:600;white-space:nowrap}
}

/* Phone samples: a swipeable row of larger pages instead of three 96 px columns. */
@media(max-width:600px){
 .ot-hub .ot-taboffer__previews{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:62%;gap:var(--ot-sp-16,16px);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--ot-sp-4,4px) 2px var(--ot-sp-12,12px);margin:0 -2px;-webkit-overflow-scrolling:touch}
 .ot-hub .ot-taboffer__previews figure{scroll-snap-align:start}
 .ot-hub .ot-taboffer__previews figcaption{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
 .ot-hub .ot-taboffer__previews .ot-taboffer__open{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
}

/* Phone viewer: opens fit-to-width and scrolls down the page, so the text is readable without zooming. Zoom doubles
   the width and pinch-zoom stays available. Previous and Next sit in the bottom bar, clear of the page. */
@media(max-width:600px){
 .ot-viewer__stage{display:block;overflow:auto;padding:0;touch-action:pan-x pan-y pinch-zoom}
 .ot-viewer__img{display:block;width:100%;max-width:100%;max-height:none;margin:0 auto;border-radius:0}
 .ot-viewer.is-zoomed .ot-viewer__img{width:200%;max-width:none}
 .ot-viewer__stage::after{content:"Double-tap the page, or use Zoom in, to read it closely.";display:block;padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px);color:#c9d3dc;font-size:var(--ot-fs-caption,14px);text-align:center;line-height:var(--ot-lh-caption,1.45)}
 .ot-viewer.is-zoomed .ot-viewer__stage::after{display:none}
 .ot-viewer__nav{position:fixed;bottom:10px;top:auto;transform:none;background:#1d2630}
 .ot-viewer__cap{padding:.6rem 3.75rem .9rem;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
}
/* Function graph reflow: below 900 px the eight labels and their roles collided in the wide graph, so the tall graph
   takes over, capped so it does not grow huge on tablets. hub.js keeps every label at 14 px or more. */
@media(max-width:899px){.ot-hub .ot-pg__svg--wide{display:none}.ot-hub .ot-pg__svg--tall{display:block;max-width:560px;margin:0 auto}}
/* In the tall graph the 0/50/100 axis labels collided with the Hero value and clipped at the edge at 14 px; each
   point already shows its own value, and the dotted 50 line stays. */
.ot-hub .ot-pg__svg--tall>text.ot-pg__num{display:none}

/* Desktop hero: the 4:3 scene in a white frame stood much taller than the heading and line, leaving empty bands above
   and below the copy. The scene is now a 3:2 crop (the same art, top-anchored so faces stay in view) and the copy
   column is wider, so the two sides finish at a similar height. */
@media(min-width:1000px){
 .ot-hub .ot-reveal__inner--scene{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(40px,4vw,72px);align-items:center}
 .ot-hub .ot-reveal__inner--scene .ot-reveal__art{max-width:640px;justify-self:end;width:100%}
 .ot-hub .ot-reveal__inner--scene .ot-reveal__scene{aspect-ratio:3/2;object-fit:cover;object-position:50% 10%;width:100%;height:auto}
 .ot-hub .ot-reveal__inner--scene .ot-reveal__art{background:none;box-shadow:none;border:0;padding:0}
 .ot-hub .ot-reveal{padding-block:var(--ot-sp-32,32px)}
 .ot-hub .ot-reveal__copy{max-width:600px}
 .ot-hub .ot-reveal__actions{margin-top:22px}
}
/* Tablet (701 to 999 px): one designed layout instead of a squeezed desktop. The scene runs as a wide banner, the copy
   sits left-aligned below it, and the buttons share one row. */
@media(min-width:701px) and (max-width:999px){
 .ot-hub .ot-reveal{padding:var(--ot-sp-24,24px) var(--ot-sp-32,32px) var(--ot-sp-32,32px)}
 .ot-hub .ot-reveal__inner--scene{display:flex;flex-direction:column;align-items:stretch;gap:var(--ot-sp-24,24px);text-align:left}
 .ot-hub .ot-reveal__inner--scene .ot-reveal__art{order:0;width:100%;max-width:none;justify-self:stretch}
 .ot-hub .ot-reveal__inner--scene .ot-reveal__scene{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 6%;max-height:none;border-radius:18px}
 .ot-hub .ot-reveal__inner--scene .ot-reveal__art{background:none;box-shadow:none;border:0}
 .ot-hub .ot-reveal__copy{text-align:left;max-width:none}
 .ot-hub .ot-reveal h1{font-size:var(--ot-fs-display,48px);line-height:1.08;margin:0 0 12px}
 .ot-hub .ot-reveal__essence{font-size:var(--ot-fs-h3,20px);margin:0 0 18px;max-width:34em;line-height:var(--ot-lh-h3,1.3)}
 .ot-hub .ot-reveal__chips{justify-content:flex-start}
 .ot-hub .ot-reveal__actions{display:flex;flex-wrap:wrap;gap:var(--ot-sp-12,12px);justify-content:flex-start;align-items:center}
 .ot-hub .ot-reveal__actions .ot-btn{width:auto;flex:0 0 auto}
 .ot-hub .ot-public-tab__intro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--ot-sp-32,32px)}
 .ot-hub .ot-public-tab__intro h2{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12)}
 .ot-hub .ot-public-tab__intro p:not(.ot-eyebrow){font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-hub .ot-public-tab__intro img{aspect-ratio:4/3}
}
@media(min-width:701px) and (max-width:999px){.ot-hub .ot-reveal__chips{display:flex;flex-wrap:wrap;gap:var(--ot-sp-8,8px);grid-template-columns:none}.ot-hub .ot-reveal__chips>*{flex:0 0 auto;width:auto}}
/* Area chapter cards: the portrait-format relationships scene made the first card's art twice as tall as its
   neighbours, so titles and links no longer lined up. Every card's art is now one 4:3 frame. */
.ot-hub .ot-chapter__art{margin:0 0 14px;overflow:hidden;border-radius:14px;aspect-ratio:4/3}
.ot-hub .ot-chapter__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;display:block}
.ot-hub .ot-chapter__art img[src*="/relationships."]{object-position:50% 55%}
.ot-hub .ot-chapters__grid{align-items:stretch}
/* Member hero: "You are INFJ, The Sage" broke after "The" at the public hero size. */
@media(min-width:1000px){.ot-hub:not(.ot-public-hub) .ot-reveal h1{font-size:var(--ot-fs-display,48px);line-height:var(--ot-lh-display,1.06)}}
/* The scenes carry a thin white frame baked into the file. Cropped to a new ratio, the frame showed on some edges only.
   Where a scene is cropped, the outer 2.5% is clipped and the image scaled back to its box, so every edge is clean. */
@media(min-width:701px){.ot-hub .ot-reveal__inner--scene .ot-reveal__scene{clip-path:inset(2.5% round 18px);scale:1.053}}
.ot-hub .ot-public-tab__intro img:not([src*="/sides.webp"]){clip-path:inset(2.5% round 20px);scale:1.053;box-shadow:none}
.ot-hub .ot-chapter__art img:not([src*="/sides.webp"]){clip-path:inset(2.5%);scale:1.053}
@media(max-width:700px){
 .ot-hub .ot-reveal__inner--scene .ot-reveal__art{max-width:none;width:100%;background:none;box-shadow:none;border:0;padding:0}
 .ot-hub .ot-reveal__inner--scene .ot-reveal__scene{width:100%;max-height:none;aspect-ratio:16/10;object-fit:cover;object-position:50% 8%;clip-path:inset(2.5% round 16px);scale:1.053;border-radius:16px}
}
/* Role names for the tall graph, as a readable list (the wide graph draws them under each column). */
.ot-pg__roles{display:none}
@media(max-width:899px){
 .ot-hub .ot-pg__svg--tall{max-width:480px}
 .ot-hub .ot-pg__roles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-8,8px) var(--ot-sp-12,12px);list-style:none;margin:10px auto 4px;padding:0;max-width:480px;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);color:#5b6862}
 .ot-hub .ot-pg__roles li{margin:0;text-align:center}
 .ot-hub .ot-pg__roles strong{display:block;font-size:var(--ot-fs-small,15px);color:#1d2622;line-height:var(--ot-lh-small,1.5)}
 .ot-hub .ot-pg__roles li.is-background strong{color:#5d6762}
}
@media(max-width:380px){.ot-hub .ot-pg__roles{grid-template-columns:repeat(4,minmax(0,1fr));font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}}
@media(max-width:599px){.ot-hub .ot-pg__svg--tall .ot-pg__pt .ot-pg__num{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}}
/* Sample captions: the enlarge hint always takes its own quieter line instead of wrapping mid-phrase. */
.ot-hub .ot-taboffer__previews .ot-taboffer__open{display:block;margin-top:2px;color:#5a6a60;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
/* "ENTJ, The Commander" broke onto two lines at 1440; the public hero heading tops out a little lower. */
@media(min-width:1000px){.ot-hub.ot-public-hub .ot-reveal h1{font-size:var(--ot-fs-display,48px);line-height:var(--ot-lh-display,1.06)}}
/* Tablet graph: from 701 px the wide graph returns (far shorter than the tall one); its role names move to the list
   below so no label drops under 14 px or collides. The tall graph is kept for phones. */
@media(min-width:701px) and (max-width:899px){
 .ot-hub .ot-pg__svg--wide{display:block}.ot-hub .ot-pg__svg--tall{display:none}
 .ot-hub .ot-pg__svg--wide .ot-pg__role{display:none}
 .ot-hub .ot-pg__roles{grid-template-columns:repeat(8,minmax(0,1fr));max-width:none;margin:2px 0 4px;padding:0 0 0 5%}
}
@media(min-width:701px) and (max-width:899px){.ot-hub .ot-pg__roles{margin-top:-16px}.ot-hub .ot-pg__roles strong{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}}


/* OnType 4.6.2 overview refinement: recognition first, human function cards and balanced navigation.
   Scoped to the Hub. Existing checkout, scoring, saved data and report-previews remain unchanged. */
.ot-hub.ot-rd .ot-hub__layout{max-width:1280px;padding-inline:clamp(20px,3vw,40px)}
.ot-hub.ot-rd.ot-public-reveal .ot-hub__layout{padding-top:clamp(16px,2vw,28px)}
.ot-hub .ot-reading-path{border:0;border-bottom:1px solid #d8dfd5;gap:var(--ot-sp-12,12px);padding:0 0 var(--ot-sp-20,20px);margin:4px 0 30px}
.ot-hub .ot-reading-path a{font-size:var(--ot-fs-small,15px);font-weight:650;background:#e9efe5;text-decoration:none;border-radius:999px;padding:var(--ot-sp-8,8px) var(--ot-sp-20,20px);color:#2e513e;min-height:44px;line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-reading-path a:hover{background:#dcead6}
/* The type navigation belongs to the hero, and the switcher looks like a real control rather than tiny metadata. */
.ot-hub .ot-type-tabs{max-width:1240px;width:calc(100% - 40px);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--ot-sp-20,20px);margin:-1px auto 8px;padding:var(--ot-sp-12,12px) var(--ot-sp-20,20px);background:#fff;border:1px solid #e2e7df;border-radius:0 0 18px 18px;box-shadow:0 10px 28px -23px #263d2b70;position:relative;top:auto;z-index:10}
.ot-hub .ot-type-tabs__list{width:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-8,8px);overflow:visible}
.ot-hub .ot-type-tabs__list li{min-width:0}
.ot-hub .ot-type-tabs__list a{display:flex;justify-content:center;min-height:54px;padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px);border-radius:12px;font-size:var(--ot-fs-body,17px);font-weight:700;text-align:center;color:#2d4336;line-height:var(--ot-lh-body,1.65)}
.ot-hub .ot-type-tabs__list a[aria-current=page]{background:var(--hub-dark);color:#fff;box-shadow:0 4px 15px #243c2924}
.ot-hub .ot-type-switch{z-index:15}
.ot-hub .ot-type-switch summary{min-width:194px;display:flex;gap:var(--ot-sp-12,12px);align-items:center;min-height:58px;padding:var(--ot-sp-4,4px) var(--ot-sp-16,16px) var(--ot-sp-4,4px) var(--ot-sp-8,8px);border-radius:14px;background:color-mix(in srgb,var(--hub-light) 22%,white);border:1px solid color-mix(in srgb,var(--hub-dark) 22%,white);font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-type-switch summary>img{flex:0 0 48px;width:48px;height:48px;object-fit:contain;object-position:center top;background:#fff;border-radius:10px}
.ot-hub .ot-type-switch summary>span{display:flex;flex-direction:column;gap:2px;text-align:left}
.ot-hub .ot-type-switch summary small{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);color:#41594c}
.ot-hub .ot-type-switch summary strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:#243d30}
.ot-hub .ot-type-switch summary strong span{font-size:var(--ot-fs-caption,14px);font-weight:500;display:block;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-type-switch__panel{width:min(440px,calc(100vw - 34px));padding:var(--ot-sp-20,20px);box-shadow:0 15px 45px #25382830}
.ot-hub .ot-type-switch__panel ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-8,8px)}
.ot-hub .ot-type-switch__panel li{min-width:0}
.ot-hub .ot-type-switch__panel li a{display:flex;flex-direction:column;gap:1px;padding:var(--ot-sp-8,8px) 3px;min-height:86px;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-type-switch__panel li a img{display:block;width:44px;height:48px;object-fit:contain;flex:none}
.ot-hub .ot-type-switch__panel li a[aria-current=true] img{background:#fff;border-radius:10px}
/* Member navigation: four equal, spacious tabs and a type selector with a visible character. */
.ot-hub.ot-rd .ot4-nav{padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px) var(--ot-sp-8,8px);margin:0 0 28px;border-radius:0 0 16px 16px}
.ot-hub.ot-rd .ot4-nav__top{gap:var(--ot-sp-20,20px);flex-wrap:wrap}
.ot-hub.ot-rd .ot4-nav__links{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--ot-sp-12,12px);padding:var(--ot-sp-12,12px) 0 var(--ot-sp-12,12px)}
.ot-hub.ot-rd .ot4-nav__links a{display:flex;align-items:center;justify-content:center;font-size:var(--ot-fs-body,17px);min-height:52px;border-radius:12px;padding:var(--ot-sp-12,12px) var(--ot-sp-8,8px);line-height:var(--ot-lh-body,1.65)}
.ot-hub.ot-rd .ot4-nav__links a[aria-current=page]{border-radius:12px}
.ot-hub .ot4-nav__typechange{display:flex;align-items:center;gap:var(--ot-sp-12,12px);min-height:48px;padding:var(--ot-sp-4,4px) var(--ot-sp-12,12px) var(--ot-sp-4,4px) var(--ot-sp-8,8px);border:1px solid #d5dfd5;background:#f4f8f0;border-radius:12px;text-decoration:none;color:#2b4b38;font-size:var(--ot-fs-small,15px);font-weight:700;line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot4-nav__typechange>img{width:44px;height:44px;object-fit:contain;background:#fff;border-radius:9px}
.ot-hub .ot4-nav__typechange small{display:block;font-size:var(--ot-fs-caption,14px);color:#466650;font-weight:500;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot4-nav__typechange>span:last-child{padding-left:var(--ot-sp-8,8px)}
/* Warm type introduction. No weaknesses or technical jargon before the visitor knows the type. */
.ot-hub.ot-rd :is(.ot-public-reveal #quick-read,.ot4-area-home #type-information){background:none;border:0;box-shadow:none;padding:0;margin:0 0 24px}
.ot-hub .ot-welcome{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(240px,.7fr);gap:clamp(22px,4vw,64px);align-items:center;padding:clamp(16px,2.5vw,34px) 0 clamp(24px,3vw,42px);margin:0;border-bottom:1px solid #d9dfd6}
.ot-hub .ot-welcome__copy{min-width:0;max-width:76ch}
.ot-hub .ot-welcome h2{font-size:var(--ot-fs-h1,36px);letter-spacing:-.025em;margin:0 0 24px;color:#263a2c;line-height:var(--ot-lh-h1,1.12)}
.ot-hub .ot-welcome__lead{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);color:#24372c;margin-bottom:16px}
.ot-hub .ot-welcome__follow{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:#46554a;margin-bottom:0}
.ot-hub .ot-welcome__strengths{border-left:3px solid color-mix(in srgb,var(--hub-dark) 40%,#d8e3cf);padding:var(--ot-sp-20,20px) 0 var(--ot-sp-20,20px) var(--ot-sp-24,24px)}
.ot-hub .ot-welcome__strengths ul{list-style:none;padding:0;margin:0;display:grid;gap:var(--ot-sp-12,12px)}
.ot-hub .ot-welcome__strengths li{font-weight:650;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:#2b4936;padding-left:var(--ot-sp-24,24px);position:relative}
.ot-hub .ot-welcome__strengths li::before{content:'✦';position:absolute;left:0;color:var(--hub-dark)}
/* More breathing room in the two recognizable examples, keeping their approved copy. */
.ot-hub .ot-type-examples{margin:38px 0 46px}
.ot-hub .ot-type-examples__grid{gap:clamp(22px,3vw,50px);align-items:start}
.ot-hub .ot-type-example{padding:var(--ot-sp-24,24px) 0 var(--ot-sp-12,12px);border-top:2px solid color-mix(in srgb,var(--hub-dark) 25%,white)}
.ot-hub .ot-type-example h3{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);margin:0 0 20px}
.ot-hub .ot-type-example p{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin-bottom:20px;max-width:60ch}
.ot-hub .ot-type-example__tag{font-size:var(--ot-fs-caption,14px);letter-spacing:.075em;margin:0 0 9px;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-type-example__insight{margin-top:20px;padding:var(--ot-sp-20,20px) var(--ot-sp-24,24px);background:color-mix(in srgb,var(--hub-light) 25%,white);border-radius:14px}
.ot-hub .ot-type-example details summary{font-size:var(--ot-fs-small,15px);font-weight:700;min-height:44px;cursor:pointer;line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-rd-heading{align-items:start}
.ot-hub .ot-rd-heading>small{max-width:38ch;font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5)}
/* Four functions are invitations to explore, never a pretend score wheel. */
.ot-hub .ot-reading-depth--warm{border:0;padding:0;margin:38px 0 48px;scroll-margin-top:110px}
.ot-hub .ot-warm-functions__intro{display:grid;grid-template-columns:minmax(0,1fr) 158px;gap:var(--ot-sp-24,24px);align-items:center;margin:0 0 24px}
.ot-hub .ot-warm-functions__intro h2{font-size:var(--ot-fs-h1,36px);margin:0 0 12px;line-height:var(--ot-lh-h1,1.12)}
.ot-hub .ot-warm-functions__intro p:not(.ot-eyebrow){max-width:68ch;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:#35463b}
.ot-hub .ot-warm-functions__portrait{margin:0;width:158px;height:158px;border-radius:24px;background:radial-gradient(circle at center,color-mix(in srgb,var(--hub-light) 55%,white),#fff 80%);overflow:hidden}
.ot-hub .ot-warm-functions__portrait img{display:block;width:100%;height:100%;object-fit:contain;object-position:center 20%;transform:scale(1.17)}
.ot-hub .ot-warm-functions__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ot-sp-16,16px)}
.ot-hub .ot-warm-function{background:#fff;border:1px solid #dbe3d9;border-radius:18px;box-shadow:0 8px 25px -24px #16332177;min-width:0;overflow:hidden}
.ot-hub .ot-warm-function[open]{background:linear-gradient(160deg,#fff 65%,color-mix(in srgb,var(--hub-light) 14%,white));border-color:color-mix(in srgb,var(--hub-dark) 35%,#dbe3d9)}
.ot-hub .ot-warm-function summary{display:flex;align-items:flex-start;gap:var(--ot-sp-16,16px);cursor:pointer;min-height:148px;padding:var(--ot-sp-24,24px) var(--ot-sp-24,24px);list-style:none}
.ot-hub .ot-warm-function summary::-webkit-details-marker{display:none}
.ot-hub .ot-warm-function__index{width:45px;height:45px;display:flex;align-items:center;justify-content:center;flex:none;border-radius:13px;background:color-mix(in srgb,var(--hub-light) 40%,white);color:var(--hub-dark);font-weight:800;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-hub .ot-warm-function__heading{display:flex;flex:1;flex-direction:column;gap:var(--ot-sp-8,8px);min-width:0}
.ot-hub .ot-warm-function__role{font-size:var(--ot-fs-caption,14px);font-weight:750;letter-spacing:.035em;color:#52675a;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-warm-function__heading strong{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);color:#223b2b}
.ot-hub .ot-warm-function__short{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:#4e5f53}
.ot-hub .ot-warm-function__toggle{flex:none;font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2);color:var(--hub-dark);font-weight:400}
.ot-hub .ot-warm-function[open] .ot-warm-function__toggle{transform:rotate(45deg)}
.ot-hub .ot-warm-function__body{padding:0 var(--ot-sp-24,24px) var(--ot-sp-24,24px) var(--ot-sp-80,80px)}
.ot-hub .ot-warm-function__body p{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin-bottom:10px}
.ot-hub .ot-warm-function__body .ot-warm-function__note{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);color:#536459;margin-bottom:0}
.ot-hub .ot-warm-functions__footnote{font-size:var(--ot-fs-caption,14px);color:#59685d;margin:18px 0 0;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-assessment-graph{margin:30px 0 0;padding:0 var(--ot-sp-20,20px);border:1px solid #dce3db;border-radius:16px;background:#fff}
.ot-hub .ot-assessment-graph>summary,.ot-hub .ot-growth-theory>summary{cursor:pointer;padding:var(--ot-sp-20,20px) var(--ot-sp-4,4px);font-size:var(--ot-fs-h3,20px);font-weight:700;line-height:var(--ot-lh-h3,1.3)}
.ot-hub .ot-assessment-graph>summary small,.ot-hub .ot-growth-theory>summary small{display:block;font-size:var(--ot-fs-caption,14px);font-weight:400;margin-top:4px;color:#52675a;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-results__head--avatar{padding-right:var(--ot-sp-80,80px);min-height:160px;position:relative}
.ot-hub .ot-results__avatar{display:block;position:absolute;right:22px;bottom:0;width:144px;height:155px;object-fit:contain;object-position:center top}
.ot-hub .ot-theory-link{padding:var(--ot-sp-16,16px) 0;border-block:1px solid #dce5db;margin:24px 0 40px;font-size:var(--ot-fs-body,17px);color:#425a49;line-height:var(--ot-lh-body,1.65)}
/* Four Sides now lives only on Growth, in an optional deeper section. */
.ot-hub .ot-growth-theory{margin:40px 0 46px;padding:var(--ot-sp-4,4px) var(--ot-sp-24,24px) var(--ot-sp-24,24px);border:1px solid #d9e2d8;background:#fff;border-radius:18px;scroll-margin-top:120px}
.ot-hub .ot-growth-theory>p{max-width:74ch;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-hub .ot-growth-theory .ot-explore{margin:18px 0 0;padding:0;border:0;background:transparent}
.ot-hub .ot-explore--sides-only .ot-explore__grid{display:grid;grid-template-columns:210px minmax(0,1fr);gap:var(--ot-sp-32,32px);align-items:start}
.ot-hub .ot-growth-avatar{display:flex;flex-direction:column;gap:var(--ot-sp-8,8px);align-items:center;margin:0;padding:var(--ot-sp-16,16px);background:color-mix(in srgb,var(--hub-light) 25%,white);border-radius:16px}
.ot-hub .ot-growth-avatar img{width:100%;height:230px;object-fit:contain;object-position:center top}
.ot-hub .ot-growth-avatar figcaption{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);text-align:center;color:#4e6654}
.ot-hub .ot-fsides__cell{min-height:164px;padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px) var(--ot-sp-16,16px);gap:var(--ot-sp-8,8px);background:linear-gradient(180deg,color-mix(in srgb,var(--side-light) 52%,white) 0 65px,#fff 65px)}
.ot-hub .ot-fsides__cell .ot-headshot{display:block;width:72px;height:72px;overflow:hidden;border:3px solid #fff;background:color-mix(in srgb,var(--side-light) 45%,white);border-radius:50%}
.ot-hub .ot-fsides__cell .ot-headshot img{display:block;position:static;width:100%;height:100%;max-width:100%;object-fit:contain;object-position:center;background:none}
.ot-hub .ot-fsides__cell strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-hub .ot-fsides__cell small{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
@media(max-width:950px){
 .ot-hub .ot-welcome{grid-template-columns:1fr;gap:var(--ot-sp-16,16px)}.ot-hub .ot-welcome__strengths{padding:var(--ot-sp-12,12px) 0 var(--ot-sp-8,8px) var(--ot-sp-20,20px)}
 .ot-hub .ot-explore--sides-only .ot-explore__grid{grid-template-columns:1fr}
 .ot-hub .ot-growth-avatar{max-width:260px;margin:0 auto}.ot-hub .ot-growth-avatar img{height:170px}
 .ot-hub .ot-type-tabs{grid-template-columns:1fr}.ot-hub .ot-type-switch{justify-self:stretch}
 .ot-hub .ot-type-switch summary{justify-content:center;min-height:50px}
 .ot-hub .ot-type-switch__panel{right:auto;left:0}
}
@media(max-width:700px){
 .ot-hub .ot-type-tabs{width:calc(100% - 24px);padding:var(--ot-sp-12,12px);gap:var(--ot-sp-12,12px)}
 .ot-hub .ot-type-tabs__list{order:2;gap:3px}
 .ot-hub .ot-type-tabs__list a{font-size:var(--ot-fs-caption,14px);min-height:48px;padding:var(--ot-sp-8,8px) 3px;line-height:var(--ot-lh-caption,1.45)}
 .ot-hub .ot-type-switch{order:1}
 .ot-hub .ot-type-switch summary{justify-content:flex-start;width:100%}
 .ot-hub .ot-type-switch__panel{width:min(420px,calc(100vw - 40px))}
 .ot-hub.ot-rd .ot4-nav__links{gap:var(--ot-sp-4,4px)}
 .ot-hub.ot-rd .ot4-nav__links a{font-size:var(--ot-fs-caption,14px);min-height:48px;padding:var(--ot-sp-8,8px) var(--ot-sp-4,4px);line-height:var(--ot-lh-caption,1.45)}
 .ot-hub .ot-welcome h2{margin-bottom:14px}.ot-hub .ot-welcome__lead{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}.ot-hub .ot-welcome__follow{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-hub .ot-type-examples__grid{grid-template-columns:1fr;gap:var(--ot-sp-12,12px)}.ot-hub .ot-type-example{padding:var(--ot-sp-20,20px) 0 var(--ot-sp-12,12px)}.ot-hub .ot-type-example p{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-hub .ot-warm-functions__intro{grid-template-columns:minmax(0,1fr) 92px;gap:var(--ot-sp-12,12px)}
 .ot-hub .ot-warm-functions__portrait{width:92px;height:100px;border-radius:16px}
 .ot-hub .ot-warm-functions__grid{grid-template-columns:1fr;gap:var(--ot-sp-12,12px)}
 .ot-hub .ot-warm-function summary{min-height:112px;padding:var(--ot-sp-20,20px) var(--ot-sp-16,16px);gap:var(--ot-sp-12,12px)}
 .ot-hub .ot-warm-function__index{width:36px;height:36px;border-radius:10px}
 .ot-hub .ot-warm-function__heading strong{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}
 .ot-hub .ot-warm-function__body{padding:0 var(--ot-sp-20,20px) var(--ot-sp-20,20px) var(--ot-sp-64,64px)}
 .ot-hub .ot-results__head--avatar{padding-right:var(--ot-sp-16,16px);padding-bottom:var(--ot-sp-80,80px)}
 .ot-hub .ot-results__avatar{height:95px;width:95px;right:16px}
 .ot-hub .ot-growth-theory{padding:var(--ot-sp-4,4px) var(--ot-sp-16,16px) var(--ot-sp-16,16px)}
 .ot-hub .ot-reading-path{gap:var(--ot-sp-8,8px)}.ot-hub .ot-reading-path a{font-size:var(--ot-fs-caption,14px);padding:var(--ot-sp-8,8px) var(--ot-sp-12,12px);line-height:var(--ot-lh-caption,1.45)}
}
/* 4.6.3 reading review: only the requested opening-card, function, and category presentation. */
.ot-hub .ot-rd-free .ot-welcome,
.ot-hub .ot-welcome {
  position:relative;display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.68fr);
  gap:clamp(24px,4vw,54px);align-items:center;
  background:linear-gradient(115deg,#fffefa 0%,color-mix(in srgb,var(--hub-light) 13%,#fff) 100%);
  border:1px solid color-mix(in srgb,var(--hub-dark) 17%,#e2e8dd);
  border-radius:26px;padding:clamp(26px,3.2vw,52px);margin:0 0 34px;
  box-shadow:0 15px 45px -35px rgba(35,62,40,.28);
  overflow:hidden;
}
.ot-hub .ot-welcome::before{content:"";position:absolute;inset:0 0 auto;height:5px;background:linear-gradient(90deg,var(--hub-dark),var(--hub-mid),transparent);opacity:.75}
.ot-hub .ot-welcome__copy{max-width:62ch;min-width:0}
.ot-hub .ot-welcome__copy .ot-eyebrow{letter-spacing:.105em;margin:0 0 12px}
.ot-hub .ot-welcome h2{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12);margin:0 0 22px;letter-spacing:-.025em}
.ot-hub .ot-welcome__lead{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);margin:0 0 19px}
.ot-hub .ot-welcome__follow{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin:0;color:#48564a}
.ot-hub .ot-welcome__strengths{background:rgba(255,255,255,.82);border:1px solid color-mix(in srgb,var(--hub-dark) 12%,#f3f6ef);border-radius:18px;padding:clamp(19px,2.2vw,29px);box-shadow:0 10px 26px -24px #253e3770;max-width:350px}
.ot-hub .ot-welcome__strengths .ot-eyebrow{margin:0 0 16px;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-welcome__strengths li{font-size:var(--ot-fs-small,15px);line-height:var(--ot-lh-small,1.5);padding-left:var(--ot-sp-20,20px)}
.ot-hub .ot-welcome__strengths ul{gap:var(--ot-sp-16,16px)}
/* Functions are readable without interacting, with a calm, consistent hierarchy. */
.ot-hub .ot-warm-functions__grid{gap:clamp(16px,2vw,26px)}
.ot-hub .ot-warm-function{display:flex;flex-direction:column;padding:clamp(18px,2.2vw,26px);border:1px solid #dce4d8;background:#fff;border-radius:20px;box-shadow:0 12px 28px -29px #142f1c}
.ot-hub .ot-warm-function:nth-child(2n){background:color-mix(in srgb,var(--hub-light) 13%,#fff)}
.ot-hub .ot-warm-function__top{display:flex;gap:var(--ot-sp-16,16px);align-items:flex-start;margin:0 0 12px}
.ot-hub .ot-warm-function__index{width:46px;height:46px;border-radius:14px}
.ot-hub .ot-warm-function__heading{gap:var(--ot-sp-8,8px)}
.ot-hub .ot-warm-function__heading strong{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3)}
.ot-hub .ot-warm-function__role{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-warm-function__short{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-hub .ot-warm-function__body{padding:0 0 0 var(--ot-sp-64,64px);margin:0}
.ot-hub .ot-warm-function__body p{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin:0;color:#46574a}
/* Real user findings stay distinct from general type reading and are only rendered when saved results exist. */
.ot-hub .ot-personal-intro{margin:26px 0 42px;padding:clamp(24px,3vw,42px);border-radius:22px;border:1px solid color-mix(in srgb,var(--hub-dark) 20%,#dce7da);background:linear-gradient(125deg,color-mix(in srgb,var(--hub-light) 32%,#fff),#fff 72%);box-shadow:0 12px 36px -30px #21443342}
.ot-hub .ot-personal-intro__head{display:flex;gap:var(--ot-sp-24,24px);justify-content:space-between;align-items:start;margin:0 0 14px}
.ot-hub .ot-personal-intro__head h2{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12);margin:5px 0 0}
.ot-hub .ot-personal-intro__mark{display:block;white-space:nowrap;border-radius:100px;padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);background:var(--hub-dark);color:#fff;font-size:var(--ot-fs-caption,14px);font-weight:750;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-personal-intro__lead{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);max-width:70ch;margin:0 0 24px;color:#35493d}
.ot-hub .ot-personal-intro__items{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--ot-sp-16,16px)}
.ot-hub .ot-personal-intro__items article{display:flex;align-items:start;gap:var(--ot-sp-16,16px);background:#fff;border-radius:16px;border:1px solid #e3e8df;padding:var(--ot-sp-20,20px)}
.ot-hub .ot-personal-intro__code{display:grid;place-items:center;min-width:48px;height:48px;border-radius:12px;background:color-mix(in srgb,var(--hub-light) 45%,#fff);color:var(--hub-dark);font-weight:800}
.ot-hub .ot-personal-intro__items h3{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);margin:0 0 9px}
.ot-hub .ot-personal-intro__items p{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);margin:0 0 10px}
.ot-hub .ot-personal-intro__items small{display:block;font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);color:#51665a}
.ot-hub .ot-personal-intro__explain{font-size:var(--ot-fs-caption,14px);line-height:var(--ot-lh-caption,1.45);color:#4d6053;margin:20px 0 0}
.ot-hub .ot-personal-intro__focus{border-top:1px solid #d3e0d1;margin-top:22px;padding-top:var(--ot-sp-24,24px)}
.ot-hub .ot-personal-intro__focus h3{font-size:var(--ot-fs-h3,20px);margin:8px 0 8px;line-height:var(--ot-lh-h3,1.3)}
.ot-hub .ot-personal-intro__focus p:not(.ot-eyebrow){font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);max-width:72ch}
/* Shared, generous recognition-first opening for Relationships, Careers and Growth. */
.ot-hub .ot-category-welcome{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(235px,.83fr);align-items:center;gap:clamp(22px,3vw,45px);margin:clamp(20px,2.5vw,34px) 0 clamp(34px,3vw,48px);padding:clamp(24px,3vw,44px);background:linear-gradient(120deg,#fffefa,color-mix(in srgb,var(--hub-light) 18%,#fff));border:1px solid color-mix(in srgb,var(--hub-dark) 14%,#e4e9df);border-radius:24px;box-shadow:0 12px 34px -32px #204a2a80}
.ot-hub .ot-category-welcome__copy{max-width:61ch;min-width:0}
.ot-hub .ot-category-welcome h2{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12);margin:7px 0 24px}
.ot-hub .ot-category-welcome__lead{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);color:#263e31;margin:0 0 18px}
.ot-hub .ot-category-welcome__follow{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:#46584b;margin:0 0 20px}
.ot-hub .ot-category-welcome__highlight{display:grid;gap:var(--ot-sp-8,8px);border-left:3px solid var(--hub-dark);padding:var(--ot-sp-8,8px) 0 var(--ot-sp-8,8px) var(--ot-sp-16,16px);margin:23px 0 0}
.ot-hub .ot-category-welcome__highlight span{font-size:var(--ot-fs-caption,14px);letter-spacing:.08em;text-transform:uppercase;color:#576a59;font-weight:750;line-height:var(--ot-lh-caption,1.45)}
.ot-hub .ot-category-welcome__highlight strong{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);color:#2e4a36}
.ot-hub .ot-category-welcome__visual{margin:0;min-width:0}
.ot-hub .ot-category-welcome__visual img{display:block;width:100%;height:auto;max-height:360px;aspect-ratio:4/3;object-fit:contain;object-position:center;border-radius:17px}
.ot-hub .ot-type-examples{margin-top:36px}
.ot-hub .ot-type-examples .ot-rd-heading h2{font-size:var(--ot-fs-h1,36px);line-height:var(--ot-lh-h1,1.12)}
.ot-hub .ot-type-example__tag{text-transform:none;letter-spacing:.03em}
@media(max-width:950px){
 .ot-hub .ot-rd-free .ot-welcome,.ot-hub .ot-welcome,.ot-hub .ot-category-welcome{grid-template-columns:1fr;gap:var(--ot-sp-24,24px)}
 .ot-hub .ot-welcome__strengths{max-width:none}
 .ot-hub .ot-category-welcome__visual{max-width:620px;width:100%;margin-inline:auto}
 .ot-hub .ot-category-welcome__visual img{max-height:280px}
}
@media(max-width:700px){
 .ot-hub .ot-rd-free .ot-welcome,.ot-hub .ot-welcome{padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px);border-radius:19px;margin-bottom:25px}
 .ot-hub .ot-welcome h2{font-size:var(--ot-fs-h2,28px);margin-bottom:17px;line-height:var(--ot-lh-h2,1.2)}
 .ot-hub .ot-welcome__lead{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-hub .ot-welcome__follow{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-hub .ot-welcome__strengths{padding:var(--ot-sp-20,20px)}
 .ot-hub .ot-warm-functions__grid,.ot-hub .ot-personal-intro__items{grid-template-columns:1fr}
 .ot-hub .ot-warm-function__top{gap:var(--ot-sp-12,12px)}
 .ot-hub .ot-warm-function__body{padding-left:0}
 .ot-hub .ot-personal-intro{padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px);border-radius:18px}
 .ot-hub .ot-personal-intro__head{flex-direction:column;gap:var(--ot-sp-12,12px)}
 .ot-hub .ot-personal-intro__lead{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-hub .ot-personal-intro__items article{padding:var(--ot-sp-16,16px)}
 .ot-hub .ot-category-welcome{padding:var(--ot-sp-24,24px) var(--ot-sp-20,20px);border-radius:19px;gap:var(--ot-sp-16,16px)}
 .ot-hub .ot-category-welcome h2{font-size:var(--ot-fs-h2,28px);margin-bottom:18px;line-height:var(--ot-lh-h2,1.2)}
 .ot-hub .ot-category-welcome__lead{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
 .ot-hub .ot-category-welcome__visual img{max-height:260px}
}


/* 4.6.4 overview/layout pass: wider canvas, full-body intro avatar, headshot function art, simpler Four Sides labels. */
.ot-rd .ot-hub__layout,.ot-rd .ot-hub__layout:has(>.ot4-nav){max-width:1480px;padding:var(--ot-sp-24,24px) var(--ot-sp-24,24px) 0}
.ot-rd-banner__inner{max-width:1480px}
.ot-hub .ot-type-tabs{max-width:1320px;width:calc(100% - 32px)}
.ot-hub .ot-rd-free .ot-welcome,.ot-hub .ot-welcome{grid-template-columns:minmax(0,1.55fr) minmax(180px,.5fr) minmax(220px,.62fr);gap:clamp(24px,3.2vw,42px);align-items:center}
.ot-hub .ot-welcome__copy{max-width:70ch}
.ot-hub .ot-welcome__avatar{margin:0;align-self:end;justify-self:center;width:min(100%,260px)}
.ot-hub .ot-welcome__avatar img{display:block;width:100%;height:auto;max-height:420px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 28px rgba(36,58,44,.10))}
.ot-hub .ot-welcome__strengths{justify-self:stretch;max-width:none}
.ot-hub .ot-warm-functions__intro{grid-template-columns:minmax(0,1fr) 170px}
.ot-hub .ot-warm-functions__portrait{width:170px;height:170px;border-radius:28px;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--hub-light) 58%,white),#fff 82%)}
.ot-hub .ot-warm-functions__portrait img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:none}
.ot-fsides__fns{display:none!important}
@media(max-width:1100px){
 .ot-hub .ot-rd-free .ot-welcome,.ot-hub .ot-welcome{grid-template-columns:minmax(0,1fr) 180px;grid-template-areas:"copy avatar" "strengths strengths";gap:var(--ot-sp-20,20px)}
 .ot-hub .ot-welcome__copy{grid-area:copy}
 .ot-hub .ot-welcome__avatar{grid-area:avatar;width:min(100%,180px)}
 .ot-hub .ot-welcome__strengths{grid-area:strengths}
}
@media(max-width:760px){
 .ot-rd .ot-hub__layout,.ot-rd .ot-hub__layout:has(>.ot4-nav){padding:var(--ot-sp-16,16px) var(--ot-sp-16,16px) 0}
 .ot-hub .ot-type-tabs{width:calc(100% - 18px)}
 .ot-hub .ot-rd-free .ot-welcome,.ot-hub .ot-welcome{grid-template-columns:1fr;grid-template-areas:none}
 /* 4.6.5: the 1100 px rule names grid areas; with the areas removed those names collapse into one cell and the
    avatar and strengths box sat on top of the text. Reset placement so the three blocks stack. */
 .ot-hub .ot-welcome__copy,.ot-hub .ot-welcome__avatar,.ot-hub .ot-welcome__strengths{grid-area:auto}
 .ot-hub .ot-welcome__avatar{width:min(100%,220px);margin-inline:auto;order:2}
 .ot-hub .ot-welcome__strengths{order:3}
 .ot-hub .ot-warm-functions__intro{grid-template-columns:minmax(0,1fr) 112px}
 .ot-hub .ot-warm-functions__portrait{width:112px;height:112px;border-radius:20px}
}

/* 4.6.5: the function graph returns to Overview (public sample, member's own graph open), after the function cards. */
.ot-hub .ot-overview-graph{margin:clamp(30px,3.5vw,46px) 0 0}
.ot-hub .ot-results__primer--note{display:block;padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px)}
.ot-hub .ot-results__primer--note .ot-results__illustrative{margin:0;font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65)}
.ot-hub .ot-assessment-graph[open]{padding-bottom:var(--ot-sp-20,20px)}

/* ═══ 4.6.6 polish layer: one grid, one card style, one button style, one text and spacing scale. ═══ */
.ot-hub .ot-eyebrow{font-size:var(--ot-fs-eyebrow);line-height:var(--ot-lh-eyebrow);letter-spacing:.09em}
.ot-hub :is(small,.ot-help,figcaption,.ot-muted){font-size:var(--ot-fs-caption);line-height:var(--ot-lh-caption)}
.ot-hub :is(.ot-welcome,.ot-rd-examples,.ot-warm-functions,.ot-results,.ot-rd-report-action,.ot-rd-public-reports,.ot-personal-intro){max-width:none;width:100%;box-sizing:border-box;margin:0 0 var(--ot-section-gap)}
.ot-hub :is(.ot-welcome,.ot-results,.ot-warm-function,.ot-rd-examples__grid>article){border-radius:var(--ot-card-radius);box-shadow:var(--ot-card-shadow)}
.ot-hub :is(.ot-warm-function,.ot-rd-examples__grid>article){border:var(--ot-card-border);padding:var(--ot-card-pad)}
.ot-hub .ot-welcome{padding:var(--ot-card-pad) var(--ot-card-pad) 0;align-items:stretch}
.ot-hub .ot-welcome__copy{padding-bottom:var(--ot-card-pad);align-self:center}
.ot-hub .ot-welcome__lead{line-height:1.5}
.ot-hub .ot-welcome__avatar{align-self:end}
.ot-hub .ot-welcome__strengths{align-self:center;margin-bottom:var(--ot-card-pad)}
.ot-hub .ot-warm-functions__intro{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--ot-sp-24);margin:0 0 var(--ot-sp-24)}
.ot-hub .ot-warm-functions__intro h2,.ot-hub .ot-welcome h2{font-size:var(--ot-fs-h1);line-height:var(--ot-lh-h1)}
.ot-hub .ot-warm-functions__stack{display:flex;gap:var(--ot-sp-8);list-style:none;margin:0;padding:0}
.ot-hub .ot-warm-functions__stack li{display:flex;flex-direction:column;align-items:center;gap:var(--ot-sp-4);min-width:56px;padding:var(--ot-sp-12) var(--ot-sp-8);border-radius:14px;background:color-mix(in srgb,var(--hub-light) 22%,#fff);border:1px solid color-mix(in srgb,var(--hub-dark) 14%,#fff);color:var(--hub-dark);font-size:var(--ot-fs-caption);line-height:1;font-weight:700}
.ot-hub .ot-warm-functions__stack li+li{opacity:.86}
.ot-hub .ot-warm-function__index{color:var(--hub-dark)}
.ot-hub .ot-warm-function__body{padding-left:62px}
.ot-hub .ot-warm-functions__grid,.ot-hub .ot-rd-examples__grid{gap:var(--ot-sp-24)}
.ot-hub .ot-results__head--avatar{padding-right:var(--ot-card-pad);padding-bottom:var(--ot-sp-24);min-height:0}
.ot-hub .ot-results__highlight{display:flex;align-items:center;gap:var(--ot-sp-12);margin:var(--ot-sp-16) 0 var(--ot-sp-8);padding:var(--ot-sp-16) var(--ot-sp-20);border-radius:14px;border:1px solid color-mix(in srgb,var(--pg-dark) 16%,#fff);background:color-mix(in srgb,var(--pg-light) 28%,#fff);color:#24342a;font-size:var(--ot-fs-small);line-height:var(--ot-lh-small);font-weight:400;box-shadow:none}
.ot-hub .ot-results__highlight .ot-results__strongest-emblem{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:#fff;color:var(--pg-dark)}
.ot-hub .ot-results__highlight span{color:inherit}
.ot-hub .ot-btn{border-radius:999px;min-height:46px;padding:var(--ot-sp-12) var(--ot-sp-24);font-size:16px;line-height:1.3;font-weight:600}
@media(max-width:760px){
 .ot-hub .ot-welcome{padding:var(--ot-card-pad) var(--ot-card-pad) 0}
 .ot-hub .ot-welcome__copy{padding-bottom:0}
 .ot-hub .ot-welcome__avatar{width:min(100%,200px)}
 .ot-hub .ot-warm-functions__intro{grid-template-columns:1fr}
 .ot-hub .ot-warm-function__body{padding-left:0}
 .ot-hub .ot-results__head--avatar{padding-bottom:var(--ot-sp-16)}
 .ot-hub .ot-warm-functions__intro h2,.ot-hub .ot-welcome h2{font-size:var(--ot-fs-h2);line-height:var(--ot-lh-h2)}
}
.ot-hub .ot-results .ot-results__highlight{margin:var(--ot-sp-16) var(--ot-sp-24) var(--ot-sp-8)}
@media(max-width:600px){.ot-hub .ot-results .ot-results__highlight{margin-inline:var(--ot-sp-16)}}
/* 768 px graph: "Aspirational" and "Nemesis" touched; the role list now uses the full column width. */
@media(min-width:701px) and (max-width:899px){.ot-hub .ot-pg__roles{column-gap:0;padding-left:4.5%}.ot-hub .ot-pg__roles li{letter-spacing:-.015em;padding:0 1px}}
/* 4.6.6: on phones the lock card's link no longer wraps one word per line beside the cover. */
@media (max-width:599px){.ot-lockcard--cover .ot-lockcard__body>.ot-lockcard__link{grid-column:1/-1}}
/* 4.6.6: the three glance tiles share one row from tablet up instead of leaving the third alone. */
@media(min-width:700px){.ot-hub .ot-public-tab__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ot-sp-16)}}
.ot-hub .ot-public-tab__tiles>article{padding:var(--ot-sp-16) var(--ot-sp-20)}
/* 4.6.6: with 14 px badges the three phone tiers stack below 420 px instead of pushing past the edge. */
@media (max-width:419px){.ot-tiers{grid-template-columns:minmax(0,1fr)}.ot-tier__for{display:block}}
@media (max-width:599px){.ot-tiers>li{min-width:0}.ot-tier__badge{max-width:100%;white-space:normal}}

/* ═══ 4.7.0 ═══ */
/* Trust panel beside the report offer and in the shop. */
.ot-hub .ot-trust-panel{display:grid;gap:var(--ot-sp-8);margin:var(--ot-sp-16) 0 0;padding:var(--ot-sp-16) var(--ot-sp-20);border:1px solid #e3e3dc;border-radius:14px;background:#fff;font-size:var(--ot-fs-caption);line-height:var(--ot-lh-caption)}
.ot-hub .ot-trust-panel .ot-trust{margin:0}
.ot-hub .ot-trust__author,.ot-hub .ot-trust__method{margin:0;font-size:var(--ot-fs-caption);line-height:var(--ot-lh-caption);color:#3f4a44}
/* How the test works. */
.ot-hub .ot-method{max-width:780px;margin:var(--ot-sp-48) auto;padding:var(--ot-card-pad);background:#fff;border:var(--ot-card-border);border-radius:var(--ot-card-radius);box-shadow:var(--ot-card-shadow)}
.ot-hub .ot-method h1{font-size:var(--ot-fs-h1);line-height:var(--ot-lh-h1);margin:0 0 var(--ot-sp-16)}
.ot-hub .ot-method__lead{font-size:var(--ot-fs-h3);line-height:1.5}
.ot-hub .ot-method__steps{margin:var(--ot-sp-32) 0;padding:0 0 0 var(--ot-sp-24);display:grid;gap:var(--ot-sp-24)}
.ot-hub .ot-method__steps h2{font-size:var(--ot-fs-h3);line-height:var(--ot-lh-h3);margin:0 0 var(--ot-sp-8)}
.ot-hub .ot-method__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-sp-16)}
/* Skip link and visible focus. */
.ot-skip{position:absolute;left:var(--ot-sp-16,16px);top:-80px;z-index:100;padding:var(--ot-sp-12,12px) var(--ot-sp-16,16px);border-radius:10px;background:#1d2622;color:#fff!important;font-size:var(--ot-fs-small,15px);text-decoration:none}
.ot-skip:focus{top:var(--ot-sp-16,16px)}
.ot-hub :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:3px solid #23697a;outline-offset:3px}
/* 4.7.0 contrast: chapter numbers in the upgrade prompt reach 4.5:1. */
.ot4 .ot24-upgrade__chapters span{color:#4f6646}
.ot4 .ot24-reading__feature .ot24-reading__note{color:#5f5a64!important}
/* 4.7.0: results over time. */
.ot-hub .ot-history__spark{display:grid;gap:var(--ot-sp-4);min-width:120px}
.ot-hub .ot-history__bar{position:relative;display:block;height:22px;border-radius:6px;background:color-mix(in srgb,var(--hub-light) 22%,#fff);overflow:hidden}
.ot-hub .ot-history__fill{position:absolute;inset:0 auto 0 0;background:color-mix(in srgb,var(--hub-mid) 45%,#fff)}
.ot-hub .ot-history__label{position:relative;padding:0 var(--ot-sp-8);font-size:var(--ot-fs-caption);line-height:22px;color:#1d2622}
@media(max-width:600px){.ot-hub .ot-history__table{display:block;overflow-x:auto}}
/* 4.7.1 opening avatar: the art is a tight 3:7 full-figure crop. It is sized by height so the whole figure shows,
   never cropped or stretched, and it stands on the card's bottom edge beside (or, on phones, under) the text. */
.ot-hub .ot-welcome__avatar{width:auto;max-width:100%;margin:0;align-self:end;justify-self:center;line-height:0}
.ot-hub .ot-welcome__avatar img{width:auto;height:clamp(320px,25vw,420px);max-width:100%;max-height:none;aspect-ratio:360/840;object-fit:contain;object-position:center bottom}
@media(max-width:1100px){.ot-hub .ot-welcome__avatar{width:auto}.ot-hub .ot-welcome__avatar img{height:330px}}
@media(max-width:760px){.ot-hub .ot-welcome__avatar{width:auto;order:4;margin-top:var(--ot-sp-8)}.ot-hub .ot-welcome__avatar img{height:280px}.ot-hub .ot-welcome__strengths{margin-bottom:0}}
@media(max-width:359px){.ot-hub .ot-welcome__avatar img{height:250px}}
/* 4.7.1 "Does this fit?": nearest alternative types on the signed-in Overview. */
.ot-hub .ot-fit{margin:0 0 var(--ot-section-gap);padding:var(--ot-card-pad);border-radius:var(--ot-card-radius);border:var(--ot-card-border);box-shadow:var(--ot-card-shadow);background:#fff}
.ot-hub .ot-fit__head h2{font-size:var(--ot-fs-h2);line-height:var(--ot-lh-h2);margin:0 0 var(--ot-sp-12);color:#263a2c}
.ot-hub .ot-fit__head p:not(.ot-eyebrow){max-width:70ch;margin:0 0 var(--ot-sp-24);color:#46554a;font-size:var(--ot-fs-body);line-height:var(--ot-lh-body)}
.ot-hub .ot-fit__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--ot-sp-16)}
@media(min-width:1000px){.ot-hub .ot-fit__list{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ot-hub .ot-fit__item{display:grid;grid-template-columns:64px minmax(0,1fr);gap:var(--ot-sp-16);align-items:start;padding:var(--ot-sp-20);border-radius:16px;background:color-mix(in srgb,var(--hub-light,#cfe0c3) 14%,#fff);border:1px solid color-mix(in srgb,var(--hub-dark,#2b4936) 12%,#fff)}
.ot-hub .ot-fit__face{width:64px;height:64px;border-radius:50%;object-fit:cover;background:#fff}
.ot-hub .ot-fit__body h3{margin:0 0 var(--ot-sp-8);font-size:var(--ot-fs-h3);line-height:var(--ot-lh-h3);color:#24372c;display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--ot-sp-8)}
.ot-hub .ot-fit__body h3 small{font-size:var(--ot-fs-small);line-height:var(--ot-lh-small);font-weight:500;color:#4c5a50}
.ot-hub .ot-fit__meter{height:8px;border-radius:999px;background:#e5ebe2;overflow:hidden;margin:0 0 var(--ot-sp-12)}
.ot-hub .ot-fit__meter span{display:block;height:100%;border-radius:inherit;background:var(--hub-dark,#2b4936)}
.ot-hub .ot-fit__note,.ot-hub .ot-fit__strength{margin:0 0 var(--ot-sp-8);font-size:var(--ot-fs-small);line-height:var(--ot-lh-small);color:#35453a}
.ot-hub .ot-fit__strength{color:#4c5a50}
.ot-hub .ot-fit__foot{margin:var(--ot-sp-16) 0 0;color:#4c5a50}
@media(max-width:420px){.ot-hub .ot-fit__item{grid-template-columns:48px minmax(0,1fr);padding:var(--ot-sp-16)}.ot-hub .ot-fit__face{width:48px;height:48px}}
/* 4.7.1: the free summary download beside the signed-out email step. */
.ot-hub .ot-summary-offer{display:grid;gap:var(--ot-sp-16);align-items:center;margin:0 0 var(--ot-section-gap);padding:var(--ot-card-pad);border-radius:var(--ot-card-radius);border:1px dashed color-mix(in srgb,var(--hub-dark) 35%,#fff);background:color-mix(in srgb,var(--hub-light) 12%,#fff)}
.ot-hub .ot-summary-offer h2{font-size:var(--ot-fs-h3);line-height:var(--ot-lh-h3);margin:0 0 var(--ot-sp-8)}
.ot-hub .ot-summary-offer p:not(.ot-eyebrow){margin:0;color:#46554a}
@media(min-width:760px){.ot-hub .ot-summary-offer{grid-template-columns:minmax(0,1fr) auto}}

/* 4.8.1: the four Hub tabs as one segmented control (pill track, pill active state), matching the pill buttons used
   in the shop and checkout. On phones "Relationships" gets the room it needs instead of touching its neighbours. */
.ot-hub.ot-rd .ot4-nav__links{grid-template-columns:1fr 1.3fr 1fr 1fr;gap:var(--ot-sp-4,4px);margin:var(--ot-sp-12,12px) 0;padding:var(--ot-sp-4,4px);border:0;border-radius:999px;background:color-mix(in srgb,var(--hub-dark) 7%,#fff)}
.ot-hub.ot-rd .ot4-nav__links a,.ot-hub.ot-rd .ot4-nav__links a[aria-current=page]{border-radius:999px;border-bottom:0;min-height:48px;transition:background-color .2s ease,color .2s ease}
.ot-hub.ot-rd .ot4-nav__links a:not([aria-current=page]):hover{background:#fff;color:var(--hub-dark)}
.ot-hub.ot-rd .ot4-nav__links a[aria-current=page]{box-shadow:0 6px 14px -10px var(--hub-dark)}
@media(max-width:600px){.ot-hub.ot-rd .ot4-nav__links{grid-template-columns:1fr 1.45fr 1fr 1fr;gap:var(--ot-sp-4,2px)}.ot-hub.ot-rd .ot4-nav__links a{padding:var(--ot-sp-8,8px) var(--ot-sp-4,4px);min-height:44px}}
@media(prefers-reduced-motion:reduce){.ot-hub.ot-rd .ot4-nav__links a{transition:none}}

/* ═══ 4.8.1 de-clutter (tokens only). Lead paragraphs use the lead line-height instead of a heading's; running text
   keeps the measure (low specificity, so any narrower rule still wins); the scene keeps clear space from the eyebrow
   below it at tablet width; one eyebrow never wraps into a cramped second line. ═══ */
.ot-hub .ot-reveal__essence,.ot-hub .ot-category-welcome__lead,.ot-hub .ot-opening .ot-personality__summary:first-child,.ot-hub .ot-personality__summary{line-height:var(--ot-lh-lead,1.5)}
:where(.ot-hub) :where(p,li){max-width:var(--ot-measure,34em)}
:where(.ot-hub) :where([style*="text-align:center"],[class*="center"]) :where(p){margin-inline:auto}
.ot-hub .ot-reveal__scene{margin-bottom:var(--ot-sp-24,24px)}
.ot-hub .ot-eyebrow{line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-interpret{max-width:var(--ot-measure,34em);line-height:var(--ot-lh-small,1.5)}
.ot-hub.ot-hub :is(.ot27-foundations__example p,.ot24-portrait-story__copy p,.ot-welcome__follow,.ot-personal-intro__lead,.ot-personal-intro__explain,.ot-category-welcome__follow,.ot-personality__summary,.ot-bridge,.ot-muted,.ot24-help-notice,.ot-closer p,.ot-fit__head p,.ot-results__head p,.ot-warm-functions__intro p){max-width:var(--ot-measure,34em)}
/* De-clutter: public type tabs as the same segmented control as the member tabs. */
.ot-hub .ot-type-tabs__list{gap:var(--ot-sp-4,4px);padding:var(--ot-sp-4,4px);border-radius:999px;background:color-mix(in srgb,var(--hub-dark) 7%,#fff)}
.ot-hub .ot-type-tabs__list a{transition:background-color .2s ease,color .2s ease}
.ot-hub .ot-type-tabs__list a:not([aria-current=page]):hover{background:#fff;color:var(--hub-dark)}
@media(max-width:600px){.ot-hub .ot-type-tabs__list{display:grid;grid-template-columns:1fr 1.45fr 1fr 1fr;width:100%}.ot-hub .ot-type-tabs__list a{justify-content:center;padding:0 var(--ot-sp-4,4px)}}
@media(prefers-reduced-motion:reduce){.ot-hub .ot-type-tabs__list a{transition:none}}
/* De-clutter: one label per block. The small tags above the report cards and the "sample" chip repeat the sentence
   right beside them, so they stay for screen readers only; the "Recommended" line keeps its place. */
.ot-hub :is(.ot-taboffer__tag,.ot-results__badge[data-sample-label]){position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ot-hub .ot-type-tabs__list a{border-radius:999px}
/* De-clutter: the type switcher's caret sits at the card's edge, and "Change type" reads as one quiet line. */
.ot-hub .ot-type-switch summary::after{margin-left:auto;padding-left:var(--ot-sp-8,8px)}
.ot-hub .ot-type-switch summary > span{display:grid;gap:0;line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-type-switch summary strong > span{display:block;margin:0;font-weight:400;font-size:var(--ot-fs-caption,14px);color:var(--muted,#4a4f6f)}
/* 4.8.2: the owner's welcome art. Desktop: the art fills the banner, anchored right so all four figures show, with a
 * soft light scrim on the left behind the headline. Below 900 px: the text sits on cream and the art follows it,
 * cropped around the figures (94% across), so nothing covers them. */
.ot-rd .ot-rd-banner--art .ot-rd-banner__art{object-position:right center;opacity:1}
.ot-rd-banner--art::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(255,246,236,.82) 0%,rgba(255,246,236,.62) 30%,rgba(255,246,236,0) 48%)}
.ot-rd-banner--art .ot-rd-banner__inner{position:relative;z-index:1;min-height:clamp(420px,42.9vw,823px)}
.ot-rd-banner--art .ot-rd-banner__copy{max-width:min(560px,40vw)}
@media(max-width:899px){.ot-rd-banner--art{display:flex;flex-direction:column;background:#fbf4ea}.ot-rd-banner--art::before{display:none}
 .ot-rd .ot-rd-banner--art .ot-rd-banner__art{position:relative;inset:auto;order:2;z-index:0;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:94% 60%;opacity:1;display:block}
 .ot-rd-banner--art .ot-rd-banner__inner{order:1;min-height:0}.ot-rd-banner--art .ot-rd-banner__copy{max-width:none}}
@media(min-width:600px) and (max-width:899px){.ot-rd .ot-rd-banner--art .ot-rd-banner__art{aspect-ratio:16/9}}
/* 4.8.2: the type code is the heading and the epithet a quieter line under it. One h1 for both (read as "ESTJ, The Overseer"). */
.ot-hub .screen-reader-text,.ot-reveal .screen-reader-text{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ot-hub .ot-reveal .ot-reveal__title{display:flex;flex-direction:column;gap:var(--ot-sp-4,4px)}
.ot-hub .ot-reveal__epithet{font-size:var(--ot-fs-h3,20px);line-height:var(--ot-lh-h3,1.3);letter-spacing:.02em;color:var(--hub-dark,#23697A);font-weight:400}
@media(min-width:900px){.ot-hub .ot-reveal__epithet{font-size:var(--ot-fs-h2,28px);line-height:var(--ot-lh-h2,1.2)}}
.ot-hub .ot-reveal__essence{max-width:34em}
@media(max-width:899px){.ot-hub .ot-reveal .ot-reveal__code{font-size:var(--ot-fs-h1,36px);line-height:1.1}.ot-hub .ot-reveal .ot-reveal__title{align-items:center}}@media(min-width:900px){.ot-hub .ot-reveal .ot-reveal__title{align-items:flex-start}}
/* 4.8.2: a report family that is not on sale yet. */
.ot-hub .ot-taboffer--soon .ot-taboffer__soonline{font-size:var(--ot-fs-body,17px);line-height:var(--ot-lh-body,1.65);max-width:62ch;margin:0 0 var(--ot-sp-16,16px)}
.ot-hub .ot-taboffer__soonactions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ot-sp-12,12px) var(--ot-sp-24,24px);margin-top:var(--ot-sp-20,20px)}
.ot-hub .ot-taboffer__soonactions form{margin:0}
.ot-hub .ot-taboffer--soon .ot-taboffer__head{grid-template-columns:minmax(0,1fr)}
/* 4.8.2: room to read in the offer's lower half (sample captions, the sample note, the refund line, "the type you chose"). */
.ot-hub .ot-taboffer__previews figcaption{margin-top:var(--ot-sp-16,16px);line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-taboffer__previews .ot-taboffer__open{margin-top:var(--ot-sp-4,4px)}
.ot-hub .ot-taboffer>.ot-help{display:block;margin:var(--ot-sp-20,20px) 0 0!important;line-height:var(--ot-lh-small,1.5);max-width:68ch}
.ot-hub .ot-taboffer .ot-trust-panel{margin-top:var(--ot-sp-24,24px);padding:var(--ot-sp-16,16px) var(--ot-sp-20,20px)}
.ot-hub .ot-taboffer .ot-trust{margin:0;gap:var(--ot-sp-8,8px) var(--ot-sp-20,20px);line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-trust__refund{margin-bottom:var(--ot-sp-4,4px)}
.ot-hub .ot-trust__method,.ot-hub .ot-trust__author{margin:var(--ot-sp-12,12px) 0 0;line-height:var(--ot-lh-small,1.5)}
.ot-hub .ot-taboffer__foot{margin:var(--ot-sp-24,24px) 0 0;flex-direction:column;align-items:flex-start;gap:var(--ot-sp-12,12px)}
.ot-hub .ot-taboffer__foot small{display:block;line-height:var(--ot-lh-small,1.5);max-width:68ch}
.ot-hub .ot-taboffer--soon h2{margin-bottom:var(--ot-sp-16,16px)}
.ot-viewer .ot-viewer__cap{padding:var(--ot-sp-12,12px) var(--ot-sp-24,24px) var(--ot-sp-16,16px);line-height:var(--ot-lh-small,1.5);max-width:68ch;margin:0 auto}
/* 4.8.2: the work-situations card carries the type's work scene, so neither half is empty. Phones: a short crop above. */
.ot-hub .ot-cx--art{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,300px);gap:var(--ot-sp-32,32px);align-items:start}
.ot-hub .ot-cx--art .ot-cx__art{grid-column:2;grid-row:1;margin:0;position:sticky;top:96px}
.ot-hub .ot-cx--art .ot-cx__body{grid-column:1;grid-row:1;min-width:0}
.ot-hub .ot-cx__art img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 80%;border-radius:var(--radius-md,14px)}
@media(max-width:760px){.ot-hub .ot-cx--art{grid-template-columns:minmax(0,1fr);gap:var(--ot-sp-16,16px)}.ot-hub .ot-cx--art .ot-cx__art{grid-column:1;grid-row:1;position:static}.ot-hub .ot-cx--art .ot-cx__body{grid-row:2}.ot-hub .ot-cx__art img{aspect-ratio:16/9;object-position:center 30%}}
/* 4.8.8: the persistent "Personalize your report" entry (Overview card and workspace nav). */
.ot-personalize{display:flex;align-items:center;justify-content:space-between;gap:var(--ot-sp-16,16px) var(--ot-sp-24,24px);flex-wrap:wrap;margin:0 auto 24px;max-width:1200px;padding:var(--ot-sp-20,20px) var(--ot-sp-24,24px);border-radius:14px;background:#fff;border:1px solid #e4e7ec;border-left:5px solid var(--hub-mid,#409CAF);box-sizing:border-box}
.ot-personalize h2{margin:0 0 4px;font-size:var(--ot-fs-h3,20px);line-height:1.3}
.ot-personalize h2 small{display:block;font-size:var(--ot-fs-caption,14px);font-weight:500;color:#5b6170;margin-top:2px}
.ot-personalize p{margin:0;font-size:var(--ot-fs-body,16px);line-height:1.5;color:#2b2f3a}
.ot-personalize__copy{flex:1 1 320px;min-width:0}
.ot4-nav__personalize{font-weight:600;color:var(--hub-dark,#23697A)!important}
.ot4-nav__personalize small{display:block;font-weight:500;font-size:var(--ot-fs-caption,14px);color:#5b6170}
@media (max-width:640px){.ot-personalize{margin:0 16px 20px;padding:var(--ot-sp-16,16px)}.ot-personalize .ot-btn{width:100%;text-align:center}}