/* Webdesign Microsite 11 — approved Light × Lens and typography updates. */
/* Masthead: Anna teal within the original lemon-yellow band. */
.webdesign-masthead .masthead-title,
.webdesign-masthead .masthead-byline { color:var(--anna-teal) !important; }
.webdesign-masthead:focus-visible {outline-color:var(--anna-teal);}

/* 01 / The multiplication sign is the explicit reversible light control. */
#together #together-title .role-title-wrap {display:inline-flex;align-items:baseline;gap:.13em;white-space:nowrap;max-width:100%;}
#together #together-title .role-title-word {display:inline-block;position:relative;color:var(--ink);transition:color .24s ease;}
#together #together-title .role-title-word::after {position:absolute;content:"";height:.065em;min-height:3px;left:0;right:0;bottom:-.12em;transform:scaleX(0);transform-origin:left center;transition:transform .28s ease;background:var(--lj-yellow-2);}
#together #together-title .title-lens::after {background:var(--anna-teal);}
#together #together-title .role-title-times {appearance:none;display:inline-grid;place-items:center;vertical-align:baseline;position:relative;border:0;padding:0 .01em;min-height:0;font:inherit;line-height:.83;letter-spacing:inherit;background:transparent!important;color:var(--anna-teal);cursor:pointer;transform:none;transition:color .25s ease,text-shadow .25s ease;}
#together #together-title .role-title-times:hover {color:var(--ink);text-shadow:0 0 13px var(--lj-yellow-2),0 0 23px var(--lj-yellow-2);}
#together #together-title .role-title-times:focus-visible {outline:2px solid var(--anna-teal);outline-offset:6px;}
#together #together-title .role-title-wrap:hover .role-title-word::after,
#together #together-title .role-title-wrap:focus-within .role-title-word::after {transform:scaleX(1);}
#together #together-title .role-title-wrap:hover .title-lens {color:var(--anna-teal);}
#together #together-title .role-title-word {pointer-events:none;}

/* The two fields are not cards; one is a shadow, the other receives light. */
#together .role-lists {position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;align-items:stretch;border:0;overflow:hidden;}
#together .role-panel {position:relative;z-index:1;min-width:0;box-sizing:border-box;padding:42px clamp(25px,3.1vw,48px) 44px;transition:background-color .68s ease,color .68s ease,border-color .68s ease;}
#together .role-panel h3 {font:700 clamp(62px,6.3vw,92px)/.96 var(--serif);letter-spacing:-.055em;margin:0 0 14px;transition:color .58s ease;}
#together .role-person {margin:0 0 25px;}
#together .light-panel {background:#151513;color:var(--paper-2);border:0;}
#together .light-panel h3 {color:var(--paper-2);}
#together .light-panel .role-person {color:var(--lj-yellow-2);transition:color .58s ease;}
#together .lens-panel {background:var(--paper-2);color:var(--ink);border:1.5px solid var(--ink);border-left:0;border-radius:0 76% 76% 0 / 0 50% 50% 0;padding-right:clamp(52px,7.2vw,112px);}
#together .lens-panel h3 {color:var(--ink);}
#together .lens-panel .role-person {color:var(--soft);transition:color .58s ease;}
#together .light-panel li {color:var(--paper-2);transition:color .38s ease!important;}
#together .lens-panel li {color:var(--ink);transition:color .38s ease!important;}
#together .role-lists::after {content:"";position:absolute;inset:-10% auto -10% 0;width:35%;z-index:3;pointer-events:none;opacity:0;transform:translateX(-160%);background:linear-gradient(90deg,transparent 0%,rgba(255,238,0,.075) 24%,rgba(255,248,175,.47) 52%,rgba(255,238,0,.12) 72%,transparent 100%);filter:blur(18px);mix-blend-mode:screen;}
#together.is-passing:not(.pass-back) .role-lists::after {animation:passLightForward .88s cubic-bezier(.25,.5,.3,.95) both;}
#together.is-passing.pass-back .role-lists::after {animation:passLightBack .88s cubic-bezier(.25,.5,.3,.95) both;}
@keyframes passLightForward {0%{opacity:0;transform:translateX(-160%)}15%{opacity:.56}63%{opacity:1}100%{opacity:0;transform:translateX(410%)}}
@keyframes passLightBack {0%{opacity:0;transform:translateX(410%)}18%{opacity:.55}66%{opacity:1}100%{opacity:0;transform:translateX(-160%)}}
#together.is-reversed .light-panel {background:var(--paper-2);color:var(--ink);}
#together.is-reversed .light-panel h3 {color:var(--ink);}
#together.is-reversed .light-panel .role-person {color:var(--anna-teal);}
#together.is-reversed .light-panel li {color:var(--ink);}
#together.is-reversed .lens-panel {background:#151513;color:var(--paper-2);border-color:#151513;}
#together.is-reversed .lens-panel h3 {color:var(--paper-2);}
#together.is-reversed .lens-panel .role-person {color:#A7D4CC;}
#together.is-reversed .lens-panel li {color:var(--paper-2);}
#together.is-reversed .role-title-times {color:var(--ink);}
@media (hover:hover) {
 #together.is-reversed .light-panel li:hover {color:var(--anna-teal)!important;}
 #together.is-reversed .lens-panel li:hover {color:#A7D4CC!important;}
}
#together.is-reversed .light-panel li:focus-visible {color:var(--anna-teal)!important;outline-color:var(--anna-teal);}
#together.is-reversed .lens-panel li:focus-visible {color:#A7D4CC!important;outline-color:#A7D4CC;}

/* Center Together and all five shared responsibilities below both halves. */
#together .together-strip {display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;text-align:center;margin-top:8px;padding:36px clamp(10px,2.2vw,34px) 35px;}
#together .together-strip h3 {font:700 clamp(42px,4.4vw,66px)/1.08 var(--serif);letter-spacing:-.04em;}
#together .together-strip ul {flex:none;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:7px clamp(16px,2vw,30px);margin:0 auto;padding:0;list-style:none;text-align:center;}
#together .together-strip li {display:flex;justify-content:center;align-items:center;margin:0;min-height:42px;white-space:normal;text-align:center;}
#together .together-strip::before {background:radial-gradient(ellipse at 50% 45%,rgba(255,238,0,.37),rgba(255,238,0,.13) 46%,transparent 78%);}

/* 02 / The original connected decision tree owns the question and responses. */
#start-here>.eyebrow {font:600 clamp(15px,1.45vw,19px)/1.5 var(--sans);letter-spacing:.07em;}
#start-here .tree-lead {font:400 clamp(19px,1.9vw,24px)/1.45 var(--serif);max-width:48ch;margin:17px 0 18px;}
#start-here .tree-follow {padding:35px 0 12px;border-top:1px solid var(--rule);max-width:900px;margin:0 auto;}
#start-here .tree-follow-lead {font:400 clamp(29px,3vw,41px)/1.2 var(--serif);letter-spacing:-.035em;margin-bottom:19px;}
#start-here .tree-follow .notes-label {display:block;font:600 17px/1.5 var(--sans);}
#start-here .tree-follow .notes-label span {display:block;font:400 14px/1.6 var(--sans);color:var(--soft);margin-top:3px;}
#start-here .tree-follow textarea {background:transparent;min-height:108px;margin:13px 0 0;max-width:900px;}
#start-here .tree-follow .note-privacy {font:400 12px/1.5 var(--sans);color:var(--soft);margin:7px 0 19px;}
#start-here .tree-follow .route-selection {font:500 13px/1.65 var(--mono);overflow-wrap:anywhere;color:var(--anna-teal);margin:12px 0;}
#start-here .tree-follow .care-email {display:inline-flex;max-width:100%;flex-wrap:wrap;}
#start-here .tree-follow .care-save {max-width:900px;margin:27px 0 0;border-top:1px solid var(--rule);padding:0;}
#start-here .tree-follow .care-save>summary {display:flex;justify-content:space-between;align-items:center;gap:18px;padding:10px 0;font:400 18px/1.5 var(--serif);min-height:56px;}
#start-here .tree-follow .route-tools {display:flex;flex-wrap:wrap;gap:10px 15px;margin:12px 0;}
#start-here .tree-follow .route-tools button {font:500 14px/1.4 var(--sans);min-height:44px;}
#start-here .tree-follow .copy-fallback {display:block;min-height:120px;}

/* 03 / Words, images, one fluid website: editorial rollover without movement. */
#decisions #decisions-title {font:700 clamp(39px,4.65vw,64px)/1.09 var(--serif);letter-spacing:-.048em;max-width:19ch;}
#decisions .process-word {display:inline-block;position:relative;isolation:isolate;transition:color .22s ease;}
#decisions .process-words:hover {color:var(--anna-teal);}
#decisions .process-images::after {content:"";position:absolute;z-index:-1;left:-.05em;right:-.05em;bottom:.12em;height:.34em;background:var(--lj-yellow-2);opacity:0;transition:opacity .25s ease;}
#decisions .process-images:hover::after {opacity:1;}
#decisions #decisions-title em {font-weight:400;font-style:italic;color:var(--ink);}
#decisions .section-head>p {font:400 clamp(18px,1.65vw,22px)/1.48 var(--serif);max-width:43ch;}

@media(max-width:850px){
 #together .role-lists {grid-template-columns:1fr;}
 #together .lens-panel {min-height:500px;padding-right:clamp(42px,15vw,88px);border-left:1.5px solid var(--ink);border-top:0;border-radius:0 65% 65% 0/0 50% 50% 0;}
 #together.is-reversed .lens-panel {border-left-color:var(--ink);}
 #together .role-panel {padding:34px 30px 36px;}
 #together .together-strip {padding:30px 12px;align-items:center;}
 #together .together-strip ul {flex-direction:row;justify-content:center;gap:6px 22px;}
}
@media(max-width:640px){
 #together #together-title .role-title-wrap {gap:.08em;}
 #together #together-title .role-title-times {font-size:.95em;}
 #together .role-panel h3 {font-size:clamp(56px,15vw,76px);}
 #together .lens-panel {min-height:0;padding-right:clamp(35px,12vw,70px);}
 #together .role-panel {padding:29px 25px 32px;}
 #together .together-strip {padding:30px 0;}
 #together .together-strip h3 {font-size:clamp(39px,12vw,54px);}
 #together .together-strip ul {column-gap:13px;}
 #together .together-strip li {min-height:39px;}
 #decisions #decisions-title {font-size:clamp(34px,9vw,46px);}
}
@media (prefers-reduced-motion:reduce){
 #together .role-panel, #together .role-panel h3,#together .role-panel .role-person,#together .role-panel li,#together .role-title-word, #together .role-title-word::after, #decisions .process-word, #decisions .process-images::after {transition:none!important;}
 #together.is-passing .role-lists::after {animation:none!important;display:none;}
}
@media(forced-colors:active){
 #together .role-panel {background:Canvas!important;color:CanvasText!important;}
 #together .role-panel h3,#together .role-panel .role-person,#together .role-panel li {color:CanvasText!important;}
 #together .role-title-times {color:ButtonText;forced-color-adjust:auto;}
 #together .lens-panel {border:2px solid CanvasText;}
 #together .role-lists::after,#together .together-strip::before {display:none;}
 #together .role-title-word::after {background:Highlight;}
}
@media print{
 #together .role-panel {background:#fff!important;color:#000!important;transition:none!important;}
 #together .role-panel h3,#together .role-panel li,#together .role-panel .role-person {color:#000!important;}
 #together .lens-panel {border:1px solid #000!important;}
 #together .role-lists::after {display:none!important;}
 #together .role-title-word::after {display:none!important;}
 #together .role-title-times {border:0!important;color:#000!important;}
}

/* The light explorer is the same paper as the site, not a separate inset panel.
   History remains subdued yet readable, including when the visitor chooses Dark. */
#start-here .care-tree-root[data-theme="light-anna"] {
  --bg:var(--paper);
  --bg-elevated:var(--paper);
  --history:#506762;
  --connector-history:#94a7a2;
}
#start-here .care-tree-root[data-theme="anna-lemon"] {
  --history:#A4B4AA;
  --connector-history:#68796f;
}
#start-here .care-tree-root .choice[data-state="inactive"] {opacity:.8;}
#start-here .care-tree-root .node[data-state="history"] .label {color:var(--history);}
#start-here .care-tree-root[data-theme="light-anna"] .choice[data-state="inactive"] {opacity:.72;}
#start-here .care-tree-root[data-theme="anna-lemon"] .choice[data-state="inactive"] {opacity:.88;}

/* A single readable contact action even on a narrow phone. */
@media(max-width:640px){
 #start-here .tree-follow .care-email {
  width:100%;max-width:100%;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:nowrap;gap:10px;padding:13px 14px;font:600 clamp(14px,4vw,17px)/1.45 var(--serif);
 }
 #start-here .tree-follow .care-email > span {flex:0 0 auto;margin-left:auto;}
}