/* ==========================================================================
   Sign in (login.html), after the Stripe Dashboard login.
   Stripe's structure, kept: a bare header with only the logo, faint guide lines,
   a colour ribbon sweeping behind one centred 540px card, a grey strip at the foot
   of the card for "New to…". What is different is honest: there is no Manelink
   account system yet. The Office runs on your own machine, so the live action opens
   it; the Cloud sign-in is shown but disabled, so nothing typed is ever collected,
   and there are no Google, passkey or SSO buttons because none of them exist.
   This page has no site nav or footer (sync-chrome.js leaves it alone).
   ========================================================================== */
.p-login{min-height:100vh;background:#fff;overflow-x:hidden}
.lg{position:relative;min-height:100vh;overflow:hidden}
.lg-guides{position:absolute;inset:0;max-width:1180px;margin:0 auto;pointer-events:none;z-index:0}
.lg-guides i{position:absolute;top:0;bottom:0;width:1px;background:var(--line)}
.lg-guides i:nth-child(1){left:24px}
.lg-guides i:nth-child(2){right:24px}
.lg-top{position:relative;z-index:2;height:72px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.7)}
.lg-top .wrap{display:flex;align-items:center;height:72px}

/* the ribbon: art/lg-ribbon.svg, seventy fine curves sweeping down to the right */
.lg-rib{position:absolute;z-index:0;top:0;right:0;width:100%;height:100%;pointer-events:none;
  background:url(../assets/art/lg-ribbon.svg) right top/auto 100% no-repeat}

/* ---- the card ---------------------------------------------------------------- */
.lg-main{position:relative;z-index:1;display:flex;justify-content:center;padding:64px 24px 80px}
.lg-card{width:540px;max-width:100%;background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(2,37,79,.04),0 15px 35px rgba(2,37,79,.12),0 5px 15px rgba(0,0,0,.06)}
.lg-body{padding:48px 64px 44px}
.lg-card h1{margin:0 0 28px;font:600 24px/1.35 var(--display);letter-spacing:-.01em;color:var(--navy)}
.lg-card h2{margin:0 0 6px;font:600 15px var(--web);color:var(--ink)}
.lg-card p{margin:0;font:400 14px/1.55 var(--web);color:var(--mute)}
.lg-open{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:44px;margin-top:16px;border-radius:6px;background:var(--blue);color:#fff;font:600 15px var(--web)}
.lg-open:hover{background:var(--blue-d);text-decoration:none}
.lg-open:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.lg-card .lg-hint{margin-top:10px;font-size:13px;color:var(--t4)}
.lg-hint b{font:500 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--navy)}

.lg-or{display:flex;align-items:center;gap:12px;margin:32px 0 24px;font:400 13px var(--web);color:var(--t4);white-space:nowrap}
.lg-or:before,.lg-or:after{content:"";flex:1 1 auto;height:1px;background:var(--line)}

.lg-form fieldset{margin:0;padding:0;border:0;min-width:0}
.lg-f{margin-bottom:18px}
.lg-f label,.lg-row label{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font:500 14px var(--web);color:var(--ink)}
.lg-f label span{font:500 13px var(--web);color:var(--t4)}
.lg-f input{width:100%;height:44px;padding:0 12px;border:0;border-radius:6px;background:#fff;box-shadow:0 0 0 1px #d4dee9;font:400 16px var(--web);color:var(--ink)}
.lg-f input:disabled{background:var(--cloud);cursor:not-allowed}
.lg-row{display:flex;align-items:center;gap:8px;margin-bottom:20px}
.lg-row label{margin:0;font-weight:400}
.lg-row input{width:16px;height:16px;margin:0;accent-color:var(--blue)}
.lg-btn{display:flex;align-items:center;justify-content:center;width:100%;height:44px;border-radius:6px;background:#a9b5e4;color:#fff;font:600 15px var(--web);cursor:not-allowed}
.lg-card .lg-note{margin-top:14px;padding:12px 14px;border:1px solid var(--line);border-radius:6px;background:var(--sky);color:var(--ink);font-size:13px}   /* a quiet note in the site palette, not a warning */

.lg-foot{padding:22px 24px;border-top:1px solid var(--line);background:var(--cloud);text-align:center;font:400 14px var(--web);color:var(--mute)}
.lg-foot a{font-weight:600}
.lg-legal{position:relative;z-index:1;display:flex;justify-content:center;gap:20px;padding:0 24px 40px;font:400 13px var(--web);color:var(--t4)}
.lg-legal a{color:var(--t4)}

@media (max-width:767px){
  .lg-main{padding:40px 16px 56px}
  .lg-body{padding:36px 32px 32px}
  .lg-rib{opacity:.55}
}
@media (max-width:479px){
  .lg-guides{display:none}
  .lg-main{padding:24px 12px 40px}
  .lg-body{padding:28px 20px 24px}
  .lg-card h1{font-size:21px;margin-bottom:22px}
  .lg-legal{flex-wrap:wrap;gap:8px 16px}
}

/* ---- talk to us (contact.html), on this shell --------------------------- */
.ct-card-lg{width:640px}
.ct-card-lg h1{margin-bottom:24px}   /* the sign-in card's own title size */
.p-contact .lg,.p-login .lg{min-height:calc(100vh - 72px)}   /* the site header sits above the shell */
.p-contact .lg-main,.p-login .lg-main{padding-top:56px}
.ct-form-lg{margin-top:22px}
.ct-form-lg .ct-two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ct-form-lg select,.ct-form-lg textarea{width:100%;padding:0 12px;border:0;border-radius:6px;background:#fff;
  box-shadow:0 0 0 1px #d4dee9;font:400 16px var(--web);color:var(--ink)}
.ct-form-lg select{height:44px}
.ct-form-lg textarea{height:110px;padding:12px;resize:vertical;line-height:1.5}
.ct-form-lg select:focus,.ct-form-lg textarea:focus,.ct-form-lg input:focus{outline:2px solid var(--blue);outline-offset:1px}
.ct-send{width:100%;height:44px;border:0;border-radius:6px;background:var(--btn);color:#fff;font:600 15px var(--web);cursor:pointer}
.ct-send:hover{background:var(--btn-h)}
.ct-note{margin-top:12px;text-align:center;font:400 13px var(--web);color:var(--t4)}
.ct-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:14px}
.ct-list li{font:400 14px/1.55 var(--web);color:var(--mute)}
.ct-list b{display:block;font:600 15px var(--web);color:var(--navy)}
@media (max-width:767px){ .ct-form-lg .ct-two{grid-template-columns:1fr;gap:0} }
/* the four routes as dropdowns, like the questions on the pricing page */
.ct-drops{display:flex;flex-direction:column;gap:8px}
.ct-drop{border:1px solid var(--line);border-radius:6px;background:#fff}
.ct-drop summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;
  cursor:pointer;list-style:none;font:600 15px var(--web);color:var(--navy)}
.ct-drop summary::-webkit-details-marker{display:none}
.ct-drop summary:after{content:"";flex:0 0 auto;width:7px;height:7px;border:solid var(--btn);border-width:0 1.6px 1.6px 0;
  transform:rotate(45deg) translateY(-2px);transition:transform .15s ease}
.ct-drop[open] summary:after{transform:rotate(-135deg) translateY(1px)}
.ct-drop summary:hover{color:var(--btn)}
.ct-drop p{margin:0;padding:0 16px 14px;font:400 14px/1.55 var(--web);color:var(--mute)}
@media (prefers-reduced-motion:reduce){ .ct-drop summary:after{transition:none} }

/* NOT FOUND (404.html): the contact card's send button as a link, and four page links */
.nf-home{display:flex;align-items:center;justify-content:center;margin-top:28px;text-decoration:none}
.nf-links{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 24px;font:600 14px var(--web)}

/* ---- CONTACT SPLIT (contact.html): the form on white, what each option covers on a
   grey panel; each side's content lines up with the page column (1180 wide, 24 in).
   A grid item's % padding reads its own column, half the page, so 100% - 566px is
   (page - 1180) / 2 + 24 without counting the scrollbar the way 100vw does ---- */
.ct-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}   /* sized by its content, so tall screens add no space under the form */
.ct-main{display:flex;justify-content:flex-end;padding:56px 64px 64px max(24px,calc(100% - 566px));background:#fff}   /* 56 on top: the heading's own leading makes up the rest, so the gaps look equal */
.ct-side{display:flex;align-items:center;padding:56px max(24px,calc(100% - 566px)) 64px 64px;
  background:var(--cloud);border-left:1px solid var(--line)}
.ct-in{width:100%;max-width:520px}
.ct-h1{margin:0 0 16px;font:600 44px/1.1 var(--display);letter-spacing:-.02em;color:var(--navy)}
.ct-lead{margin:0 0 32px;font:400 17px/1.55 var(--web);color:var(--mute)}
.ct-split .ct-form-lg{margin-top:0}
.ct-split .ct-send{width:auto;padding:0 28px}
.ct-split .ct-note{text-align:left}
.ct-side-h{margin:0 0 20px;font:600 22px/1.3 var(--display);color:var(--navy)}
.ct-mail{margin:24px 0 0;font:400 14px/1.5 var(--web);color:var(--mute)}
.ct-mail a{font-weight:600}
@media (max-width:991px){
  .ct-split{grid-template-columns:minmax(0,1fr)}
  .ct-main,.ct-side{justify-content:flex-start;padding:48px 24px 56px}
  .ct-side{border-left:0;border-top:1px solid var(--line)}
  .ct-in{max-width:640px}
}
@media (max-width:479px){ .ct-h1{font-size:34px} .ct-main,.ct-side{padding:40px 16px 48px} }