/* CUSTOMER_ACCESS_REFERENCE_MASTER_2026-09-16
   Visual-only shell for the customer access screen, measured from the approved
   reference and aligned with the public BizPilot OS home page.

   Nothing here changes behaviour. Every rule is scoped to the signed-out state
   with body:has(#auth:not([hidden])), so the signed-in workspace renders exactly
   as before, and the onboarding API, validation, session and approval flow are
   untouched. Two pieces of copy are driven by real DOM state rather than by
   script: the heading follows #businessLabel[hidden], which app.js already
   toggles per mode, and the submit label follows the button's disabled state,
   which app.js already sets while a request is in flight. */

/* Same typeface as the public home page, already deployed with it. */
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-400-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2122}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:400;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-400-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-600-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2122}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:600;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-600-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-700-latin.woff2") format("woff2");
  unicode-range:U+0020-007E,U+00A0,U+00A9,U+00AE,U+2013-2014,U+2018-2019,U+201C-201D,U+2022,U+2026,U+2122}
@font-face{font-family:"BizPilot Sans";font-style:normal;font-weight:700;font-display:swap;
  src:url("/home/assets/fonts/plex-thai-700-thai.woff2") format("woff2");
  unicode-range:U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC}

/* ---------------------------------------------------------------- reset ----
   app.css carries the previous access design (a robot silhouette, a
   PLAN/EXECUTE/GROW panel, and a card whose lockup, heading and footer are
   generated content). app.css also dresses the signed-in workspace, so it is
   left untouched and its access-only layer is switched off from here instead.
   !important is deliberate: these are competing generated-content rules, not
   ordinary cascade. */
body:has(#auth:not([hidden])) main::before,
body:has(#auth:not([hidden])) main::after,
body:has(#auth:not([hidden])) #auth::before,
body:has(#auth:not([hidden])) #auth::after,
body:has(#auth:not([hidden])) #auth h1::after{
  content:none!important;display:none!important;
}
body:has(#auth:not([hidden])) main{
  background:none!important;overflow:visible!important;place-items:stretch!important;
  isolation:auto!important;
}
/* app.css clips this page sideways. Clipping does not fix an overflow, it
   only stops anyone seeing it - scrollWidth reads clean while a phone can
   still pan to whatever is sticking out. Turn it off and keep the layout
   inside the viewport on its own. */
body:has(#auth:not([hidden])){overflow-x:visible!important}
body:has(#auth:not([hidden])) #auth{
  position:static!important;backdrop-filter:none!important;
}

body:has(#auth:not([hidden])){
  --ac-ink:#191008;
  --ac-ink-soft:#40301f;
  --ac-muted:#6f6254;
  --ac-line:#e6dac7;
  --ac-card:#fffdf8;
  --ac-field:#fbf6ec;
  --ac-cta-a:#8d4f1e;
  --ac-cta-b:#62350f;
  --ac-cta-c:#4b280e;
  --ac-gold:#c79a52;
  --ac-dark:#17120c;
  --ac-font:"BizPilot Sans","IBM Plex Sans Thai","Noto Sans Thai","Sarabun","Leelawadee UI",Tahoma,system-ui,-apple-system,sans-serif;
  min-height:100dvh;
  margin:0;
  font-family:var(--ac-font);
  color:var(--ac-ink);
  background:linear-gradient(180deg,#f9f2e5 0%,#efe2cd 100%);
}
body:has(#auth:not([hidden])) .shell{display:block;min-height:100dvh}
body:has(#auth:not([hidden])) aside{display:none!important}
body:has(#auth:not([hidden])) main{
  display:block;width:100%;max-width:none;min-height:100dvh;margin:0;padding:0;
  border:0;
}

/* ============================================================================
   The reference is one photograph edge to edge, with the form floating on it,
   a slim bar of site navigation above and a band of reassurances below. The
   photograph is never washed out to make the copy readable - that flattened
   the sea and the islands, which are the point of the picture - so the copy
   carries its own scrim instead.
   ========================================================================== */
body:has(#auth:not([hidden])) #auth{
  position:relative;isolation:isolate;
  display:flex;flex-direction:column;
  width:100%;max-width:none;min-height:100dvh;margin:0;padding:0;
  border:0;border-radius:0;background:#100b06;box-shadow:none;color:var(--ac-ink);
  overflow:hidden;
}
body:has(#auth:not([hidden])) .auth-stage{position:relative;isolation:isolate;flex:1;min-height:0;overflow:hidden}
body:has(#auth:not([hidden])) .auth-photo,
body:has(#auth:not([hidden])) .auth-photo img{
  position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;
  object-fit:cover;object-position:58% 50%;pointer-events:none;
}
/* Only what the chrome needs: a wash under the top bar and under the band. */
body:has(#auth:not([hidden])) #auth::after{content:none!important;display:none!important}

/* top bar ------------------------------------------------------------------- */
body:has(#auth:not([hidden])) .auth-topbar{
  position:relative;z-index:4;flex:none;background:#0f0a06;
  display:flex;align-items:center;gap:clamp(10px,1.6vw,26px);
  padding:clamp(6px,.62vw,10px)
          max(clamp(16px,2.2vw,34px),env(safe-area-inset-right))
          clamp(6px,.62vw,10px)
          max(clamp(16px,2.2vw,34px),env(safe-area-inset-left));
}
body:has(#auth:not([hidden])) .auth-brand{
  display:block;line-height:0;flex:none;
  width:clamp(132px,13.4vw,192px);
}
body:has(#auth:not([hidden])) .auth-brand img{width:100%;height:auto}
body:has(#auth:not([hidden])) .auth-nav{margin-inline:auto}
body:has(#auth:not([hidden])) .auth-nav ul{
  display:flex;align-items:center;gap:clamp(12px,2.1vw,36px);
  margin:0;padding:0;list-style:none;
}
body:has(#auth:not([hidden])) .auth-nav a{
  color:#fff6e6;text-decoration:none;font-size:clamp(12px,1.05vw,16px);font-weight:500;
  text-shadow:0 1px 3px rgba(20,12,4,.55);white-space:nowrap;
}
body:has(#auth:not([hidden])) .auth-nav a:hover{text-decoration:underline;text-underline-offset:.35em}
body:has(#auth:not([hidden])) .auth-nav a[aria-current]{color:#ffca7a;font-weight:600}
body:has(#auth:not([hidden])) .auth-nav a{
  position:relative;display:inline-block;
  background:none!important;border:0;border-radius:0;padding:0;min-height:0;
}
body:has(#auth:not([hidden])) .auth-nav a[aria-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-.45em;
  height:2px;border-radius:2px;background:#ffca7a;
}
body:has(#auth:not([hidden])) .auth-lang{
  display:flex;align-items:center;gap:.45em;margin:0;flex:none;
  color:#fff6e6;font-size:clamp(12px,1.05vw,16px);text-shadow:0 1px 3px rgba(20,12,4,.55);
}
body:has(#auth:not([hidden])) .auth-lang a{color:inherit;text-decoration:none}
body:has(#auth:not([hidden])) .auth-lang a[aria-current]{font-weight:700}
body:has(#auth:not([hidden])) .auth-lang span{opacity:.55}
body:has(#auth:not([hidden])) .auth-topcta{
  flex:none;display:inline-flex;align-items:center;gap:.5em;
  min-height:0;padding:clamp(7px,.72vw,11px) clamp(14px,1.5vw,24px);
  border:1px solid rgba(255,225,170,.72);border-radius:999px;
  background:rgba(22,15,8,.34);color:#ffeccd;
  font-family:inherit;font-size:clamp(12px,1.02vw,15px);font-weight:600;cursor:pointer;
  text-shadow:0 1px 3px rgba(20,12,4,.5);
}
body:has(#auth:not([hidden])) .auth-topcta::before{
  content:"";width:1.05em;height:1.05em;flex:none;background:center/contain no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffeccd' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E");
}
body:has(#auth:not([hidden])) .auth-topcta:hover{background:rgba(22,15,8,.52)}

/* the copy on the photograph ------------------------------------------------ */
body:has(#auth:not([hidden])) .auth-story{
  position:absolute;z-index:3;
  left:max(clamp(22px,4.4vw,76px),env(safe-area-inset-left));
  top:clamp(70px,13vh,132px);transform:none;
  width:min(52ch,42vw);
  color:#150f08;
  text-shadow:0 1px 2px rgba(255,255,255,.6);
}
body:has(#auth:not([hidden])) .auth-kicker{
  margin:0 0 clamp(8px,.9vw,14px);
  color:#3b2a15;font-size:clamp(13px,1.05vw,16px);
  font-weight:600;letter-spacing:.07em;
}
body:has(#auth:not([hidden])) .auth-story h2{
  margin:0;color:#150f08;font-weight:700;
  font-size:clamp(27px,3vw,44px);line-height:1.17;letter-spacing:-.01em;
}
body:has(#auth:not([hidden])) .auth-lede{
  margin:clamp(12px,1.2vw,20px) 0 0;
  color:#20180d;font-size:clamp(14px,1.05vw,17px);line-height:1.62;
}
body:has(#auth:not([hidden])) .auth-benefits{
  display:flex;flex-wrap:nowrap;gap:clamp(10px,1.3vw,20px);
  margin:clamp(20px,2.2vw,34px) 0 0;padding:0;list-style:none;
}
body:has(#auth:not([hidden])) .auth-benefits li{
  display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.6vw,10px);
  width:clamp(64px,6.4vw,96px);text-align:center;
  color:#150f08;font-size:clamp(11px,.85vw,13px);font-weight:700;line-height:1.3;
}
body:has(#auth:not([hidden])) .auth-benefits li::before{
  content:"";width:clamp(42px,4.2vw,58px);aspect-ratio:1;border-radius:999px;
  background:var(--ac-dark) center/54% no-repeat;
  box-shadow:0 .5rem 1.1rem rgba(20,12,4,.3);
}
body:has(#auth:not([hidden])) .auth-benefits li.b-time::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe9b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.5 2.5 2.5 10l7.5 2.4z'/%3E%3Cpath d='M21.5 2.5 10 12.4v6l3.2-3.8z'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .auth-benefits li.b-grow::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe9b8' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M4 20V13'/%3E%3Cpath d='M10 20V8'/%3E%3Cpath d='M16 20v-5'/%3E%3Cpath d='M20.5 4 14 10.5'/%3E%3Cpath d='M20.5 4h-4.6M20.5 4v4.6'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .auth-benefits li.b-repeat::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe9b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='8' r='3.2'/%3E%3Cpath d='M3.5 19.5a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17.5' cy='8.6' r='2.4'/%3E%3Cpath d='M17.5 13.4a5 5 0 0 1 4 4.9'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .auth-benefits li.b-life::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffe9b8' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h12v5.5a4.5 4.5 0 0 1-4.5 4.5h-3A4.5 4.5 0 0 1 4 14.5z'/%3E%3Cpath d='M16 10.5h1.8a2.6 2.6 0 0 1 0 5.2H16'/%3E%3Cpath d='M7.5 5.5v-1M11 5.5v-1'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .auth-script{
  margin:clamp(14px,1.55vw,24px) 0 0;
  font-family:"Snell Roundhand","Segoe Script","Bradley Hand","Apple Chancery","Lucida Handwriting",cursive;
  font-style:italic;font-size:clamp(21px,2.3vw,36px);line-height:1.2;color:#150f08;font-weight:600;
  transform:rotate(-4deg);transform-origin:left center;
}

/* the card ------------------------------------------------------------------ */
body:has(#auth:not([hidden])) .auth-panel{
  position:absolute;z-index:5;
  right:max(clamp(14px,1.9vw,34px),env(safe-area-inset-right));
  top:50%;transform:translateY(-50%);
  width:clamp(316px,24.8vw,414px);max-height:calc(100% - clamp(28px,3.2vh,44px));
  overflow:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;
  padding:clamp(12px,1.05vw,17px) clamp(15px,1.35vw,24px) clamp(11px,.95vw,16px);
  border-radius:clamp(18px,1.5vw,26px);
  background:var(--ac-card);
  box-shadow:0 2.2rem 4.4rem rgba(24,14,4,.36),0 .2rem .6rem rgba(24,14,4,.16);
}
body:has(#auth:not([hidden])) .auth-panel .eyebrow{
  margin:0;text-align:center;color:var(--ac-gold);
  font-size:clamp(9.5px,.72vw,11.5px);font-weight:700;letter-spacing:.17em;
}
body:has(#auth:not([hidden])) #auth h1{
  margin:clamp(3px,.35vw,6px) 0 0;text-align:center;color:var(--ac-ink);
  font-size:clamp(20px,1.58vw,27px);font-weight:700;line-height:1.2;
}
body:has(#auth:not([hidden])) #auth h1 .on-login,
body:has(#auth:not([hidden])) #auth h1 .on-signup,
body:has(#auth:not([hidden])) .auth-panel>p .on-login,
body:has(#auth:not([hidden])) .auth-panel>p .on-signup{display:none}
body:has(#auth:not([hidden])) #auth:has(#businessLabel[hidden]) h1 .on-login,
body:has(#auth:not([hidden])) #auth:has(#businessLabel[hidden]) .auth-panel>p .on-login{display:inline}
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) h1 .on-signup,
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) .auth-panel>p .on-signup{display:inline}
body:has(#auth:not([hidden])) .auth-panel>p{
  margin:clamp(2px,.3vw,5px) 0 0;text-align:center;
  color:var(--ac-muted);font-size:clamp(12px,.88vw,13.5px);line-height:1.4;
}
body:has(#auth:not([hidden])) .tabs{
  display:grid;grid-template-columns:1fr 1fr;gap:3px;
  margin:clamp(7px,.65vw,11px) 0 0;padding:3px;
  border:1px solid var(--ac-line);border-radius:999px;background:var(--ac-field);
}
body:has(#auth:not([hidden])) .tabs button{
  min-height:0;padding:clamp(6px,.56vw,9px) 6px;border:0;border-radius:999px;
  background:none;color:var(--ac-ink-soft);
  font-family:inherit;font-size:clamp(12.5px,.94vw,14.5px);font-weight:600;cursor:pointer;
}
body:has(#auth:not([hidden])) #auth:has(#businessLabel[hidden]) .tabs button[data-mode="login"],
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) .tabs button[data-mode="signup"]{
  background:linear-gradient(103deg,var(--ac-cta-a),var(--ac-cta-b));color:#fff6e6;
  box-shadow:0 .35rem .9rem rgba(70,38,10,.3);
}
body:has(#auth:not([hidden])) #authForm{display:grid;gap:clamp(5px,.44vw,7px);margin:clamp(7px,.62vw,10px) 0 0}
body:has(#auth:not([hidden])) #authForm>label{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  align-items:center;column-gap:clamp(9px,.8vw,13px);margin:0;
  padding:clamp(6px,.52vw,9px) clamp(11px,.95vw,15px);
  border:1px solid var(--ac-line);border-radius:clamp(11px,.9vw,15px);
  background:var(--ac-field);
  color:var(--ac-ink-soft);font-size:clamp(11px,.82vw,12.5px);font-weight:600;line-height:1.3;
  cursor:text;
}
body:has(#auth:not([hidden])) #authForm input:not([type="checkbox"]){
  grid-column:2;width:100%;min-height:0;padding:0;
  border:0;border-radius:0;background:none;
  color:var(--ac-ink);font-family:inherit;font-size:clamp(12.5px,.95vw,14px);font-weight:500;
}
body:has(#auth:not([hidden])) #authForm input::placeholder{color:#a4977f}
body:has(#auth:not([hidden])) #authForm input:focus-visible{
  outline:0;border-color:var(--ac-cta-a);
  box-shadow:0 0 0 3px rgba(141,79,30,.18);
}
body:has(#auth:not([hidden])) .f-user::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8.2' r='3.6'/%3E%3Cpath d='M4.8 20a7.2 7.2 0 0 1 14.4 0'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .f-mail::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.8' y='5' width='18.4' height='14' rx='2.6'/%3E%3Cpath d='m3.4 7 8.6 6 8.6-6'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .f-tel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.3 3.5h3l1.5 4-2 1.4a12 12 0 0 0 6.3 6.3l1.4-2 4 1.5v3a2 2 0 0 1-2.2 2A16.8 16.8 0 0 1 4.3 5.7a2 2 0 0 1 2-2.2z'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .f-lock::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.4' y='10.2' width='15.2' height='10.4' rx='2.6'/%3E%3Cpath d='M8.2 10.2V7.6a3.8 3.8 0 0 1 7.6 0v2.6'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .f-biz::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20V6.2L12 3.4v16.6'/%3E%3Cpath d='M12 9.6h7.4V20'/%3E%3Cpath d='M2.8 20h18.4'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .f-lock{padding-right:clamp(38px,3.2vw,46px)}
body:has(#auth:not([hidden])) .pw-toggle{
  position:absolute;right:clamp(7px,.62vw,11px);top:50%;transform:translateY(-50%);
  width:clamp(28px,2.4vw,34px);height:clamp(28px,2.4vw,34px);min-height:0;padding:0;
  border:0;border-radius:9px;background:none;cursor:pointer;
}
body:has(#auth:not([hidden])) .pw-toggle::before{
  content:"";display:block;width:100%;height:100%;background:center/64% no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 12S5.8 5.8 12 5.8 21.8 12 21.8 12 18.2 18.2 12 18.2 2.2 12 2.2 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
body:has(#auth:not([hidden])) .pw-toggle[aria-pressed="true"]::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.2 12S5.8 5.8 12 5.8c1.5 0 2.9.4 4.1.9'/%3E%3Cpath d='M19.4 8.4A16 16 0 0 1 21.8 12S18.2 18.2 12 18.2c-1.8 0-3.3-.5-4.6-1.2'/%3E%3Cpath d='m3.4 3.4 17.2 17.2'/%3E%3C/svg%3E");
}
body:has(#auth:not([hidden])) .f-terms{
  display:block;margin:clamp(1px,.2vw,4px) 0 0;
  color:var(--ac-ink-soft);font-size:clamp(11px,.84vw,12.8px);line-height:1.55;
}
body:has(#auth:not([hidden])) .f-terms input[type="checkbox"]{
  display:inline-block!important;width:1.1em;height:1.1em;min-height:0;
  margin:0 .45em 0 0;padding:0;vertical-align:-.16em;accent-color:var(--ac-cta-a);
}
body:has(#auth:not([hidden])) .f-terms label{display:inline!important;margin:0;font-weight:500;color:inherit}
body:has(#auth:not([hidden])) .f-terms .t-link{color:var(--ac-cta-a);text-decoration:underline;text-underline-offset:.2em}
body:has(#auth:not([hidden])) #authForm>#authSubmit{
  display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;min-height:clamp(40px,3.02vw,45px);margin:clamp(4px,.4vw,7px) 0 0;
  padding:0 18px;border:0;border-radius:999px;
  background:linear-gradient(103deg,var(--ac-cta-a) 0%,var(--ac-cta-b) 52%,var(--ac-cta-c) 100%);
  color:#fff4e2;font-family:inherit;font-size:0;cursor:pointer;
  box-shadow:0 .8rem 1.7rem rgba(70,38,10,.34);
}
body:has(#auth:not([hidden])) #authForm>#authSubmit:disabled{opacity:.72;cursor:progress}
body:has(#auth:not([hidden])) #auth:has(#businessLabel[hidden]) #authForm>#authSubmit::before{content:"เข้าสู่ระบบ"}
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) #authForm>#authSubmit::before{content:"เริ่มทดลองใช้ฟรี 7 วัน"}
body:has(#auth:not([hidden])) #authForm>#authSubmit:disabled::before{content:"กำลังดำเนินการ…"}
body:has(#auth:not([hidden])) #authForm>#authSubmit::before{font-size:clamp(14px,1.08vw,16.5px);font-weight:600}
body:has(#auth:not([hidden])) #authForm>#authSubmit::after{
  content:"";width:20px;height:20px;flex:none;background:center/contain no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff4e2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15'/%3E%3Cpath d='m13 6 6 6-6 6'/%3E%3C/svg%3E");
}
body:has(#auth:not([hidden])) #authForm>#authSubmit:disabled::after{display:none}
body:has(#auth:not([hidden])) #authMsg{
  margin:clamp(4px,.42vw,7px) 0 0;text-align:center;
  color:var(--ac-cta-a);font-size:clamp(11.5px,.86vw,13px);line-height:1.5;
}
body:has(#auth:not([hidden])) #authMsg:empty{display:none}

/* social sign-up ------------------------------------------------------------ */
body:has(#auth:not([hidden])) .auth-oauth{margin:clamp(6px,.52vw,9px) 0 0}
body:has(#auth:not([hidden])) .oauth-sep{
  display:flex;align-items:center;gap:.8em;margin:0 0 clamp(5px,.48vw,8px);
  color:var(--ac-muted);font-size:clamp(11px,.82vw,12.5px);
}
body:has(#auth:not([hidden])) .oauth-sep::before,
body:has(#auth:not([hidden])) .oauth-sep::after{content:"";flex:1;height:1px;background:var(--ac-line)}
body:has(#auth:not([hidden])) .oauth-row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(8px,.72vw,12px)}
body:has(#auth:not([hidden])) .oauth-btn{
  display:flex;align-items:center;justify-content:center;gap:.5em;
  min-height:clamp(34px,2.58vw,39px);padding:0 10px;
  border:1px solid var(--ac-line);border-radius:clamp(10px,.86vw,14px);
  background:#fff;color:var(--ac-ink);
  font-family:inherit;font-size:clamp(12px,.9vw,14px);font-weight:600;
}
body:has(#auth:not([hidden])) .oauth-btn::before{content:"";width:1.3em;height:1.3em;background:center/contain no-repeat}
body:has(#auth:not([hidden])) .oauth-btn:disabled{opacity:.55;cursor:not-allowed}
body:has(#auth:not([hidden])) .o-google::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M45 24.5c0-1.6-.1-2.8-.4-4H24v7.6h12c-.2 2-1.5 5-4.4 7l6.8 5.3C42.4 36.6 45 31 45 24.5z'/%3E%3Cpath fill='%2334A853' d='M24 46c5.9 0 10.9-2 14.5-5.3l-6.8-5.3c-1.9 1.3-4.4 2.2-7.7 2.2-5.9 0-10.9-3.9-12.7-9.2l-7 5.4C7.9 41 15.4 46 24 46z'/%3E%3Cpath fill='%23FBBC05' d='M11.3 28.4a13 13 0 0 1 0-8.6l-7-5.4a22 22 0 0 0 0 19.4z'/%3E%3Cpath fill='%23EA4335' d='M24 10.2c3.3 0 5.5 1.4 6.8 2.6l5-4.9C32.8 5 29 3 24 3 15.4 3 7.9 8 4.3 15.4l7 5.4c1.8-5.3 6.8-9.2 12.7-9.2z'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .o-line::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Ccircle cx='24' cy='24' r='22' fill='%2306C755'/%3E%3Cpath fill='%23fff' d='M24 11c-7.7 0-14 4.9-14 11 0 5.5 5 10.1 11.7 11 .4.1 1 .3 1.1.6.1.3.1.8 0 1.1l-.2 1.1c0 .3-.3 1.3 1.1.7s7.5-4.4 10.3-7.6c1.9-2.1 2.8-4.2 2.8-6.9 0-6.1-6.3-11-12.8-11z'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .auth-safe{
  display:grid;gap:1px;margin:clamp(6px,.56vw,10px) 0 0;
  padding-left:calc(clamp(20px,1.7vw,26px) + .6em);
  background:left top .1em/clamp(20px,1.7vw,26px) no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238d5f2e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 6v5.3c0 4.2 2.9 7.6 7 9.5 4.1-1.9 7-5.3 7-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.2 10'/%3E%3C/svg%3E");
  color:var(--ac-muted);font-size:clamp(11px,.82vw,12.6px);line-height:1.45;
}
body:has(#auth:not([hidden])) .auth-safe strong{color:var(--ac-ink);font-weight:700}

/* the band of reassurances -------------------------------------------------- */
body:has(#auth:not([hidden])) .auth-trust{
  position:relative;z-index:4;flex:none;background:#0f0a06;
  display:flex;align-items:center;gap:clamp(12px,2vw,40px);
  margin:0;list-style:none;
  padding:clamp(10px,1.1vw,18px)
          max(clamp(16px,2.4vw,40px),env(safe-area-inset-right))
          max(clamp(10px,1.1vw,18px),env(safe-area-inset-bottom))
          max(clamp(16px,2.4vw,40px),env(safe-area-inset-left));
}
body:has(#auth:not([hidden])) .auth-trust li{
  display:grid;grid-template-columns:auto 1fr;align-items:center;
  column-gap:.6em;
  color:#fff3df;font-size:clamp(11px,.86vw,13.5px);line-height:1.32;
  text-shadow:0 1px 3px rgba(20,12,4,.6);
}
body:has(#auth:not([hidden])) .auth-trust li::before{
  content:"";grid-row:1/3;width:clamp(22px,2vw,30px);aspect-ratio:1;
  background:center/contain no-repeat;
}
body:has(#auth:not([hidden])) .auth-trust strong{font-weight:700}
body:has(#auth:not([hidden])) .auth-trust span{grid-column:2;opacity:.9}
body:has(#auth:not([hidden])) .t-bolt::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffca7a' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='M13.2 2.5 4.8 13.4h5.4l-.6 8.1 8.6-11.1h-5.6z'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .t-users::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffca7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.2' cy='8' r='3.2'/%3E%3Cpath d='M3.2 19.6a6 6 0 0 1 12 0'/%3E%3Ccircle cx='17.4' cy='8.6' r='2.4'/%3E%3Cpath d='M17.4 13.4a5 5 0 0 1 4 4.9'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .t-shield::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffca7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.2 5 6v5.3c0 4.2 2.9 7.6 7 9.5 4.1-1.9 7-5.3 7-9.5V6z'/%3E%3Cpath d='m9 12 2.2 2.2L15.2 10'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .t-head::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffca7a' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.4 14.4v-2.2a7.6 7.6 0 0 1 15.2 0v2.2'/%3E%3Crect x='2.6' y='13.8' width='4' height='6' rx='1.8'/%3E%3Crect x='17.4' y='13.8' width='4' height='6' rx='1.8'/%3E%3Cpath d='M19.4 19.8a3.4 3.4 0 0 1-3.4 2.2H13'/%3E%3C/svg%3E")}
body:has(#auth:not([hidden])) .t-sign{
  display:block;margin-left:auto;align-self:center;
  font-family:"Snell Roundhand","Segoe Script","Bradley Hand","Apple Chancery","Lucida Handwriting",cursive;
  font-style:italic;font-size:clamp(12px,1.18vw,20px);line-height:1.3;color:#ffca7a;
  text-align:right;transform:rotate(-4deg);
}
body:has(#auth:not([hidden])) .t-sign::before{display:none}

/* what each mode shows ------------------------------------------------------ */
body:has(#auth:not([hidden])) #authForm>#fullNameLabel,
body:has(#auth:not([hidden])) #authForm>#phoneLabel,
body:has(#auth:not([hidden])) #authForm>#termsRow,
body:has(#auth:not([hidden])) #authForm>#businessLabel,
body:has(#auth:not([hidden])) #auth #oauthRow{display:none}
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) #authForm>#fullNameLabel,
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) #authForm>#phoneLabel,
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) #authForm>#businessLabel{display:grid}
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) #authForm>#termsRow{display:block}
body:has(#auth:not([hidden])) #auth:has(#businessLabel:not([hidden])) #oauthRow{display:block}

/* --------------------------------------------- stacked, phones and tablets */
@media (max-width:960px){
  body:has(#auth:not([hidden])) #auth{min-height:100dvh;display:block}
  body:has(#auth:not([hidden])) .auth-stage{overflow:visible}
  body:has(#auth:not([hidden])) .auth-photo img{object-position:56% 34%}
  body:has(#auth:not([hidden])) .auth-stage{background:#0f2b3c}
  body:has(#auth:not([hidden])) .auth-topbar{padding-top:max(10px,env(safe-area-inset-top))}
  body:has(#auth:not([hidden])) .auth-nav{display:none}
  body:has(#auth:not([hidden])) .auth-brand{width:clamp(132px,38vw,180px)}
  body:has(#auth:not([hidden])) .auth-lang{margin-left:auto}
  body:has(#auth:not([hidden])) .auth-story{
    position:relative;z-index:3;transform:none;width:auto;top:auto;left:auto;
    padding:clamp(16px,4.4vw,28px) max(clamp(18px,5vw,28px),env(safe-area-inset-left)) 0;
    color:#150f08;text-shadow:0 1px 2px rgba(255,255,255,.6);
  }
  body:has(#auth:not([hidden])) .auth-kicker{color:#3b2a15}
  body:has(#auth:not([hidden])) .auth-story h2,
  body:has(#auth:not([hidden])) .auth-benefits li{color:#150f08}
  body:has(#auth:not([hidden])) .auth-lede{color:#20180d}
  body:has(#auth:not([hidden])) .auth-story h2{font-size:clamp(25px,6.6vw,36px)}
  body:has(#auth:not([hidden])) .auth-lede{font-size:clamp(13.5px,3.5vw,16px)}
  body:has(#auth:not([hidden])) .auth-benefits{flex-wrap:wrap;gap:clamp(10px,3vw,18px) clamp(8px,2.6vw,16px)}
  body:has(#auth:not([hidden])) .auth-benefits li{width:calc(25% - clamp(6px,2vw,12px));min-width:60px;font-size:clamp(10px,2.55vw,12px)}
  body:has(#auth:not([hidden])) .auth-benefits li::before{width:clamp(40px,10.5vw,52px)}
  body:has(#auth:not([hidden])) .auth-script{color:#150f08;font-size:clamp(19px,5.4vw,28px)}
  body:has(#auth:not([hidden])) .auth-panel{
    position:relative;z-index:5;transform:none;width:auto;max-height:none;overflow:visible;top:auto;right:auto;
    margin:clamp(18px,5vw,30px) max(clamp(14px,4vw,24px),env(safe-area-inset-right))
           clamp(14px,4vw,22px) max(clamp(14px,4vw,24px),env(safe-area-inset-left));
    padding:clamp(18px,5vw,26px) clamp(16px,4.4vw,24px) clamp(16px,4vw,22px);
  }
  body:has(#auth:not([hidden])) #auth h1{font-size:clamp(21px,5.6vw,27px)}
  body:has(#auth:not([hidden])) .auth-panel>p{font-size:clamp(13px,3.4vw,15px)}
  body:has(#auth:not([hidden])) .tabs button{font-size:clamp(13px,3.4vw,15px);padding:10px 6px}
  body:has(#auth:not([hidden])) #authForm>label{font-size:clamp(12px,3.1vw,13.5px)}
  body:has(#auth:not([hidden])) #authForm input:not([type="checkbox"]){
    min-height:48px;font-size:16px;
    padding-left:44px;background-position:left 14px center;background-size:18px;
  }
  body:has(#auth:not([hidden])) .f-terms{font-size:clamp(11.5px,3vw,13px)}
  body:has(#auth:not([hidden])) #authForm>#authSubmit{min-height:52px}
  body:has(#auth:not([hidden])) #authForm>#authSubmit::before{font-size:16px}
  body:has(#auth:not([hidden])) .oauth-btn{min-height:46px;font-size:clamp(12.5px,3.2vw,14px)}
  body:has(#auth:not([hidden])) .auth-safe{font-size:clamp(11.5px,3vw,12.8px)}
  body:has(#auth:not([hidden])) .auth-trust{
    flex-wrap:wrap;justify-content:flex-start;
    gap:clamp(10px,3vw,18px) clamp(14px,5vw,26px);
    padding:0 max(clamp(18px,5vw,28px),env(safe-area-inset-left))
            max(clamp(20px,6vw,30px),env(safe-area-inset-bottom));
  }
  body:has(#auth:not([hidden])) .auth-trust li{font-size:clamp(11px,2.9vw,13px)}
  body:has(#auth:not([hidden])) .auth-trust li::before{width:clamp(22px,6vw,28px)}
  body:has(#auth:not([hidden])) .t-sign{width:100%;margin:clamp(4px,1.5vw,10px) 0 0;text-align:left;font-size:clamp(17px,4.8vw,24px)}
}

@media (max-width:420px){
  body:has(#auth:not([hidden])) .auth-benefits li{width:calc(50% - 8px);flex-direction:row;justify-content:flex-start;text-align:left;gap:8px}
  body:has(#auth:not([hidden])) .oauth-row{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  body:has(#auth:not([hidden])) *{animation:none!important;transition:none!important}
}

/* the reference names the field inside its own box, with the example beneath */
body:has(#auth:not([hidden])) #authForm>label>.f-name{
  grid-column:2;grid-row:1;color:var(--ac-ink);font-weight:700;
  font-size:clamp(11.5px,.86vw,13px);line-height:1.25;
}
body:has(#auth:not([hidden])) #authForm>label>input{grid-column:2;grid-row:2}
body:has(#auth:not([hidden])) #authForm>label{grid-template-rows:auto auto}
body:has(#auth:not([hidden])) #authForm>label::before{
  content:"";grid-column:1;grid-row:1/3;
  width:clamp(17px,1.35vw,21px);aspect-ratio:1;
  background-position:center;background-size:contain;background-repeat:no-repeat;
}
body:has(#auth:not([hidden])) #authForm>label:focus-within{
  border-color:var(--ac-cta-a);box-shadow:0 0 0 3px rgba(141,79,30,.18);
}
body:has(#auth:not([hidden])) #authForm input:focus-visible{outline:0;border:0;box-shadow:none}

/* Forgot-password control must never inherit the primary submit button skin. */
body:has(#auth:not([hidden])) #authForm>#forgotPassword.auth-forgot{
  display:block;width:max-content;min-height:0;margin:-2px 0 4px auto;padding:2px 0;
  border:0;border-radius:0;background:transparent;color:var(--ac-cta-a);
  box-shadow:none;font-family:inherit;font-size:clamp(12px,.86vw,13px);font-weight:600;
  text-decoration:underline;text-underline-offset:.22em;cursor:pointer;
}
body:has(#auth:not([hidden])) #authForm>#forgotPassword.auth-forgot::before,
body:has(#auth:not([hidden])) #authForm>#forgotPassword.auth-forgot::after{content:none!important;display:none!important}
body:has(#auth:not([hidden])) #authForm>#forgotPassword.auth-forgot:hover{transform:none;color:var(--ac-cta-c)}
body:has(#auth:not([hidden])) #authForm>#forgotPassword.auth-forgot[hidden]{display:none!important}

/* Reset-password form has its own controls; do not reuse login button generated copy. */
body:has(#auth:not([hidden])) #resetPasswordForm{display:grid;gap:8px;margin-top:12px}
body:has(#auth:not([hidden])) #resetPasswordForm[hidden]{display:none!important}
body:has(#auth:not([hidden])) #resetPasswordForm>button{font-family:inherit;font-size:14px;font-weight:600}
body:has(#auth:not([hidden])) #resetPasswordSubmit{min-height:46px;border:0;border-radius:999px;background:linear-gradient(103deg,var(--ac-cta-a),var(--ac-cta-b));color:#fff4e2}
body:has(#auth:not([hidden])) #resetBack{min-height:40px;border:1px solid var(--ac-line);border-radius:999px;background:var(--ac-field);color:var(--ac-ink-soft);box-shadow:none}