/* MiWork site — shared styles.
   Design tokens and layout rules extracted from docs/design/*.dc.html.
   The page markup keeps its inline styles (that is the design's source of truth);
   this file supplies the globals plus the responsive behaviour the 1200px-wide
   desktop designs did not specify. */

*{box-sizing:border-box}

body{
  margin:0;
  background:#F6F7F9;
  color:#16203A;
  font-family:'Pretendard Variable',Pretendard,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-wrap:pretty;
}

img,svg{max-width:100%;height:auto}

summary{cursor:pointer}
summary::-webkit-details-marker{display:none}

/* The design draws focus states only on hover; keep a visible keyboard ring. */
:focus-visible{outline:2px solid #1D5BD6;outline-offset:3px;border-radius:4px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  padding:12px 20px;background:#1D5BD6;color:#fff;
  font-weight:600;font-size:15px;text-decoration:none;border-radius:0 0 9px 0;
}
.skip-link:focus{left:0}

/* Anchor targets sit under the 72px sticky header. */
html{scroll-behavior:smooth}
:target{scroll-margin-top:88px}

/* ---------------------------------------------------------------------------
   Animations used by the page mocks
   --------------------------------------------------------------------------- */

@keyframes miTravel{0%{transform:translateX(0);opacity:.35}50%{transform:translateX(6px);opacity:1}100%{transform:translateX(0);opacity:.35}}
@keyframes miChip{0%,40%{opacity:0;transform:translateY(4px)}55%,100%{opacity:1;transform:none}}
@keyframes miLine{0%,42%{opacity:0;transform:translateY(5px)}54%,100%{opacity:1;transform:none}}
@keyframes miPulse{0%,100%{opacity:.3}50%{opacity:1}}
@keyframes miScan{0%{transform:translateY(0)}100%{transform:translateY(150px)}}
@keyframes miTyping{0%,60%{opacity:.25}80%,100%{opacity:1}}
@keyframes miBar{0%{width:8%}70%,100%{width:100%}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation:none!important;transition:none!important}
}

/* ---------------------------------------------------------------------------
   Mobile navigation

   The designs show a single-row desktop nav that simply wraps below 1100px.
   This turns it into a CSS-only disclosure menu -- no JavaScript, so the page
   works even if scripts are blocked.
   --------------------------------------------------------------------------- */

/* The <header> is position:sticky (a positioned value), so the absolutely
   positioned mobile menu below anchors to it and spans the full width. */
.nav-burger{display:none}

/* Visually hidden but still keyboard-focusable -- `hidden`/display:none would
   take the checkbox out of the tab order and strand keyboard users. */
.nav-toggle{
  position:absolute;
  width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none;
}

@media (max-width:900px){
  .nav-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;padding:10px;margin-left:auto;
    cursor:pointer;border-radius:10px;border:1px solid rgba(16,32,64,.14);
    background:#fff;
  }
  .nav-burger span{display:block;height:2px;background:#16203A;border-radius:2px;transition:transform .2s,opacity .2s}
  .nav-toggle:checked + .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle:checked + .nav-burger span:nth-child(2){opacity:0}
  .nav-toggle:checked + .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-toggle:focus-visible + .nav-burger{outline:2px solid #1D5BD6;outline-offset:3px}

  /* SiteHeader's <nav> carries an inline `display:flex`, which outranks a plain
     stylesheet rule -- these two need !important to win. */
  #site-nav{
    display:none!important;
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    padding:8px 20px 20px;
    background:#fff;
    border-bottom:1px solid rgba(16,32,64,.09);
    box-shadow:0 18px 40px -20px rgba(14,23,41,.3);
    max-height:calc(100vh - 72px);
    overflow-y:auto;
  }
  .nav-toggle:checked ~ #site-nav{display:flex!important}
  #site-nav > a{
    padding:15px 4px;
    border-bottom:1px solid rgba(16,32,64,.07);
    font-size:16.5px;
  }
  /* The trailing CTA keeps its button treatment. */
  #site-nav > a:last-child{
    justify-content:center;
    margin-top:14px;
    padding:15px 20px;
    border-bottom:none;
  }
}

/* ---------------------------------------------------------------------------
   Responsive layout

   The design containers are `max-width:1200px;padding:0 32px`, the sections use
   96px vertical rhythm, and several blocks use fixed multi-column grids. Those
   are declared inline, so the overrides below need !important to reach them.
   --------------------------------------------------------------------------- */

@media (max-width:1024px){
  section > div[style*="max-width:1200px"],
  footer > div[style*="max-width:1200px"],
  header > div[style*="max-width:1200px"]{
    padding-left:24px!important;
    padding-right:24px!important;
  }
}

@media (max-width:760px){
  header > div[style*="max-width:1200px"]{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  section > div[style*="max-width:1200px"],
  section > div[style*="max-width:900px"],
  footer > div[style*="max-width:1200px"]{
    padding-left:20px!important;
    padding-right:20px!important;
  }

  /* Tighten the vertical rhythm: 96px between sections is a lot on a phone. */
  section{
    padding-top:clamp(48px,9vw,72px)!important;
    padding-bottom:clamp(48px,9vw,72px)!important;
  }

  /* Multi-column content grids -> a single column.
     Selectors are deliberately tag-agnostic: these inline styles appear on
     <div>, <article> and <ul> alike, so matching on the attribute alone is the
     only reliable way to reach all of them. */
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Two-column feature rows declare a minmax() floor of 280-320px per column,
     which holds ~600px open regardless of viewport. That floor is what pushed
     the home page to a 689px scroll width on a 390px screen. */
  [style*="grid-template-columns:minmax(280px"],
  [style*="grid-template-columns:minmax(300px"],
  [style*="grid-template-columns:minmax(320px"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* The 3-up flow diagram's 26px arrow columns have nowhere to point once the
     steps are stacked. */
  [style*="minmax(0,1fr) 26px minmax(0,1fr)"]{
    grid-template-columns:minmax(0,1fr)!important;
    gap:14px!important;
  }
  [style*="minmax(0,1fr) 26px minmax(0,1fr)"] > [style*="justify-content:center"]{
    transform:rotate(90deg);
  }

  /* Comparison tables keep their label + 2 columns (stacking them would destroy
     the comparison), but the content tracks need an explicit 0 floor so they
     can shrink; a bare `1fr` floors at min-content. */
  [style*="grid-template-columns:120px 1fr 1fr"]{
    grid-template-columns:82px minmax(0,1fr) minmax(0,1fr)!important;
    gap:10px!important;
  }
  [style*="grid-template-columns:88px minmax(0,1fr)"]{
    grid-template-columns:72px minmax(0,1fr) minmax(0,1fr)!important;
  }

  /* Vertical rules between cells that are now stacked rows. */
  [style*="grid-template-columns:1fr 1fr"] > [style*="border-left"],
  [style*="grid-template-columns:minmax(280px"] > [style*="border-left"],
  [style*="grid-template-columns:minmax(300px"] > [style*="border-left"],
  [style*="grid-template-columns:minmax(320px"] > [style*="border-left"]{
    border-left:none!important;
  }

  /* Hero and feature columns declare flex:1 1 360px..440px -- a flex-basis
     wider than the viewport itself. Let them shrink instead. */
  [style*="flex:1 1 360px"],
  [style*="flex:1 1 380px"],
  [style*="flex:1 1 400px"],
  [style*="flex:1 1 440px"]{
    flex-basis:100%!important;
    min-width:0!important;
  }

  /* Grid and flex children default to min-width:auto, so a long unbroken string
     (a URL, an API path, a mono label) can force a track wider than its track
     size. This is the backstop for that. */
  main [style*="display:grid"] > *,
  main [style*="display:flex"] > *{
    min-width:0;
  }

  /* Desktop padding is generous; on a phone it eats most of the line length. */
  [style*="padding:64px 56px"]{padding:36px 22px!important}
  [style*="padding:48px 40px"]{padding:32px 22px!important}
  [style*="padding:40px"]{padding:26px 22px!important}
  [style*="padding:36px"]{padding:24px 20px!important}
  [style*="padding:32px"]{padding:22px 20px!important}
  [style*="padding:30px"]{padding:22px 20px!important}
  [style*="padding:28px"]{padding:20px 18px!important}

  [style*="border-radius:26px"]{border-radius:18px!important}
  [style*="border-radius:22px"]{border-radius:16px!important}

  /* Column gaps sized for a 1200px canvas. */
  [style*="gap:56px"]{gap:28px!important}
  [style*="gap:48px"]{gap:26px!important}
  [style*="gap:40px"]{gap:24px!important}
}

@media (max-width:520px){
  /* auto-fit still reserves each track's minmax floor, so a 300px floor
     overflows a 375px viewport once container padding is subtracted.
     Floors at or below 200px still fit two-up, so they are left alone. */
  [style*="repeat(auto-fit,minmax(220px,1fr))"],
  [style*="repeat(auto-fit,minmax(240px,1fr))"],
  [style*="repeat(auto-fit,minmax(280px,1fr))"],
  [style*="repeat(auto-fit,minmax(300px,1fr))"],
  [style*="repeat(auto-fit,minmax(320px,1fr))"],
  [style*="repeat(auto-fit,minmax(330px,1fr))"]{
    grid-template-columns:minmax(0,1fr)!important;
  }

  /* Stacked CTA buttons go full width so they are easy to hit. */
  section a[style*="display:inline-flex"][style*="padding:15px"],
  section a[style*="display:inline-flex"][style*="padding:16px"],
  section a[style*="display:inline-flex"][style*="padding:17px"]{
    width:100%;
    justify-content:center;
  }
}


/* Generated from style-hover attributes in docs/design/*.dc.html */
.hv-1:hover,.hv-1:focus-visible{background:#164BB4!important}
.hv-2:hover,.hv-2:focus-visible{border-color:#1D5BD6!important;color:#1D5BD6!important}
.hv-3:hover,.hv-3:focus-visible{background:#2F41B8!important}
.hv-4:hover,.hv-4:focus-visible{background:#663BBC!important}
.hv-5:hover,.hv-5:focus-visible{background:#0B8085!important}
.hv-6:hover,.hv-6:focus-visible{background:#E7EEFB!important}
.hv-7:hover,.hv-7:focus-visible{border-color:#fff!important}
.hv-8:hover,.hv-8:focus-visible{border-color:#0E9AA0!important;color:#0E9AA0!important}
.hv-9:hover,.hv-9:focus-visible{background:#25B8A6!important}
.hv-10:hover,.hv-10:focus-visible{border-color:#3A4FD8!important;color:#3A4FD8!important}
.hv-11:hover,.hv-11:focus-visible{background:#F6F1FF!important;border-color:#7B4BD8!important}
.hv-12:hover,.hv-12:focus-visible{border-color:#7B4BD8!important;color:#7B4BD8!important}
.hv-13:hover,.hv-13:focus-visible{background:#B08FF5!important}