/* Contact us (design A, "the front desk"). Tokens from base.css; the header, the whiteboard, the pink button and the
   legal strip are the Pricing page's. Small labels under 12 px are Press Start 2P at 8 px. */
:root{--cream:#f1e3c6;--stripe:#e9d8b4;--paper:#fbf6ea;--line:#e6dcc4;--muted:#5a625c;--text:#26322f;--err:#b3261e;
  --body:'Nunito Text',system-ui,-apple-system,'Segoe UI',sans-serif;--pxf:'Pixelify Sans',monospace;--tiny:Silkscreen,monospace;--ps:'Press Start 2P',monospace}
html{background:var(--cream)}
/* A full-height column, so the legal strip sits at the bottom of a short page instead of mid-window. */
body{display:flex;flex-direction:column;min-height:100vh;font-family:var(--body);color:var(--text);font-size:17px;line-height:1.55;
  background:var(--cream) repeating-linear-gradient(90deg,transparent 0 24px,var(--stripe) 24px 32px)}
.type-labels *{font-variant-ligatures:none!important}
.wrap{width:100%;max-width:1160px;margin:0 auto;padding:0 28px}
body>main{flex:1 0 auto}
a{color:var(--teal);text-underline-offset:.16em}
a:hover{color:var(--teal-dark)}

/* top bar: the landing page's header */
.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:22px;padding-bottom:10px}
.brand{line-height:0}
.wm{width:284px;height:auto}
.nav{display:flex;align-items:center;gap:22px}
.nlink{font:400 19px/1 var(--tiny);color:var(--teal);text-decoration:none;padding:8px 4px;white-space:nowrap}
.nlink:hover{color:#c9347d}
.nbtn{font:400 19px/1 var(--tiny);background:var(--teal);color:var(--coin);text-decoration:none;padding:11px 18px;white-space:nowrap;
  box-shadow:0 -5px 0 0 var(--teal-dark),0 5px 0 0 var(--teal-dark),-5px 0 0 0 var(--teal-dark),5px 0 0 0 var(--teal-dark),0 11px 0 0 var(--teal-dark)}
.nbtn:hover{background:var(--teal-2);color:var(--coin)}
.short{display:none}

/* the whiteboard, and Peter at the front desk */
.desk{display:flex;align-items:flex-end;justify-content:center;gap:34px;padding-top:26px;padding-bottom:0}
.board{width:min(100%,520px);margin:0 0 6px;padding:22px 28px 22px;text-align:center;background:#fbfbf7;
  box-shadow:0 -8px 0 0 #8e96a3,0 8px 0 0 #8e96a3,-8px 0 0 0 #8e96a3,8px 0 0 0 #8e96a3,0 0 0 12px #bcc3cc,8px 16px 0 6px rgba(18,59,58,.12)}
.board h1{margin:0 0 8px;font:700 46px/1 var(--pxf);color:#1f4fa8;text-shadow:3px 3px 0 #bcd2ff}
.board p{margin:0;font:600 18px/1.4 var(--pxf);color:var(--text)}
.clerk{position:relative;flex:none;width:200px;height:150px}
.clerk canvas{position:absolute;left:44px;bottom:24px;width:110px;height:auto;z-index:2}
.clerk .counter{position:absolute;left:0;right:0;bottom:0;height:46px;z-index:3;background:#a8713f;box-shadow:inset 0 6px 0 #c98f55,0 0 0 3px #5b3a1e}
.clerk .sign{position:absolute;left:50%;bottom:8px;z-index:4;transform:translateX(-50%);padding:6px 9px 5px;white-space:nowrap;font:400 8px/1.38 var(--ps);text-transform:uppercase;background:var(--coin);color:#4a3500;box-shadow:0 0 0 2px #8a5a00}

/* the three doors (tabs) */
.rooms{padding-top:30px;padding-bottom:36px}
.doors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;max-width:900px;margin:0 auto}
.door{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:44px minmax(0,1fr);grid-template-rows:auto auto;gap:3px 14px;align-items:center;padding:16px 16px 15px;background:var(--paper);
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 8px 0 0 var(--teal-dark)}
.door canvas{grid-row:1 / span 2;width:44px;height:44px}
.door b{font:700 19px/1.2 var(--pxf);color:var(--teal-dark)}
.door small{font:600 14px/1.3 var(--body);color:var(--muted)}
.door:hover{background:#fff6c8}
.door[aria-selected=true]{background:var(--coin);box-shadow:0 -3px 0 0 #6b3f00,0 3px 0 0 #6b3f00,-3px 0 0 0 #6b3f00,3px 0 0 0 #6b3f00,0 8px 0 0 #6b3f00}
.door[aria-selected=true] small{color:#4a3500}
.door:focus-visible{outline:3px dashed var(--pink);outline-offset:5px}

/* the open door's panel */
.dpanel{max-width:900px;margin:26px auto 0;padding:22px 26px 20px;background:#fff;
  box-shadow:0 -4px 0 0 var(--teal-dark),0 4px 0 0 var(--teal-dark),-4px 0 0 0 var(--teal-dark),4px 0 0 0 var(--teal-dark),8px 10px 0 0 rgba(8,60,54,.18)}
.dpanel[hidden]{display:none}
.dpanel:focus-visible{outline:3px dashed var(--pink);outline-offset:8px}
.dpanel h2{margin:0 0 14px;font:700 26px/1.1 var(--pxf);color:var(--teal)}
.drow{display:grid;grid-template-columns:36px minmax(0,1fr) auto;gap:14px;align-items:center;padding:12px 14px;margin:0 0 10px;color:inherit;text-decoration:none;background:var(--paper);box-shadow:0 0 0 2px var(--line)}
a.drow:hover{box-shadow:0 0 0 3px var(--teal);color:inherit}
.drow canvas{width:30px;height:30px}
.drow b{display:block;font:700 17px/1.25 var(--pxf);color:var(--teal-dark)}
.drow small{display:block;margin-top:2px;font:600 15px/1.45 var(--body);color:var(--text)}
.drow em{font:400 8px/1.38 var(--ps);font-style:normal;text-transform:uppercase;color:#c9347d;white-space:nowrap}
.dnote{margin:14px 0 8px;padding:12px 14px;font:600 15px/1.45 var(--body);background:#eef7f4;border-left:4px solid var(--teal)}
.dfine{margin:10px 0 0;font:600 14px/1.45 var(--body);color:var(--muted)}
.centity{max-width:900px;margin:22px auto 0;font:600 14px/1.7 var(--body);color:var(--muted);text-align:center}

/* facts the owner has not given yet */
.phx{display:inline;padding:1px .3em;font-size:.92em;font-weight:700;background:#fff1a8;color:#4a3500;border:1px dashed #b98a10}
.phx.law{background:#ffe2e0;border-color:#b3261e;color:#7a1410}

/* the agent form: front end only, nothing is sent or stored */
.cform{display:grid;gap:14px}
.crow2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.cfield{min-width:0}
.cfield label{display:block;margin:0 0 6px;font:600 16px/1.3 var(--pxf);color:var(--teal-dark)}
.cfield input,.cfield select,.cfield textarea{display:block;box-sizing:border-box;width:100%;margin:3px 0;padding:10px 12px;border:0;border-radius:0;font:600 16px/1.4 var(--body);color:var(--text);background:#fff;-webkit-appearance:none;appearance:none;
  box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark)}
.cfield select{padding-right:40px;background-image:linear-gradient(45deg,transparent 50%,var(--teal-dark) 50%),linear-gradient(135deg,var(--teal-dark) 50%,transparent 50%);
  background-position:calc(100% - 20px) 18px,calc(100% - 14px) 18px;background-size:6px 6px;background-repeat:no-repeat}
.cfield textarea{min-height:110px;resize:vertical}
.cfield input:focus,.cfield select:focus,.cfield textarea:focus{outline:none;background-color:#fffbe6;box-shadow:0 -3px 0 0 var(--teal),0 3px 0 0 var(--teal),-3px 0 0 0 var(--teal),3px 0 0 0 var(--teal),0 0 0 6px var(--coin)}
.cfield.bad input,.cfield.bad textarea{box-shadow:0 -3px 0 0 var(--err),0 3px 0 0 var(--err),-3px 0 0 0 var(--err),3px 0 0 0 var(--err)}
.cfield .cerr{margin:7px 0 0;font:800 14px/1.35 var(--body);color:var(--err)}
.cfield .cerr[hidden]{display:none}
.cfine{margin:0;font:600 13.5px/1.6 var(--body);color:var(--muted)}
.ccta{justify-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin:4px 4px 8px;padding:14px 26px;border:0;cursor:pointer;font:400 12px/1 var(--ps);text-transform:uppercase;background:var(--pink);color:#fff;text-shadow:2px 2px 0 var(--plum);
  box-shadow:0 -4px 0 0 var(--plum),0 4px 0 0 var(--plum),-4px 0 0 0 var(--plum),4px 0 0 0 var(--plum),0 8px 0 0 var(--plum)}
.ccta:hover{filter:brightness(1.1)}
.ccta:active{transform:translateY(3px)}
.ccta:focus-visible{outline:3px dashed var(--teal-dark);outline-offset:8px}
.csent{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;padding:10px 12px;font:600 15px/1.45 var(--body);background:#e3f7e6}
.csent canvas{width:22px;height:22px;flex:none}
.csent b{color:#127a34}
.demo-note{display:inline-block;margin:0;padding:6px 10px;color:#4a3500;background:#fff1a8;border:1px dashed #b98a10;font:700 13px/1.35 var(--body)}
[data-csent][hidden]{display:none}

/* the legal strip, with Contact us lit */
.legal-wrap{margin-top:24px}
.legal{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:4px 22px;min-height:40px;padding:8px 16px;background:var(--teal-dark);font:600 15px/1.3 var(--pxf);color:#d3e6e0}
.legal a{color:#fff;text-decoration:underline;text-underline-offset:.15em;text-decoration-color:rgba(255,255,255,.5)}
.legal a:hover{color:var(--coin)}
.legal a[aria-current] b{color:var(--coin);font-weight:700}
.legal .copy{opacity:.85}
canvas.wipe{position:fixed;inset:0;width:100%;height:100%;z-index:20;pointer-events:none}

/* the full header needs about 805px, so it goes compact below 820px */
@media (max-width:820px){
  .top{padding-top:14px}
  .wm{width:142px}
  .nav{gap:10px}
  .nlink,.nbtn{font-size:13px}
  .nlink{padding:6px 2px}
  .nbtn{padding:8px 10px;box-shadow:0 -3px 0 0 var(--teal-dark),0 3px 0 0 var(--teal-dark),-3px 0 0 0 var(--teal-dark),3px 0 0 0 var(--teal-dark),0 7px 0 0 var(--teal-dark)}
  .full{display:none}.short{display:inline}
  .desk{flex-direction:column;align-items:center;gap:24px}
  .board{margin-bottom:0}
}
/* phones: the doors stack one per row */
@media (max-width:700px){
  body{font-size:16px}
  .wrap{padding-left:16px;padding-right:16px}
  .board{padding:18px 16px 18px}
  .board h1{font-size:36px}
  .board p{font-size:16px}
  .doors{grid-template-columns:minmax(0,1fr);gap:16px;padding:0 4px}
  .dpanel{margin-top:22px;padding:18px 16px 16px}
  .dpanel h2{font-size:24px}
  .drow{grid-template-columns:30px minmax(0,1fr);gap:12px}
  .drow em{grid-column:2}
  .crow2{grid-template-columns:minmax(0,1fr)}
  .legal{justify-content:flex-start;font-size:13px}
  .legal .copy{display:none}
}
/* on a narrow phone only one of About us and Pricing fits beside Log in (as on those two pages) */
@media (max-width:480px){.nav .nlink:first-child{display:none}}
@media (max-width:359px){.top{gap:10px}.wm{width:120px}}
@media (prefers-reduced-motion:reduce){.ccta:active{transform:none}}