/* Kintwill landing page — approved visual reference implementation.
   Exact visual target: user-approved desktop and mobile concepts, 2026-10-15.
   The sprig and connected profile network are single canonical SVG assets.
*/
:root {
 --page:#fefffd;--card:#fffffe;--ink:#1a2a31;--sub:#849aa9;
 --line:#bddbd5;--light:#eaf4f0;--accent:#609b8c;--accent-dark:#508b7e;
 --head-bg:#ebf4f1;--card-radius:8px;--shadow:none;
}
body{background:var(--page);color:var(--ink);font-family:Arial,"Liberation Sans",Helvetica,sans-serif}
.shell{max-width:1465px;width:100%;padding:23px 36px 24px}
.site-header{gap:31px;padding:0 0 20px;border-bottom:3px solid #afd3cb;min-height:107px}
.brand{font-family:Arial,Helvetica,sans-serif;font-size:clamp(40px,4.1vw,65px);font-weight:800;letter-spacing:-.074em;gap:7px;color:#14272c}
.brand img{width:68px;height:85px}
.primary-nav{gap:40px;margin-left:21px}
.primary-nav a{font-size:18px;color:#344b62}
.primary-nav a[aria-current]{color:#468779;text-decoration-thickness:2px;text-underline-offset:10px}
.status{font-size:17px;color:#324d5e;padding:17px 21px;border-radius:11px;background:#f1f8f5;border-color:#bfdbd2;gap:14px}
.status-dot{width:17px;height:17px;background:#639b8c}
.layout{grid-template-columns:320px minmax(0,1fr);gap:12px;margin-top:30px}
.panel{border:1px solid #b8d8d2;border-radius:var(--card-radius);background:var(--card);box-shadow:none}
.panel-head{height:57px;padding:0 28px;background:linear-gradient(95deg,#e5f2ef 0%,#f0f8f5 100%)}
.panel-title{font-size:16px;font-weight:500;letter-spacing:.17em;color:#253e49}
.dots{gap:8px}.dots i{width:7px;height:7px;border-color:#8bbeb4}
.aside-content{padding:28px 27px 34px}
.aside-logo{width:78px;height:105px;margin:0 0 11px}
.aside-content h2{font-family:Arial,Helvetica,sans-serif;font-size:28px;font-weight:760;letter-spacing:-.045em;line-height:1.17;margin:0 0 24px}
.aside-fields>div{padding:20px 0 22px}
.aside-fields dt{font-size:17px;font-weight:600;letter-spacing:.07em;color:#528f83;margin-bottom:11px}
.aside-fields dd{font-size:23px;line-height:1.25;color:#3b5b71}
.aside-content p{font-size:20px;color:#8ca0b2;max-width:270px;line-height:1.45;border-top:1px solid var(--line);margin:30px 0 0;padding-top:36px}
.hero-body{padding:25px 28px 24px}
.hero-grid{position:relative;display:block;min-height:515px}
.hero-copy{position:relative;z-index:2;padding:75px 0 0 12px;max-width:760px;pointer-events:none}
.wordmark{font-family:Arial,Helvetica,sans-serif;font-weight:850;font-size:clamp(90px,9vw,145px);letter-spacing:-.093em;line-height:1;margin:0 0 26px;color:#12252c;white-space:nowrap}
.wordmark span{color:#568e80}
.tagline{font-size:clamp(31px,3vw,43px);letter-spacing:-.052em;line-height:1.14;font-weight:760;max-width:775px;margin:0 0 11px;white-space:nowrap}
.subline{font-size:clamp(23px,2.2vw,33px);color:#879bb9;margin:0 0 40px;line-height:1.23}
.intro{font-size:clamp(19px,1.65vw,24px);line-height:1.38;color:#35546f;max-width:565px;margin:0}
.network{position:absolute;z-index:1;right:-20px;top:0;width:53%;height:512px;margin:0;overflow:visible;display:block}
.network img{height:100%;width:100%;object-fit:contain;opacity:1;max-width:none;max-height:none;transform:none;filter:none}
.beta{padding:16px 0 22px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.beta-inner{padding:16px 24px 20px;background:linear-gradient(120deg,#e7f2ef,#e9f3ef);border-radius:5px}
.beta h2{font-size:17px;font-weight:500;letter-spacing:.10em;color:#1f394b;margin:0 0 13px;line-height:1.4}
.beta-row{grid-template-columns:minmax(0,1fr) 254px;gap:12px}
.beta-input{height:64px;padding:0 22px;font-size:21px;border-color:#bddbd3;border-radius:6px}
.cta{min-height:64px;border-radius:6px;background:#5a9888;font-weight:650;font-size:21px}
.beta .pending{font-size:13px;margin:10px 0 0;color:#708f9c}
.hero-footer{padding:19px 3px 0;gap:18px;color:#8ba0b7}
.custom-trigger{padding:12px 20px;min-height:52px;gap:13px;font-size:18px;font-weight:500;border-radius:5px;color:#4a8b7d}
.custom-trigger svg{width:24px;height:24px}
.custom-blurb{font-size:18px;color:#8ba0b7;padding-left:20px;border-left:1px solid #c6dcd7}
.grow{font-size:19px;color:#25445c;gap:10px}
.grow img{width:38px;height:47px}
.site-footer{padding:23px 0 4px;font-size:14px;color:#7e9297}
.site-footer nav{gap:23px}
/* Preserve hierarchy while the display approaches laptop size. */
@media (min-width:891px) and (max-width:1380px){
.shell{padding-left:27px;padding-right:27px}
.layout{grid-template-columns:285px minmax(0,1fr)}
.aside-content{padding-left:25px;padding-right:25px}
.aside-fields dd{font-size:21px}
.hero-copy{padding-top:78px;max-width:650px}
.hero-grid{min-height:480px}
.wordmark{font-size:clamp(88px,8.9vw,122px)}
.tagline{font-size:clamp(29px,2.85vw,39px)}
.subline{font-size:clamp(23px,2.25vw,29px)}
.intro{font-size:clamp(18px,1.7vw,23px);max-width:470px}
.network{height:470px;width:55%;right:-22px;top:0}
.beta-row{grid-template-columns:minmax(0,1fr) minmax(160px,24%)}
}
@media (min-width:891px) and (max-width:1130px){
.site-header{gap:15px}.brand{font-size:42px}.brand img{width:53px;height:67px}
.primary-nav{gap:18px;margin-left:4px}.primary-nav a{font-size:15px}
.status{font-size:13px;padding:13px}.status-dot{width:12px;height:12px}
.layout{grid-template-columns:240px minmax(0,1fr)}
.hero-grid{min-height:430px}
.hero-copy{padding-top:70px}
.wordmark{font-size:clamp(74px,8.3vw,98px)}
.tagline{font-size:clamp(25px,2.8vw,32px)}
.subline{font-size:23px;margin-bottom:28px}
.intro{font-size:18px;max-width:390px}
.network{height:405px;top:5px;width:52%}
.beta h2{font-size:13px}.beta-input,.cta{min-height:55px;height:55px;font-size:16px}
.hero-footer .custom-trigger{font-size:13px}.custom-blurb{font-size:13px}.grow{font-size:14px}
}
/* On tablets and phones the approved hero precedes the profile-sidebar panel. */
@media(max-width:890px){
.shell{padding:12px 16px 24px}
.site-header{min-height:0;padding-bottom:13px;gap:13px}
.brand{font-size:clamp(30px,4.3vw,41px)}.brand img{height:60px;width:46px}
.status{font-size:13px;padding:12px;border-radius:24px;gap:9px}
.status-dot{height:11px;width:11px}
.mobile-menu{display:block}
.layout{margin-top:20px;grid-template-columns:1fr;gap:16px}
.hero-grid{min-height:0}
.hero-copy{padding:25px 4px 0;max-width:100%;pointer-events:auto}
.wordmark{font-size:clamp(67px,10.5vw,93px);margin-bottom:18px}
.tagline{font-size:clamp(32px,5vw,41px);white-space:normal;max-width:640px}
.subline{font-size:clamp(25px,3.7vw,32px);max-width:630px;margin:0 0 22px}
.intro{font-size:20px;max-width:570px;line-height:1.38}
.network{position:relative;right:auto;top:auto;width:100%;max-width:580px;height:auto;aspect-ratio:660/570;margin:-10px auto 3px}
.network img{width:100%;height:100%;max-height:none;max-width:none;transform:none}
.panel-head{height:50px}
.beta h2{font-size:15px}
.hero-footer .custom-trigger{font-size:15px}
.custom-blurb{font-size:14px}.grow{font-size:14px}
.aside-content{padding:25px}
.side-panel .aside-content{display:block}
.aside-logo{float:left;margin-right:23px;width:78px;height:105px}
.aside-content h2{padding-top:13px}
.aside-fields{clear:both;display:block}
.aside-fields>div{padding:15px 0}
.aside-content p{max-width:none}
}
@media(max-width:600px){
html{background:#fbfefa}
body{background:#fbfefa;min-width:320px}
.shell{width:calc(100% - 12px);margin:6px auto 12px;padding:9px 11px 15px;border:2px solid #b2d3cb;border-radius:27px;background:#fffffd;box-shadow:0 2px 18px #47796d10}
.site-header{gap:6px;min-height:64px;padding:0 0 12px;border-width:2px}
.brand{font-size:clamp(27px,8.25vw,38px);gap:3px}
.brand img{height:55px;width:40px}
.status{font-size:clamp(9px,2.45vw,11px);padding:9px 8px;border-radius:23px;margin-left:auto;gap:6px;white-space:nowrap}
.status-dot{width:9px;height:9px}
.mobile-menu>summary{width:27px;height:34px}.mobile-menu>summary svg{height:24px;width:24px}
.layout{margin-top:16px;gap:13px}
.panel-head{height:43px;padding:0 16px}
.panel-title{font-size:11px;letter-spacing:.14em;font-weight:550}
.dots{gap:6px}.dots i{width:5px;height:5px}
.hero-body{padding:17px 14px 15px}
.hero-copy{padding:11px 4px 0}
.wordmark{font-size:clamp(56px,15.6vw,82px);line-height:1.02;margin:0 0 14px;letter-spacing:-.085em}
.tagline{font-size:clamp(25px,7.4vw,33px);line-height:1.08;letter-spacing:-.052em;margin:0 0 10px}
.subline{font-size:clamp(19px,5.55vw,26px);line-height:1.23;margin:0 0 21px;color:#8b9fbe}
.intro{font-size:clamp(16px,4.45vw,20px);line-height:1.4;max-width:240px;color:#33536b}
.network{width:calc(100% + 13px);max-width:none;height:auto;aspect-ratio:660/570;margin:-56px -9px -2px auto;position:relative;left:auto;top:auto;max-height:none;overflow:visible}
.network img{height:100%;width:100%}
.beta{padding:12px 0 14px}
.beta-inner{padding:13px 12px 16px}
.beta h2{font-size:11px;line-height:1.55;letter-spacing:.07em;margin:0 0 11px}
.beta-row{display:grid;grid-template-columns:1fr;gap:8px}
.beta-input{height:48px;font-size:16px;padding:0 13px}
.cta{min-height:48px;font-size:17px}
.beta .pending{font-size:10px;line-height:1.5;margin:8px 0 0}
.hero-footer{gap:8px;padding:12px 0 0;flex-wrap:wrap}
.custom-trigger{font-size:12px!important;min-height:38px;padding:8px 11px;gap:6px}
.custom-trigger svg{height:18px;width:18px}
.custom-blurb{font-size:11px;line-height:1.28;padding-left:9px;max-width:130px}
.grow{justify-content:center;width:100%;font-size:13px;padding:10px 0 0;border-top:1px solid var(--line)}
.grow img{height:33px;width:27px}
.side-panel .aside-content{padding:19px 19px 18px;display:block}
.aside-logo{width:54px;height:71px;margin-right:14px;margin-bottom:12px}
.aside-content h2{font-size:21px;padding:8px 0 0;margin:0 0 20px}
.aside-fields{display:block;clear:both}
.aside-fields>div{padding:9px 0;display:grid;grid-template-columns:125px minmax(0,1fr);align-items:baseline;gap:5px}
.aside-fields dt{font-size:13px;margin:0}
.aside-fields dd{font-size:15px;line-height:1.3}
.aside-content p{font-size:14px;padding-top:14px;margin:17px 0 0;line-height:1.5}
.site-footer{padding:14px 0 0;font-size:11px;flex-wrap:nowrap;gap:6px}
.site-footer nav{gap:12px}
.editor-inner{padding:19px 15px}
}
@media (max-width:375px){
.brand{font-size:26px}.brand img{width:34px;height:48px}
.status{font-size:9px;padding:8px 7px}
.tagline{font-size:25px}
.intro{max-width:218px}
.network{margin-top:-36px}
.custom-blurb{max-width:105px;font-size:10px}
}
/* Final visual reconciliation with approved originals: dominant Kintwill title,
   wider organic network, and lighter page canvas. */
@media (min-width:1381px){
 .hero-grid{min-height:535px}
 .wordmark{font-size:clamp(145px,10.8vw,156px)}
 .network{width:58%;right:-34px;top:-32px;height:548px}
}
@media (min-width:1131px) and (max-width:1380px){
 .hero-grid{min-height:500px}
 .wordmark{font-size:clamp(110px,10.65vw,146px)}
 .network{width:57%;right:-25px;top:-25px;height:500px}
}
@media(min-width:1381px){
 .hero-grid{min-height:549px}
 .wordmark{font-size:168px}
}
/* The Kintwill punctuation mark is a circle, never a typeface-dependent square. */
.wordmark span{display:inline-block;width:.13em;height:.13em;border-radius:50%;background:#609b8c;color:transparent;vertical-align:baseline;position:relative;top:.055em;margin-left:.005em}
/* Kintwill v2.3 display-safety fix, October 15, 2026.
   Protect the fixed brand/teaser typography from user-selected profile fonts,
   and give the connection artwork its own right-side breathing room.
   Responsive/mobile structure and all SVG brand assets remain unchanged. */
.hero-copy .tagline,
.hero-copy .subline {
  font-family: Arial, Helvetica, sans-serif;
}
@media (min-width:891px) {
  .hero-copy .tagline { white-space:normal; }
  .network { right:-8px; width:50%; }
}
@media (min-width:1381px) {
  .network { right:-20px; width:52%; top:-20px; }
}
@media (min-width:1131px) and (max-width:1380px) {
  .network { right:-13px; width:50%; top:-10px; }
}
@media (min-width:891px) and (max-width:1130px) {
  .network { right:-7px; width:47%; top:5px; }
}

/* v2.3.2: Put the illustrative network behind a soft readable surface.
   This avoids strands crossing words if a visitor picks an unusually wide font.
   Only on desktop; mobile keeps the approved stacked art. */
@media (min-width:891px) {
 .hero-copy { isolation:isolate; }
 .hero-copy::before {
   content:"";
   position:absolute;
   z-index:-1;
   pointer-events:none;
   inset:0 -36px 0 -10px;
   background:linear-gradient(90deg, var(--card) 0%, var(--card) 54%, color-mix(in srgb, var(--card) 82%, transparent) 76%, transparent 100%);
 }
}

/* v2.3.3: explicit Firefox/Linux-safe default for profile panels; other font options remain selectable. */
:root{--profile-font:Arial,"Liberation Sans",Helvetica,sans-serif}