/* T-400 flex tools and the founding clients page. Loaded after
   css/g395-tools.css, whose tool frame, fields, tables and print rules these
   pages reuse. The site's own language only: 3px black rules, hard offset
   shadows, Montserrat 900 uppercase labels, the five brand colours. */

/* fields the G395 sheet does not style */
.g395-tool input[type=date],.g395-tool input[type=email],.flex-form input[type=text],.flex-form input[type=email]{font-family:'Montserrat',sans-serif;font-weight:700;font-size:16px;color:var(--atg-black);background:var(--atg-white);
  border:3px solid var(--atg-black);padding:11px 14px;width:100%;max-width:340px;border-radius:0;-webkit-appearance:none;appearance:none;min-height:50px}
.g395-tool input[type=date]:focus-visible,.g395-tool input[type=radio]:focus-visible,.flex-form input:focus-visible,.flex-form button:focus-visible{outline:3px solid var(--atg-pink);outline-offset:2px}
.g395-tool input[type=date][aria-invalid=true],.flex-form input[aria-invalid=true]{border-color:var(--orange)}
.g395-field{margin:0 0 20px}
.g395-tool [hidden],.flex-form [hidden]{display:none!important}
.g395-check input[type=radio]{width:18px;height:18px;accent-color:var(--atg-pink);margin:0;flex:none}

/* T1 rows: people and amount side by side */
.flex-rows{display:grid;gap:0;border:3px solid var(--atg-black);margin:0 0 20px}
.flex-row{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) minmax(0,1fr);gap:10px 16px;align-items:end;padding:14px;border-bottom:1px solid var(--atg-rule)}
.flex-row:last-child{border-bottom:0}
.flex-row h5{font-weight:900;font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 4px;color:var(--atg-black);align-self:center}
.flex-row .g395-field{margin:0}
.flex-row .flex-row-extra{grid-column:2 / 4}
.flex-row input[type=text]{max-width:none}
.flex-row .g395-money{max-width:none}

/* results */
.g395-tool .flex-headline{font-weight:900;font-size:22px;line-height:1.3;letter-spacing:-.02em;color:var(--atg-black);margin:0 0 18px;border-left:8px solid var(--atg-pink);padding:4px 0 4px 16px}
.g395-tool .flex-pension{font-weight:800;font-size:17px;line-height:1.5;color:var(--atg-black);background:var(--atg-off-white);border:3px solid var(--atg-black);padding:14px 18px;margin:0 0 10px}
.g395-tool .flex-note{font-weight:600;font-size:14px;color:var(--atg-black)}
.flex-warnings{list-style:none;margin:0 0 18px!important;padding:0;border:3px solid var(--atg-black)}
.g395-tool .flex-warnings li{margin:0;padding:12px 16px 12px 44px;border-bottom:1px solid var(--atg-rule);position:relative;font-weight:600;color:var(--atg-black)}
.flex-warnings li:last-child{border-bottom:0}
.flex-warnings li::before{content:"!";position:absolute;left:14px;top:12px;width:20px;height:20px;background:var(--orange);color:var(--atg-black);font-weight:900;font-size:13px;line-height:20px;text-align:center}
.flex-warnings a{color:var(--atg-black);font-weight:800;text-decoration:underline;text-decoration-color:var(--atg-pink);text-decoration-thickness:2px;text-underline-offset:2px}
.g395-tool .flex-disclaimer{font-weight:800;font-size:14px;color:var(--atg-black);border-top:3px solid var(--atg-black);padding-top:16px;margin:22px 0 10px}
.g395-tool .flex-sources-title{font-weight:900;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--atg-black);margin:0 0 6px}
.flex-sources{margin:0 0 6px 18px!important}
.g395-tool .flex-sources li{font-size:12.5px;line-height:1.55;margin:0 0 4px}
.flex-sources a{color:var(--atg-black);text-decoration:underline;text-underline-offset:2px}
.flex-sources a:hover{color:var(--atg-pink)}
.flex-ev-table thead th:nth-child(n+2){text-align:right}

/* status line and the placeholder Zak fills */
.flex-status{display:inline-block;border:3px solid var(--atg-black);background:var(--atg-white);box-shadow:5px 5px 0 var(--orange);padding:12px 16px;font-weight:800;font-size:15px;line-height:1.5;color:var(--atg-black);margin:0 0 22px}
.flex-status b{font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:11px;color:var(--atg-black);background:var(--orange);display:table;padding:1px 6px;margin-bottom:4px}
.flex-placeholder{background:var(--atg-pink);color:var(--atg-black);padding:0 6px;font-weight:900}

/* founding page: the status board */
.flex-board{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:26px 0 12px}
.flex-board-col{border:3px solid var(--atg-black);background:var(--atg-white);padding:0}
.flex-board-col h3{font-weight:900;font-size:14px;letter-spacing:.08em;text-transform:uppercase;margin:0;padding:12px 16px;color:var(--atg-black)}
.flex-board-col.live h3{background:var(--green)}
.flex-board-col.build h3{background:var(--orange)}
.flex-board-col.planned h3{background:var(--blue)}
.flex-board-col ul{list-style:none;margin:0;padding:0}
.flex-board-col li{font-weight:600;font-size:14.5px;line-height:1.55;color:var(--atg-black);padding:12px 16px;border-top:1px solid var(--atg-rule)}
.flex-board-col li:first-child{border-top:3px solid var(--atg-black)}

/* founding page: the card concept (CSS only, no people, no network logo) */
.flex-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin:26px 0 8px}
.flex-card-fig{margin:0}
.flex-card{position:relative;aspect-ratio:1.586;border:3px solid var(--atg-black);box-shadow:8px 8px 0 var(--atg-black);overflow:hidden;max-width:420px;font-family:'Montserrat',sans-serif}
.flex-card.a{background:var(--atg-black);color:var(--atg-white)}
.flex-card.a::before{content:"";position:absolute;inset:0;background:linear-gradient(118deg,transparent 0 58%,var(--atg-pink) 58% 76%,transparent 76%)}
.flex-card.b{background:var(--atg-white);color:var(--atg-black);box-shadow:8px 8px 0 var(--blue)}
.flex-card.b::before{content:"";position:absolute;left:0;right:0;top:38%;height:24%;background:var(--blue)}
.flex-card > *{position:absolute;z-index:1}
.flex-card .ato-mark{top:9%;left:7%;font-weight:900;font-size:clamp(13px,2.4vw,19px);letter-spacing:-.005em;line-height:1}
.flex-card.a .ato-mark{color:var(--atg-white)}
.flex-card.a .ato-mark .too{color:var(--atg-black)}
.flex-card.a .ato-mark .too::before{background:var(--atg-white)}
.flex-card.b .ato-mark{color:var(--atg-black)}
.flex-card-tag{top:10%;right:7%;padding:2px 6px;font-weight:900;font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.flex-card-chip{left:7%;top:40%;width:13%;aspect-ratio:1.3;background:var(--orange);border:2px solid var(--atg-black)}
.flex-card.b .flex-card-chip{top:26%}
.flex-card-line{left:7%;bottom:10%;font-weight:900;font-size:clamp(10px,1.6vw,13px);letter-spacing:.1em;text-transform:uppercase}
.flex-card-network{right:7%;bottom:8%;width:20%;aspect-ratio:1.6;border:2px dashed currentColor;opacity:.6}
.g395-tool .flex-card-caption,.flex-card-caption{font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--atg-black);margin:18px 0 4px}
.flex-card-note{font-weight:500;font-size:13px;color:var(--atg-muted);margin:0}

/* founding page: the two forms */
.flex-forms{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:28px;margin:26px 0 10px;align-items:start}
.flex-form{border:3px solid var(--atg-black);box-shadow:8px 8px 0 var(--atg-pink);background:var(--atg-white);padding:26px}
.flex-form.card-form{box-shadow:8px 8px 0 var(--blue)}
.flex-form h3{font-weight:900;font-size:19px;letter-spacing:-.02em;text-transform:uppercase;margin:0 0 8px;color:var(--atg-black)}
.flex-form p{font-weight:500;font-size:14.5px;line-height:1.65;color:var(--atg-ink);margin:0 0 14px}
.flex-form legend,.flex-form label{display:block;font-weight:900;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--atg-black);margin:0 0 6px}
.flex-form .g395-field{margin:0 0 16px}
.flex-form input[type=text],.flex-form input[type=email]{max-width:none}
.flex-form .g395-check{text-transform:none;letter-spacing:0;font-size:14px}
.flex-form .flex-consent{display:flex;gap:10px;align-items:flex-start;font-weight:600;font-size:12.5px;letter-spacing:0;text-transform:none;color:var(--atg-ink);margin:6px 0 12px}
.flex-form .flex-consent input{margin-top:2px;width:16px;height:16px;accent-color:var(--atg-pink);flex:none}
.flex-form .flex-small{font-size:12px;color:var(--atg-muted);margin:8px 0 14px}
.flex-form .flex-small a{color:var(--atg-black);text-decoration:underline;text-underline-offset:2px}
.flex-form button{max-width:100%}
.flex-form .flex-form-ok{font-weight:800;color:var(--atg-black);border-left:6px solid var(--green);background:var(--atg-off-white);padding:12px 16px;margin:14px 0 0}
.flex-form .flex-form-bad{font-weight:700;color:var(--atg-black);border-left:6px solid var(--orange);background:var(--atg-off-white);padding:12px 16px;margin:14px 0 0}
.flex-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.flex-fee{font-weight:900;font-size:15px;letter-spacing:.02em;text-transform:uppercase;color:var(--atg-black);margin:22px 0 0}

/* questions */
.flex-faq dt{font-weight:900;font-size:16px;color:var(--atg-black);margin:22px 0 6px}
.flex-faq dd{font-weight:500;font-size:15px;line-height:1.7;color:var(--atg-ink);margin:0}

@media (max-width:760px){
  .flex-board,.flex-cards,.flex-forms{grid-template-columns:1fr}
  .flex-row{grid-template-columns:1fr 1fr}
  .flex-row h5{grid-column:1 / 3}
  .flex-row .flex-row-extra{grid-column:1 / 3}
  .flex-form{padding:20px;box-shadow:5px 5px 0 var(--atg-pink)}
  .g395-tool .flex-headline{font-size:19px}
}
@media print{
  .flex-sources a{text-decoration:none;color:var(--atg-black)}
  .flex-sources a::after{content:" (" attr(href) ")";font-size:10px}
}
.flex-card.a .flex-card-tag{background:var(--atg-black);color:var(--atg-white)}
.flex-card.b .flex-card-tag{background:var(--atg-white);color:var(--atg-black)}
.flex-link{color:var(--atg-black);font-weight:700;text-decoration:underline;text-decoration-color:var(--atg-pink);text-decoration-thickness:2px;text-underline-offset:2px}
.flex-link:hover{color:var(--atg-pink)}