:root { --bg:#f7f6f2; --panel:#ffffff; --panel-soft:#faf9f6; --ink:#203531; --muted:#677672; --line:#e3e8e1; --forest:#183f3b; --green:#27776b; --green-soft:#ecf5f0; --peach:#c57960; --peach-soft:#fff0e8; --violet:#7866a7; --violet-soft:#f0edf7; --shadow:0 18px 55px rgba(24,63,59,.055); --r:20px; }
*{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:15px;line-height:1.5} button,input,select,textarea{font:inherit} button{cursor:pointer} a{color:var(--green)} button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid #a6cec1;outline-offset:2px} .container{width:min(1180px,calc(100% - 48px));margin:auto} .site-header{height:79px;border-bottom:1px solid var(--line);background:rgba(247,246,242,.93);position:sticky;top:0;z-index:40;backdrop-filter:blur(15px)} .header-inner{height:100%;display:flex;align-items:center;gap:36px;justify-content:space-between}.brand{border:0;background:none;display:flex;align-items:center;gap:10px;font-size:22px;font-weight:780;letter-spacing:-1.15px;color:var(--forest);padding:0;white-space:nowrap}.brand-accent{font-weight:500}.brand-period{color:var(--peach)} .brand-mark{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;flex:0 0 32px}.brand-mark svg{display:block;width:32px;height:32px;overflow:visible}.top-nav{display:flex;align-items:center;gap:7px;background:#ecefea;padding:5px;border-radius:13px}.nav-link{border:none;background:none;color:#59706a;border-radius:9px;padding:8px 15px;font-size:13px;font-weight:650}.nav-link.active{background:white;color:var(--forest);box-shadow:0 2px 8px #1f403014}.header-right{font-size:11px;display:flex;align-items:center;gap:8px;color:var(--muted);white-space:nowrap}.privacy-dot{width:7px;height:7px;border-radius:50%;background:#69a28a}.site-footer{margin-top:88px;border-top:1px solid var(--line);background:#f3f3ee}.footer-inner{display:flex;gap:30px;justify-content:space-between;align-items:center;min-height:90px;font-size:12px;color:var(--muted)}.footer-inner strong{color:var(--ink);margin-right:10px}.footer-links{display:flex;flex-wrap:wrap;gap:18px}.footer-links button{background:none;border:none;color:var(--muted);font-size:12px;padding:8px 0}.footer-links button:hover{text-decoration:underline;color:var(--ink)}
.hero{padding:65px 0 38px;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center}.eyebrow{display:inline-flex;align-items:center;gap:9px;font-weight:750;font-size:11px;letter-spacing:1.25px;text-transform:uppercase;color:var(--green)}.eyebrow:before{content:"";height:7px;width:7px;border-radius:50%;background:#64b09c}.hero h1,.section-title,.results-heading{font-family:Georgia,"Times New Roman",serif;font-weight:500;letter-spacing:-2.1px}.hero h1{font-size:clamp(44px,5.4vw,74px);line-height:1.09;margin:20px 0}.hero h1 em{color:var(--green);font-weight:400}.hero p{font-size:16px;line-height:1.85;color:var(--muted);max-width:565px}.hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:25px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;padding:13px 20px;background:var(--forest);color:white;font-size:13px;font-weight:720;transition:transform .16s,background .16s;white-space:nowrap}.btn:hover{transform:translateY(-1px);background:#295c53}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn.secondary{color:var(--forest);background:white;border-color:#dfe8e1}.btn.secondary:hover{background:#f6faf7}.btn.quiet{color:var(--muted);background:transparent;border:1px solid var(--line)}.btn.small{padding:10px 13px;font-size:12px}.hero-card{min-height:320px;position:relative;border-radius:28px;background:linear-gradient(140deg,#1d4c45,#183b37);padding:34px;color:#f1f7f3;overflow:hidden;box-shadow:0 22px 52px #183f3b26}.hero-card::before{content:"";position:absolute;width:290px;height:290px;right:-105px;top:-75px;border:1px solid #ffffff25;border-radius:50%;box-shadow:0 0 0 34px #ffffff08,0 0 0 72px #ffffff06}.hero-card::after{content:"";position:absolute;bottom:-100px;left:-70px;width:220px;height:220px;border:1px solid #ffffff26;border-radius:50%}.hero-card h3{font-size:12px;letter-spacing:1px;text-transform:uppercase;color:#c3d7ce}.hero-card .quote{position:relative;font-family:Georgia,serif;font-size:clamp(25px,3.1vw,39px);line-height:1.32;margin:35px 0 29px}.hero-stats{display:flex;gap:25px;position:relative;border-top:1px solid #ffffff2b;padding-top:24px}.hero-stat strong{font-size:26px;font-weight:640;display:block}.hero-stat span{font-size:11px;color:#c5d9d1;line-height:1.35;display:block;max-width:90px}.intro-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:70px}.intro-pill{padding:18px 20px;border:1px solid var(--line);border-radius:15px;background:#fff;display:flex;align-items:center;gap:14px;font-size:12px;font-weight:650;color:#47605a}.mini-icon{display:grid;place-items:center;width:35px;height:35px;flex-shrink:0;border-radius:12px;background:var(--green-soft);color:var(--green);font-size:18px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:21px}.section-title{font-size:clamp(29px,3.4vw,43px);margin:8px 0 2px}.section-subtitle{font-size:13px;color:var(--muted);line-height:1.7;max-width:730px}.step-tag{font-size:12px;font-weight:800;letter-spacing:.5px;color:var(--green);text-transform:uppercase}.surface{border:1px solid var(--line);border-radius:var(--r);background:var(--panel);box-shadow:var(--shadow)}.setup-stack{display:grid;gap:18px}.setup-card{padding:26px}.setup-card h3{font-size:16px;margin:0 0 6px;letter-spacing:-.2px}.setup-card p{font-size:12px;color:var(--muted);margin:0 0 18px}.setup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.field{display:grid;gap:7px;min-width:0}.field label{font-size:11px;font-weight:760;color:#526962}.field input,.field select,.field textarea{width:100%;border:1px solid #dfe8e2;border-radius:11px;background:#fbfcfa;color:var(--ink);padding:12px 13px;min-width:0;outline:none}.field input:focus,.field select:focus,.field textarea:focus{border-color:#80b8a5;background:white}.field textarea{resize:vertical;min-height:72px}.field-hint{font-size:11px;color:var(--muted)}.soft-line{border:none;border-top:1px solid var(--line);margin:22px 0}.profile-head{display:flex;align-items:center;gap:10px;margin-bottom:15px}.profile-dot{width:12px;height:12px;border-radius:4px;background:var(--green)}.profile-dot.b{background:var(--peach)}.profile-head strong{font-size:14px}.profile-head small{color:var(--muted);font-size:11px;margin-left:auto}.profile-card{padding:24px}.profile-card.a{border-top:4px solid var(--green)}.profile-card.b{border-top:4px solid var(--peach)}.profile-card .field+.field{margin-top:14px}.setup-actions{padding:21px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}.setup-actions p{color:var(--muted);max-width:600px;font-size:12px;margin:0}.info-note{font-size:12px;color:#537267;background:#eff6f1;border:1px solid #dde9df;border-radius:13px;padding:15px 17px;line-height:1.65}.info-note strong{color:var(--forest)}
.survey-header{padding:36px 0 24px}.survey-title-row{display:flex;justify-content:space-between;gap:20px;align-items:center}.survey-title-row h1{font-family:Georgia,serif;font-size:42px;font-weight:500;margin:10px 0}.survey-title-row p{margin:0;color:var(--muted);font-size:13px}.progress-legend{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px;margin-top:17px;margin-bottom:9px}.progress-legend strong{font-size:14px}.progress-track{height:10px;border-radius:99px;background:#e3eae3;overflow:hidden}.progress-fill{height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,#2c796d,#7eae94);transition:width .32s ease}.progress-fill.b{background:linear-gradient(90deg,#cb9172,#e5b695)}.double-progress{display:grid;grid-template-columns:1fr 1fr;gap:18px}.survey-layout{display:grid;grid-template-columns:245px minmax(0,1fr);gap:24px;margin-top:26px;align-items:start}.survey-sidebar{position:sticky;top:102px;padding:12px;max-height:calc(100vh - 125px);overflow:auto}.side-label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:1.3px;margin:8px 12px 12px;font-weight:800}.side-item{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;border-radius:10px;padding:11px 12px;color:#577069;text-align:left;font-size:12px;font-weight:580}.side-item span:first-child{font-size:13px;color:#7a9185;width:18px;text-align:center}.side-item .side-count{margin-left:auto;font-size:11px;color:#91a09a;white-space:nowrap}.side-item.active{background:#eaf2ec;color:var(--forest);font-weight:800}.side-item:hover{background:#f1f5f0}.side-item.finished .side-count{color:#2b836d}.question-section-header{margin:5px 0 24px;display:flex;justify-content:space-between;align-items:start;gap:15px}.question-section-header h2{font-family:Georgia,serif;letter-spacing:-1px;font-size:31px;font-weight:500;margin:8px 0}.question-section-header p{font-size:12px;color:var(--muted);margin:0;line-height:1.7}.question-count{padding:8px 12px;border-radius:100px;font-size:11px;color:var(--green);background:var(--green-soft);font-weight:750;white-space:nowrap}.question-card{padding:20px 22px;margin-bottom:13px;box-shadow:none}.q-header{display:flex;align-items:start;gap:12px;margin-bottom:17px}.q-index{border-radius:8px;background:#f0f4ef;color:#6e877b;font-size:11px;padding:6px 8px;flex:none;font-weight:800}.q-text{font-weight:710;font-size:14px;line-height:1.5;margin:3px 0}.q-sub{font-size:11px;color:#8b9993;margin:4px 0 0}.ratings-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.rating-col{padding:13px;background:var(--panel-soft);border-radius:12px;border:1px solid #f0f0ec;min-width:0}.rating-label{display:flex;gap:8px;align-items:center;font-size:12px;font-weight:750;margin-bottom:11px;min-height:20px;overflow:hidden}.rating-label .profile-dot{width:8px;height:8px;flex:none}.rating-label span:nth-child(2){white-space:normal;overflow-wrap:anywhere;min-width:0}.rating-options{display:flex;gap:4px}.rating-btn{min-width:0;flex:1;aspect-ratio:1.03/1;border:1px solid #e4e9e2;color:#62766b;border-radius:8px;background:#fff;font-size:12px;font-weight:750;padding:0}.rating-btn:hover{border-color:var(--green);background:#f0f8f3}.rating-col.b .rating-btn:hover{border-color:var(--peach);background:var(--peach-soft)}.rating-btn.selected{background:var(--forest);border-color:var(--forest);color:#fff}.rating-col.b .rating-btn.selected{background:var(--peach);border-color:var(--peach)}.rating-btn.na{font-size:11px;letter-spacing:-.4px;flex:1.3}.rating-btn.na.selected{background:#7f8a87;border-color:#7f8a87}.ratings-guide{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#84948a;margin-top:11px}.question-footer{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:18px 0 10px}.notes-wrap{margin:26px 0 0;padding:22px}.notes-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.footer-tip{font-size:11px;color:var(--muted);max-width:400px}.survey-quick-switch{display:flex;gap:7px}.seg{border:1px solid var(--line);background:transparent;padding:9px 12px;font-size:11px;font-weight:750;color:var(--muted);border-radius:9px}.seg.active{background:var(--forest);border-color:var(--forest);color:white}.last-score-card{padding:30px;margin:18px 0}.last-score-card h3{margin:0 0 9px}.last-score-card p{color:var(--muted);font-size:13px;max-width:650px}.last-personal{display:grid;grid-template-columns:repeat(2,1fr);gap:22px;margin:21px 0}.big-rating .rating-btn{aspect-ratio:auto;height:45px}.big-rating .rating-col{background:transparent;padding:15px}.direct-score-label{font-size:12px;color:var(--muted);margin:9px 0 0}
.results-top{padding-top:54px}.results-heading{font-size:clamp(39px,5vw,59px);margin:8px 0 12px;line-height:1.17}.results-lead{color:var(--muted);max-width:700px;line-height:1.8;font-size:14px}.result-controls{display:flex;justify-content:space-between;gap:15px;align-items:center;margin:29px 0 20px;flex-wrap:wrap}.score-cards{display:grid;grid-template-columns:1fr 1fr;gap:17px}.score-card{padding:28px;position:relative;overflow:hidden}.score-card.a{border-top:4px solid var(--green)}.score-card.b{border-top:4px solid var(--peach)}.score-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.score-name{font-weight:800;font-size:17px;overflow-wrap:anywhere}.score-meta{font-size:11px;color:var(--muted)}.score-big{display:flex;align-items:baseline;gap:6px;margin:25px 0 14px;font-size:64px;letter-spacing:-3px;line-height:1;font-weight:790;color:var(--forest)}.score-card.b .score-big{color:#b16c51}.score-big span{font-size:18px;color:#84938c;letter-spacing:0}.score-descriptor{font-size:12px;margin-top:12px;font-weight:700}.score-small{font-size:11px;line-height:1.7;color:var(--muted);margin-top:12px}.score-big.empty{font-size:32px;letter-spacing:-.5px}.score-completion{margin-top:20px;padding-top:18px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}.section-caption{font-size:11px;color:var(--muted);line-height:1.8;max-width:970px}.comparison{margin-top:34px;padding:29px}.comparison h2,.insight-panel h2{font-family:Georgia,serif;font-size:27px;font-weight:500;margin:0 0 5px;letter-spacing:-.7px}.comparison p,.insight-panel p{font-size:12px;color:var(--muted);line-height:1.7}.comparison-header{display:grid;grid-template-columns:minmax(125px,1fr) 1fr 1fr;gap:20px;margin:25px 0 9px;font-size:12px;font-weight:800;color:var(--muted)}.comparison-header>div:nth-child(2){color:var(--green)}.comparison-header>div:nth-child(3){color:var(--peach)}.compare-row{display:grid;grid-template-columns:minmax(125px,1fr) 1fr 1fr;gap:20px;align-items:center;min-height:48px;padding:11px 0;border-top:1px solid #f0f2ef;font-size:12px}.compare-row .cat-name{font-weight:670;line-height:1.4}.compare-bar-wrap{display:flex;align-items:center;gap:10px}.compare-track{flex:1;height:9px;border-radius:99px;background:#edf0ed;overflow:hidden}.compare-bar{height:100%;border-radius:99px;background:var(--green)}.compare-bar.b{background:var(--peach)}.compare-number{min-width:42px;color:var(--muted);text-align:right;font-size:11px;font-weight:750;font-variant-numeric:tabular-nums}.insights-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px;margin-top:20px}.insight-panel{padding:26px}.insight-head{display:flex;align-items:center;gap:10px;margin-bottom:16px}.insight-head .profile-dot{width:11px;height:11px}.insight-items{display:grid;gap:10px}.insight-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:11px 13px;border:1px solid #ebeeea;border-radius:11px;background:var(--panel-soft);font-size:12px}.insight-item strong{color:var(--ink)}.insight-item span{color:var(--muted);font-weight:780}.safety-alert{background:#fff8f2;border:1px solid #f0d9c5;color:#7c503c;border-radius:13px;padding:15px;margin-top:14px;font-size:12px;line-height:1.7}.safety-alert strong{display:block;margin-bottom:3px}.score-explainer{margin-top:25px;padding:24px}.explain-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:22px}.explain-grid strong{display:block;font-size:12px;margin-bottom:6px}.explain-grid p{font-size:12px;color:var(--muted);line-height:1.7;margin:0}.attachment-note{padding:15px 18px;border:1px solid #dfe8e2;background:#f5f9f5;border-radius:13px;color:#506a5e;font-size:12px;line-height:1.65;margin-top:15px}.no-answers{padding:20px;background:#f7f8f5;border-radius:12px;color:var(--muted);font-size:12px}.progress-flag{border-radius:30px;background:#f1f3ee;color:#607369;padding:7px 11px;font-weight:720;font-size:11px}.progress-flag.ok{background:#e6f4ed;color:#32745e}.toast{position:fixed;right:22px;bottom:20px;z-index:100;background:var(--forest);color:white;border-radius:12px;padding:12px 17px;max-width:min(400px,calc(100% - 44px));font-size:12px;opacity:0;transform:translateY(15px);pointer-events:none;transition:opacity .2s,transform .2s}.toast.show{opacity:1;transform:translateY(0)}.hidden{display:none!important}
@media(max-width:1020px){.header-right{display:none}.hero{gap:24px}.hero h1{font-size:58px}.survey-layout{grid-template-columns:210px minmax(0,1fr);gap:14px}.ratings-grid{gap:8px}.rating-col{padding:9px}.question-card{padding:16px}.score-big{font-size:54px}}
@media(max-width:760px){.container{width:calc(100% - 28px)}.site-header{height:69px}.header-inner{gap:10px}.brand{font-size:17px;letter-spacing:-.8px}.brand-mark{transform:scale(.82);margin-right:-4px}.top-nav{gap:2px;padding:4px}.nav-link{padding:7px 9px;font-size:11px}.hero{padding:38px 0 20px;grid-template-columns:1fr}.hero h1{font-size:clamp(40px,10vw,56px)}.hero p{font-size:14px}.hero-card{min-height:230px;padding:23px}.hero-card .quote{font-size:28px;margin:20px 0}.intro-strip{grid-template-columns:1fr;gap:8px;margin:10px 0 47px}.intro-pill{padding:12px 15px}.section-heading{align-items:start}.setup-grid,.score-cards,.insights-grid,.notes-grid{grid-template-columns:1fr}.setup-card,.profile-card{padding:19px}.setup-actions{padding:20px;align-items:flex-start}.survey-title-row{align-items:flex-start;flex-direction:column}.survey-title-row h1{font-size:34px}.survey-layout{display:block}.survey-sidebar{position:relative;top:auto;max-height:none;overflow-x:auto;display:flex;gap:4px;padding:8px;margin-bottom:20px;scrollbar-width:thin}.side-label{display:none}.side-item{min-width:max-content;width:auto;padding:8px 10px;border:1px solid #e5e9e3;font-size:11px}.side-item span:first-child{display:none}.side-item .side-count{font-size:11px}.question-section-header h2{font-size:27px}.double-progress{gap:11px}.question-card{padding:16px}.q-header{gap:8px}.q-text{font-size:13px}.ratings-grid{grid-template-columns:1fr;gap:8px}.rating-col{padding:10px;display:grid;grid-template-columns:90px minmax(0,1fr);align-items:center;gap:8px}.rating-label{margin:0;font-size:11px}.rating-btn{height:34px;aspect-ratio:auto}.ratings-guide{font-size:11px}.last-personal{grid-template-columns:1fr}.score-card{padding:22px}.score-big{font-size:57px}.comparison{padding:17px}.comparison-header,.compare-row{grid-template-columns:100px minmax(0,1fr) minmax(0,1fr);gap:8px}.compare-row .cat-name{font-size:11px}.compare-track{height:7px}.compare-bar-wrap{flex-wrap:wrap;gap:4px}.compare-number{font-size:11px;min-width:100%;text-align:left}.comparison-header{font-size:11px}.explain-grid{grid-template-columns:1fr;gap:17px}.footer-inner{padding:20px 0;align-items:flex-start;flex-direction:column;gap:12px}.footer-links{gap:13px}}
@media print{body{background:white;color:black;font-size:12px}.no-print,.site-header,.site-footer,.result-controls{display:none!important}.container{width:100%}.results-top{padding-top:0}.results-heading{font-size:35px}.surface{box-shadow:none;break-inside:avoid}.score-cards,.insights-grid{grid-template-columns:1fr 1fr}.score-card{padding:15px}.comparison{padding:15px}.score-big{font-size:45px}.comparison{break-before:page}.comparison .compare-row{break-inside:avoid}.insight-panel{break-inside:avoid}.explain-grid{grid-template-columns:1fr 1fr 1fr}.score-explainer{break-inside:avoid}}
@media(max-width:760px){
  .question-footer{flex-wrap:wrap;gap:9px}
  .question-footer .footer-tip{order:-1;flex:1 1 100%;max-width:none}
  .question-footer .btn{flex:1 1 0;white-space:normal;min-width:0;padding:11px 9px;font-size:11px}
}

/* v2: jednolita skala 0–6; podpisy kotwic i oddzielne odpowiedzi bez punktów */
.q-anchors{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:12px;color:#596f66;font-size:11px;font-weight:550;line-height:1.5}
.q-anchors span{display:inline-flex;align-items:center;gap:4px}
.q-anchors span:first-child{color:#995546}
.q-anchors span:last-child{color:#287261}
.rating-col{display:block}
.rating-answers{min-width:0}
.rating-options{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}
.rating-btn{aspect-ratio:auto;min-height:43px;width:100%;font-size:13px;transition:background .16s ease,color .16s ease,border-color .16s ease}
.rating-btn:first-child:not(.selected){border-color:#e7d7d1;color:#945b4a}
.rating-btn:last-child:not(.selected){border-color:#d5e7dc;color:#2d745b}
.rating-actions{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.rating-skip{font-size:11px;font-weight:700;line-height:1.3;border-radius:8px;padding:7px 11px;color:#687970;background:#fff;border:1px solid #dee6de}
.rating-skip:hover{border-color:#879d91;color:var(--forest)}
.rating-skip.selected,.rating-col.b .rating-skip.selected{background:#6a7874;border-color:#6a7874;color:white}
.rating-selection{font-size:11px;font-weight:650;color:#516a5d;padding-top:9px;min-height:24px}
.rating-col.b .rating-selection{color:#a25f47}
.question-section-header p{max-width:650px}
.big-rating .rating-options{grid-template-columns:repeat(7,minmax(0,1fr))}
.big-rating .rating-col{display:block}
.big-rating .rating-answers{width:100%}
.big-rating .rating-btn{height:48px}
@media(max-width:760px){
 .rating-col{display:block;padding:12px}
 .rating-label{margin-bottom:8px}
 .rating-btn{min-height:40px;font-size:12px}
 .rating-options{gap:4px}
 .q-anchors{font-size:11px;gap:4px 10px}
 .rating-selection{font-size:11px}
}
@media(max-width:380px){.rating-btn{min-height:37px}.rating-skip{padding:7px 8px;font-size:11px}.q-anchors{font-size:11px}}


/* v2.1 — żywa, siedmiostopniowa skala jakości: czerwony → bursztyn → zielony.
   Odpowiedzi obu profili mają te same kolory znaczeniowe. */
.rating-col {
  --rating-color: #799187;
  --rating-ink: #fff;
  --rating-position: 0%;
}
.rating-col[data-level="0"] { --rating-color:#b64b54; --rating-position:0%; --rating-ink:#fff; }
.rating-col[data-level="1"] { --rating-color:#c86957; --rating-position:16.6667%; --rating-ink:#fff; }
.rating-col[data-level="2"] { --rating-color:#d69b5d; --rating-position:33.3333%; --rating-ink:#31291e; }
.rating-col[data-level="3"] { --rating-color:#ddba69; --rating-position:50%; --rating-ink:#31291e; }
.rating-col[data-level="4"] { --rating-color:#84b296; --rating-position:66.6667%; --rating-ink:#173c2f; }
.rating-col[data-level="5"] { --rating-color:#408f76; --rating-position:83.3333%; --rating-ink:#fff; }
.rating-col[data-level="6"] { --rating-color:#236d5d; --rating-position:100%; --rating-ink:#fff; }
.rating-col .rating-btn.selected,
.rating-col.b .rating-btn.selected {
  background: var(--rating-color);
  border-color:var(--rating-color);
  color:var(--rating-ink);
  box-shadow: 0 2px 9px rgba(31,48,39,.11);
  transform: translateY(-1px);
}
.rating-col .rating-btn { transition: background-color .24s ease, color .24s ease, border-color .24s ease, transform .24s ease, box-shadow .24s ease; }
.rating-selection {
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  font-weight:750;
  font-size:12px;
  min-height:37px;
  padding:9px 2px 5px;
  color:var(--rating-color);
  transition:color .25s ease;
}
.rating-col.b .rating-selection {color:var(--rating-color)}
.rating-col[data-level="none"] .rating-selection {color:#73867e;font-weight:600}
.rating-meter {
  height:10px;
  border-radius:999px;
  position:relative;
  overflow:visible;
  background:#e1e9e1;
  margin:10px 4px 0;
  box-shadow:inset 0 1px 2px rgba(40,67,55,.07);
}
.rating-meter-fill {
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(90deg,#b64b54 0%,#c86957 16.67%,#d69b5d 33.33%,#ddba69 50%,#84b296 66.67%,#408f76 83.33%,#236d5d 100%);
  clip-path:inset(0 calc(100% - var(--rating-position)) 0 0 round 999px);
  transition:clip-path .36s cubic-bezier(.22,1,.36,1),opacity .18s ease;
}
.rating-meter-thumb {
  position:absolute;
  width:15px;
  height:15px;
  border:3px solid #fff;
  border-radius:50%;
  box-sizing:content-box;
  top:50%;
  left:var(--rating-position);
  transform:translate(-50%,-50%);
  background:var(--rating-color);
  box-shadow:0 1px 6px rgba(30,53,42,.19);
  transition:left .36s cubic-bezier(.22,1,.36,1),background-color .26s ease,opacity .18s ease;
}
.rating-col[data-level="none"] .rating-meter-thumb,
.rating-col[data-level="none"] .rating-meter-fill {opacity:0}
.rating-meter-legend {
  display:flex;
  justify-content:space-between;
  gap:7px;
  margin:8px 0 10px;
  color:#819188;
  font-size:11px;
  font-weight:550;
}
.rating-meter-legend span:nth-child(2) {text-align:center}
.rating-meter-legend span:last-child {text-align:right}
.rating-actions {margin-top:7px}
.rating-col .rating-skip.selected,.rating-col.b .rating-skip.selected {background:#6a7874;border-color:#6a7874;color:white}
.rating-btn:focus-visible,.rating-skip:focus-visible {outline:3px solid #3a8973;outline-offset:2px}
@media(max-width:760px) {
 .rating-col {display:block}
 .rating-label {margin-bottom:9px}
 .rating-meter {margin-left:8px;margin-right:8px}
 .rating-meter-legend {font-size:11px}
}
@media(prefers-reduced-motion:reduce) {
 .rating-col .rating-btn,.rating-meter-thumb,.rating-meter-fill,.rating-selection {transition:none!important}
}


/* Kolorowa miara wyniku końcowego, z tą samą semantyką co odpowiedzi. */
.score-spectrum { overflow:visible;position:relative;background:#e1e9e1; }
.score-spectrum-fill {
 position:absolute;inset:0;border-radius:inherit;
 background:linear-gradient(90deg,#b64b54 0%,#c86957 16.67%,#d69b5d 33.33%,#ddba69 50%,#84b296 66.67%,#408f76 83.33%,#236d5d 100%);
 clip-path:inset(0 calc(100% - var(--score-progress)) 0 0 round 999px);
 animation:score-reveal .85s cubic-bezier(.22,1,.36,1) both;
}
.score-spectrum-thumb {
 position:absolute;top:50%;left:var(--score-progress);
 width:17px;height:17px;border-radius:50%;border:3px solid #fff;
 transform:translate(-50%,-50%);background:#3b806d;
 box-shadow:0 2px 7px rgba(25,56,43,.15);
 animation:thumb-reveal .85s cubic-bezier(.22,1,.36,1) both;
}
@keyframes score-reveal {from {clip-path:inset(0 100% 0 0 round 999px)}to {clip-path:inset(0 calc(100% - var(--score-progress)) 0 0 round 999px)}}
@keyframes thumb-reveal {from {left:0%}to {left:var(--score-progress)}}
@media(prefers-reduced-motion:reduce) { .score-spectrum-fill,.score-spectrum-thumb {animation:none!important} }


/* v2.2 — interaktywny suwak 0–6. Widoczne kropki to siedem pozycji;
   przezroczysty natywny input range obsługuje mysz, dotyk i klawiaturę. */
.rating-meter {
  height:48px;
  position:relative;
  margin:5px 0 0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  cursor:grab;
}
.rating-meter:active {cursor:grabbing}
.rating-meter-rail {
  position:absolute;
  left:12px;
  right:12px;
  top:50%;
  height:11px;
  transform:translateY(-50%);
  border-radius:999px;
  background:#e0e9e3;
  box-shadow:inset 0 1px 2px rgba(31,65,51,.14);
  pointer-events:none;
}
.rating-meter-fill {
  border-radius:inherit;
  opacity:1;
}
.rating-meter-stops {
  display:flex;
  justify-content:space-between;
  align-items:center;
  position:absolute;
  inset:0;
  pointer-events:none;
}
.rating-meter-stop {
  position:relative;
  z-index:1;
  display:block;
  width:9px;
  height:9px;
  background:#f7faf8;
  border:2px solid #adbfba;
  border-radius:100%;
  flex:0 0 auto;
  transition:background-color .22s ease,border-color .22s ease,transform .22s ease;
}
.rating-meter-stop.passed {
  background:#fff;
  border-color:#fff;
  box-shadow:0 0 0 1px rgba(33,61,54,.08);
}
.rating-meter-stop.current {
  transform:scale(1.12);
}
.rating-meter-thumb {
  z-index:2;
  width:20px;
  height:20px;
  box-sizing:border-box;
  border:3px solid #fff;
  box-shadow:0 2px 7px rgba(24,55,45,.22);
}
.rating-meter-input {
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  outline:none;
  opacity:0;
  cursor:grab;
  z-index:4;
  touch-action:pan-y; /* G3 (F62): a vertical swipe that starts on the slider scrolls the page */
}
.rating-meter-input:active {cursor:grabbing}
.rating-meter-input::-webkit-slider-runnable-track {height:100%;background:transparent}
.rating-meter-input::-webkit-slider-thumb {
  -webkit-appearance:none;
  appearance:none;
  width:24px;
  height:40px;
  border:0;
  background:transparent;
}
.rating-meter-input::-moz-range-track {height:100%;background:transparent;border:0}
.rating-meter-input::-moz-range-thumb {width:24px;height:40px;border:0;background:transparent}
.rating-meter:has(.rating-meter-input:focus-visible) .rating-meter-rail {
  outline:3px solid #a6cec1;
  outline-offset:7px;
}
.rating-meter-legend {margin:0 0 10px}
.rating-meter-legend span:nth-child(2) {color:#567669;font-weight:700}
.rating-col[data-level="none"] .rating-meter-stop {opacity:1}
@media(max-width:760px) {
  .rating-meter {margin-left:0;margin-right:0;height:49px}
  .rating-meter-legend {font-size:11px}
}
@media(prefers-reduced-motion:reduce){
  .rating-meter-stop {transition:none!important}
}

/* v2.3 — jednoznaczna kolejność i usuwanie zaznaczeń */
.rating-actions {
 display:grid;
 grid-template-columns:repeat(2,minmax(0,1fr));
 gap:7px;
 margin-top:10px;
}
.rating-actions>.rating-skip {min-width:0;min-height:35px;text-align:center;}
.rating-actions>.rating-skip:first-child {grid-column:1;}
.rating-actions>.rating-skip:nth-child(2) {grid-column:2;}
.rating-clear {
 grid-column:1/-1;
 width:100%;
 padding:8px 12px;
 min-height:34px;
 border:1px solid #dbe4dd;
 border-radius:8px;
 color:#436357;
 background:#eff5f0;
 font-size:11px;
 font-weight:720;
 transition:background .18s ease,border-color .18s ease,opacity .18s ease;
}
.rating-clear:not(:disabled):hover {background:#e1eee5;border-color:#84ac95;}
.rating-clear:disabled {opacity:.42;cursor:default;}
.rating-clear:focus-visible {outline:3px solid #a6cec1;outline-offset:2px;}
.rating-meter-input {touch-action:pan-y;}
@media(prefers-reduced-motion:reduce){.rating-clear{transition:none!important}}

/* v3 — English-first, bilingual and one/two-profile onboarding */
.header-tools{display:flex;align-items:center;gap:18px;flex-shrink:0}
.language-switch{display:flex;align-items:center;gap:2px;padding:3px;background:#e7ede8;border-radius:10px;flex-shrink:0}
.language-switch button{border:0;border-radius:7px;background:none;color:#5e746a;padding:7px 9px;font-size:11px;font-weight:800}
.language-switch button.active{background:white;color:#1d4d42;box-shadow:0 1px 5px #173b301a}
.chooser-section{scroll-margin-top:105px;margin:0 0 60px}
#setup{scroll-margin-top:100px}
.count-choices{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.count-choice{display:flex;flex-direction:column;text-align:left;align-items:flex-start;gap:7px;min-height:158px;padding:25px;border:2px solid var(--line);transition:border-color .2s,background .2s,transform .2s}
.count-choice:hover{border-color:#8daf9f;transform:translateY(-2px)}
.count-choice.chosen{border-color:#347e6f;background:#f0f7f1;box-shadow:0 12px 26px #27776b13}
.count-choice .count-icon{font-size:23px;line-height:1.2;letter-spacing:8px;color:var(--green);height:28px}
.count-choice strong{font-size:19px;color:var(--ink)}
.count-choice>span:not(.count-icon){font-size:12px;color:var(--muted)}
.count-choice small{font-size:11px;font-weight:750;color:#216851;margin-top:3px}
.setup-grid.single-setup,.double-progress.single-profile,.ratings-grid.single-profile,.notes-grid.single-profile,.score-cards.single-profile,.insights-grid.single-profile,.last-personal.single-profile{grid-template-columns:minmax(0,1fr)}
.single-profile .rating-col{max-width:none}
.comparison.single-profile .comparison-header,.comparison.single-profile .compare-row{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.comparison.single-profile .compare-row .compare-bar-wrap{min-width:0}
@media(max-width:980px){.header-inner{gap:16px}.header-tools{gap:8px}.header-right{display:none}}
@media(max-width:760px){.count-choices{grid-template-columns:1fr}.count-choice{min-height:132px}.language-switch button{padding:7px}.top-nav{gap:2px}.nav-link{padding:8px 9px}.brand{font-size:19px}.container{width:min(1180px,calc(100% - 28px))}.site-header{height:72px}}
@media(max-width:490px){.header-inner{gap:8px}.top-nav{padding:3px}.nav-link{font-size:11px;padding:7px 6px}.brand{font-size:16px;gap:5px}.brand-mark{transform:scale(.8);margin-right:-5px}.language-switch button{font-size:11px;padding:6px}}


/* v3.1 Couples — identical questionnaire, independently rated by both people */
.count-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.count-choice{min-width:0;min-height:175px;padding:20px}
.count-choice>span:not(.count-icon){line-height:1.65}
.couple-setup .profile-card .field{margin-top:14px}
.couple-results{padding:32px;margin-top:25px}
.couple-results h2{font-family:Georgia,"Times New Roman",serif;font-weight:500;font-size:32px;letter-spacing:-1px;margin:12px 0 7px}
.couple-explain{color:var(--muted);font-size:13px;line-height:1.8}
.couple-meta{font-size:13px;color:var(--muted);margin:17px 0 24px;padding:13px 16px;background:var(--panel-soft);border:1px solid var(--line);border-radius:12px}
.couple-meta strong{color:var(--ink);font-size:17px}
.couple-summary-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.couple-sub{padding:20px;margin:12px 0;border:1px solid var(--line);background:#fff;border-radius:16px;min-width:0}
.couple-sub h3{font-size:15px;font-weight:780;margin:0 0 13px;color:var(--ink)}
.couple-sub>p{font-size:12px;line-height:1.7;color:var(--muted)}
.couple-line{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:12px}
.couple-line>span{font-weight:650}
.couple-mini{display:flex;gap:9px;flex-wrap:wrap;align-items:center;font-size:12px;font-weight:750;margin-top:6px;font-variant-numeric:tabular-nums}
.person-a{color:#237465}.person-b{color:#b56c53}
.couple-gap-cat{display:grid;grid-template-columns:minmax(165px,1fr) minmax(90px,2fr) 50px;gap:13px;align-items:center;border-top:1px solid var(--line);padding:12px 0;font-size:12px}
.couple-gap-cat strong{text-align:right;font-variant-numeric:tabular-nums}
.couple-gap-track{height:9px;border-radius:50px;background:#e7ede9;overflow:hidden}
.couple-gap-fill{height:100%;border-radius:50px;background:linear-gradient(90deg,#e7bd7b,#cb7862)}
.couple-question-diff{display:flex;gap:11px;align-items:start;padding:13px 0;border-top:1px solid var(--line)}
.couple-q-main{min-width:0;flex:1}
.couple-q-main strong{display:block;font-size:13px;font-weight:720;line-height:1.5}
.couple-q-category{text-transform:uppercase;font-size:11px;letter-spacing:.6px;color:var(--muted);margin-bottom:4px}
.couple-diff-pill{font-size:11px;padding:3px 8px;color:#924a35;background:#fcf1e9;border-radius:99px}
.couple-dialogue{background:#edf5f0;border:1px solid #d7e6db;padding:18px;border-radius:14px;margin:18px 0}
.couple-dialogue strong{color:var(--forest)}.couple-dialogue p{font-size:13px;color:#526960;line-height:1.65;margin:6px 0}.couple-dialogue em{font-size:12px;color:#306f5a}
@media(max-width:860px){.count-choices{grid-template-columns:1fr 1fr}.count-choice{min-height:155px}}
@media(max-width:760px){.count-choices{grid-template-columns:1fr}.count-choice{min-height:120px}.couple-results{padding:17px}.couple-results h2{font-size:27px}.couple-summary-grid{grid-template-columns:1fr}.couple-sub{padding:14px;margin:7px 0}.couple-gap-cat{grid-template-columns:minmax(95px,1.15fr) minmax(65px,1fr) 41px;gap:8px;font-size:11px}}
@media print{.couple-results{break-before:page}.couple-summary-grid{grid-template-columns:1fr 1fr}.couple-question-diff{break-inside:avoid}}

.couple-happiness{border-radius:14px;border:1px solid #e1e9e2;background:#f7faf7;padding:14px 17px;margin:12px 0 20px}.couple-happiness>strong{font-size:13px}.couple-happiness .couple-mini{gap:15px;margin-top:10px}

/* v3.2 — stable bilingual layout: labels change, nav and cards stay put. */
@media (min-width:761px) {
  .header-inner {display:grid;grid-template-columns:minmax(260px,1fr) auto minmax(260px,1fr);column-gap:16px;justify-content:initial}
  .brand {justify-self:start;width:260px}
  .top-nav {justify-self:center;display:grid;grid-template-columns:repeat(3,100px);gap:4px;min-width:0}
  .nav-link {width:100%;padding:8px 6px;text-align:center;white-space:nowrap}
  .header-tools {justify-self:end}
  .hero {min-height:525px}
  .intro-strip {min-height:82px}
  .intro-pill {min-height:76px}
  .count-choice {min-height:226px}
}
@media (min-width:761px) and (max-width:1020px) {
  .header-inner {grid-template-columns:minmax(225px,1fr) auto minmax(96px,1fr);column-gap:10px}
  .brand {width:225px}
  .top-nav {grid-template-columns:repeat(3,86px)}
}
.count-choice strong {line-height:1.3;min-height:2.6em}
.count-choice .choice-status {display:block;min-height:1.65em;margin-top:auto;visibility:visible}
.count-choice .choice-status[aria-hidden="true"] {visibility:hidden}
.intro-pill {min-width:0}
.brand-wordmark {display:inline-block;white-space:nowrap}
@media (max-width:760px) {
  .site-header {height:112px}
  .header-inner {display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:46px 38px;gap:2px 8px;align-content:center;justify-content:normal}
  .brand {grid-column:1;grid-row:1;justify-self:start;min-width:0;width:auto;font-size:19px}
  .header-tools {grid-column:2;grid-row:1;justify-self:end;min-width:0}
  .top-nav {grid-column:1 / -1;grid-row:2;justify-self:stretch;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;width:100%;height:38px;min-width:0}
  .nav-link {width:100%;padding:6px;text-align:center;white-space:nowrap;font-size:12px}
  .chooser-section {scroll-margin-top:132px}
  #setup {scroll-margin-top:132px}
  .count-choice {min-height:196px}
  .intro-pill {min-height:68px}
}
@media (max-width:490px) {.brand {font-size:18px}.top-nav .nav-link {font-size:12px}}
@media (prefers-reduced-motion:reduce) {.count-choice {transition:none}}
/* Avoid language-driven height changes or hover jumps in the three mode tiles. */
@media (min-width:761px){.count-choice{min-height:252px}}
@media (max-width:760px){.count-choice{min-height:230px}}
.count-choice:hover{transform:none}
@media (min-width:981px){.header-right{flex:0 0 210px;width:210px}}
@media (max-width:360px){.hero{min-height:856px}}

/* v18: unified bilingual wordmark sizing */
.brand.brand-en .brand-wordmark{font-size:inherit;letter-spacing:inherit}
@media (min-width:761px){.brand-wordmark{font-size:20px;letter-spacing:-.9px}}
@media (max-width:760px){.brand-wordmark{font-size:18px;letter-spacing:-.75px}}
@media (max-width:490px){.brand-wordmark{font-size:16px;letter-spacing:-.6px}}
@media (max-width:350px){.brand-wordmark{font-size:14px;letter-spacing:-.45px}}

/* v9 — focused six-screen onboarding: one decision at a time. */
.in-wizard .top-nav{display:none!important}
.in-wizard .site-footer{display:none!important}
.in-wizard #app{min-height:calc(100svh - 91px)}
.in-wizard .site-header{background:var(--bg)}
.wizard-welcome{min-height:calc(100svh - 118px);padding:38px 0 48px;align-content:center}
.wizard-welcome h1{max-width:690px}
.wizard-content{width:min(100%,940px);margin:0 auto;min-height:calc(100svh - 91px);padding:52px 0 56px;animation:wizard-appear .24s ease both}
@keyframes wizard-appear{from{opacity:.65;transform:translateY(7px)}to{opacity:1;transform:translateY(0)}}
.wizard-head{margin-bottom:28px}
.wizard-head h1{line-height:1.16;max-width:850px}
.wizard-head h1:focus{outline:none}
.wizard-head .section-subtitle{font-size:14px;max-width:720px;margin-top:11px}
.wizard-progress{display:flex;gap:20px;align-items:center;margin-bottom:24px;color:var(--green);font-size:11px;font-weight:850;letter-spacing:1.1px}
.wizard-track{height:5px;max-width:210px;flex:1;overflow:hidden;border-radius:50px;background:#e2eae3}
.wizard-track span{display:block;height:100%;background:#397e6a;border-radius:50px;transition:width .25s ease}
.wizard-choices{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px}
.wizard-choices .count-choice{min-height:234px;padding:25px 23px 22px;border-radius:17px;position:relative}
.wizard-choices .count-choice>strong{font-size:16px;line-height:1.3}
.wizard-choices .count-choice>span:nth-of-type(2){font-size:12px;line-height:1.6;color:var(--muted)}
.wizard-choices .count-icon{font-size:25px;min-height:37px}
.wizard-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:26px 0 0}
.wizard-controls .btn{min-width:126px}
.wizard-control-right{display:flex;align-items:center;gap:16px}
.wizard-hint{font-size:12px;color:var(--muted)}
.wizard-single-card{max-width:780px;padding:31px}
.wizard-single-card h3{font-size:20px}
.wizard-single-card p{font-size:13px;margin-bottom:24px}
.wizard-profile-pair .profile-card{padding:26px;min-width:0}
.wizard-profile-pair .profile-head{margin-bottom:24px}
.wizard-fields{display:grid;gap:19px}
.wizard-content .field label{font-size:12px}
.wizard-content .field select,.wizard-content .field input{font-size:14px;min-height:47px}
.wizard-content .field-hint{font-size:11px}
.wizard-profiles .setup-grid.single-setup{grid-template-columns:minmax(0,580px)}
.wizard-profiles .profile-card{min-height:0}
.wizard-length-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wizard-length{cursor:pointer;color:var(--ink);display:flex;align-items:center;gap:19px;text-align:left;padding:30px 24px;border:2px solid var(--line);transition:border-color .2s,background .2s,transform .2s}
.wizard-length:hover{border-color:#82aa9a;transform:translateY(-2px)}
.wizard-length.chosen{border-color:#347e6f;background:#f0f7f1}
.wizard-length-count{font-family:Georgia,"Times New Roman",serif;font-size:66px;line-height:1;color:var(--forest)}
.wizard-length-copy{display:grid;gap:8px}
.wizard-length-copy strong{font-size:16px}
.wizard-length-copy span{color:var(--muted);line-height:1.55;font-size:12px}
.wizard-length-indicator{margin-left:auto;align-self:flex-start;font-size:24px;color:#367a66}
.wizard-guide-intro{padding:23px 26px 24px;border:1px solid #dfe8e1;border-radius:16px;background:#fff;margin-bottom:21px}
.wizard-scale{display:flex;justify-content:space-between;gap:10px;margin-bottom:12px;font-size:12px;font-weight:700;color:#426557}
.wizard-scale span:nth-child(2){text-align:center}
.wizard-scale span:last-child{text-align:right}
.wizard-scale-gradient{height:14px;border-radius:99px;background:linear-gradient(90deg,#b64b54,#c86957 16.67%,#d69b5d 33.33%,#ddba69 50%,#84b296 66.67%,#408f76 83.33%,#236d5d)}
.wizard-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wizard-info-card{padding:22px 22px 24px;display:grid;grid-template-columns:36px 1fr;gap:12px;box-shadow:none}
.wizard-info-number{color:#458272;font-size:11px;font-weight:900;letter-spacing:1px;padding-top:3px}
.wizard-info-card h2{font-size:15px;margin:0 0 9px;color:var(--forest)}
.wizard-info-card p{font-size:12px;line-height:1.75;color:var(--muted);margin:0}
.wizard-couple-note{margin-top:16px}
.wizard-start-footer{border:1px solid #dce8df;border-radius:16px;background:#edf5ef;padding:22px 25px;display:flex;justify-content:space-between;align-items:center;gap:22px;margin-top:20px}
.wizard-start-footer p{margin:8px 0 0;font-size:12px;color:#587168}
.wizard-start-footer .btn-start{padding:15px 24px;font-size:14px}
.wizard-guide .wizard-controls{margin-top:16px}
@media(max-width:980px){.wizard-choices .count-choice{padding:20px 17px}.wizard-choices .count-choice>strong{font-size:14px}}
@media(max-width:760px){
 .in-wizard #app{min-height:calc(100svh - 69px)}
 .wizard-welcome{min-height:calc(100svh - 99px);padding:35px 0 50px}
 .wizard-content{padding:32px 0 48px;min-height:calc(100svh - 69px)}
 .wizard-progress{margin-bottom:20px}
 .wizard-head{margin-bottom:22px}
 .wizard-head .section-subtitle{font-size:12px}
 .wizard-choices{grid-template-columns:1fr;gap:11px}
 .wizard-choices .count-choice{min-height:0;padding:18px 20px;gap:5px}
 .wizard-choices .count-icon{min-height:0;font-size:20px}
 .wizard-choices .count-choice>strong{font-size:15px}
 .wizard-profile-pair{grid-template-columns:1fr}
 .wizard-profile-pair .profile-card{padding:22px}
 .wizard-length-choices{grid-template-columns:1fr;gap:12px}
 .wizard-length{padding:19px;gap:16px}
 .wizard-length-count{font-size:54px}
 .wizard-info-grid{grid-template-columns:1fr}
 .wizard-info-card{padding:18px}
 .wizard-controls{margin-top:24px}
 .wizard-single-card{padding:23px}
 .wizard-start-footer{flex-direction:column;align-items:stretch;padding:21px}
 .wizard-start-footer .btn{width:100%}
}
@media(max-width:380px){.wizard-controls .btn{min-width:0;padding:11px 15px}.wizard-scale{font-size:11px}.wizard-welcome .hero-actions{gap:8px}}
@media(prefers-reduced-motion:reduce){.wizard-content{animation:none}.wizard-track span{transition:none}}

/* Keep the onboarding header compact and balanced after hiding quiz navigation. */
.in-wizard .header-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:16px}
.in-wizard .header-tools{grid-column:2;justify-self:end}
.in-wizard .brand{grid-column:1;justify-self:start}
@media(max-width:760px){
 .in-wizard .site-header{height:74px}
 .in-wizard .header-inner{grid-template-rows:46px;align-content:center;gap:8px}
 .in-wizard .brand,.in-wizard .header-tools{grid-row:1}
 .in-wizard #app{min-height:calc(100svh - 74px)}
 .wizard-welcome{min-height:calc(100svh - 74px)}
 .wizard-content{min-height:calc(100svh - 74px)}
}

/* v10 — consistent, responsive onboarding and designed dropdown menus. */
.wizard-content{display:block!important;min-width:0;border:0;background:none;box-shadow:none;transform:none;}
.wizard-head,.wizard-length-choices,.wizard-controls{width:100%;min-width:0;max-width:100%}
.wizard-length-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch;gap:18px}
.wizard-length-choices .wizard-length{width:100%;min-width:0;min-height:172px;box-sizing:border-box;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;padding:26px 22px;text-align:left;}
.wizard-length-choices .wizard-length-count{font-size:60px;white-space:nowrap}
.wizard-length-choices .wizard-length-copy{min-width:0;max-width:100%;overflow-wrap:anywhere;}
.wizard-length-choices .wizard-length-copy strong{display:block;font-size:15px;}
.wizard-length-choices .wizard-length-indicator{margin:0;align-self:start;font-size:21px;}
.wizard-page-length .wizard-controls{clear:both;position:static;justify-content:space-between;margin-top:26px;}
.wizard-guide .wizard-controls,.wizard-page-guide .wizard-controls{margin-top:16px}
.wizard-honesty{grid-column:1 / -1;background:#e9f3ec;border:1px solid #bed6c8;align-items:start;padding:25px 27px;}
.wizard-honesty h2{font-size:17px;color:#174b40;}
.wizard-honesty p{font-size:13px;line-height:1.85;color:#405e50;}
.wizard-honesty .wizard-info-number{font-size:18px;color:#2c846b;}
.wizard-welcome .hero-actions{gap:12px}
.custom-select{position:relative;width:100%;min-width:0;font-size:14px;}
.custom-select-trigger{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:49px;border:1px solid #dbe6df;border-radius:11px;background:#fbfcfa;color:var(--ink);padding:12px 14px;text-align:left;font:inherit;font-size:14px;gap:12px;transition:border-color .16s,box-shadow .16s,background .16s;}
.custom-select-trigger:hover{background:#fff;border-color:#93b7a6;}
.custom-select-trigger:focus-visible,.custom-select.open .custom-select-trigger{outline:none;border-color:#397c6c;box-shadow:0 0 0 3px #377c6b20;background:#fff;}
.custom-current{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.custom-chevron{width:8px;height:8px;flex:none;border-right:1.8px solid #47665a;border-bottom:1.8px solid #47665a;transform:rotate(45deg) translateY(-2px);transition:transform .14s;}
.custom-select.open .custom-chevron{transform:rotate(225deg) translate(-2px,-2px);}
.custom-select-menu{position:absolute;z-index:50;top:calc(100% + 7px);left:0;right:0;max-height:260px;overflow-y:auto;padding:6px;border-radius:12px;border:1px solid #d8e6dd;background:#fff;box-shadow:0 14px 36px #173d2e24;}
.custom-select-menu[hidden]{display:none!important;}
.custom-option{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;border:0;border-radius:8px;padding:11px 12px;background:transparent;color:#28443b;text-align:left;font:inherit;font-size:13px;min-height:40px;}
.custom-option:hover,.custom-option:focus-visible{background:#ecf5ef;outline:none;}
.custom-option.active{background:#e9f4ec;color:#176852;font-weight:720;}
.custom-check{opacity:0;color:#25765a;font-size:15px;font-weight:800;}
.custom-option.active .custom-check{opacity:1;}
.wizard-content .profile-card,.wizard-single-card{overflow:visible;}
@media(max-width:760px){
 .wizard-length-choices{grid-template-columns:1fr;gap:12px;}
 .wizard-length-choices .wizard-length{min-height:128px;gap:14px;padding:20px 16px;}
 .wizard-length-choices .wizard-length-count{font-size:53px;}
 .wizard-honesty{padding:21px 20px;}
 .wizard-controls{align-items:center;gap:10px;}
 .wizard-control-right{margin-left:auto;}
 .custom-select-menu{max-height:220px;}
}
@media(max-width:360px){.wizard-length-choices .wizard-length{gap:10px;padding:16px 12px}.wizard-length-choices .wizard-length-count{font-size:44px}.wizard-length-choices .wizard-length-copy strong{font-size:13px}}

/* v11 refinements */
.wizard-welcome.hero p{margin-top:32px;}
.wizard-honesty .wizard-info-number{display:grid;place-items:center;align-self:center;justify-self:center;width:36px;min-height:100%;padding-top:0;}
.wizard-honesty{align-items:center;}
.wizard-honesty h2{margin-bottom:8px;}


/* v13 tweaks */
.header-right{display:none!important}
.hero-desc.lowered{margin-top:28px}
.hero-card .quote{margin-top:42px}
.count-choice,.wizard-length{transform:translateZ(0)}
.count-choice.chosen,.wizard-length.chosen{transform:none}
.count-choice.just-chosen,.wizard-length.just-chosen{animation:choiceShake .34s ease}
@keyframes choiceShake{0%{transform:translateX(0)}20%{transform:translateX(-3px)}40%{transform:translateX(3px)}60%{transform:translateX(-2px)}80%{transform:translateX(2px)}100%{transform:translateX(0)}}
.wizard-choices .count-choice,.wizard-length-choices .wizard-length{will-change:transform}
.choice-status{display:block;min-height:1.65em}
.wizard-single-card .setup-grid.single-style-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}
.wizard-single-card .setup-grid.single-style-grid .field:first-child{grid-column:1 / -1}
.wizard-single-card .setup-grid.single-style-grid .field .field-hint{display:none}
.wizard-profile-pair .field-hint, .wizard-single-card .field-hint:empty{display:none}
.author-credit{margin-top:18px;border:1px solid #dce8df;border-radius:18px;background:#edf5ef;padding:18px 20px;display:flex;align-items:center;gap:16px}
.author-heart{width:48px;height:48px;border-radius:999px;background:#dceee5;color:#2f7b69;display:grid;place-items:center;font-size:20px;font-weight:700;flex:none}
.author-credit strong{display:block;color:var(--ink);font-size:15px}
.author-credit span{display:inline-block;margin-top:3px;padding:4px 9px;border-radius:999px;background:#dfeee7;color:#236856;font-size:11px;font-weight:800;letter-spacing:.08em}
.author-credit p{margin:10px 0 0;color:#5b7269;font-size:12px;line-height:1.65}
@media(max-width:760px){.wizard-single-card .setup-grid.single-style-grid{grid-template-columns:1fr}.author-credit{padding:16px;align-items:flex-start}.author-heart{width:42px;height:42px}}

.footer-copy{display:flex;flex-direction:column;gap:6px}.footer-credit{font-size:11px;color:#6f847a;letter-spacing:.03em}


/* v14: stable card selection, minimalist author footer */
/* The step is no longer rebuilt when a choice is selected: no scroll anchoring or focus jump. */
.wizard-choices .count-choice:hover,
.wizard-length-choices .wizard-length:hover{transform:none}
.wizard-choices .count-choice,.wizard-length-choices .wizard-length{transition:border-color .2s,background-color .2s,box-shadow .2s}
.wizard-choices .count-choice.just-chosen,.wizard-length-choices .wizard-length.just-chosen{animation:choiceShake .32s ease-out}
@media(prefers-reduced-motion:reduce){.wizard-choices .count-choice.just-chosen,.wizard-length-choices .wizard-length.just-chosen{animation:none}}
/* Preserve a balanced appearance with the visible footer below the onboarding screens. */
.in-wizard .site-footer{display:block!important}
.site-footer{background:#fff;border-top:1px solid #e3e9e4;margin-top:36px}
.footer-inner{min-height:0;gap:30px;display:flex;align-items:center;justify-content:space-between;padding:31px 0 34px}
.footer-copy{display:grid;gap:14px;min-width:0}
.footer-identity{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.footer-identity strong{font-size:15px;font-weight:800;color:var(--forest);letter-spacing:-.025em;margin:0}
.footer-identity #footer-tagline{font-size:12px;color:#74847c}
.footer-attribution{display:flex;gap:12px;align-items:center;flex-wrap:wrap;color:#697972;font-size:12px}
.footer-attribution #footer-credit{font-weight:650;color:#465c53}
.footer-attribution .footer-year{border-left:1px solid #d8e2db;padding-left:12px;font-variant-numeric:tabular-nums}
.footer-links{display:flex;justify-content:flex-end;gap:4px 15px;align-items:center}
.footer-links button{font-size:12px;font-weight:600;color:#425b51;padding:10px 6px;border-radius:7px}
.footer-links button:hover,.footer-links button:focus-visible{color:var(--green);text-decoration:none;background:#eff5f1}
.footer-links #footer-reset{color:#795a54}
@media(max-width:760px){
 .footer-inner{padding:24px 0 28px;gap:18px;align-items:flex-start}
 .footer-links{justify-content:flex-start;gap:6px 9px}
 .footer-links button{padding:8px 3px}
 .footer-identity{gap:5px 11px}
 .footer-attribution{gap:8px}
}
@media print{.site-footer{display:none!important}}


/* V15: directional onboarding transitions, centered authorship, raised hero quote */
.wizard-slide-shell{position:relative;overflow:clip;isolation:isolate}
.wizard-slide-shell>.wizard-slide-pane{position:absolute;top:0;left:0;right:0;width:100%;margin-left:auto;margin-right:auto;animation:none!important;will-change:transform,opacity;pointer-events:none}
.wizard-slide-shell>.wizard-slide-pane:last-child{pointer-events:none}
.hero-card .quote{margin-top:17px;margin-bottom:32px}
@media(max-width:760px){.hero-card .quote{margin-top:7px;margin-bottom:23px}}
.footer-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:16px;align-items:center}
.footer-attribution{grid-column:2;grid-row:1;justify-content:center;white-space:nowrap}
.footer-identity{grid-column:1;grid-row:1;min-width:0}
.footer-links{grid-column:3;grid-row:1;justify-content:flex-end}
@media(max-width:980px){.footer-inner{grid-template-columns:1fr;justify-items:center;text-align:center;gap:13px}.footer-identity,.footer-attribution,.footer-links{grid-column:1;grid-row:auto;justify-content:center}.footer-attribution{white-space:normal}.footer-identity{justify-content:center}}
@media(prefers-reduced-motion:reduce){.wizard-slide-pane{animation:none!important}}


/* V16: preserve actual page width throughout directional wizard transitions.
   v15's absolute-positioned pane was stretched to 100% of the 1180px container,
   and snapped down to its 940px width at animation finish. */
.wizard-slide-shell>.wizard-slide-pane.wizard-content{
  width:min(100%,940px);
  max-width:940px;
  left:0;
  right:0;
  margin-inline:auto;
}
.wizard-slide-shell>.wizard-slide-pane.wizard-welcome{
  width:100%;
  max-width:none;
}
/* The wizard's original appear animation must not restart when the sliding
   element returns to normal document flow after its directional transition. */
.in-wizard .wizard-content{animation:none!important}
/* The credit is equal in weight and color to the year. */
.footer-attribution #footer-credit,
.footer-attribution .footer-year{
  color:#697972;
  font-weight:400;
}


/* v17: stable alignment, two balanced hearts, refined step numerals */
/* Match the attachment-step controls to the width of the single attachment card.
   Couple mode continues using the full-width controls below its two cards. */
.wizard-page-attachment .wizard-single-card + .wizard-controls {
  width:100%;
  max-width:780px;
  margin-left:0;
  margin-right:0;
}
/* A slightly stronger visual hierarchy with serif step numerals. */
.wizard-progress{
  gap:22px;
  min-height:40px;
  margin-bottom:25px;
}
.wizard-step-meta{
  display:inline-flex;
  align-items:baseline;
  gap:11px;
  white-space:nowrap;
  flex:none;
}
.wizard-step-word{
  color:var(--green);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.wizard-step-numbers{
  display:inline-flex;
  align-items:baseline;
  gap:6px;
  color:var(--forest);
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  letter-spacing:-.03em;
  font-variant-numeric:lining-nums tabular-nums;
}
.wizard-step-current{font-size:30px;line-height:1;font-weight:400;}
.wizard-step-slash{font-size:18px;color:#91ada1;}
.wizard-step-total{font-size:19px;line-height:1;color:#678779;}
.wizard-info-number:not(.wizard-honesty-heart){
  font-family:Georgia,'Times New Roman',serif;
  font-size:25px;
  font-weight:400;
  line-height:1;
  letter-spacing:-.045em;
  color:#397e6a;
  font-variant-numeric:lining-nums tabular-nums;
  padding-top:0;
}
.wizard-honesty{
  grid-template-columns:38px minmax(0,1fr) 38px;
  align-items:center;
  column-gap:16px;
}
.wizard-honesty .wizard-honesty-heart{
  display:flex;
  width:38px;
  height:38px;
  min-height:0;
  align-items:center;
  justify-content:center;
  align-self:center;
  justify-self:center;
  padding:0;
  font-size:19px;
  color:#2c846b;
  line-height:1;
}
@media(max-width:760px){
  .wizard-progress{gap:13px;min-height:36px;margin-bottom:20px;}
  .wizard-step-meta{gap:7px;}
  .wizard-step-word{font-size:11px;letter-spacing:.1em;}
  .wizard-step-current{font-size:27px;}
  .wizard-step-total{font-size:18px;}
  .wizard-track{max-width:185px;min-width:44px;}
  .wizard-honesty{grid-template-columns:25px minmax(0,1fr) 25px;column-gap:8px;padding:20px 12px;}
  .wizard-honesty .wizard-honesty-heart{width:25px;height:25px;font-size:17px;}
  .wizard-info-number:not(.wizard-honesty-heart){font-size:23px;}
}
@media(max-width:360px){
  .wizard-step-current{font-size:25px;}
  .wizard-step-word{font-size:11px;}
  .wizard-honesty{grid-template-columns:20px minmax(0,1fr) 20px;column-gap:6px;padding:18px 10px;}
  .wizard-honesty .wizard-honesty-heart{width:20px;height:20px;font-size:15px;}
}

/* On narrow screens, the symmetrical hearts frame the heading while the
   explanation takes the full usable card width. */
@media(max-width:760px){
 .wizard-honesty{position:relative;display:block;padding:22px 20px!important;}
 .wizard-honesty .wizard-honesty-heart{position:absolute;top:21px;left:16px;width:23px;height:23px;font-size:17px;}
 .wizard-honesty .wizard-honesty-heart:last-child{left:auto;right:16px;}
 .wizard-honesty h2{text-align:center;padding:0 22px;line-height:1.4;margin:0 0 14px;}
 .wizard-honesty p{margin:0;}
}
@media(max-width:360px){
 .wizard-honesty{padding:21px 16px!important;}
 .wizard-honesty .wizard-honesty-heart{left:10px;font-size:16px;}
 .wizard-honesty .wizard-honesty-heart:last-child{left:auto;right:10px;}
 .wizard-honesty h2{padding:0 21px;}
}

/* v18 preview validation: both language wordmarks use identical font sizes. */
@media (min-width:761px){.brand .brand-wordmark,.brand.brand-en .brand-wordmark{font-size:20px;letter-spacing:-.9px}}
@media (max-width:760px){.brand .brand-wordmark,.brand.brand-en .brand-wordmark{font-size:18px;letter-spacing:-.75px}}
@media (max-width:490px){.brand .brand-wordmark,.brand.brand-en .brand-wordmark{font-size:16px;letter-spacing:-.6px}}
@media (max-width:350px){.brand .brand-wordmark,.brand.brand-en .brand-wordmark{font-size:14px;letter-spacing:-.45px}}

/* v19: Focused, one-question study screen.
   The category list stays left, completion rises at right, and only the
   central stage animates. Never scale the content during navigation. */
.survey-screen{padding:22px 0 54px;min-width:0}
.survey-screen-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px;min-height:42px}
.survey-screen-top .step-tag{letter-spacing:.12em;font-size:11px}
.survey-new-layout{display:grid;grid-template-columns:196px minmax(0,1fr) 118px;gap:18px;align-items:start;margin-top:0}
.survey-new-layout .survey-sidebar{position:sticky;top:97px;max-height:calc(100svh - 114px);overflow:auto;scrollbar-width:thin;min-width:0;padding:12px 9px;box-shadow:0 10px 25px #183f3b08;border-radius:17px}
.survey-new-layout .survey-sidebar .side-label{padding:0 3px;margin:6px 9px 10px;font-size:11px;letter-spacing:.08em}
.survey-new-layout .side-item{padding:9px 9px;border-radius:9px;gap:7px;font-size:11px;line-height:1.35;min-width:0;text-align:left}
.survey-new-layout .side-item span:first-child{width:15px;flex:0 0 15px;font-size:11px}
.survey-new-layout .side-item .side-count{font-size:11px;margin-left:auto;flex:0 0 auto}
.survey-stage-viewport{position:relative;min-width:0;isolation:isolate}
.question-stage{width:100%;min-width:0;min-height:680px;display:flex;flex-direction:column;gap:18px;transform:none;scale:1}
.survey-animating{overflow:hidden;contain:layout;}
.survey-animating>.survey-flying.question-stage{position:absolute;inset:0 auto auto 0;width:100%;height:auto;margin:0;pointer-events:none;will-change:transform,opacity}
.survey-chapter-head{padding:13px 6px 0}
.survey-eyebrow{display:block;font-size:11px;font-weight:850;letter-spacing:.14em;color:var(--green);text-transform:uppercase}
.survey-eyebrow span{font-family:Georgia,serif;font-size:14px;letter-spacing:0;margin-left:7px;color:var(--forest)}
.survey-chapter-head h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(29px,3.4vw,42px);letter-spacing:-1.25px;font-weight:400;line-height:1.18;margin:8px 0 14px;color:var(--ink)}
.survey-chapter-underline{width:62px;height:3px;border-radius:30px;background:#478b79;margin-bottom:21px}
.survey-question-heading{display:flex;justify-content:space-between;align-items:center;gap:10px;color:#60766d;font-size:11px;font-weight:720;letter-spacing:.07em;text-transform:uppercase;padding:0 1px 11px}
.survey-question-heading strong{font-family:Georgia,serif;font-size:22px;letter-spacing:-.5px;font-weight:400;color:var(--forest);padding-left:4px}
.survey-dot-strip{display:flex;flex-wrap:wrap;align-items:center;gap:7px;min-height:34px;padding:4px 1px 6px}
.survey-dot{border:1px solid #cddbd0;border-radius:999px;background:#edf0eb;padding:0;width:18px;height:18px;display:grid;place-items:center;transition:border-color .17s,background .17s;position:relative;flex:0 0 18px}
.survey-dot span{display:block;width:9px;height:9px;background:#c6d5c9;border-radius:999px;transition:background .17s;}
.survey-dot.done{border-color:#468f77;background:#deefe5}
.survey-dot.done span{background:#357d68}
.survey-dot.partial{border-color:#8ea9a0;background:#e8efec}
.survey-dot.partial span{background:linear-gradient(90deg,#3e856e 50%,#b6c9be 50%)}
.survey-dot.current{box-shadow:0 0 0 3px #eaf4ee;border-color:#246c59}
.survey-dot:hover{border-color:#2d7866}
.survey-dot.final{cursor:default}
.focused-question.question-card{padding:30px 27px 26px;min-height:356px;margin:0;box-shadow:0 14px 36px #173c2f0b;border:1px solid #e1e9e2;border-radius:20px}
.focused-question .q-header{align-items:flex-start;gap:14px;margin:0 0 25px}
.focused-question .q-index{font-size:13px;font-family:Georgia,serif;border-radius:9px;padding:8px 10px;min-width:36px;text-align:center}
.focused-question .q-text{font-size:clamp(18px,2vw,24px);line-height:1.42;margin:3px 0 11px;font-weight:600;letter-spacing:-.3px}
.focused-question .q-anchors{margin-top:12px;font-size:11px;gap:8px 17px}
.focused-question .rating-col{border:1px solid #e5e9e4;background:#fafbf8;padding:14px;border-radius:13px}
.focused-question .ratings-grid{align-items:stretch;gap:12px}
.focused-question .ratings-grid.single-profile{grid-template-columns:minmax(0,1fr)}
.survey-notes.surface{box-shadow:none;border:1px solid #e3e9e0;border-radius:13px;background:#fbfcf9;margin:0;overflow:hidden}
.survey-notes summary{cursor:pointer;padding:12px 18px;font-size:12px;font-weight:700;color:#507165;display:flex;justify-content:space-between;align-items:center;list-style:none}
.survey-notes summary::-webkit-details-marker{display:none}
.survey-notes summary span{font-size:19px;font-weight:400}
.survey-notes[open] summary span{transform:rotate(45deg)}
.survey-notes-body{padding:0 18px 18px}
.survey-notes .section-subtitle{font-size:11px;margin:0 0 12px}
.survey-notes .field textarea{min-height:74px}
.survey-question-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:auto;min-height:58px}
.survey-question-controls .btn{min-width:136px;padding:14px 18px;border-radius:11px}
.survey-progress-sidebar{position:sticky;top:97px;border-radius:18px;padding:20px 8px 18px;box-shadow:0 10px 25px #183f3b08;min-width:0;text-align:center;display:flex;align-items:center;flex-direction:column;gap:18px}
.survey-progress-caption{font-size:11px;line-height:1.45;color:#557469;font-weight:850;letter-spacing:.05em;max-width:90px}
.survey-progress-vertical{display:flex;justify-content:center;gap:14px;width:100%;align-items:start}
.survey-vprofile{display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;width:50px}
.survey-vtrack{height:220px;width:25px;position:relative;overflow:hidden;border-radius:99px;background:#e7eee8;border:1px solid #d7e4d9;display:flex;align-items:flex-end;justify-content:center;flex:0 0 auto}
.survey-vfill{position:absolute;bottom:0;left:0;right:0;width:100%;height:0%;background:linear-gradient(0deg,#1a6658,#5eaf91);border-radius:99px;transition:height .48s cubic-bezier(.2,.8,.2,1)}
.survey-vprofile.b .survey-vfill{background:linear-gradient(0deg,#ba795d,#e4b192)}
.survey-vticks{position:absolute;inset:0 3px;display:flex;flex-direction:column;justify-content:space-evenly;pointer-events:none}
.survey-vticks i{height:1px;background:#fff7;width:100%;display:block}
.survey-vpercent{font-family:Georgia,serif;color:var(--forest);font-size:21px;line-height:1.1;font-weight:400}
.survey-vname{font-size:11px;font-weight:760;color:#475c53;white-space:normal;overflow-wrap:anywhere;max-width:100%;min-width:0;line-height:1.3}
.survey-vcount{font-size:11px;color:#83948b;font-variant-numeric:tabular-nums;white-space:nowrap}
.question-stage .last-score-card{margin:0;padding:24px}
.question-stage .last-personal{margin:16px 0}
.question-stage .attachment-note{margin-top:0}
.question-stage:has(.last-score-card){min-height:690px}
@media(max-width:1060px){
 .survey-new-layout{grid-template-columns:170px minmax(0,1fr) 101px;gap:12px}
 .survey-progress-sidebar{padding-inline:5px}
 .survey-progress-vertical{gap:4px}
 .focused-question.question-card{padding:21px 17px}
 .focused-question .q-text{font-size:19px}
 .survey-vprofile{width:46px}
}
@media(max-width:760px){
 .survey-screen{padding-top:18px}
 .survey-screen-top{margin-bottom:12px}
 .survey-new-layout{display:grid;grid-template-columns:minmax(0,1fr) 94px;grid-template-areas:'cats progress' 'stage stage';gap:13px 9px}
 .survey-new-layout .survey-sidebar{grid-area:cats;display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;max-height:none;padding:8px;position:relative;top:auto;min-height:94px;scrollbar-width:thin;white-space:nowrap}
 .survey-new-layout .survey-sidebar .side-label{display:none}
 .survey-new-layout .side-item{width:auto;min-width:max-content;border:1px solid #e4e9e2;padding:9px 11px;font-size:11px;display:flex;align-items:center;gap:6px}
 .survey-new-layout .side-item span:first-child{display:none}
 .survey-new-layout .side-item .side-count{font-size:11px}
 .survey-stage-viewport{grid-area:stage}
 .survey-progress-sidebar{grid-area:progress;position:relative;top:auto;align-self:stretch;padding:8px 4px;gap:4px;justify-content:center;min-height:94px}
 .survey-progress-caption{font-size:11px;max-width:none;white-space:normal}
 .survey-progress-vertical{gap:5px}
 .survey-vprofile{width:37px;gap:3px}
 .survey-vtrack{height:36px;width:12px}
 .survey-vticks{display:none}
 .survey-vpercent{font-size:14px}
 .survey-vname{font-size:11px;max-width:100%}
 .survey-vcount{font-size:11px}
 .question-stage{min-height:640px;gap:16px}
 .question-stage:has(.ratings-grid:not(.single-profile)){min-height:845px}
 .question-stage:has(.last-score-card){min-height:860px}
 .survey-chapter-head{padding:11px 3px 0}
 .survey-chapter-head h1{font-size:33px;margin:8px 0 12px}
 .survey-dot-strip{gap:6px}
 .survey-dot{width:17px;height:17px;flex-basis:17px}
 .focused-question.question-card{padding:19px 16px;min-height:0}
 .focused-question .q-text{font-size:19px}
 .focused-question .q-header{gap:10px}
 .focused-question .ratings-grid{grid-template-columns:1fr;gap:12px}
 .focused-question .rating-col{padding:11px}
 .survey-question-controls .btn{min-width:0;flex:1;padding:13px 10px;font-size:12px;white-space:normal}
 .question-stage .last-score-card{padding:20px 14px}
}
@media(max-width:390px){
 .survey-screen-top .step-tag{font-size:11px}
 .survey-screen-top .survey-quick-switch .seg{padding:9px 8px;font-size:11px}
 .survey-new-layout{grid-template-columns:minmax(0,1fr) 84px}
 .focused-question .q-text{font-size:17px}
 .focused-question .q-anchors{font-size:11px}
 .survey-chapter-head h1{font-size:30px}
}
@media(prefers-reduced-motion:reduce){
 .survey-vfill,.survey-dot,.survey-dot span{transition:none!important}
 .survey-animating>.survey-flying{animation:none!important}
}
/* Final spacing refinement: navigation follows the one question directly. */
.question-stage{gap:12px}
.survey-chapter-head{padding-top:6px}
.survey-chapter-head h1{margin-top:5px;margin-bottom:8px}
.survey-chapter-underline{margin-bottom:13px}
.survey-question-heading{padding-bottom:4px}
.survey-dot-strip{min-height:25px;padding:0 1px 2px}
.focused-question.question-card{padding-top:23px;padding-bottom:20px;min-height:0}
.focused-question .q-header{margin-bottom:17px}
.focused-question .q-text{margin-bottom:7px}
.focused-question .q-anchors{margin-top:8px}
.focused-question .rating-col{padding:11px}
.survey-question-controls{margin-top:3px}
.survey-notes.surface{margin-top:1px}
@media(max-width:760px){
 .focused-question.question-card{padding:18px 14px}
 .focused-question .rating-col{padding:10px}
 .survey-chapter-head{padding-top:7px}
}


/* v20: larger, stable study workspace, unified palette and evenly matched side columns */
body.on-survey #app.container{width:min(1460px,calc(100% - 28px));max-width:none}
.survey-screen{padding-top:34px}
.survey-new-layout{grid-template-columns:182px minmax(0,1fr) 130px;gap:15px}
.survey-new-layout .survey-sidebar,
.survey-progress-sidebar{height:min(720px,calc(100svh - 116px));max-height:none;position:sticky;top:97px;box-sizing:border-box}
.survey-new-layout .survey-sidebar{overflow-y:auto}
.survey-progress-sidebar{padding:22px 12px 18px;justify-content:flex-start;gap:15px}
.survey-progress-caption{font-size:11px}
.survey-progress-vertical{flex:1;min-height:0;align-items:stretch;gap:10px}
.survey-vprofile{height:100%;min-height:0;flex:1;width:auto;gap:8px}
.survey-vtrack{height:auto;width:31px;min-height:0;flex:1;position:relative;background:#e9eee9}
.survey-vfill{display:flex;flex-direction:column-reverse;justify-content:flex-start;overflow:hidden;background:transparent!important;border-radius:0;gap:0}
.survey-vsegment{display:block;flex:none;width:100%;min-height:0;transition:height .32s ease}
.survey-vticks{z-index:1}
.survey-vpercent{font-size:24px}
.question-stage{min-height:660px}
.survey-chapter-head h1{font-size:clamp(36px,3.5vw,48px)}
.survey-question-heading{justify-content:flex-start}
.focused-question .q-text{font-size:clamp(20px,2.2vw,27px)}
.survey-dot{--dot-a:#e5ece6;--dot-b:#e5ece6;box-shadow:none;background:#edf2ee;border-color:#cad9cd}
.survey-dot span,.survey-dot.done span,.survey-dot.partial span{height:11px;width:11px;border-radius:100%;background:linear-gradient(90deg,var(--dot-a) 0 50%,var(--dot-b) 50% 100%)}
.survey-dot.one-view span{background:var(--dot-a)}
.survey-dot.done,.survey-dot.partial{background:#edf2ee;border-color:#abbeb1}
.survey-dot.current{border-color:#2d7663;box-shadow:0 0 0 3px #dcece2}
.focused-question .q-header{margin-bottom:13px}
@media(max-width:1060px) and (min-width:761px){
 .survey-new-layout{grid-template-columns:169px minmax(0,1fr) 114px;gap:11px}
 .survey-progress-sidebar{padding:18px 8px}
 .survey-vtrack{width:26px}
 .survey-vprofile{width:auto}
}
@media(max-width:760px){
 body.on-survey #app.container{width:calc(100% - 28px)}
 .survey-new-layout{grid-template-columns:minmax(0,1fr) 102px;grid-template-areas:'cats progress' 'stage stage';gap:13px 9px}
 .survey-new-layout .survey-sidebar{height:auto;max-height:none;min-height:104px;top:auto;position:relative;overflow-y:hidden}
 .survey-progress-sidebar{height:auto;min-height:104px;max-height:none;position:relative;top:auto;gap:5px;padding:7px 4px}
 .survey-progress-vertical{flex:0 0 auto;align-items:start;gap:4px}
 .survey-vprofile{height:auto;width:43px;gap:3px}
 .survey-vtrack{height:39px;flex:0 0 39px;width:14px;min-height:39px}
 .survey-vpercent{font-size:14px}
 .survey-chapter-head h1{font-size:clamp(30px,8vw,38px)}
 .focused-question .q-text{font-size:19px}
}
@media(max-width:390px){.survey-new-layout{grid-template-columns:minmax(0,1fr) 92px}.survey-vprofile{width:40px}}
@media(prefers-reduced-motion:reduce){.survey-vsegment{transition:none}}
/* Keep mobile category and completion panels aligned, as on desktop. */
@media(max-width:760px){
 .survey-new-layout .survey-sidebar,.survey-new-layout .survey-progress-sidebar{
  height:144px;min-height:144px;max-height:144px;box-sizing:border-box;
 }
 .survey-new-layout .survey-sidebar{align-self:stretch}
 .survey-new-layout .survey-progress-sidebar{align-self:stretch;justify-content:center}
}


/* v21: consistent wizard card heights, custom language dropdown, refined results numerals and footer logo */
.wizard-choices,.wizard-length-choices,.wizard-profile-pair,.setup-grid{align-items:stretch}
.wizard-choices,.wizard-length-choices,.wizard-profile-pair{grid-auto-rows:1fr}
.wizard-choices .count-choice,.wizard-length-choices .wizard-length,.wizard-profile-pair .profile-card{height:100%}
.wizard-single-card{width:100%;max-width:860px}
.wizard-page-attachment .wizard-single-card + .wizard-controls{max-width:860px}

.header-language{position:relative;min-width:142px;background:none;padding:0;border-radius:12px}
.header-language .custom-select-trigger{min-height:44px;padding:10px 14px;border-radius:12px;background:#fff;border:1px solid #d9e4dd;box-shadow:0 2px 10px #173d2e10;color:var(--forest)}
.header-language-current,.lang-option-copy{display:inline-flex;align-items:center;gap:10px;min-width:0}
.lang-flag{display:inline-block;width:18px;height:12px;border-radius:1px;box-shadow:inset 0 0 0 1px #d7ddd7;flex:0 0 auto}
.flag-pl{background:linear-gradient(180deg,#ffffff 0 50%,#dc143c 50% 100%)}
.flag-en{background:#012169 url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2030%22%3E%3Crect%20width%3D%2260%22%20height%3D%2230%22%20fill%3D%22%23012169%22%2F%3E%3Cpath%20d%3D%22M0%200L60%2030M60%200L0%2030%22%20stroke%3D%22white%22%20stroke-width%3D%226%22%2F%3E%3Cpath%20d%3D%22M0%200L60%2030M60%200L0%2030%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%222.6%22%2F%3E%3Cpath%20d%3D%22M30%200V30M0%2015H60%22%20stroke%3D%22white%22%20stroke-width%3D%2210%22%2F%3E%3Cpath%20d%3D%22M30%200V30M0%2015H60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%225.5%22%2F%3E%3C%2Fsvg%3E") center/cover no-repeat}
.header-language .custom-select-menu{right:auto;min-width:166px}
.header-language .custom-option{font-size:14px}
.header-language .custom-option[aria-selected="true"]{background:#edf5f0;font-weight:720;color:#184d42}

.score-big,.compare-number,.couple-meta strong,.couple-gap-cat strong,.couple-diff-pill,.couple-mini span[class^="person-"]{font-family:Georgia,'Times New Roman',serif;font-weight:500;letter-spacing:-.04em;font-variant-numeric:lining-nums tabular-nums}
.score-big{font-weight:500;letter-spacing:-.06em}
.score-big span{font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-weight:600;letter-spacing:0}
.compare-number{font-size:12px}
.couple-meta strong{font-size:27px}

.footer-brand-lockup{display:inline-flex;align-items:center;gap:10px}
.footer-brand-mark{width:28px;height:28px;flex:0 0 28px}
.footer-brand-mark svg{width:28px;height:28px}

@media(max-width:760px){
  .header-language{min-width:126px}
  .header-language .custom-select-trigger{min-height:40px;padding:8px 11px}
  .header-language .custom-select-menu{min-width:150px}
}


/* V22 polish: explicit paragraph break; two navigation tabs; compact language switch. */
.hero .hero-second-line{display:block;margin-top:9px}
.top-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(min-width:761px){
 .top-nav{grid-template-columns:repeat(2,102px)}
}
@media(min-width:761px) and (max-width:1020px){
 .top-nav{grid-template-columns:repeat(2,86px)}
}
@media(max-width:760px){
 .top-nav{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.header-language{width:126px;min-width:126px;max-width:126px}
.header-language .custom-select-trigger{min-height:42px;padding:8px 10px;font-size:12px;gap:6px}
.header-language-current,.header-language .lang-option-copy{gap:7px}
.header-language .custom-select-menu{min-width:144px}
@media(max-width:760px){
 .header-language{width:116px;min-width:116px;max-width:116px}
 .header-language .custom-select-trigger{min-height:39px;padding:7px 8px;font-size:12px}
 .header-language .custom-select-menu{min-width:140px;left:auto;right:0}
}
/* Two non-overlapping categories of insight with compact placeholder states. */
.insight-second-heading{margin-top:23px!important}
.insight-empty{font-size:12px;padding:14px 15px;background:#fafbf8;border:1px solid var(--line)}


/* V23: centered bottom results actions and authentic UK flag for English */
.results-bottom-actions{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:12px;margin:32px auto 14px!important;width:100%;
}
.results-bottom-actions .btn{min-height:48px;padding:13px 21px;flex:0 1 auto}
.results-bottom-actions .btn.pdf-action{background:#e9f2ed;border-color:#c6dbcf;color:#1e5145}
.results-bottom-actions .btn.pdf-action:hover{background:#dfece4;border-color:#83ac98}
@media(max-width:760px){
  .results-bottom-actions{gap:10px}
  .results-bottom-actions .btn{flex:1 1 225px;max-width:340px;white-space:normal}
}
@media print{.results-bottom-actions{display:none!important}}


/* V25: 0 and 6 get the same hover emphasis as other ratings, for both profiles.
   These selectors intentionally override the default pale extreme-value borders. */
.rating-col .rating-btn:is(:first-child,:last-child):hover:not(.selected){
  border-color:var(--green);
  background:#f0f8f3;
}
.rating-col.b .rating-btn:is(:first-child,:last-child):hover:not(.selected){
  border-color:var(--peach);
  background:var(--peach-soft);
}

/* v26: matching vertical separators for author, handle, and copyright */
.footer-attribution .footer-nickname{border-left:1px solid #d8e2db;padding-left:12px;color:#697972;font-weight:400;}


/* v27: separate attachment-style explorer and optional wizard helper */
.on-attachment .top-nav,.on-attachment .site-footer{display:none!important}
.att-home-cta{background:transparent!important;border-color:#cdded3!important;color:var(--forest)!important}
.att-home-cta:hover{background:#eaf4ec!important}
.att-wizard-bridge{margin-top:22px;border:1px solid #d8e7da;background:#edf5f0;padding:18px 21px;border-radius:16px;display:flex;justify-content:space-between;align-items:center;gap:22px;max-width:100%}
.att-wizard-bridge strong{font-size:15px;color:var(--forest)}
.att-wizard-bridge p{font-size:12px;color:var(--muted);margin:6px 0 0;line-height:1.65;max-width:560px}
.attachment-explorer{max-width:1040px;margin:0 auto;min-height:calc(100svh - 84px);padding:32px 0 90px}
.att-topline{display:flex;align-items:center;justify-content:flex-start;gap:20px;margin-bottom:28px}
.att-backlink{border:0;background:transparent;color:var(--green);font-size:13px;font-weight:760;padding:9px 0}
.att-mini-brand{color:#779287;font-size:12px;font-weight:720}
.att-heading{margin-bottom:25px}
.att-heading h1{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(36px,4.8vw,57px);line-height:1.14;letter-spacing:-.05em;margin:0 0 12px;max-width:880px;color:var(--ink)}
.att-heading h1 em{font-weight:400;color:#358171}
.att-heading p{max-width:720px;font-size:14px;line-height:1.8;color:var(--muted);margin:0}
.att-intro-card{background:#fff;border:1px solid var(--line);border-radius:22px;padding:26px 28px;margin-bottom:19px;box-shadow:var(--shadow)}
.att-section-heading{display:flex;align-items:start;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:19px}
.att-section-heading h2,.att-comparison h2{font-family:Georgia,'Times New Roman',serif;font-size:30px;font-weight:400;letter-spacing:-.05em;margin:0}
.att-section-heading p{font-size:12px;color:var(--muted);line-height:1.6;max-width:515px;margin:0}
.att-style-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.att-style-tile{border:1px solid #e0e9e1;background:#fbfcfa;border-radius:15px;padding:17px;min-width:0}
.att-style-symbol{width:34px;height:34px;display:grid;place-items:center;border:1px solid #cce5d9;border-radius:99px;background:#f0f7f1;color:var(--green);font-family:Georgia,serif;font-size:19px;margin-bottom:12px}
.att-style-tile h3{font-size:15px;line-height:1.3;margin:0 0 9px}
.att-style-tile p{font-size:11px;line-height:1.7;color:var(--muted);margin:0}
.att-entry-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px}
.att-entry-card{position:relative;min-height:152px;text-align:left;display:flex;flex-direction:column;align-items:flex-start;gap:9px;padding:24px 26px;border:1px solid #dce7dd;border-radius:18px;background:white;color:var(--ink);transition:border-color .2s,background .2s,box-shadow .2s}
.att-entry-card:hover,.att-entry-card:focus-visible{border-color:#5b9984;background:#f6faf7;box-shadow:0 12px 25px #1c554019}
.att-entry-glyph{font-size:24px;color:#397e6d}
.att-entry-card strong{font-size:17px}
.att-entry-card>span:nth-last-child(2){color:var(--muted);font-size:12px;line-height:1.55}
.att-entry-arrow{position:absolute;right:24px;top:24px;font-size:23px;color:#558975}
.att-small-caution{font-size:11px;line-height:1.8;color:#72857a;max-width:970px;margin:22px 0 0}
.att-test-track{height:7px;border-radius:99px;background:#e4ece6;overflow:hidden;margin-bottom:25px}.att-wizard-progress{margin:0 0 18px}.att-wizard-progress .wizard-step-word{min-width:max-content}
.att-test-track span{display:block;height:100%;border-radius:99px;background:#39826f;transition:width .2s ease}
.att-question-board{background:#fff;border:1px solid #dfe9e1;border-radius:22px;padding:33px 33px 26px;box-shadow:var(--shadow)}
.att-question-counter{font-size:11px;color:var(--green);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.att-question-board h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(27px,3.3vw,37px);font-weight:400;line-height:1.22;letter-spacing:-.04em;margin:16px 0 30px;max-width:850px}
.att-answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.att-answer-grid.single{grid-template-columns:minmax(0,1fr)}
.att-person-answer{border:1px solid #e1e9e2;border-radius:14px;background:#f9fbf9;padding:19px}
.att-person-head{display:flex;align-items:center;gap:9px;margin-bottom:17px;min-width:0}
.att-person-head .profile-dot{flex:none}
.att-person-head strong{font-size:14px;white-space:normal;overflow-wrap:anywhere;min-width:0}
.att-person-head small{margin-left:auto;color:var(--muted);font-size:11px;white-space:nowrap}
.att-answer-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.att-answer{height:49px;border:1px solid #dce5dd;border-radius:10px;background:#fff;color:var(--forest);font-size:17px;font-family:Georgia,serif;transition:background .15s,border-color .15s,color .15s}
.att-answer:hover{border-color:#3c8f77;background:#edf6f0}
.att-answer.selected{border-color:#287b67;background:#247660;color:#fff;box-shadow:0 4px 12px #27695628}
.att-answer-grid:not(.single) .att-person-answer:nth-child(2) .att-answer.selected{background:#bd7961;border-color:#bd7961}
.att-answer-ends{display:flex;justify-content:space-between;gap:12px;margin-top:9px;font-size:11px;color:var(--muted)}
.att-question-actions{display:flex;justify-content:space-between;gap:18px;align-items:center;margin-top:25px}
.att-question-actions .btn{min-width:122px}
.att-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.att-result-grid.single{grid-template-columns:minmax(0,1fr)}
.att-result-card{background:#fff;border:1px solid #dde9df;border-radius:19px;padding:26px;box-shadow:var(--shadow)}
.att-result-card h2{font-family:Georgia,serif;font-weight:400;font-size:26px;letter-spacing:-.04em;margin:0}
.att-pattern-name{font-size:17px;color:var(--forest);font-weight:800;margin:4px 0 10px}
.att-pattern-desc{font-size:12px;line-height:1.7;color:var(--muted);margin:0 0 22px;max-width:430px}
.att-axis-pair{display:grid;gap:22px;margin-top:20px}
.att-axis-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;margin-bottom:8px}
.att-axis-head strong{font-size:13px}
.att-axis-head>span{font-family:Georgia,serif;font-size:24px;color:var(--forest);font-variant-numeric:lining-nums}
.att-axis-head small{font-family:inherit;font-size:12px;color:#79968a;margin-left:4px}
.att-axis-track{height:13px;border-radius:99px;background:#e6eee8;overflow:hidden}
.att-axis-fill{height:100%;border-radius:99px;background:#c17d63}
.att-axis-fill.avoidance{background:#3c8876}
.att-comparison,.att-result-note{border-radius:17px;padding:24px 26px;margin-top:18px;background:#edf5f0;border:1px solid #d7e7dc}
.att-comparison p,.att-result-note p{font-size:12px;line-height:1.75;color:#5f796b;margin:10px 0 0}
.att-gap-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:17px;font-size:12px}
.att-gap-grid span{background:white;border:1px solid #dce8e0;padding:15px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.att-gap-grid strong{font-family:Georgia,serif;font-size:21px;color:var(--forest);white-space:nowrap}
.att-result-note strong{font-size:12px}
.att-results-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;margin-top:28px}
@media(max-width:760px){
 .attachment-explorer{padding:22px 0 60px}
 .att-topline{margin-bottom:18px}
 .att-intro-card{padding:18px}
 .att-style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 .att-entry-grid,.att-result-grid,.att-answer-grid{grid-template-columns:1fr}
 .att-question-board{padding:23px 17px 20px}
 .att-question-board h2{margin-bottom:24px}
 .att-result-card{padding:19px}
 .att-wizard-bridge{flex-direction:column;align-items:stretch;padding:17px}
 .att-question-actions{gap:10px;flex-wrap:wrap}
 .att-question-actions .btn{min-width:0;flex:1 1 160px;padding:13px 10px}
 .att-gap-grid{grid-template-columns:1fr}
}
@media(max-width:380px){
 .att-style-grid{grid-template-columns:1fr}
 .att-answer-row{gap:4px}
 .att-answer{height:44px}
 .att-person-answer{padding:14px}
}
@media(prefers-reduced-motion:reduce){.att-test-track span,.att-answer{transition:none}}

.att-name-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 22px}
.att-name-grid.single{grid-template-columns:minmax(0,1fr)}
.att-name-field{display:grid;gap:7px}
.att-name-field span{font-size:11px;color:#506e60;font-weight:720}
.att-name-field input{padding:11px 13px;max-width:100%;border:1px solid #dce6df;background:#fff;border-radius:10px;color:var(--ink)}
@media(max-width:760px){.att-name-grid{grid-template-columns:1fr}}

.att-saved-wrap{display:flex;justify-content:center;margin:15px 0 0}
@media print{
 body.on-attachment{background:#fff}
 .on-attachment .site-header,.on-attachment .att-topline,.on-attachment .att-results-actions,.on-attachment .att-small-caution,.on-attachment .toast{display:none!important}
 .attachment-explorer{max-width:100%;padding:0;min-height:0}
 .att-result-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .att-result-card,.att-comparison,.att-result-note{break-inside:avoid;box-shadow:none}
 .att-axis-track{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

.att-entry-grid.single{grid-template-columns:1fr}


/* v29: same seven-choice gradient slider and horizontal step animation as the main study */
.att-person-answer.rating-col{display:block;padding:20px;background:#f9fbf9;border:1px solid #e1e9e2;border-radius:14px}
.att-person-answer .att-answer-row.rating-options{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.att-person-answer .att-answer.rating-btn{height:46px;min-width:0;aspect-ratio:auto;font-family:Georgia,'Times New Roman',serif;font-size:18px;font-weight:500}
.att-person-answer .att-answer.rating-btn.selected{background:var(--rating-color);border-color:var(--rating-color);color:var(--rating-ink)}
.att-person-answer .att-answer.rating-btn:hover:not(.selected){background:#edf6f0;border-color:#388771;color:#235849;box-shadow:0 0 0 1px #38877129}
.att-person-answer .rating-meter{margin-top:2px}
.att-person-answer .rating-selection{padding-top:9px;color:var(--green)}
.att-person-answer .rating-meter-legend{margin-bottom:0}
.att-person-answer .att-person-head{margin-bottom:15px}
.att-person-answer.b .att-answer.rating-btn.selected{background:var(--rating-color);border-color:var(--rating-color);color:var(--rating-ink)}
.att-person-answer.b .att-answer.rating-btn:hover:not(.selected){background:#edf6f0;border-color:#388771;color:#235849}
.att-screen-host{position:relative;width:100%;min-width:0}
.att-screen-host.att-screen-animating{overflow:hidden;isolation:isolate}
.att-screen-host.att-screen-animating>.att-screen{position:absolute;inset:0 auto auto 0;width:100%;margin:0;will-change:transform,opacity;pointer-events:none}
.att-screen-host.att-screen-animating>.att-screen:last-child{pointer-events:none}
.att-home-cta{min-width:0}
.wizard-welcome .hero-actions{gap:12px;row-gap:10px}
@media(max-width:760px){
 .att-person-answer.rating-col{padding:14px}
 .att-person-answer .att-answer-row.rating-options{gap:4px}
 .att-person-answer .att-answer.rating-btn{min-height:43px;height:44px;font-size:16px}
 .att-person-answer .rating-meter-legend{font-size:11px}
}
@media(prefers-reduced-motion:reduce){.att-screen-host.att-screen-animating>.att-screen{will-change:auto}}


/* v30: no redundant participant header in solo mode; clear text for each selected agreement */
.att-person-answer.att-solo{padding-top:20px}
.att-person-answer .att-rating-selection{
  min-height:44px;
  padding:8px 4px 9px;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:5px 12px;
}
.att-person-answer .att-rating-value{font-weight:800;color:var(--rating-color);font-size:13px;white-space:nowrap;}
.att-person-answer .att-rating-meaning{font-weight:680;color:var(--forest);font-size:12px;line-height:1.4;}
.att-person-answer .att-rating-meaning:before{content:"·";color:#9caf9f;margin-right:12px;}
@media(max-width:420px){
 .att-person-answer .att-rating-selection{gap:3px 8px}
 .att-person-answer .att-rating-meaning:before{margin-right:8px}
}


/* v31: 20-item independent style scores, no stress retest */
.att-score-detail{padding:28px 30px}
.att-main-result{border-radius:15px;background:#edf5f0;padding:19px 21px;margin:18px 0 26px;border:1px solid #d8e8dd}
.att-overline{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.10em;font-weight:850;color:#497a69;margin-bottom:7px}
.att-main-result h3{font-family:Georgia,'Times New Roman',serif;font-weight:500;font-size:clamp(26px,3vw,37px);letter-spacing:-.04em;line-height:1.2;margin:0}
.att-main-result p{font-size:12px;color:#526d62;line-height:1.7;margin:10px 0 0}
.att-style-scores-title{font-size:13px;margin:0 0 16px;letter-spacing:.015em}
.att-style-scores{display:grid;gap:19px}
.att-style-score-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:9px;font-size:13px}
.att-style-score-head strong{font-size:13px;font-weight:720}
.att-style-score-head span{white-space:nowrap;color:#536b61;font-size:12px}
.att-style-score-head b{font-family:Georgia,'Times New Roman',serif;font-size:23px;font-weight:500;color:var(--forest)}
.att-style-score-head small{font-size:11px;color:#779487}
.att-style-score-track{height:11px;border-radius:20px;background:#e8eee9;overflow:hidden}
.att-style-score-fill{display:block;height:100%;border-radius:20px;background:#7aa997;transition:width .25s ease}
.att-style-score-fill.att-style-secure{background:#378b76}
.att-style-score-fill.att-style-anxious{background:#ca8b68}
.att-style-score-fill.att-style-avoidant{background:#7c8dab}
.att-style-score-fill.att-style-mixed{background:#a488ab}
.att-style-score.is-primary .att-style-score-head strong{color:#22725e}
.att-secondary-result{margin-top:24px;padding:19px 20px;background:#f9f5ed;border:1px solid #e9ddcc;border-radius:14px}
.att-secondary-result strong{display:block;color:#243e37;font-family:Georgia,serif;font-size:24px;font-weight:500}
.att-secondary-result strong small{font-family:inherit;color:#8d7361;font-size:14px}
.att-secondary-result p,.att-secondary-footnote,.att-no-secondary{font-size:11px;color:#6b7f72;line-height:1.65;margin:9px 0 0}
.att-no-secondary{padding:12px 4px 0}
.att-four-gaps{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:760px){.att-score-detail{padding:19px}.att-four-gaps{grid-template-columns:1fr}.att-style-score-head span{font-size:11px}}
@media print{.att-result-grid.single{grid-template-columns:1fr!important}.att-style-score-track{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* v32: condensed result lead, readable secondary pattern explanation */
.att-heading .att-results-summary{max-width:none}
.att-secondary-result p{font-size:13px;line-height:1.75;max-width:76ch;color:#627569;margin-top:13px}
@media(min-width:900px){.att-heading .att-results-summary{white-space:nowrap}}

/* v33: educational guidance, mode switching */
.guidance-section{margin-top:26px;padding:30px 32px;background:#fff}
.guidance-section h2{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.035em;font-size:clamp(26px,3vw,35px);line-height:1.25;margin:9px 0 10px;color:var(--ink)}
.guidance-lead,.guidance-section>p{font-size:13px;line-height:1.8;color:var(--muted);margin:8px 0 21px}
.guidance-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px;align-items:stretch}
.guidance-grid.single{grid-template-columns:1fr}
.guidance-card{background:#f8faf7;border:1px solid #dae7df;border-radius:16px;padding:22px 23px;min-width:0}
.guidance-card h3{font-family:Georgia,serif;font-weight:400;font-size:23px;margin:0 0 5px;letter-spacing:-.03em}
.guidance-pill{display:inline-flex;align-items:center;border-radius:30px;background:#e1efe6;color:#1e6354;font-size:11px;font-weight:700;padding:6px 10px;margin:5px 0 11px}
.guidance-card p,.guidance-pair p{font-size:12px;color:#587269;line-height:1.75;margin:10px 0 0}
.guidance-card p strong{color:#2b5146}
.guidance-pair{background:#f3f7f2;border:1px solid #dce9db;border-radius:16px;padding:22px 24px;margin-top:16px}
.guidance-pair h3{font-size:13px;font-weight:800;color:#246355;margin:6px 0 3px}
.guidance-pair h3:not(:first-child){margin-top:18px}
.guidance-footer-note{padding-top:16px;border-top:1px solid #e5ede6}
.guidance-evidence{margin-top:22px;border-top:1px solid #dce7de;padding-top:14px;color:#536d62;font-size:12px}
.guidance-evidence summary{cursor:pointer;font-weight:740;color:#286e5b}
.guidance-evidence p{line-height:1.8;margin:13px 0}
.guidance-sources{font-size:11px;margin-top:14px}
.guidance-sources>div{display:flex;gap:12px;flex-wrap:wrap;margin-top:7px}
.guidance-sources a{color:#2e715e;text-decoration:underline;text-underline-offset:2px}
.guidance-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.guidance-score-grid>div{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:13px;background:#f7f9f6;border:1px solid #e0e8df;min-width:0}
.guidance-score-grid>div>strong{font-size:15px;overflow-wrap:anywhere}
.guidance-score-grid>div>span{font-family:Georgia,serif;font-size:32px;line-height:1.1;color:#225849}
.guidance-score-grid small{color:#638073;line-height:1.6}
.guidance-warning{padding:13px 17px;border-radius:12px;border:1px solid #e4d5b8;background:#fff9ed;color:#7b5531;font-size:12px;line-height:1.7;margin-top:13px}
.guidance-warning.important{background:#fff3ed;border-color:#eecab7;color:#824630}
.att-results-actions .att-switch-button{background:#257566;color:white}
@media(max-width:760px){.guidance-section{padding:22px 18px}.guidance-grid,.guidance-score-grid{grid-template-columns:1fr}.guidance-card{padding:18px}.guidance-pair{padding:18px}}
@media print {.guidance-section{break-inside:auto}.guidance-card,.guidance-pair{break-inside:avoid}}

/* V34 small refinements */
.att-person-answer .att-rating-meaning {color:var(--rating-color);}
.att-person-answer .att-rating-meaning::before {color:var(--rating-color);opacity:.65}
/* Reserve consistent vertical rhythm for defined and unresolved style results. */
.att-result-grid {align-items:stretch}
.att-score-detail {display:flex;flex-direction:column;min-width:0}
.att-score-detail .att-main-result {display:flex;flex-direction:column;justify-content:flex-start;min-height:165px}
.att-main-result h3 {text-align:left;overflow-wrap:anywhere;line-height:1.2}
.att-main-result.att-unknown h3 {font-size:clamp(26px,3vw,37px);min-height:1.2em;display:flex;align-items:center}
.att-score-detail .att-style-scores-title {margin-top:0}
.guidance-card .guidance-pill {min-height:29px;vertical-align:middle;justify-content:center}
/* Only one large statement label; the thin progress bar does not repeat it. */
.att-wizard-progress {margin:0 0 20px;display:flex;align-items:center;gap:0}
.att-wizard-progress .wizard-step-meta {display:none}
.att-wizard-progress .wizard-track {width:min(100%,260px);flex:0 0 min(100%,260px)}
/* In-app restart confirmation instead of native browser confirmation. */
.att-reset-shade {position:fixed;inset:0;display:grid;place-items:center;padding:18px;background:rgba(18,39,35,.5);z-index:200;backdrop-filter:blur(3px)}
.att-reset-dialog {width:min(100%,440px);background:#fff;border:1px solid #dfe9e2;border-radius:20px;box-shadow:0 24px 75px #12282038;padding:26px}
.att-reset-dialog h2 {font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:-.03em;font-size:28px;margin:0 0 10px}
.att-reset-dialog p {font-size:13px;color:var(--muted);line-height:1.7;margin:0 0 22px}
.att-reset-actions {display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
@media(max-width:600px){.att-reset-dialog{padding:21px}.att-reset-actions .btn{flex:1 1 auto}}
@media print{.att-reset-shade{display:none!important}}

/* V35: Affection preferences + integrated reflection journey */
.j-shell{width:min(1100px,100%);margin:0 auto;padding:44px 0 85px;min-height:60vh}
.j-shell *{box-sizing:border-box}
.j-shell button{font:inherit;cursor:pointer}
.j-topline{margin:0 0 26px;display:flex;align-items:center;justify-content:flex-start}
.j-topline button{padding:7px 0;background:none;border:0;color:var(--green);font-size:13px;font-weight:700}
.j-hero{max-width:950px;margin-bottom:30px}
.j-eyebrow{font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--green)}
.j-hero h1,.j-question-card h1{font-family:Georgia,'Times New Roman',serif;font-size:clamp(37px,4.8vw,59px);font-weight:400;line-height:1.12;letter-spacing:-.045em;color:var(--ink);margin:12px 0}
.j-hero p{font-size:15px;line-height:1.8;color:var(--muted);max-width:760px}
.j-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:25px 0}
.j-choice{position:relative;display:flex;align-items:flex-start;flex-direction:column;gap:13px;min-height:178px;padding:25px 28px;text-align:left;border:1px solid #dbe6df;border-radius:20px;background:#fff;color:var(--ink);box-shadow:var(--shadow);transition:border-color .2s,box-shadow .2s,transform .2s}
.j-choice:hover{transform:translateY(-2px);border-color:#7cac97;box-shadow:0 16px 35px #183e3520}
.j-choice.selected{border-color:var(--green);background:#f0f8f2}
.j-choice-ico{font-size:26px;color:var(--green);letter-spacing:.12em}
.j-choice strong{font-size:20px}
.j-choice>span:nth-last-child(2){font-size:12px;line-height:1.65;color:var(--muted)}
.j-choice em{position:absolute;top:24px;right:25px;font-style:normal;font-size:23px;color:var(--green)}
.j-question-wrap{max-width:1060px;margin:0 auto}
.j-progress{justify-content:flex-start;margin-bottom:35px}
.j-progress .wizard-track{width:min(270px,34vw);flex:0 1 270px}
.j-name-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-bottom:22px}
.j-name-grid label{font-size:12px;font-weight:700;color:#50685f;display:flex;flex-direction:column;gap:8px}
.j-name-grid input{width:100%;padding:13px 15px;border:1px solid #d9e4dc;border-radius:12px;color:var(--ink);background:white}
.j-question-card,.j-result-card,.j-mega-person,.j-mega-section{border:1px solid #dee8df;border-radius:23px;background:white;box-shadow:var(--shadow);padding:31px}
.j-question-card h1{font-size:clamp(28px,3.5vw,43px);margin:2px 0 27px}
.j-person-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.j-person-grid.single{grid-template-columns:1fr}
.j-person{border:1px solid #dfe8e1;border-radius:15px;background:#f9fbf9;padding:18px}
.j-person.b{border-color:#eadad1}
.j-person-heading{display:flex;align-items:center;gap:9px;margin-bottom:16px;color:var(--ink)}
.j-person-heading strong{font-size:14px;overflow-wrap:anywhere}
.j-person-heading small{margin-left:auto;color:var(--muted);white-space:nowrap}
.j-options{display:grid;gap:12px}
.j-option{display:grid;grid-template-columns:22px minmax(0,1fr);column-gap:13px;row-gap:8px;align-items:center;min-height:88px;padding:16px 18px;text-align:left;border:1px solid #dfe7de;border-radius:13px;background:white;color:var(--ink);transition:background .16s,border-color .16s,box-shadow .16s}
.j-option:hover{border-color:var(--green);background:#f5faf6}
.j-option.selected{border-color:#2d806c;background:#e9f5ed;box-shadow:inset 0 0 0 1px #2d806c25}
.j-person.b .j-option.selected{border-color:var(--peach);background:#fcf1eb}
.j-radio{height:18px;width:18px;border:2px solid #8aa69c;border-radius:99px;grid-row:span 2;position:relative}
.j-option.selected .j-radio{border-color:var(--green)}
.j-person.b .j-option.selected .j-radio{border-color:var(--peach)}
.j-option.selected .j-radio::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--green)}
.j-person.b .j-option.selected .j-radio::after{background:var(--peach)}
.j-option>span:nth-child(2){font-size:15px;line-height:1.5}
.j-choice-type{font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.055em;color:#658274}
.j-actions{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-top:26px}
.j-actions .btn{font-family:inherit;font-size:13px;min-width:140px}
.j-results-head{margin-top:16px}
.j-result-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.j-result-grid.single{grid-template-columns:1fr;max-width:820px;margin:auto}
.j-result-title{display:flex;align-items:center;gap:12px}
.j-result-title h2,.j-mega-head h2{font-family:Georgia,serif;font-weight:400;font-size:31px;letter-spacing:-.035em;margin:0;overflow-wrap:anywhere}
.j-subhead{font-size:13px;color:var(--muted);margin:18px 0}
.j-subhead strong{color:var(--forest)}
.j-result-card>h3{font-size:15px;margin:26px 0 13px}
.j-ranks{display:grid;gap:14px}
.j-rank-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13px;font-weight:650;margin-bottom:7px}
.j-rank-head span small{font-family:Georgia,serif;color:var(--green);font-size:18px;margin-right:6px}
.j-rank-head strong{font-family:Georgia,serif;font-size:24px;font-weight:400;color:var(--forest)}
.j-rank-head strong small{font-family:inherit;font-size:12px;color:var(--muted)}
.j-rank-track{height:11px;background:#eaf0ec;border-radius:99px;overflow:hidden}
.j-rank-fill{height:100%;border-radius:99px;background:var(--green)}
.j-rank-fill.words{background:#c17e69}.j-rank-fill.time{background:#2c8974}.j-rank-fill.gifts{background:#ad89ad}.j-rank-fill.acts{background:#7690ac}.j-rank-fill.touch{background:#c0a061}
.j-need{border:1px solid #dfe8df;border-radius:14px;padding:15px 18px;margin-bottom:10px;background:#fafbf9}
.j-need strong{font-size:13px;color:var(--forest)}
.j-need p,.j-compare p,.j-small-note{font-size:12px;line-height:1.72;color:var(--muted)}
.j-small-note{padding-top:6px}
.j-compare{margin-top:22px;border:1px solid #c8dfd2;border-radius:19px;padding:24px;background:#edf6ef}
.j-compare h2,.j-mega-section h2{font-family:Georgia,serif;font-size:30px;font-weight:400;letter-spacing:-.04em;margin:0 0 18px}
.j-compare-grid,.j-mega-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:17px}
.j-compare-grid>div,.j-advice{padding:18px;border:1px solid #d9e7df;border-radius:14px;background:white}
.j-compare-grid h3{font-size:15px;color:var(--forest);margin:0}
.j-science{margin:25px 0 15px;padding:18px 20px;border:1px solid #dce5de;border-radius:14px;background:#f8faf8;color:#496358;font-size:12px;line-height:1.7}
.j-science summary{cursor:pointer;font-weight:750;color:var(--forest)}
.j-science a{color:var(--green);margin-right:15px}
.j-result-actions{justify-content:center;gap:12px}
.j-phases{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0 34px}
.j-phases>div{display:flex;flex-direction:column;gap:8px;padding:19px;border-radius:14px;border:1px solid #dfe9df;background:#fff}
.j-phases span{font-family:Georgia,serif;font-size:30px;color:var(--green)}
.j-phases strong{font-size:13px;color:var(--ink)}
.j-length{padding:20px;background:#fff;border-radius:15px;border:1px solid #dce7df;display:flex;justify-content:space-between;gap:16px;align-items:center}
.j-length strong{font-size:14px}
.j-length>div{display:flex;gap:8px;flex-wrap:wrap}
.j-length button{background:#f7faf7;border:1px solid #dae6dc;padding:10px 15px;border-radius:10px;color:var(--forest);font-size:13px}
.j-length button.active{background:#e3f2e7;border-color:var(--green);font-weight:800}
.j-resume{margin-top:22px;display:flex;justify-content:center}
.j-report{max-width:1080px}
.j-report>.j-hero{padding-bottom:16px}
.j-mega-person{margin:18px 0 26px;padding:28px}
.j-mega-head{display:flex;align-items:center;gap:12px;margin-bottom:19px}
.j-mega-columns section{background:#fbfcfa;border:1px solid #e5ece6;border-radius:15px;padding:21px;min-width:0}
.j-mega-columns h3{font-family:Georgia,serif;font-size:24px;font-weight:400;line-height:1.25;letter-spacing:-.02em;margin:0 0 18px}
.j-mega-columns section>p,.j-mega-columns section>h4,.j-mega-section>p{font-size:12px;line-height:1.7;color:#4c695c}
.j-mega-columns section>h4{font-size:12px;color:var(--forest);margin:15px 0 4px}
.j-mega-axis{border-bottom:1px solid #e8eee9;display:flex;justify-content:space-between;gap:9px;padding:8px 0;font-size:12px}
.j-mega-axis b{color:var(--green)}
.j-mega-type{display:grid;gap:6px;background:#e9f4ec;border:1px solid #d7e8db;border-radius:11px;padding:17px;margin-bottom:18px}
.j-mega-type span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--green)}
.j-mega-type strong{font-family:Georgia,serif;font-size:25px;font-weight:400}
.j-mega-type small{font-size:12px;color:#527664}
.j-advice-small{padding:12px 0;border-bottom:1px solid #e3ece5}
.j-advice-small strong{font-size:13px;color:var(--forest)}
.j-advice-small p{font-size:12px;color:var(--muted);line-height:1.6}
.j-mega-section{margin-bottom:22px}
.j-rel-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.j-rel-score-grid>div{display:grid;gap:6px;padding:20px;background:#f2f7f2;border-radius:14px}
.j-rel-score-grid strong{font-family:Georgia,serif;font-weight:400;font-size:48px;color:var(--forest)}
.j-rel-score-grid strong small{font-size:15px;color:#82968a}
.j-rel-score-grid span,.j-rel-score-grid small{font-size:12px;color:#647b6f}
.j-rel-details h3{font-size:17px;margin:25px 0 12px}
.j-rel-row{display:grid;grid-template-columns:minmax(120px,1fr) 90px 90px;gap:10px;border-bottom:1px solid #e7ede7;padding:9px 0;font-size:12px}
.j-rel-row>span:nth-child(n+2){font-family:Georgia,serif;font-size:16px;text-align:center;color:var(--green)}
.j-safety{color:#b5443d!important;font-weight:800}
.j-plan{display:grid;gap:14px}
.j-plan>div{display:flex;align-items:flex-start;gap:18px;padding:15px;border:1px solid #e0e8e0;border-radius:12px;background:#fbfcfa}
.j-plan span{font-family:Georgia,serif;font-size:26px;color:var(--green)}
.j-plan p{font-size:13px;line-height:1.7;margin:0}
.att-practical-summary{display:grid;gap:13px;margin-top:17px;padding-top:15px;border-top:1px solid #d3e3d7}
.att-practical-summary>div strong{font-size:12px;color:var(--forest)}
.att-practical-summary p{font-size:12px;color:#526d62;margin:4px 0 0}
.att-score-detail .att-main-result{min-height:0}
@media(max-width:800px){.j-shell{padding:25px 0 65px}.j-person-grid,.j-result-grid,.j-mega-columns,.j-compare-grid,.j-choices{grid-template-columns:1fr}.j-phases{grid-template-columns:repeat(2,1fr)}.j-result-grid.single{max-width:100%}}
@media(max-width:480px){.j-question-card,.j-result-card,.j-mega-person,.j-mega-section{padding:20px 16px;border-radius:17px}.j-question-card h1{font-size:30px}.j-option{padding:13px 12px}.j-person{padding:12px}.j-hero h1{font-size:39px}.j-progress{gap:8px}.j-progress .wizard-track{width:74px;flex:0 1 90px}.j-name-grid,.j-rel-score-grid{grid-template-columns:1fr}.j-actions .btn{min-width:0;flex:1 1 140px}.j-rel-row{grid-template-columns:minmax(80px,1fr) 55px 55px}.j-hero{margin-bottom:23px}}
@media print{.site-header,.site-footer,.j-actions,.j-topline,.top-nav{display:none!important}.j-shell{width:100%;padding:0}.j-mega-person,.j-mega-section,.j-result-card{break-inside:avoid;box-shadow:none}.j-rank-fill,.j-mega-type{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

.j-conflict{margin:20px 0;padding:20px;border-radius:15px;background:#f2f7f2;border:1px solid #d7e8d9}
.j-conflict h3{font-family:Georgia,serif;font-size:21px;font-weight:400;margin:0 0 8px}
.j-conflict p{font-size:13px;line-height:1.7;margin:0 0 18px;color:#456658}
.j-conflict p:last-child{margin:0}
.j-warning{margin-top:17px;border:1px solid #ead6bb;border-radius:12px;padding:15px;color:#865e39;background:#fbf6ef;font-size:13px;line-height:1.6}
/* G1: persistent save warning + resumable journey note */
.j-resume-note{margin:18px 0 0}
.save-warning{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:99;display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;width:max-content;max-width:min(560px,calc(100% - 32px));box-sizing:border-box;padding:10px 10px 10px 16px;border-radius:12px;background:var(--forest);color:#fff;font-size:13px;line-height:1.45;box-shadow:0 8px 24px rgba(0,0,0,.18)}
.save-warning span{flex:1 1 200px;min-width:0}
.save-warning .btn{min-height:36px;padding:6px 14px;background:#fff;color:var(--forest);border-color:#fff}
.save-warning-close{background:transparent;border:0;color:inherit;font-size:20px;line-height:1;cursor:pointer;min-width:36px;min-height:36px;border-radius:8px}
.save-warning-close:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media print{.save-warning{display:none!important}}

/* G2: safety-first notice, help resources, empty results and report notes */
.safety-first{margin:18px 0 22px;padding:18px 20px;border:1px solid #e6b9a4;border-left:5px solid #b5443d;border-radius:14px;background:#fff4ee;color:#5f2f22;font-size:14px;line-height:1.6;max-width:860px}
.safety-first h2{margin:0 0 6px;font-size:19px;line-height:1.3;color:#8a2f25;font-family:inherit;letter-spacing:0}
.safety-first p{margin:0 0 10px}
.safety-help{border-top:1px solid #efcdbd;padding-top:10px;margin-top:4px}
.safety-help-title{display:block;margin-bottom:4px}
.safety-help ul{margin:0 0 8px;padding-left:20px}
.safety-help li{margin:2px 0;overflow-wrap:anywhere}
.safety-help a{color:#8a2f25;font-weight:700}
.safety-help-privacy,.safety-help-note{font-size:12.5px;margin:4px 0 0!important;color:#6d4234}
.safety-help-note{font-style:italic}
.score-card .safety-alert{margin-top:12px;margin-bottom:6px}
.score-safety-note{margin:6px 0 0;font-size:12px;font-weight:700;color:#8a2f25}
.safety-support{margin-top:18px;padding:15px 17px;border:1px solid #eecab7;border-radius:12px;background:#fff3ed;color:#6d3a2a;font-size:13px;line-height:1.65}
.safety-support h3{margin:0 0 4px;font-size:15px}
.safety-support p{margin:0}
.guidance-safety .guidance-lead{color:#6d3a2a}
.guidance-score-grid .has-safety-flag{border-color:#e6b9a4!important;background:#fff6f1}
.guidance-safety-tag{display:inline-block;font-style:normal;font-size:11px;font-weight:800;color:#b5443d;margin:2px 0}
.results-empty{margin-top:18px;text-align:center}
.results-empty h2{margin-top:0}
.att-disclaimer{margin-top:18px}
.couple-safety-excluded{font-size:12px;margin-top:10px}
@media (max-width:600px){.safety-first{padding:14px 14px;margin:12px 0 16px;font-size:13.5px}.safety-first h2{font-size:17px}}
@media print{.safety-first{break-inside:avoid;-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* G3: navigation, interaction and motion fixes */
/* no horizontal scrollbar while a whole screen slides sideways (overflow-x:clip keeps position:sticky working) */
#app.ui-sliding{overflow-x:clip}
/* content that is moving cannot be clicked (keyboard actions are queued by app.js) */
[data-ui-anim]{pointer-events:none}
/* re-drawing the same results (70/177 switch) does not replay the score reveal */
.no-reveal .score-spectrum-fill,.no-reveal .score-spectrum-thumb{animation:none!important}
/* a wizard screen made of several blocks (hero + resume bar) slides as one pane */
.wizard-slide-shell>.wizard-slide-pane.wizard-pane-group{width:100%;max-width:none}
.nav-link.nav-unavailable{opacity:.6}
.j-resume{flex-wrap:wrap;gap:12px}
.render-error{max-width:640px;margin:48px auto;padding:28px}
.render-error h1{font-family:Georgia,serif;font-weight:500;font-size:30px;line-height:1.2;margin:0 0 10px}
.render-error-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* programmatic focus targets (headings, question cards): ring only for keyboard users */
[data-focus-heading]:focus:not(:focus-visible),h1[tabindex="-1"]:focus:not(:focus-visible),h2[tabindex="-1"]:focus:not(:focus-visible){outline:none}
[data-focus-heading]:focus-visible,h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible{outline:3px solid #a6cec1;outline-offset:4px;border-radius:6px}
@media (prefers-reduced-motion: reduce){
 html{scroll-behavior:auto}
 .btn,.j-choice,.wizard-length,.count-choice,.toast{transition-property:color,background-color,border-color,box-shadow,opacity!important}
 .btn:hover,.btn:active,.j-choice:hover,.wizard-length:hover,.count-choice:hover{transform:none!important}
}
.hero-resume{margin:4px 0 0}
.hero-resume-link{border:0;background:none;padding:6px 2px;color:var(--green);font-weight:650;font-size:14px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.hero-resume-link:hover{text-decoration-thickness:2px}
.hero-resume-link:focus-visible{outline:3px solid #a6cec1;outline-offset:2px;border-radius:6px}

/* ===== G4: accessibility (WCAG 2.2 AA) and responsive layer =====
   Appended last so it wins over the earlier layers without rewriting them. Palette kept: only the text tokens that
   failed 4.5:1 were darkened a little (same hue), focus rings use the existing dark green. */
:root{--muted:#5f6d69;--focus:#183f3b;--header-h:79px}
html{scroll-padding-top:calc(var(--header-h) + 12px)} /* 2.4.11: a focused element never sits under the sticky header (JS keeps --header-h exact) */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.print-only{display:none}
.skip-link{position:absolute;left:16px;top:-64px;z-index:120;background:var(--forest);color:#fff;padding:11px 18px;border-radius:10px;font-weight:720;font-size:14px;text-decoration:none}
.skip-link:focus{top:12px}
#app:focus{outline:none} /* skip-link target, not a control */

/* Focus indicator: 2px dark green + offset (≥3:1 on every light surface). Replaces the pale #a6cec1 ring and every outline:none. */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--focus);outline-offset:2px}
h1[tabindex="-1"]:focus-visible,h2[tabindex="-1"]:focus-visible,[data-focus-heading]:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.field input:focus-visible,.field textarea:focus-visible,.custom-select-trigger:focus-visible,#app input[type="text"]:focus-visible,#app textarea:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.custom-option:focus-visible{outline:2px solid var(--focus);outline-offset:-2px;background:#e3efe7}
.survey-new-layout .side-item:focus-visible{outline-offset:-2px}
.rating-meter:has(.rating-meter-input:focus-visible) .rating-meter-rail{outline:2px solid var(--focus);outline-offset:7px}
.save-warning .save-warning-close:focus-visible{outline-color:#fff}

/* Non-text contrast (1.4.11): field borders, dropdown triggers, slider rail and stops, empty question dots. */
.field input,.field select,.field textarea,#app input[type="text"],#app textarea{border-color:#7d8f88}
.custom-select-trigger,.header-language .custom-select-trigger{border-color:#7d8f88}
.rating-meter-rail{box-shadow:inset 0 0 0 1px #6f817a}
.rating-meter-stop{border-color:#6f817a}
.rating-meter-stop.passed{box-shadow:0 0 0 1px #3d4f49}
.rating-meter-thumb{box-shadow:0 0 0 1px #2f403a,0 2px 7px rgba(24,55,45,.22)}
.survey-dot{border-color:#7d8f88;width:24px;height:24px;flex:0 0 24px} /* 2.5.8: 24×24 target on every width */
.survey-dot.done{border-color:#2d6f5d;border-width:2px}
.survey-dot.partial{border-color:#2d6f5d;border-style:dashed} /* "partly answered" is not shown by colour alone */
.survey-dot.current{border-color:var(--forest);box-shadow:0 0 0 3px #cfe3d7}

/* Text contrast (1.4.3) */
.wizard-step-total{color:var(--muted)}
.side-item span:first-child,.survey-new-layout .side-item span:first-child{color:#566a61}
.side-item .side-count,.survey-new-layout .side-item .side-count{color:#566a61}
.side-item.finished .side-count{color:#256b59}
.score-big span{color:#5b6f66}
.comparison-header>div:nth-child(3){color:#9c5a45}
.person-b{color:#9c5a45}
.guidance-score-grid .has-safety-flag>small{color:#4d6a5e}
.att-overline{color:#2f6455}
.att-style-score-head small{color:#5b6f66}
.att-secondary-result strong>small{color:#74594a}
.rating-meter-legend{color:#5f6d69}
.rating-meter-legend span:nth-child(2){color:#4b6359}
.q-index{color:#556b61}
.q-sub{color:#5f6d69}
.survey-vcount,#app [id^="progress-label-"]{color:#5b6f66}
.j-rel-score-grid span,.j-rel-score-grid small{color:#4f6359}
.j-rel-score-grid strong small{color:#5b6f66}
.nav-link.nav-unavailable{opacity:1;color:#5f6d69}
.rating-col[data-level="none"] .rating-selection{color:#5f6d69}
/* Selected rating: text in a darker shade of the rating colour (≥4.5:1); chips 1 and 5 slightly darker so white text passes. */
.rating-col[data-level="0"]{--rating-text:#a9444d}
.rating-col[data-level="1"]{--rating-color:#b05a4a;--rating-text:#a8574a}
.rating-col[data-level="2"]{--rating-text:#9a5f2b}
.rating-col[data-level="3"]{--rating-text:#8a6a1f}
.rating-col[data-level="4"]{--rating-text:#3c7a63}
.rating-col[data-level="5"]{--rating-color:#357f69;--rating-text:#2f7a62}
.rating-col[data-level="6"]{--rating-text:#236d5d}
.rating-col:not([data-level="none"]) .rating-selection,.rating-col.b:not([data-level="none"]) .rating-selection,.att-person-answer .att-rating-value,.att-person-answer .att-rating-meaning{color:var(--rating-text,var(--forest))}
.att-person-answer .att-rating-meaning::before{color:currentColor}

/* Safety alert on the score card: clearly marked, not only by a pale tint. */
.safety-alert{border:1px solid #e3b7a3;border-left:5px solid #b4533f;background:#fff4ef;color:#6a3a28;font-size:13px}
.safety-alert strong{color:#5c2f1f}

/* Combo report "what differs": header row with the names, A and B told apart by name, dot and colour. */
.j-rel-row{align-items:baseline}
/* header row: same grid as the data rows (kept out of .j-rel-row so data-row selectors stay unchanged) */
.j-rel-head{display:grid;grid-template-columns:minmax(120px,1fr) 90px 90px;gap:10px;padding:9px 0 7px;font-size:12px;align-items:end;border-bottom:2px solid #d5e0d8;font-weight:760;color:var(--ink)}
@media(max-width:480px){.j-rel-head{grid-template-columns:minmax(80px,1fr) 55px 55px}}
.j-rel-head>span:nth-child(n+2){text-align:center;font-family:inherit;font-size:12px;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;overflow-wrap:anywhere;line-height:1.3}
.j-rel-head .profile-dot{width:8px;height:8px;flex:0 0 8px;display:inline-block}
.j-rel-row>span.j-rel-b{color:#9c5a45}
.j-rel-row>span.j-rel-a{color:#256b59}

/* Source links in lists: ≥24px tall targets (2.5.8) */
.guidance-sources a,.j-science a{display:inline-block;padding:4px 0;min-height:24px}

/* Reflow and text spacing (1.4.10, 1.4.12) */
@media (max-width:480px){.btn{white-space:normal;text-align:center}}
.custom-select:not(.header-language) .custom-current{white-space:normal;overflow:visible;text-overflow:clip}
.question-count{white-space:normal}
@media (max-height:500px){.site-header{position:static}}

/* Mobile gutters ≥16px (was 14px) */
@media (max-width:760px){.container,body.on-survey #app.container{width:calc(100% - 32px)}}

/* Survey on desktop: header, survey and footer share one left edge; all 17 areas + the final question fit in the list. */
@media (min-width:761px){
 body.on-survey .site-header .container,body.on-survey .site-footer .container,body.on-survey #app.container{width:min(1460px,calc(100% - 48px))}
}
@media (min-width:1061px){
 .survey-new-layout{grid-template-columns:208px minmax(0,1fr) 130px}
 .survey-new-layout .survey-sidebar{padding:10px 8px;position:sticky}
 .survey-new-layout .survey-sidebar .side-label{margin:4px 9px 6px}
 .survey-new-layout .side-item{padding:6px 9px;line-height:1.3}
}
/* Scroll affordance for the category list when the window is too short for all entries. */
.side-more{display:none}
.survey-sidebar.has-more .side-more{display:block;position:sticky;bottom:-10px;height:34px;margin:-34px -8px -10px;background:linear-gradient(rgba(255,255,255,0),#fff 70%);pointer-events:none}
.survey-sidebar.has-more .side-more::after{content:"";position:absolute;left:50%;bottom:9px;width:8px;height:8px;border-right:2px solid var(--green);border-bottom:2px solid var(--green);transform:translateX(-50%) rotate(45deg)}

/* Tablet (761–1060px): the 3-column survey squeezed the 0–6 buttons to ~20px. Use the stacked layout as on phones:
   categories as a horizontal strip, compact progress next to it, the question at full width. */
@media (min-width:761px) and (max-width:1060px){
 .survey-new-layout{grid-template-columns:minmax(0,1fr) 150px;grid-template-areas:'cats progress' 'stage stage';gap:14px 12px}
 .survey-new-layout .survey-sidebar{grid-area:cats;display:flex;align-items:center;gap:6px;overflow-x:auto;overflow-y:hidden;height:auto;min-height:0;max-height:none;padding:10px;position:relative;top:auto;white-space:nowrap;scrollbar-width:thin;align-self:center}
 .survey-new-layout .survey-sidebar .side-label{display:none}
 .survey-new-layout .side-item{width:auto;min-width:max-content;border:1px solid #e4e9e2;padding:9px 11px;font-size:11px;display:flex;align-items:center;gap:6px}
 .survey-new-layout .side-item span:first-child{display:none}
 .survey-stage-viewport{grid-area:stage}
 .survey-progress-sidebar{grid-area:progress;position:relative;top:auto;height:auto;min-height:0;max-height:none;align-self:stretch;padding:10px 8px;gap:6px;justify-content:center}
 .survey-progress-vertical{flex:0 0 auto;align-items:start;gap:10px}
 .survey-vprofile{height:auto;width:58px;gap:3px;flex:0 0 auto}
 .survey-vtrack{height:44px;flex:0 0 44px;width:16px;min-height:44px}
 .survey-vticks{display:none}
 .survey-vpercent{font-size:16px}
 .question-stage{min-height:0}
}

/* Print / PDF: no near-empty pages (large containers may break, small cards stay whole), page margins, printed date,
   bars keep their colour even with "background graphics" off. */
@page{margin:12mm}
@media print{
 .print-only{display:block}
 #print-meta{font-size:11px;color:#333;margin:0 0 8px;padding-bottom:4px;border-bottom:1px solid #bbb}
 .skip-link,#sr-status{display:none!important}
 .surface,.comparison,.couple-results,.insight-panel,.att-result-card,.j-mega-person,.j-mega-section,.j-result-card,.guidance-section{break-inside:auto!important}
 .comparison,.couple-results{break-before:auto!important}
 .score-card,.compare-row,.insight-item,.couple-question-diff,.couple-gap-cat,.j-rank,.j-rel-row,.j-advice,.att-style-score,.att-comparison,.safety-alert,.guidance-card,.score-explainer{break-inside:avoid!important}
 h1,h2,h3,h4,.comparison-header,.j-rel-head{break-after:avoid}
 /* A heading must not be the last thing on a page: the invisible 80px tail travels with the heading (break-inside:avoid),
    so a heading with less than ~80px left below it moves to the next page together with its content. Layout is unchanged
    (the tail is cancelled by its own negative margin). */
 #app h2,#app h3,.j-rel-head{break-inside:avoid}
 #app h2::after,#app h3::after{content:"";display:block;height:80px;margin-bottom:-80px}
 /* An eyebrow label ("WHAT RESEARCH TELLS US") stays with the heading it introduces. */
 .step-tag:has(+ h1,+ h2,+ h3){display:block;break-after:avoid}
 .j-rel-score-grid>div{break-inside:avoid}
 #app details:not(.survey-notes)>summary{break-inside:avoid;break-after:avoid}
 #app details:not(.survey-notes)>summary::after{content:"";display:block;height:60px;margin-bottom:-60px}
 /* Combo report: tighter card padding on paper (screen padding is generous for touch, not needed in print). */
 .j-mega-person,.j-mega-section,.j-result-card{padding:20px}
 .j-mega-section{margin-bottom:14px}
 /* Compact score cards and safety box so that the title, safety box and both score cards fit on page 1. */
 .score-card{padding:12px}
 .score-card .score-big{margin-top:10px;margin-bottom:8px}
 .score-card .score-completion{margin-top:10px}
 .score-card .safety-alert{margin-top:8px;padding:10px 12px}
 .safety-first{padding:14px 16px}
 .compare-bar,.compare-track,.score-spectrum,.score-spectrum-fill,.score-spectrum-thumb,.couple-gap-fill,.progress-fill,.profile-dot{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ===== final-vis: final visual QA polish (appended last, layout and spacing only) ===== */
/* Survey header on phones and tablets (≤1060px): the category strip used to be stretched to the height of the progress
   card next to it (~144px with one chip row floating in the middle). Now: one full-width strip of chips, below it a calm
   one-line progress card (caption left, each person as a mini bar + name + percent + count on the right). */
@media (max-width:1060px){
 .survey-new-layout{grid-template-columns:minmax(0,1fr);grid-template-areas:'cats' 'progress' 'stage';gap:10px}
 .survey-new-layout .survey-sidebar,.survey-new-layout .survey-progress-sidebar{height:auto;min-height:0;max-height:none;align-self:stretch;position:relative;top:auto;border-radius:14px}
 .survey-new-layout .survey-sidebar{padding:6px;gap:6px;margin:0}
 .survey-new-layout .survey-progress-sidebar{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:9px 14px;text-align:left}
 .survey-new-layout .survey-progress-caption{max-width:none;white-space:nowrap;font-size:11px;line-height:1.3}
 .survey-new-layout .survey-progress-vertical{flex:0 1 auto;width:auto;min-width:0;display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:18px}
 .survey-new-layout .survey-vprofile{display:grid;grid-template-columns:auto auto auto;grid-template-areas:'track name name' 'track pct count';align-items:baseline;column-gap:7px;row-gap:0;width:auto;height:auto;min-width:0;flex:0 1 auto}
 .survey-new-layout .survey-vtrack{grid-area:track;align-self:center;width:8px;height:30px;min-height:30px;flex:none}
 .survey-new-layout .survey-vticks{display:none}
 .survey-new-layout .survey-vname{grid-area:name;max-width:120px;font-size:11px;text-align:left}
 .survey-new-layout .survey-vpercent{grid-area:pct;font-size:15px;line-height:1.15}
 .survey-new-layout .survey-vcount{grid-area:count;font-size:11px}
}
@media (max-width:390px){
 .survey-new-layout .survey-progress-sidebar{padding:8px 12px;column-gap:12px}
 .survey-new-layout .survey-progress-vertical{gap:12px}
 .survey-new-layout .survey-vname{max-width:84px}
}
/* Desktop: two "100%" labels in the 130px progress column touched each other ("100%100%"). */
@media (min-width:1061px){.survey-progress-vertical:not(.single) .survey-vpercent{font-size:19px;letter-spacing:-.02em}}

/* "What research tells us" / "How to interpret this" toggles were 18–20px tall: ≥24px target (2.5.8). */
.guidance-evidence>summary,.j-science>summary{padding-block:4px;min-height:24px}

/* Combo report "what differs" header: in the 55px columns long names broke mid-word ("Aleks|ndra"). Dot above the name
   and slightly wider value columns on phones (header and rows share the same grid). */
@media (max-width:480px){
 .j-rel-head,.j-rel-row{grid-template-columns:minmax(0,1fr) 66px 66px;gap:8px}
 .j-rel-head>span:nth-child(n+2){flex-direction:column;gap:3px;overflow-wrap:break-word}
}

/* Love-language name fields used the label's 12px bold text; match the attachment test fields. */
.j-name-grid input{font-size:15px;font-weight:400;font-family:inherit}

/* Print: the two-column score / insight grids must not grow past a narrow page. */
@media print{.score-cards,.insights-grid,.couple-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Attachment intro: the four pattern tiles were two ~135px columns on phones (one word per line in PL). */
@media (max-width:520px){.att-style-grid{grid-template-columns:minmax(0,1fr)}}

/* R (B1): a long name without spaces (e-mail-like pseudonym, up to 52 / 46 characters) made results, the final question,
   attachment / love results and the combo report scroll sideways. Break such names only where they cannot fit. */
.comparison-header>div,.insight-head h2,.couple-meta,.couple-mini>span,.safety-first p,.guidance-section>p,.guidance-warning,.guidance-card h3,.j-advice h3,.j-advice p,.j-compare-grid h3,.j-compare-grid p,.j-rel-score-grid>div{overflow-wrap:anywhere}
.insight-head h2,.couple-mini>span,.last-personal>.big-rating{min-width:0}
@media (max-width:480px){
 .j-rel-head>span:nth-child(n+2){display:block;text-align:center}
 .j-rel-head>span:nth-child(n+2) .profile-dot{display:block;margin:0 auto 3px}
}

/* ===== V37: safety signals, private step, bands, held answers, attachment dimensions, tips, info pages ===== */
.quick-exit{min-height:36px;padding:7px 13px;border-radius:999px;border:1px solid #c9a596;background:#fff7f3;color:#7a3527;font-size:12px;font-weight:720;cursor:pointer;white-space:nowrap}
.quick-exit:hover{background:#ffece3}
.quick-exit-float{display:none}
@media (max-width:600px){#quick-exit{display:none}.quick-exit-float{display:inline-flex;align-items:center;position:fixed;right:12px;bottom:12px;z-index:95;box-shadow:0 4px 14px #5a2a1c26}body{padding-bottom:60px}}
@media print{.quick-exit,.quick-exit-btn{display:none!important}}
.quick-exit-btn{display:inline-flex;align-items:center;min-height:32px;margin-top:10px;padding:6px 14px;border-radius:999px;border:1px solid #c9a596;background:#fff;color:#7a3527;font-size:12px;font-weight:720;cursor:pointer}
.quick-exit-btn:hover{background:#fff1ea}
.link-btn{background:none;border:0;padding:2px 0;min-height:24px;color:var(--green);font:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* signals */
.safety-first.warning{border-left-color:#c27a3c;background:#fff8f0;color:#5a3a1c}
.safety-first.warning h2{color:#8a4a1c}
.signal-items-label{margin:6px 0 4px;font-weight:700}
.signal-items{margin:0 0 12px;padding-left:20px}
.signal-items li{margin:2px 0}
.help-lines{margin:6px 0 10px;padding-left:20px;line-height:1.6}
.help-lines li{margin:3px 0}
.help-lines a{color:inherit;font-weight:700}
.no-signal-note,.shared-private-note{max-width:860px;margin:10px 0;padding:11px 15px;border-radius:12px;background:#f1f5f2;border:1px solid #dfe8e2;color:#33504a;font-size:13px;line-height:1.6}
.shared-private-note{background:#f6f3ee;border-color:#e6ded2;color:#4e4436}
/* score card */
.score-descriptor.band-high{color:#226a58}.score-descriptor.band-mixed{color:#6b5b2a}.score-descriptor.band-low{color:#8a3e2f}
.score-gate{font-size:15px;line-height:1.5;color:#7a3527;font-weight:700;margin:6px 0 10px}
.score-numbers{margin:4px 0 12px;font-size:13px}
.score-numbers>summary{cursor:pointer;font-weight:720;color:#286e5b;min-height:24px;padding:3px 0}
.score-mean{display:flex;flex-direction:column;gap:2px;margin:8px 0 6px}
.score-mean-label{font-size:12px;color:var(--muted);font-weight:650}
.score-100{margin-top:6px}
.score-feeling{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;margin:12px 0 4px;padding:10px 12px;border-radius:11px;background:#f6f8f5;font-size:13px}
.score-feeling span{color:var(--muted);font-weight:650}
.score-feeling strong{color:var(--forest)}
.held-note{color:#6b5b2a}
.band-chip{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:999px;font-size:11px;font-weight:700;white-space:nowrap}
.band-chip.band-high{background:#e5f1ea;color:#1f604f}.band-chip.band-mixed{background:#f6f0dc;color:#5e4f20}.band-chip.band-low{background:#f8e7e1;color:#7d3526}
.compare-row-group{border-bottom:1px solid #edf1ec}
.compare-row-group .compare-row{border-bottom:0}
.compare-lowest{margin:-4px 0 10px;font-size:12px;color:var(--muted);line-height:1.5;display:flex;gap:7px;align-items:baseline}
.compare-lowest .profile-dot{flex:0 0 7px;width:7px;height:7px;display:inline-block;transform:translateY(-1px)}
.insight-safety strong{color:#7a3527}
/* quotes and tips */
.quotes-section h2,.tips-section h2{margin-top:0}
.quotes-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.quotes-grid.single-profile{grid-template-columns:minmax(0,1fr)}
.quotes-person h3{display:flex;align-items:center;gap:8px;font-size:15px;margin:0 0 6px}
.quotes-label{margin:10px 0 4px;font-size:12px;font-weight:720;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.quotes-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.quotes-list li{display:flex;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:10px;background:#f3f8f4;font-size:13px;line-height:1.5}
.quotes-list.low li{background:#fbf3ee}
.quotes-list strong{white-space:nowrap;color:var(--forest)}
.tip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px;margin-top:12px}
.tip-card{border:1px solid #e0e8e0;border-radius:14px;background:#fbfcfa;padding:15px 16px}
.tip-card h3{font-size:16px;margin:4px 0 6px;line-height:1.35}
.tip-card p{font-size:13px;line-height:1.65;margin:0 0 8px}
.tip-area{font-size:11px;font-weight:740;letter-spacing:.05em;text-transform:uppercase;color:var(--green)}
.tip-evidence{font-size:11.5px!important;color:var(--muted);margin:0!important}
.tip-evidence a{color:#286e5b}
details.pair-only>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;min-height:28px}
details.pair-only>summary::-webkit-details-marker{display:none}
details.pair-only>summary::before{content:'+';display:inline-grid;place-items:center;flex:0 0 24px;height:24px;border-radius:50%;background:#e8f1ec;color:var(--green);font-weight:800}
details.pair-only[open]>summary::before{content:'–'}
details.pair-only>summary h2{margin:0;font-size:20px;line-height:1.35}
.couple-dialogue.pair-only{margin:16px 0}
.guidance-pair.pair-only{margin-top:16px;padding:14px 16px;border:1px solid #e0e8e0;border-radius:12px;background:#fbfcfa}
.compare-diff-list{padding-left:20px;line-height:1.7}
/* held answers */
.held-banner{margin:12px 0;padding:12px 16px;border-radius:12px;border:1px solid #e8d9b5;background:#fdf8ec;color:#4f4223;font-size:13px;line-height:1.6;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.held-banner p{margin:0;flex:1 1 280px}
details.held-banner{display:block}
details.held-banner>summary{cursor:pointer;min-height:24px}
details.held-banner>summary span{font-weight:720;text-decoration:underline;margin-left:6px}
.v1-table{width:100%;border-collapse:collapse;margin:10px 0;font-size:12.5px}
.v1-table th,.v1-table td{text-align:left;padding:6px 8px;border-bottom:1px solid #eadfc3;vertical-align:top}
.held-note-q{margin:0 0 12px;padding:9px 12px;border-radius:10px;background:#fdf8ec;border:1px solid #ecdfbf;color:#4f4223;font-size:13px;line-height:1.55}
.held-note-q.v1 p{margin:0 0 8px}
/* private step */
.private-card p{line-height:1.7}
.private-limit{padding:10px 13px;border-radius:10px;background:#f6f3ee;border:1px solid #e6ded2;font-size:13px}
.private-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 6px}
.private-screen{max-width:880px;margin:0 auto}
.private-screen.surface{padding:28px}
.private-screen h1{font-size:clamp(26px,4vw,36px);margin:8px 0 12px}
.private-count{margin:6px 0 0;color:var(--muted);font-size:13px}
.private-joint{margin:16px 0;padding:12px 15px;border-radius:12px;background:#f1f5f2;border:1px solid #dfe8e2;font-size:13.5px;line-height:1.65}
.side-private{font-style:italic}
/* attachment: dimensions */
.att-axes{display:grid;gap:12px;margin:16px 0}
.att-axis-head{display:flex;justify-content:space-between;gap:12px;align-items:baseline;font-size:13px}
.att-axis-head b{font-family:Georgia,serif;font-size:20px;font-weight:500}
.att-axis-track{position:relative;height:11px;margin-top:6px;border-radius:20px;background:#e8eee9;overflow:hidden}
.att-axis-fill{position:absolute;left:0;top:0;bottom:0;border-radius:20px;background:#7aa997}
.att-axis-fill.anx{background:#ca8b68}.att-axis-fill.avo{background:#7c8dab}
.att-axis-mid{position:absolute;left:41.67%;width:16.66%;top:0;bottom:0;background:#d7e1da}
.att-chart-wrap h4{margin:18px 0 8px}
.att-chart{display:block;width:100%;max-width:340px;height:auto;margin:6px auto 4px}
.att-chart-frame{fill:#fbfcfa;stroke:#cfdcd3;stroke-width:1}
.att-chart-mid{fill:#eef3ef}
.att-chart-axis{stroke:#b8c8be;stroke-width:1;stroke-dasharray:4 4}
.att-q-label{font-size:11px;fill:#55706a;font-weight:650}
.att-axis-label{font-size:11px;fill:#3e5a52;font-weight:700}
.att-point{stroke:#fff;stroke-width:2.5}
.att-point.a{fill:var(--green)}.att-point.b{fill:var(--peach)}
.att-style-grid.result .att-style-tile{background:#f7f8f6;border-style:dashed}
.att-style-grid.result .att-style-tile.is-near{opacity:1;border-color:var(--green);background:#f1f8f4;box-shadow:inset 0 0 0 1px var(--green)}
.att-pattern-cards h4{margin:20px 0 4px}
.att-card-hint{font-size:12px;color:var(--muted);margin:0 0 10px}
.att-answer-style{margin:8px 0 0;padding:9px 12px;border-radius:10px;background:#fdf8ec;font-size:13px;line-height:1.55;color:#4f4223}
.att-stress-note{font-size:12.5px;color:var(--muted);margin:14px 0 0}
.att-method p{font-size:12.5px}
.j-att-headline{font-family:Georgia,serif;font-size:19px;margin:4px 0 8px}
/* attachment answers use one neutral colour: agreeing with a worry is not "good" or "bad" */
.att-person-answer.rating-col{--rating-color:#3e6c5f!important;--rating-ink:#fff!important;--rating-text:#2b5a4d!important}
/* combined report */
.j-quality ul{padding-left:20px;line-height:1.7;margin:6px 0}
.j-overview-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:14px}
.j-overview-card{border:1px solid #e0e8e0;border-radius:14px;background:#fbfcfa;padding:15px 16px}
.j-overview-card h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:16px}
.j-overview-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:5px 12px;font-size:13px}
.j-overview-card dt{color:var(--muted);font-weight:650}
.j-overview-card dd{margin:0;font-weight:650;color:var(--forest);overflow-wrap:anywhere}
.j-overview-card dd small{display:block;font-weight:500;color:var(--muted)}
.j-tie{font-style:normal;font-size:11px;color:var(--muted)}
.j-pair-section>summary{padding:4px 0}
/* info pages */
.info-page{max-width:860px;margin:24px auto;padding:30px}
.info-page h1{font-size:clamp(28px,4vw,40px);margin:8px 0 10px}
.info-page h2{font-size:19px;margin:26px 0 8px}
.info-page p,.info-page li{line-height:1.7;font-size:14.5px}
.info-lead{font-size:16px!important}
.info-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.draft-banner{padding:11px 15px;border-radius:12px;background:#fdf8ec;border:1px solid #e8d9b5;color:#4f4223;font-weight:650}
.todo-mark{display:inline-block;padding:1px 8px;border-radius:6px;background:#fff1d6;border:1px dashed #c99a3a;color:#6b4c12;font-size:12.5px;font-weight:700}
.owner-list{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px}
.owner-list dt{font-weight:700;color:var(--muted)}.owner-list dd{margin:0}
.privacy-table{border-collapse:collapse;width:100%;font-size:13.5px;margin:8px 0}
.privacy-table th,.privacy-table td{text-align:left;vertical-align:top;padding:7px 9px;border-bottom:1px solid #e6ece6}
.privacy-table code{font-size:12.5px;white-space:nowrap}
.hero .held-banner{margin:18px 0 0}.hero .held-banner p{margin:0;max-width:none;font-size:13px;line-height:1.6}
.export-dialog .export-choice{margin:12px 0}
.export-dialog .export-choice p{margin:6px 0 0;font-size:13px;color:var(--muted);line-height:1.55}
.export-dialog .export-choice .btn{width:100%}
.footer-links.footer-info{grid-column:3;grid-row:2}
@media(max-width:980px){.footer-links.footer-info{grid-column:1;grid-row:auto}}
@media (max-width:720px){.quotes-grid{grid-template-columns:minmax(0,1fr)}.private-screen.surface,.info-page{padding:20px}.band-chip{margin-left:0;margin-top:4px}}
@media print{details.pair-only>summary::before{display:none}.no-signal-note,.shared-private-note{break-inside:avoid}}

.att-result-grid:not(.single) .att-style-grid.result{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:520px){.att-result-grid .att-style-grid.result{grid-template-columns:minmax(0,1fr)}}
.score-card .score-descriptor[class*="band-"],.score-card .score-gate{font-size:18px;font-weight:720;line-height:1.35;margin:10px 0 4px}
.att-axis-head{flex-wrap:wrap}
.att-axis-head span{white-space:nowrap}
@media (max-width:520px){.att-axis-head b{font-size:17px}.att-axis-head span{font-size:13px}}
/* V37: long names and labels never widen the page (same rule as R/B1 for the older elements) */
.band-chip{white-space:normal;max-width:100%}
@media (max-width:760px){.compare-bar-wrap .band-chip{display:block;width:max-content;max-width:100%;margin:4px 0 0}}
.compare-lowest,.quotes-person h3,.quotes-list span,.j-overview-card h3,.j-att-headline,.att-main-result h3,.att-overline,.private-actions .btn,.private-screen .step-tag,.survey-eyebrow,.tip-card h3,.tip-area,.signal-items li,.held-banner p,.v1-table td,.compare-diff-list li,.no-signal-note,.shared-private-note{overflow-wrap:anywhere;min-width:0}
.compare-lowest{flex-wrap:wrap}
.private-actions .btn{max-width:100%;white-space:normal;text-align:left}
.att-comparison p,.att-comparison .section-caption{color:#3b5449}
@media print{
 /* V37: new report blocks stay whole, and sub-labels travel with their content (same tail trick as h2/h3). */
 .j-overview-card,.tip-card,.quotes-list li,.att-axis-row,.signal-items,.no-signal-note,.shared-private-note,.held-banner{break-inside:avoid!important}
 .insight-panel>p,.quotes-label,.att-pattern-cards>h4,.j-mega-columns h4{break-inside:avoid;break-after:avoid}
 .insight-panel>p::after,.quotes-label::after{content:"";display:block;height:60px;margin-bottom:-60px}
}

.j-mega-columns section h3,.j-mega-columns section p,.j-quality li,.j-advice h3,.j-overview-card dd{overflow-wrap:anywhere;min-width:0}
.j-mega-columns>*{min-width:0}
.j-mega-section>p,.j-mega-section li{overflow-wrap:anywhere}
@media print{.guidance-sources,.att-method,.guidance-evidence>p:last-child{break-inside:avoid}}
/* V38: progress note while a PDF is being created (pdf.js) */
.pdf-progress{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:16px;background:#0f2a2633}
.pdf-progress-card{display:flex;align-items:center;gap:12px;max-width:min(420px,100%);padding:16px 20px;border-radius:16px;background:#fff;color:var(--ink);box-shadow:0 18px 40px #0f2a2633;font-size:15px;line-height:1.45}
.pdf-spinner{flex:0 0 22px;width:22px;height:22px;border-radius:50%;border:3px solid #d7e6dc;border-top-color:var(--green);animation:pdfspin .8s linear infinite}
@keyframes pdfspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.pdf-spinner{animation:none;border-top-color:var(--green)}}
/* V38: start screen – one main action, three single modules with info toggletips */
.hero-actions-v38{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:28px}
.hero-main{font-size:15px;padding:15px 26px;min-height:52px;box-shadow:0 12px 26px #183f3b24;white-space:normal;text-align:center}
.hero-modules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:100%;max-width:640px}
.hero-module{grid-row:1;display:flex;align-items:stretch;min-width:0;border:1px solid #cdded3;border-radius:12px;background:#ffffffb3}
.hm-1{grid-column:1}.hm-2{grid-column:2}.hm-3{grid-column:3}
.hero-module:hover,.hero-module:focus-within{border-color:#9cc3ae;background:#fff}
.hero-module .hero-module-btn{flex:1 1 auto;min-width:0;min-height:48px;justify-content:flex-start;border:0!important;border-radius:12px 0 0 12px;background:transparent!important;padding:11px 8px 11px 14px;font-size:13.5px;white-space:normal;text-align:left;line-height:1.3;overflow-wrap:anywhere;hyphens:auto}
.hero-info{flex:0 0 44px;display:grid;place-items:center;min-height:44px;border:0;border-left:1px solid #dfe9e2;border-radius:0 12px 12px 0;background:transparent;color:var(--green);cursor:pointer;padding:0}
.hero-info-icon{display:block;width:22px;height:22px}
.hero-info:hover,.hero-info[aria-expanded="true"]{background:#eaf4ec}
.hero-info:focus-visible{outline:3px solid #2e7d6a;outline-offset:-3px}
.hero-tip{display:none;grid-column:1/-1;grid-row:2;padding:13px 15px;border:1px solid #cfe0d5;border-radius:12px;background:#fff;color:var(--ink);font-size:13.5px;line-height:1.6;box-shadow:0 10px 24px #183e351a;text-align:left}
.hero-tip.open{display:block}
/* hover (mouse) or keyboard focus shows that module's tip */
@media (hover:hover){.hero-modules:has(.hm-1 .hero-info:hover) .ht-1,.hero-modules:has(.hm-2 .hero-info:hover) .ht-2,.hero-modules:has(.hm-3 .hero-info:hover) .ht-3{display:block}}
.hero-modules:has(.hm-1 .hero-info:focus-visible) .ht-1,.hero-modules:has(.hm-2 .hero-info:focus-visible) .ht-2,.hero-modules:has(.hm-3 .hero-info:focus-visible) .ht-3{display:block}
/* wide screens: the three tips share one reserved cell under the row (always laid out, as tall as the longest one), so
   showing a tip never moves or covers anything; only visibility changes, and a hovered/focused tip hides an open one */
@media(min-width:621px){
 .hero-modules .hero-tip{display:block;visibility:hidden}
 .hero-modules .hero-tip.open{visibility:visible}
 .hero-modules:has(.hero-info:hover) .hero-tip,.hero-modules:has(.hero-info:focus-visible) .hero-tip{visibility:hidden}
 .hero-modules:has(.hm-1 .hero-info:hover) .ht-1,.hero-modules:has(.hm-2 .hero-info:hover) .ht-2,.hero-modules:has(.hm-3 .hero-info:hover) .ht-3,
 .hero-modules:has(.hm-1 .hero-info:focus-visible) .ht-1,.hero-modules:has(.hm-2 .hero-info:focus-visible) .ht-2,.hero-modules:has(.hm-3 .hero-info:focus-visible) .ht-3{visibility:visible}}
@media(max-width:620px){.hero-main{width:100%}.hero-modules{grid-template-columns:1fr}
 .hm-1,.hm-2,.hm-3{grid-column:1}.hm-1{grid-row:1}.ht-1{grid-row:2}.hm-2{grid-row:3}.ht-2{grid-row:4}.hm-3{grid-row:5}.ht-3{grid-row:6}}
/* V38: love-language answers – larger text, centred horizontally and vertically, the choice marker at the left edge,
   symmetric side padding so the sentence stays truly centred; long sentences wrap */
.j-option{position:relative;display:flex;align-items:center;justify-content:center;min-height:112px;padding:20px 56px;text-align:center}
.j-option .j-radio{position:absolute;left:18px;top:50%;margin-top:-10px;width:20px;height:20px;flex:none}
.j-option>span:nth-child(2){font-size:18px;line-height:1.5;font-weight:520;overflow-wrap:anywhere;hyphens:auto;max-width:34ch}
@media(max-width:760px){.j-option{min-height:96px;padding:16px 46px}.j-option .j-radio{left:14px}.j-option>span:nth-child(2){font-size:16.5px}}
@media(max-width:360px){.j-option{padding:14px 40px}.j-option .j-radio{left:11px;width:18px;height:18px;margin-top:-9px}.j-option>span:nth-child(2){font-size:16px}}
/* V38: destructive actions are red, also on hover and keyboard focus (other buttons keep the green feedback).
   Contrast: #a3271f on white 7.3:1, on #fdeeec 6.5:1, on the page background 6.7:1; white on #a3271f 7.3:1. */
:root{--danger:#a3271f;--danger-dark:#821d17;--danger-tint:#fdeeec;--danger-ring:#c2413a40}
#footer-reset,[data-action="legacy-private-delete"],[data-action="legacy-backup-delete"]{color:var(--danger)!important}
[data-action="legacy-private-delete"],[data-action="legacy-backup-delete"]{border-color:#e7b9b4!important;background:#fff!important}
#footer-reset:hover,#footer-reset:focus-visible,[data-action="legacy-private-delete"]:hover,[data-action="legacy-private-delete"]:focus-visible,[data-action="legacy-backup-delete"]:hover,[data-action="legacy-backup-delete"]:focus-visible{color:var(--danger-dark)!important;background:var(--danger-tint)!important;border-color:var(--danger)!important;box-shadow:0 0 0 3px var(--danger-ring);text-decoration:none}
#footer-reset:focus-visible,[data-action="legacy-private-delete"]:focus-visible,[data-action="legacy-backup-delete"]:focus-visible,[data-action="attachment-retake-confirm"]:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
[data-action="attachment-retake-confirm"]{background:var(--danger)!important;border-color:var(--danger)!important;color:#fff!important}
[data-action="attachment-retake-confirm"]:hover,[data-action="attachment-retake-confirm"]:focus-visible{background:var(--danger-dark)!important;box-shadow:0 0 0 4px var(--danger-ring)!important}
/* V38: attachment guidance (attguide.js) */
.att-guide{margin:22px 0 6px;padding:20px;border:1px solid #dce8e0;border-radius:16px;background:#fbfdfb}
.att-guide h4{margin:0 0 6px;font-size:18px;line-height:1.35;overflow-wrap:anywhere}
.att-guide h5{margin:0 0 6px;font-size:14.5px;line-height:1.4;color:var(--forest);overflow-wrap:anywhere}
.att-guide p,.att-guide li{font-size:14px;line-height:1.6;overflow-wrap:break-word}
.att-guide-small{color:var(--muted);font-size:13px!important;margin:0 0 12px}
.att-guide-lead{margin:8px 0 10px;font-weight:600}
.att-guide-patterns{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin:10px 0 14px}
.att-guide-patterns>div{padding:14px;border-radius:12px;background:#f1f7f3;border:1px solid #e1ece5;min-width:0}
.att-guide-patterns p{margin:0 0 6px}
.att-guide-axes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:12px}
.att-guide-axis{padding:14px 16px;border-radius:12px;background:#fff;border:1px solid #e3ebe5;border-left:4px solid #c9826a;min-width:0}
.att-guide-axis.avo{border-left-color:#6f8fb0}
.att-guide-axis p{margin:0 0 8px}.att-guide-axis ul{margin:0 0 8px;padding-left:20px}.att-guide-axis li{margin:0 0 4px}
.att-guide-say{padding:9px 12px;border-radius:9px;background:#f6f3ee;font-style:italic}
.att-guide-say strong{font-style:normal}
.att-guide-support{margin-top:14px;padding:14px 16px;border-radius:12px;background:#f1f7f3;border:1px solid #e1ece5}
.att-guide-support ul{margin:0;padding-left:20px}
.att-guide-evidence{margin:12px 0 0;color:var(--muted);font-size:12px!important}
.att-pair{margin-top:18px;padding:16px 18px;border:1px solid #dce8e0;border-radius:16px;background:#fff}
.att-pair>summary{cursor:pointer;list-style-position:outside}
.att-pair>summary h3{display:inline;font-size:17px;line-height:1.4;overflow-wrap:anywhere}
.att-guide-exs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:12px;margin-top:10px}
.att-guide-ex{padding:14px;border-radius:12px;background:#f8faf8;border:1px solid #e3ebe5;min-width:0}
.att-guide-ex p{margin:0;font-size:14px;line-height:1.6}
@media(max-width:480px){.att-guide{padding:15px 13px}.att-guide-axis{padding:12px 13px}}
@media print{.att-guide,.att-guide-axis,.att-guide-ex,.att-guide-patterns>div,.att-guide-support{break-inside:avoid}}
/* V38: "Your answers in concrete terms" – inner spacing, wrapping text, score in its own right-aligned column */
.quotes-section{padding:26px 28px}
.quotes-section h2{font-size:24px;line-height:1.3;margin:0 0 16px;overflow-wrap:anywhere}
.quotes-grid,.quotes-grid:not(.single-profile){grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:22px 26px}
.quotes-person h3{display:flex;align-items:flex-start;gap:8px;margin:0 0 4px;font-size:16px;line-height:1.4;overflow-wrap:anywhere;min-width:0}
.quotes-person h3 .profile-dot{flex:0 0 auto;margin-top:.35em}
.quotes-label{font-size:12px;margin:14px 0 6px}
.quotes-list{gap:8px}
.quotes-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start;column-gap:16px;padding:11px 14px;font-size:14px;line-height:1.55}
.quotes-list li span{min-width:0;overflow-wrap:break-word}
.quotes-list li strong{justify-self:end;min-width:3.3em;text-align:right;font-variant-numeric:tabular-nums;font-size:14px;line-height:1.55}
@media(max-width:480px){.quotes-section{padding:20px 16px}.quotes-section h2{font-size:21px}.quotes-list li{padding:10px 12px;column-gap:12px}}
/* V38: tips and exercises section – inner spacing; the collapsible heading wraps next to its +/– marker */
.tips-section{padding:26px 28px}
.tips-section>h2,details.tips-section>summary h2{font-size:22px;line-height:1.35;overflow-wrap:anywhere;min-width:0}
details.pair-only>summary{align-items:flex-start;min-height:30px}
details.pair-only>summary::before{margin-top:.15em}
details.pair-only>summary>*{min-width:0;overflow-wrap:anywhere}
details.tips-section[open]>summary{margin-bottom:12px}
details.tips-section>p,.tips-section>p{max-width:72ch;line-height:1.6}
.tip-card p{font-size:14px}
@media(max-width:480px){.tips-section{padding:20px 16px}.tips-section>h2,details.tips-section>summary h2{font-size:19px}}
/* V38: quick exit unchanged in function; slightly larger target and text, a visible focus ring, and on phones a bottom
   zone so the floating button never permanently covers the last content of a page */
.quick-exit,.quick-exit-btn{min-height:40px;font-size:13px}
.quick-exit:focus-visible,.quick-exit-btn:focus-visible{outline:3px solid #b5523c;outline-offset:2px}
@media (max-width:600px){body{padding-bottom:72px}.quick-exit-float{bottom:max(12px,env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}}
@media print{body{padding-bottom:0}}
/* V38: small layout fixes found by the layout audit */
.j-overview-card dd small{font-size:12px;line-height:1.45}
.v1-table th{overflow-wrap:anywhere;hyphens:auto}
@media(max-width:400px){.v1-table{font-size:12px}.v1-table th,.v1-table td{padding:6px 4px}}
/* V38: resilience to enlarged text (browser text zoom up to 200%): fixed heights become minimums, labels may wrap,
   long words may break instead of leaving their box. The normal-size layout does not change. */
h1,h2,h3,h4,h5{overflow-wrap:anywhere}
p,li,dd,dt,label,td,th,summary,figcaption,blockquote{overflow-wrap:break-word}
.top-nav{height:auto;min-height:38px}
.nav-link{white-space:normal;line-height:1.2}
.att-style-symbol{width:auto;height:auto;min-width:34px;min-height:34px;padding:.1em .3em}
.rating-btn{height:auto;min-height:34px}
.big-rating .rating-btn{height:auto;min-height:45px}
.custom-current{overflow:visible;text-overflow:clip}
.hero-stat span{max-width:none}
.hero-info-icon{width:1.6em;height:1.6em;min-width:22px;min-height:22px}
.band-chip{white-space:normal}
.survey-vcount,.survey-vpercent{overflow-wrap:anywhere;text-align:center}
.att-guide.compact{margin:10px 0 0;padding:0;border:0;background:none}
.guidance-card .att-guide-axes{grid-template-columns:1fr}
/* V38: attachment chart – a tooltip per point (hover, tap, keyboard focus), kept inside the chart box */
.att-chart-box{position:relative;width:100%;max-width:340px;margin:6px auto 4px}
.att-chart-box .att-chart{margin:0 auto}
.att-point-area{fill:transparent;stroke:none}
.att-point-hit{cursor:pointer;outline:none}
.att-point-hit:focus-visible .att-point,.att-point-hit.active .att-point{stroke:#163c39;stroke-width:3.5}
.att-point-hit:focus-visible .att-point-area{stroke:#2e7d6a;stroke-width:2;stroke-dasharray:3 2}
.att-chart-tip{position:absolute;z-index:6;display:grid;gap:2px;width:max-content;max-width:min(260px,100%);padding:9px 12px;border:1px solid #cfe0d5;border-radius:10px;background:#fff;color:var(--ink);font-size:13px;line-height:1.45;box-shadow:0 10px 24px #183e3524;pointer-events:none;overflow-wrap:anywhere}
.att-chart-tip[hidden]{display:none}
.att-chart-tip strong{font-size:13.5px}
@media print{.att-chart-tip{display:none!important}}
/* V38: the +/– marker of every "only if you both feel safe" section is drawn with two bars, so it sits exactly in the middle
   of its circle whatever the font, its size or the screen; the circle is centred against the heading */
details.pair-only>summary{align-items:center}
details.pair-only>summary::before{content:'';margin-top:0;flex:0 0 24px;width:24px;height:24px;border-radius:50%;
 background:linear-gradient(var(--green),var(--green)) center/11px 2px no-repeat,linear-gradient(var(--green),var(--green)) center/2px 11px no-repeat,#e8f1ec}
details.pair-only[open]>summary::before{content:'';background:linear-gradient(var(--green),var(--green)) center/11px 2px no-repeat,#e8f1ec}
/* V38: method section – the four points in a balanced 2 × 2 grid with equal spacing, the band explanation in its own block */
.score-explainer .explain-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 30px;margin-top:22px}
.score-explainer .explain-grid>div{min-width:0;padding-top:14px;border-top:1px solid #e3ebe5}
.score-explainer .explain-grid strong{font-size:13px;margin-bottom:6px}
.score-explainer .explain-grid p{font-size:13px}
.method-bands{margin:28px 0 16px;padding:14px 16px;border:1px solid #e3ebe5;border-radius:12px;background:#f6f8f5}
.method-bands .section-caption{margin:0;font-size:13px;line-height:1.65}
@media(max-width:760px){.score-explainer .explain-grid{grid-template-columns:minmax(0,1fr);gap:18px}.method-bands{margin-top:24px}}
.att-point-hit{-webkit-tap-highlight-color:transparent}