/* One nav on every page: 56px tall, the wordmark at 17px, links as slim pills,
   a 30px avatar with the seal chip tucked under its edge, nothing taller. */
body[style*="padding-top:92px"],body{--nav-h:56px}
.nav a.logo,.nav .nav-logo,.nav .logo,.login-nav>a{font-size:17px!important;gap:8px!important}
.nav a.logo img,.nav .nav-logo img,.nav .logo img,.login-nav img{width:24px!important;height:24px!important}
/* the seal's 24px sets the height of everything else in the bar */
.nav .nav-signin{height:26px!important;padding:0 12px!important;font-size:13px!important;border-radius:4px!important}
.nav .nav-menu-btn,.nav .hamburger,#hkMenuBtn,.nav button.nav-menu{height:26px!important;padding:0 10px!important;font-size:12.5px!important;border-radius:4px!important}
#navAvatar img,.nav-avatar img{width:100%!important;height:100%!important}
.nav .nav-badge,.nav .nav-status-dot,#navAvatar .dot{width:10px!important;height:10px!important}
.nav .st,.nav #st{height:24px!important;padding:0 9px!important;font-size:11.5px!important;border-radius:4px!important}
.nav .btn,.nav #shareBtn,.nav #aiBtn,.nav .nav-end,.nav .nav-people,.nav .nav-status,.nav .nav-time{height:26px!important;padding:0 10px!important;font-size:12.5px!important;line-height:1!important;display:inline-flex!important;align-items:center!important;border-radius:4px!important}
.nav .nav-title{font-size:18px!important}
@media(max-width:560px){nav.nav,.nav{padding-left:12px!important;padding-right:12px!important}}

/* Phones: the links fold away (the Menu or the avatar takes over), the call to action shortens, the editor's assistant button too.
   960px, not 900: with Front office (28 Sep 2026) the bar overflowed from 901 to 949px */
@media(max-width:960px){
  .nav .nls,.nav .nav-links,nav.nav a[style*="padding:10px 12px"],.nav a.nav-link:not(.on):not([data-keep]),.nav a.nav-link.on,.login-nav a[style*="padding:10px 12px"],.login-nav .nav-link{display:none!important}
  nav.nav,.nav{padding-left:14px!important;padding-right:14px!important}
}
@media(max-width:560px){
  #navSignInQuiet{display:none!important}
  .nav .nav-signin{font-size:0!important;padding:0 12px!important}.nav .nav-signin::before{content:'Start free';font-size:13px;font-weight:600}
  .nav #aiBtn{font-size:0!important;padding:0 10px!important}.nav #aiBtn::before{content:'Assistant';font-size:12px;font-weight:600}
  .nav .st span+*{display:none!important}
  .nav .nav-status,.nav .nav-time{display:none!important}
}
@media(max-width:560px){
  /* the wordmark gives way to the seal alone, and the gaps tighten, so the editor's DRAFT, Share, Assistant and avatar fit 390px */
  nav.nav a.logo,.nav a.logo,.nav .nav-logo,.nav .logo{font-size:0!important;gap:0!important}
  nav.nav,.nav{gap:6px!important;padding-left:10px!important;padding-right:10px!important}
  .nav .btn,.nav #shareBtn,.nav #aiBtn{margin-left:4px!important;padding:0 9px!important}
  .nav .st,.nav #st{padding:0 8px!important;margin-left:auto!important}
  #navAvatar,.nav-avatar-wrap{margin-left:8px!important}
}
/* The sign-in page's nav matches: links to the right as slim pills */
.login-nav{display:flex!important;align-items:center!important;gap:2px!important;padding:0 48px!important}
.login-nav>a:first-child{margin-right:auto!important}
.login-nav>a:not(:first-child){display:inline-flex!important;align-items:center!important;height:24px!important;padding:0 9px!important;font-size:13px!important;font-weight:500!important;border-radius:4px!important;color:#1A1A1A;text-decoration:none}
@media(max-width:960px){.login-nav>a:not(:first-child){display:none!important}.login-nav{padding:0 14px!important}}

.nav .btn .n,.nav #shareBtn .cnt,.nav .badge{height:16px!important;min-width:16px!important;font-size:10px!important;border-radius:3px!important}
/* Everything that sticks under the bar, at the bar's real height */
#index,.side{top:100px!important;max-height:calc(100vh - 100px)!important}
@media(max-width:1000px){#index{top:48px!important}}
.desk-tabs,.stat-grid{top:auto!important}
/* Signed out, the Sign in and Start free chips stay at every width; on phones Sign in gives way to Start free and the Menu. */
#navSignInChip,#navStartFreeChip{display:inline-flex!important}
@media(max-width:560px){#navSignInChip{display:none!important}}

/* -- The nav, everywhere (design Turn 13, 26 Sep 2026) --
   13a desktop: 52px, cream, a 2px ink rule; the wordmark left and the rest
   right as plain 14px text; the page you are on in bold over a 3px red bar;
   a 28px avatar that opens the account card. 13b phone: 48px, 1 row; the
   links give way to Hank's sparkle, the menu (13c, a 3x3 grid) and the avatar
   (13d). Both nav markups (class and inline) are brought to it here. */
nav.nav,.nav,.login-nav{height:52px!important;min-height:52px!important;max-height:52px!important;padding-top:0!important;padding-bottom:0!important;box-sizing:border-box;align-items:center!important;background:#FEFDF5!important;border-bottom:2px solid #1A1A1A!important;box-shadow:none!important}
nav.nav,.nav,.login-nav{padding-left:40px!important;padding-right:40px!important;gap:0!important}
.nav .nav-right,nav.nav>div,.nav .nls{gap:0!important}
.nav .nls{margin-left:auto!important}
.nav .st,.nav #st,.nav .btn,.nav .nav-end,.nav .nav-people,.nav .nav-status,.nav .nav-time{margin-left:12px!important}
.nav .nav-link,.nav .nl,.nav a.nav-link,.nav a.nl,.nav a[style*="padding:10px 12px"],.login-nav>a:not(:first-child){display:inline-flex!important;align-items:center!important;height:52px!important;padding:0!important;margin:0 0 0 20px!important;border-radius:0!important;background:transparent!important;color:#1A1A1A!important;font:500 14px/1 Inter,system-ui,sans-serif!important;letter-spacing:0!important;white-space:nowrap!important;text-decoration:none!important;box-shadow:none!important}
.nav .nav-link:hover,.nav a[style*="padding:10px 12px"]:hover,.login-nav>a:not(:first-child):hover{color:#B7282E!important}
/* the page you are on: bold, a red bar along the bottom (class .on, or the inline pages' red fill) */
/* nav.nav .nav-right a.nav-link.on outranks a page's own old current-link rule (profile.html forced cream text with !important: invisible on the cream bar) */
nav.nav .nav-right a.nav-link.on,.nav .nav-link.on,.nav .nl.on,.nav a.nav-link.active,.nav a[style*="padding:10px 12px"][style*="background:#B7282E"]{font-weight:700!important;color:#1A1A1A!important;background:transparent!important;box-shadow:inset 0 -3px 0 #B7282E!important}
.nav .nav-link svg,.nav a[style*="padding:10px 12px"] svg{margin-right:6px}
#navAvatar,.nav-avatar-wrap{width:28px!important;height:28px!important;margin-left:24px!important;flex:none;cursor:pointer}
#avatarBtn,.nav-avatar,#navAvatar>span,#navAvatar .nav-avatar{width:28px!important;height:28px!important;margin:0!important;border-radius:50%!important;background:#1A1A1A!important;color:#FEFDF5!important;font:700 11px/28px Inter,system-ui,sans-serif!important;overflow:hidden}
#navAvatar.open #avatarBtn,#navAvatar.open .nav-avatar,#navAvatar.open>span,.nav-avatar-wrap.open>*{box-shadow:0 0 0 2px #FEFDF5,0 0 0 3.5px #B7282E!important}
/* the old seal chip, dropdowns and Menu buttons: the account card and the grid replace them */
.seal-chip,.nav-dropdown,#navDrop,.nav .nav-menu-btn,#hkMenuBtn,#hkMenu{display:none!important}
/* bars and panels that stick under the nav */
#drafthead,#tb{top:52px!important}
.sidebar{top:52px!important;height:calc(100vh - 52px)!important}
.nav-spacer{height:52px!important}
/* the phone controls (built by seal-chip.js): hidden on desktop */
.hk-navphone{display:none!important}
@media(max-width:960px){
  nav.nav,.nav,.login-nav{height:48px!important;min-height:48px!important;max-height:48px!important;padding:0 8px 0 16px!important;gap:2px!important}
  .nav .nav-link,.nav .nl,.nav a[style*="padding:10px 12px"],.login-nav>a:not(:first-child){display:none!important}
  .hk-navphone{display:flex!important;align-items:center;margin-left:auto;flex:none}
  .hk-navphone .hk-ic{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:0;background:none;padding:0;cursor:pointer;color:#1A1A1A;text-decoration:none;-webkit-tap-highlight-color:transparent;outline:none}
  .hk-navphone .hk-ic:focus-visible{outline:2px solid #B7282E;outline-offset:-4px}
  #navAvatar,.nav-avatar-wrap{-webkit-tap-highlight-color:transparent}
  #navAvatar,.nav-avatar-wrap{margin:0 0 0 8px!important}
  .nav .st,.nav #st,.nav .btn,.nav .nav-end,.nav .nav-people,.nav .nav-status,.nav .nav-time{margin-left:4px!important}
  #drafthead,#tb{top:48px!important}
  .sidebar{top:48px!important;height:calc(100vh - 48px)!important}
  .nav-spacer{height:48px!important}
}
/* 13c: the menu, 9 places in a 3x3 grid under the bar (signed out, the account pages are hidden and 6 fill 2 rows) */
#hkNavGrid{display:none;position:fixed;left:0;right:0;bottom:0;top:48px;z-index:2147483000;background:rgba(31,26,23,.35)}
#hkNavGrid.open{display:block}
#hkNavGrid .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#FEFDF5;border-bottom:2px solid #1A1A1A}
#hkNavGrid a{display:flex;align-items:center;gap:6px;padding:0 8px;height:44px;min-width:0;border-bottom:1px solid rgba(26,26,26,.14);color:#1A1A1A;text-decoration:none;white-space:nowrap;overflow:hidden;font:600 13px/1 Inter,system-ui,sans-serif;letter-spacing:-.01em}
#hkNavGrid a:not(:nth-child(3n)){border-right:1px solid rgba(26,26,26,.14)}
#hkNavGrid a.on{background:#1A1A1A;color:#FEFDF5}
#hkNavGrid a svg{flex:none}
#hkNavGrid a span{overflow:hidden;text-overflow:ellipsis}
/* 13a / 13d: the account card */
#hkAcct{display:none;position:fixed;top:60px;right:28px;width:260px;z-index:2147483001;background:#FEFDF5;border:1px solid rgba(26,26,26,.16);border-radius:12px;box-shadow:0 24px 48px -18px rgba(31,26,23,.45);overflow:hidden;font-family:Inter,system-ui,sans-serif}
#hkAcct.open{display:block}
#hkAcct .who{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid rgba(26,26,26,.14)}
#hkAcct .face{width:36px;height:36px;flex:none;border-radius:50%;background:#1A1A1A;color:#FEFDF5;font:700 12px/36px Inter,system-ui,sans-serif;text-align:center;overflow:hidden}
#hkAcct .face img{width:100%;height:100%;object-fit:cover;display:block}
#hkAcct .who>div{min-width:0}
#hkAcct .n{margin:0;font:700 14px/1.3 Inter,system-ui,sans-serif;color:#1A1A1A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hkAcct .e{margin:2px 0 0;font:400 12px/1.3 Inter,system-ui,sans-serif;color:#5F5E5A;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#hkAcct .items{padding:6px}
#hkAcct .items a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:8px;font:600 14px/1 Inter,system-ui,sans-serif;color:#1A1A1A;text-decoration:none}
#hkAcct .items{display:grid}
#hkAcct .items a:hover{background:#F1EEE6}
#hkAcct .items a .left{margin-left:auto;font-weight:500;color:#5F5E5A}
#hkAcct .items a.out{color:#B7282E}
@media(max-width:960px){#hkAcct{top:56px;right:8px;width:250px}#hkAcct .items a{min-height:44px;padding:0 10px;font-size:15px}}

/* Plan panels for a signed-in person (seal-chip.js): their plan, and the lower ones, are not a buy */
a[data-plan].plan-mine,a[data-plan].plan-below{cursor:default!important;pointer-events:none}
a[data-plan].plan-below{opacity:.45}
.plan-badge{display:inline-block;margin-top:14px;padding:6px 10px;border-radius:8px;background:#1A1A1A;color:#FEFDF5;font:600 13px/1 Inter,system-ui,sans-serif}
.bill .plan-badge{margin:0 0 0 12px}

/* seal-chip.js's Start free (pages without their own, e.g. published docs) is the red button, as .nav-signin;
   its inline red background had matched the current-page rule, drawing it as the page you are on */
nav.nav a#navStartFreeChip{display:inline-flex!important;align-items:center;height:26px!important;padding:0 12px!important;margin-left:6px;border-radius:4px!important;background:#B7282E!important;color:#FEFDF5!important;box-shadow:none!important;font-weight:600!important;font-size:13px!important}
/* Signed out, the account places stay out of the bar and the menu from the first paint (the founder, 28 Sep 2026: eSign,
   Docs, Kaigi, Front office, Agreements, Credits): this stylesheet is in every page's head, while seal-chip.js is
   deferred and marks html.hanko-in once it knows. Pages that never load it (/login) are signed out by nature */
html:not(.hanko-in) nav.nav .nav-right a[data-account],html:not(.hanko-in) nav.nav a[data-account],html:not(.hanko-in) [data-account]{display:none!important}

/* -- Signed in (design desk v3, 8 Oct 2026) --
   The bar is Hank, My desk (made by seal-chip.js from Hank's own link) and the avatar; eSign, Docs, Kaigi, Front office,
   Agreements, Plans, Conversations, Credits and Why us are in the desk's sidebar or the account card. At 960px and
   under they stay as text (15px, 48px tall, 10px each side) and the avatar has a 44px target: no sparkle, no menu
   grid. Hank on: an 8px red dot breathes 8px before "Hank". */
html.hanko-in nav.nav a.nav-link:not(#navAssistant):not(#navDesk):not(#navTravel),html.hanko-in nav.nav a.nl:not(#navAssistant):not(#navDesk):not(#navTravel),html.hanko-in nav.nav a[style*="padding:10px 12px"]:not(#navAssistant):not(#navDesk):not(#navTravel){display:none!important}
html.hanko-in .hk-navphone,html.hanko-in #hkNavGrid{display:none!important}
nav.nav a#navDesk.on,nav.nav a#navAssistant.on{font-weight:700!important;color:#1A1A1A!important;background:transparent!important;box-shadow:inset 0 -3px 0 #B7282E!important}
@media(hover:hover){nav.nav a#navDesk.on:hover{color:#B7282E!important}}
nav.nav .hk-chev{display:none}
nav.nav .hk-chev svg{display:block;transition:transform .15s}
html.hk-desk-open nav.nav .hk-chev svg{transform:rotate(180deg)}
.hk-ondot{display:none;flex:none;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#B7282E;animation:hk-breathe 2.8s ease-in-out infinite}
html.hanko-in.hk-on #navAssistant .hk-ondot{display:inline-block}
@keyframes hk-breathe{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.hk-ondot{animation:none}}
@media(max-width:960px){
  html.hanko-in nav.nav .nls{display:inline-flex!important;align-items:center;margin-left:auto!important}
  html.hanko-in nav.nav a#navAssistant,html.hanko-in nav.nav a#navDesk,html.hanko-in nav.nav a#navTravel{display:inline-flex!important;align-items:center!important;height:48px!important;padding:0 10px!important;margin:0!important;border-radius:0!important;background:transparent!important;color:#1A1A1A!important;font:500 15px/1 Inter,system-ui,sans-serif!important;white-space:nowrap!important;text-decoration:none!important}
  html.hanko-in nav.nav a#navDesk.on,html.hanko-in nav.nav a#navAssistant.on{font-weight:700!important;box-shadow:inset 0 -3px 0 #B7282E!important}
  html.hanko-in nav.nav a#navAssistant .hk-ondot{margin-right:7px}
  html.hanko-in #navAvatar,html.hanko-in .nav-avatar-wrap{width:44px!important;height:44px!important;margin:0 0 0 2px!important;align-items:center;justify-content:center}
  html.hanko-in #navAvatar:not([style*="none"]),html.hanko-in .nav-avatar-wrap:not([style*="none"]){display:inline-flex!important}
}
@media(max-width:768px){
  nav.nav a#navDesk .hk-chev{display:inline-flex;margin-left:4px}
  html.hanko-in nav.nav a#navDesk.on{padding:0 8px 0 10px!important}
}
html.hanko-in nav.nav a#navDesk.hk-fold,html.hanko-in nav.nav a#navAssistant.hk-fold{display:none!important}

/* A plan trial (the founder, Oct 8, 2026): the warning floating under the navbar on every page of theirs, built by
   seal-chip.js (#hkTrial); a spacer after the navbar keeps its place free at the top of the page, and what sticks
   under the navbar across its width is moved below it by seal-chip.js. Red from 2 days left. */
/* by its id: pages that lift every child of body (position relative) must not move it */
#hkTrial{position:fixed;left:50%;transform:translateX(-50%);z-index:2147482000}
.hk-trial{position:fixed;left:50%;transform:translateX(-50%);top:60px;z-index:2147482000;display:flex;align-items:center;gap:10px;box-sizing:border-box;width:max-content;max-width:calc(100% - 32px);min-height:44px;padding:6px 6px 6px 14px;border:1px solid #E0B24A;border-radius:10px;background:#FFF3CF;color:#1A1A1A;box-shadow:0 14px 32px -16px rgba(31,26,23,.5);font:500 14px/1.3 Inter,system-ui,sans-serif}
.hk-trial svg{flex:none;color:#8A5A00}
.hk-trial .t{min-width:0}
.hk-trial .t b{font-weight:700}
.hk-trial .k{flex:none;display:inline-flex;align-items:center;height:32px;padding:0 12px;border-radius:8px;background:#1A1A1A;color:#FEFDF5!important;font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none!important;white-space:nowrap}
.hk-trial .k:hover{background:#B7282E}
.hk-trial.hot{border-color:#8F1F24;background:#B7282E;color:#FEFDF5}
.hk-trial.hot svg{color:#FEFDF5}
.hk-trial.hot .k{background:#FEFDF5;color:#1A1A1A!important}
.hk-trial.hot .k:hover{background:#F1EEE6}
.hk-trial-sp{flex:none;height:60px}
html.hk-desk-open .hk-trial{display:none}
@media(max-width:560px){.hk-trial{gap:8px;padding:6px 6px 6px 10px;font-size:13.5px}.hk-trial .k{padding:0 10px;font-size:13.5px}}
@media print{.hk-trial,.hk-trial-sp{display:none!important}}

/* Travel, after Hank on every nav, in red on its own page (the design agent's v18, Oct 16, 2026: "every Hanko nav should
   get it"); on a phone a text link before Hank's icon (static/seal-chip.js), and signed in beside Hank and My desk */
nav.nav a#navTravel[aria-current="page"],html.hanko-in nav.nav a#navTravel[aria-current="page"]{color:#B7282E!important;font-weight:600!important;background:transparent!important;box-shadow:none!important}
.hk-navphone .hk-tx{display:inline-flex;align-items:center;height:44px;padding:0 4px;color:#1A1A1A;font:600 14px/1 Inter,system-ui,sans-serif;text-decoration:none;white-space:nowrap}
.hk-navphone .hk-tx[aria-current="page"]{color:#B7282E}
.hk-navphone .hk-tx:focus-visible{outline:2px solid #B7282E;outline-offset:-4px}