#resources-view{padding:50px max(5vw,24px) 0;background:#fff;color:#111426}
#resources-view .eyebrow{color:#047e72;font:700 11px "Noto Sans",Arial,sans-serif;letter-spacing:.2em;text-transform:uppercase}
#resources-view .use-heading,#resources-view .use-resources,#resources-view .language-tool,#resources-view .use-more{max-width:1200px;margin-left:auto;margin-right:auto}
#resources-view .use-heading h1{font:800 clamp(56px,7vw,105px)/.98 "Noto Sans",Arial,sans-serif;letter-spacing:-.065em;margin:20px 0 13px}
#resources-view .use-heading h1 span{color:#047e72}
#resources-view .use-heading p{font-size:clamp(18px,2vw,25px);margin:0 0 36px}
#resources-view .use-resources{border-top:2px solid #047e72;padding-top:20px;margin-bottom:38px}
#resources-view .use-paths{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:14px}
#resources-view .use-path{padding:0 32px;border-left:1px solid #b8c3c3}
#resources-view .use-path:first-child{padding-left:0;border-left:0}
#resources-view .use-path h2{font:800 22px/1.15 "Noto Sans",Arial,sans-serif;letter-spacing:-.025em;margin:0 0 8px}
#resources-view .use-path p{font-size:15px;line-height:1.4;min-height:62px;margin:0 0 14px}
#resources-view .use-path a,#resources-view .use-more-links a{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:13px 0;border-bottom:1px solid #b8c3c3;color:#075b55;text-decoration:none;font:600 14px/1.3 "Noto Sans",Arial,sans-serif}
#resources-view .use-path a:hover,#resources-view .use-more-links a:hover{color:#000;border-color:#047e72}
#resources-view .use-path a span,#resources-view .use-more-links a span{font-size:20px}
#resources-view .message-builder{margin:0 calc(-1 * max(5vw,24px));padding:39px max(5vw,24px) 42px;background:#080d0d;color:#fff}
#resources-view .message-builder>.eyebrow,#resources-view .message-builder>.scenario-label,#resources-view .message-output .eyebrow{color:#5dc9bc}
#resources-view .message-builder>*{max-width:1200px;margin-left:auto;margin-right:auto}
#resources-view .message-builder h2,#resources-view .language-tool h2{font:800 clamp(32px,4vw,55px)/1.08 "Noto Sans",Arial,sans-serif;letter-spacing:-.045em;margin-top:10px;margin-bottom:9px}
#resources-view .message-builder>p{font-size:17px;line-height:1.4;margin-top:0}
#resources-view .scenario-label,#resources-view .example-label{display:block;font:700 12px "Noto Sans",Arial,sans-serif;text-transform:uppercase;letter-spacing:.13em;margin-top:27px;margin-bottom:7px}
#resources-view select,#resources-view input{width:100%;min-height:46px;border:1px solid #9aabaa;border-radius:0;padding:10px 13px;background:#fff;color:#142122;font:15px "Noto Sans",Arial,sans-serif}
#resources-view #message-scenario{display:block;width:min(350px,100%);margin-left:max(0px,calc((100% - 1200px)/2));margin-right:auto}
#resources-view .formula-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:22px}
#resources-view .mobile-steps{display:none}
#resources-view .formula-fields label{font:700 11px "Noto Sans",Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase}
#resources-view .formula-fields input{display:block;margin-top:8px;letter-spacing:0;text-transform:none}
#resources-view .message-output{display:flex;justify-content:space-between;align-items:center;gap:20px;background:#242d2e;padding:20px;margin-top:20px}
#resources-view .message-output p{font-size:17px;line-height:1.45;margin:7px 0 0}
#resources-view .message-output button{flex:none;border:1px solid #fff;background:transparent;color:#fff;padding:11px 17px;cursor:pointer;font:700 13px "Noto Sans",Arial,sans-serif}
#resources-view .message-output button:disabled{opacity:.45;cursor:default}
#resources-view .builder-note{font:12px/1.4 "Noto Sans",Arial,sans-serif;color:#bccdcc;margin-top:15px!important;margin-bottom:0!important}
#resources-view .language-tool{padding:40px 0 32px}
#resources-view .language-top{display:flex;justify-content:space-between;align-items:end;gap:20px}
#resources-view .language-top p{margin:0;font-size:16px}
#resources-view .language-top a,#resources-view .language-note a{color:#047e72;font:700 13px "Noto Sans",Arial,sans-serif;text-decoration:none;white-space:nowrap}
#resources-view .example-label{margin-top:24px}
#resources-view #language-example{max-width:350px}
#resources-view .language-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:22px}
#resources-view .language-pair>div{border-top:4px solid #047e72;padding:15px 0;border-bottom:1px solid #b8c3c3}
#resources-view .language-pair .avoid{border-top-color:#b02936}
#resources-view .language-pair h3{font:800 12px "Noto Sans",Arial,sans-serif;text-transform:uppercase;letter-spacing:.14em;margin:0 0 10px}
#resources-view .language-pair p{font-size:18px;line-height:1.4;margin:0;min-height:55px}
#resources-view .language-note{font:12px/1.5 "Noto Sans",Arial,sans-serif;color:#4e5a5a;margin:18px 0 0}
#resources-view .use-more{border-top:1px solid #aab7b5;padding:23px 0 50px}
#resources-view .use-more-links{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:850px){
  #resources-view{padding:33px 24px 0}
  #resources-view .use-paths{grid-template-columns:1fr}
  #resources-view .use-path,#resources-view .use-path:first-child{padding:18px 0;border-left:0;border-top:1px solid #b8c3c3}
  #resources-view .use-path p{min-height:0;margin-bottom:6px}
  #resources-view .message-builder{margin:0 -24px;padding:35px 24px}
  #resources-view .formula-fields{grid-template-columns:1fr 1fr}
  #resources-view .use-more-links{grid-template-columns:1fr}
}
@media(max-width:600px){
  #resources-view{padding:23px 20px 0}
  #resources-view .use-heading h1{font-size:clamp(39px,10vw,52px);margin:12px 0 9px}
  #resources-view .use-heading p{font-size:16px;margin-bottom:20px}
  #resources-view .use-resources{padding-top:14px;margin-bottom:25px}
  #resources-view .use-path{padding:14px 0!important}
  #resources-view .use-path h2{font-size:19px}
  #resources-view .use-path p{font-size:14px}
  #resources-view .use-path a{font-size:13px;padding:10px 0}
  #resources-view .message-builder{margin:0 -20px;padding:29px 20px 33px}
  #resources-view .message-builder h2,#resources-view .language-tool h2{font-size:32px}
  #resources-view .message-builder>p{font-size:15px}
  #resources-view .formula-fields{grid-template-columns:1fr;gap:13px}
  #resources-view .mobile-steps{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:20px;font:700 12px "Noto Sans",Arial,sans-serif}
  #resources-view .mobile-steps button{border:0;border-bottom:1px solid #65bcb1;padding:6px 2px;margin-left:8px;background:transparent;color:#fff;font:700 12px "Noto Sans",Arial,sans-serif}
  #resources-view .mobile-steps button:disabled{opacity:.35}
  #resources-view .formula-fields label:not(.current){display:none}
  #resources-view .message-output{display:block;padding:16px}
  #resources-view .message-output button{margin-top:14px}
  #resources-view .language-tool{padding:30px 0}
  #resources-view .language-top{display:block}
  #resources-view .language-top a{display:inline-block;margin-top:12px}
  #resources-view .language-pair{grid-template-columns:1fr;gap:12px}
  #resources-view .language-pair p{font-size:16px;min-height:0}
  #resources-view .use-more{padding-bottom:35px}
}

/* Editorial finish */
#resources-view{padding-top:0;background:#f7f8f6}
#resources-view .use-heading{position:relative;isolation:isolate;max-width:none;margin:0 calc(-1 * max(5vw,24px));padding:75px max(5vw,24px) 83px;overflow:hidden;background:#131c2c;color:#fff}
#resources-view .use-heading:before{content:"";position:absolute;z-index:-1;width:min(65vw,850px);aspect-ratio:1;right:-9%;top:-68%;border:2px solid rgba(116,204,189,.22);border-radius:33% 67% 41% 59% / 58% 35% 65% 42%;box-shadow:0 0 0 75px rgba(116,204,189,.045),0 0 0 155px rgba(116,204,189,.035);transform:rotate(-24deg)}
#resources-view .use-heading:after{content:"";position:absolute;left:max(5vw,24px);right:max(5vw,24px);bottom:35px;height:1px;background:linear-gradient(90deg,#35b8a6,rgba(255,255,255,.16))}
#resources-view .use-heading .eyebrow{color:#81d2c5}
#resources-view .use-heading h1{position:relative;max-width:1200px;margin:22px auto 19px;font-size:clamp(58px,8vw,116px);line-height:.96}
#resources-view .use-heading p{position:relative;max-width:1200px;margin:0 auto;font:clamp(19px,2vw,27px)/1.32 Georgia,serif;color:#d9e2e1}
#resources-view .use-heading>.eyebrow{position:relative;max-width:1200px;margin:auto}
#resources-view .use-resources{border:0;padding-top:41px;margin-bottom:43px}
#resources-view .use-resources>.eyebrow{color:#1b7471}
#resources-view .use-paths{gap:15px;margin-top:17px}
#resources-view .use-path,#resources-view .use-path:first-child{position:relative;display:flex;flex-direction:column;min-height:300px;padding:31px 27px 25px;border:1px solid #dae2e0;background:#fff;box-shadow:0 16px 38px rgba(13,35,38,.055)}
#resources-view .use-path:before{content:attr(data-number);display:block;margin-bottom:34px;font:800 32px/.9 "Noto Sans",Arial,sans-serif;letter-spacing:-.06em;color:#127f78}
#resources-view .use-path h2{font-size:24px}
#resources-view .use-path p{min-height:0;color:#4a555b}
#resources-view .use-path a:first-of-type{margin-top:auto}
#resources-view .use-path a{font-size:14px}
#resources-view .message-builder{position:relative;isolation:isolate;overflow:hidden;padding-top:57px;padding-bottom:61px;background:#101d21}
#resources-view .message-builder:before{content:"";position:absolute;z-index:-1;right:-110px;top:-130px;width:580px;height:580px;border:1px solid rgba(96,214,192,.15);transform:rotate(32deg);border-radius:32% 68% 63% 37% / 57% 36% 64% 43%;box-shadow:0 0 0 85px rgba(63,184,160,.035),0 0 0 175px rgba(63,184,160,.025)}
#resources-view .message-builder h2{font-size:clamp(42px,5vw,68px);max-width:1200px}
#resources-view .message-builder>p:not(.builder-note){font:19px/1.4 Georgia,serif;color:#d8e5e2}
#resources-view .formula-fields{gap:12px}
#resources-view .formula-fields label{position:relative;padding:21px 18px 18px;background:#213237;color:#8edacf;border-top:3px solid #268f83}
#resources-view .formula-fields label:before{content:"0" counter(formula);counter-increment:formula;display:block;margin-bottom:21px;color:#fff;font:800 27px/1 "Noto Sans",Arial,sans-serif}
#resources-view .formula-fields{counter-reset:formula}
#resources-view .formula-fields input{border-color:#526c70;margin-top:12px}
#resources-view .message-output{border-left:5px solid #4cbba9;background:#eaf4f0;color:#172c2d;padding:25px 26px}
#resources-view .message-output .eyebrow{color:#006f65}
#resources-view .message-output p{font:22px/1.35 Georgia,serif}
#resources-view .message-output button{border:0;background:#087d73;color:#fff}
#resources-view .message-output button:hover:not(:disabled){background:#075c55}
#resources-view .language-tool{padding:62px 0 48px}
#resources-view .language-tool h2{font-size:clamp(42px,5vw,64px)}
#resources-view .language-top p{font:19px Georgia,serif;color:#435051}
#resources-view .language-pair{gap:15px;margin-top:25px}
#resources-view .language-pair>div{min-height:190px;padding:26px 28px;border:1px solid #d5e1df;border-top:5px solid #087d73;background:#fff;box-shadow:0 10px 30px rgba(20,45,44,.05)}
#resources-view .language-pair .avoid{border-top-color:#9c4851;background:#f7f5f4}
#resources-view .language-pair h3{margin-bottom:25px;color:#087d73}
#resources-view .language-pair .avoid h3{color:#9c4851}
#resources-view .language-pair p{font:23px/1.38 Georgia,serif}
#resources-view .use-more{border-color:#b4c4c0;padding-top:30px;padding-bottom:63px}
#resources-view .use-more-links a{padding:19px 17px;background:#fff;border:1px solid #dae2e0}
#resources-view select:focus-visible,#resources-view input:focus-visible,#resources-view button:focus-visible,#resources-view a:focus-visible{outline:3px solid #49a99d;outline-offset:3px}
@media(max-width:850px){
 #resources-view .use-paths{grid-template-columns:repeat(2,minmax(0,1fr))}
 #resources-view .use-path,#resources-view .use-path:first-child{min-height:275px;padding:25px}
 #resources-view .use-path:before{margin-bottom:24px}
 #resources-view .use-heading{margin:0 -24px;padding:54px 24px 67px}
 #resources-view .formula-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:600px){
 #resources-view .use-heading{margin:0 -20px;padding:35px 20px 47px}
 #resources-view .use-heading:after{bottom:19px;left:20px;right:20px}
 #resources-view .use-heading:before{width:115vw;right:-70%;top:-22%}
 #resources-view .use-heading h1{font-size:clamp(44px,11vw,61px);margin:14px 0 10px}
 #resources-view .use-heading p{font-size:17px}
 #resources-view .use-resources{padding-top:26px;margin-bottom:28px}
 #resources-view .use-paths{grid-template-columns:1fr;gap:9px;margin-top:12px}
 #resources-view .use-path,#resources-view .use-path:first-child{min-height:0;padding:18px 19px!important;border:1px solid #dae2e0}
 #resources-view .use-path:before{float:left;margin:0 0 12px;font-size:22px}
 #resources-view .use-path h2{font-size:20px;margin-bottom:4px}
 #resources-view .use-path p{font-size:14px;line-height:1.3;margin-bottom:7px}
 #resources-view .use-path a{font-size:13px;padding:9px 0}
 #resources-view .message-builder{padding-top:34px;padding-bottom:36px}
 #resources-view .message-builder h2,#resources-view .language-tool h2{font-size:clamp(35px,9vw,44px)}
 #resources-view .message-builder>p:not(.builder-note){font-size:16px}
 #resources-view .formula-fields{grid-template-columns:1fr}
 #resources-view .formula-fields label{padding:15px 16px 17px}
 #resources-view .formula-fields label:before{margin-bottom:14px;font-size:21px}
 #resources-view .message-output{padding:19px}
 #resources-view .message-output p{font-size:18px}
 #resources-view .language-tool{padding:37px 0 30px}
 #resources-view .language-top p{font-size:16px}
 #resources-view .language-pair>div{min-height:0;padding:19px}
 #resources-view .language-pair h3{margin-bottom:13px}
 #resources-view .language-pair p{font-size:18px}
 #resources-view .use-more{padding-bottom:36px}
}

/* Phone layout: keep the tools near the top and controls easy to use. */
#resources-view .resource-swipe-hint{display:none}
@media(max-width:600px){
 body.section-open .app{grid-template-rows:auto minmax(0,auto) auto}
 body.section-open .header{min-height:0}
 #resources-view{width:100%;min-width:0;overflow-x:clip;padding:0 20px}
 #resources-view .use-heading{padding:27px 20px 39px}
 #resources-view .use-heading h1{font-size:clamp(40px,10.5vw,56px);line-height:1.02;letter-spacing:-.058em;overflow-wrap:normal}
 #resources-view .use-heading p{font-size:16px;line-height:1.35}
 #resources-view .use-heading:before{opacity:.7}
 #resources-view .use-resources{padding-top:21px;margin-bottom:24px}
 #resources-view .resource-swipe-hint{display:block;margin:7px 0 0;color:#52716d;font:600 11px/1.35 "Noto Sans",Arial,sans-serif}
 #resources-view .use-paths{display:flex;gap:11px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x mandatory;scroll-padding-inline:20px;margin:13px -20px 0;padding:0 20px 14px;grid-template-columns:none;scrollbar-width:thin;scrollbar-color:#78aca5 transparent}
 #resources-view .use-path,#resources-view .use-path:first-child{flex:0 0 min(78vw,340px);scroll-snap-align:start;min-height:225px;padding:17px 18px!important;box-shadow:0 8px 20px rgba(13,35,38,.06)}
 #resources-view .use-path:before{margin-bottom:14px;font-size:22px}
 #resources-view .use-path h2{font-size:19px}
 #resources-view .use-path p{font-size:13px;line-height:1.35;margin-bottom:9px}
 #resources-view .use-path a{min-height:40px;line-height:1.3;overflow-wrap:anywhere}
 #resources-view .message-builder{padding:29px 20px 31px}
 #resources-view .message-builder h2{font-size:clamp(32px,8.5vw,42px);line-height:1.07}
 #resources-view .message-builder>p:not(.builder-note){margin-bottom:12px;font-size:15px}
 #resources-view .scenario-label{margin-top:17px}
 #resources-view select,#resources-view input{min-height:48px;font-size:16px}
 #resources-view .mobile-steps{margin-top:15px;font-size:13px}
 #resources-view .mobile-steps button{min-height:44px;min-width:48px;margin-left:5px;padding:8px 5px;font-size:13px}
 #resources-view .formula-fields{margin-top:12px}
 #resources-view .formula-fields label{padding:14px 15px 16px}
 #resources-view .formula-fields label:before{margin-bottom:9px}
 #resources-view .message-output{margin-top:12px;padding:17px}
 #resources-view .message-output button{min-height:44px}
 #resources-view .language-tool{padding:34px 0 27px}
 #resources-view .language-pair{gap:11px;margin-top:17px}
 #resources-view .language-pair>div{padding:16px 18px}
 #resources-view .use-more-links a{min-height:54px}
}
@media(max-width:360px){
 #resources-view .use-heading h1{font-size:39px}
 #resources-view .use-path,#resources-view .use-path:first-child{flex-basis:82vw}
 #resources-view .mobile-steps{font-size:11px}
}