/* ============================================================
   EVA MENSH — portfolio
   Black / saturated orange, SF Pro typography.
   1. Tokens      4. Header      7. Music      10. Courses
   2. Base        5. Hero        8. About      11. Legal
   3. Type        6. Portfolio   9. Services   12. Footer / modal
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* sampled from the artwork so the UI and the art share one orange */
  --orange:#f15f00;
  --orange-hi:#ff7418;
  --orange-dim:#c94e00;

  --black:#000000;
  --panel:#0b0b0b;
  --panel-2:#141414;
  --white:#ffffff;
  --grey:#8e8e93;
  --grey-2:#b6b6bb;
  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.08);

  /* SF Pro on Apple devices; Inter is the closest cross-platform match */
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","SF Pro Icons",
         "Inter","Helvetica Neue",Helvetica,Arial,sans-serif;

  --wrap:1240px;
  --gutter:clamp(1.25rem,5vw,4rem);
  --section-y:clamp(3.5rem,8vw,6.5rem);
  --radius:22px;
  --radius-sm:14px;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);

  --header-h:66px;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  background:var(--black);
  color:var(--white);
  font-family:var(--font);
  font-size:clamp(1rem,.97rem + .15vw,1.0625rem);
  line-height:1.5;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  min-height:100svh;
}
body.is-locked{overflow:hidden}

img,svg,video{display:block;max-width:100%;height:auto}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;padding:0;cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none;padding:0}
::selection{background:var(--orange);color:var(--black)}

:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.header :focus-visible,.hero__nav :focus-visible{outline-color:var(--black)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:2000;
  background:var(--black);color:var(--white);
  padding:.85rem 1.25rem;border-radius:0 0 10px 0;font-weight:600;
}
.skip:focus{left:0}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.section{padding-block:var(--section-y);position:relative}
.rule{height:2px;background:var(--white);border:0;margin:0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

/* ---------- 3. TYPE ---------- */
h1,h2,h3,h4{
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.04;
  text-wrap:balance;
}
.h-section{
  font-size:clamp(2.5rem,7.5vw,5rem);
  margin-bottom:clamp(1.5rem,3.5vw,2.5rem);
}
.h-sub{
  font-size:clamp(1.375rem,3vw,2rem);
  letter-spacing:-.03em;
  margin-bottom:clamp(1.25rem,3vw,2rem);
}

/* orange pill button — the site's only button shape */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.6rem;
  padding:1rem 2.25rem;
  min-height:56px;
  background:var(--orange);
  color:var(--black);
  font-size:clamp(1.0625rem,1.6vw,1.25rem);
  font-weight:700;
  letter-spacing:-.02em;
  border-radius:999px;
  transition:background .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
  text-align:center;
}
.btn:hover{background:var(--orange-hi);transform:translateY(-2px);box-shadow:0 10px 30px rgba(241,95,0,.3)}
.btn:active{transform:translateY(0)}
.btn--ghost{
  background:transparent;
  color:var(--white);
  border:2px solid var(--line);
}
.btn--ghost:hover{background:var(--white);color:var(--black);border-color:var(--white);box-shadow:none}

/* ---------- 4. HEADER ---------- */
.header{
  position:fixed;
  inset:0 0 auto;
  z-index:900;
  background:var(--orange);
  color:var(--black);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  height:var(--header-h);
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-size:clamp(1.125rem,2.4vw,1.5rem);
  font-weight:700;
  letter-spacing:-.03em;
}
.brand svg{width:1.1em;height:1.1em;flex:none}
.brand:hover{opacity:.75}
.mailto{
  display:grid;
  place-items:center;
  width:44px;height:44px;
  border-radius:12px;
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.mailto svg{width:30px;height:30px}
.mailto:hover{background:rgba(0,0,0,.12);transform:scale(1.06)}

/* ---------- 5. HERO ---------- */
.hero{
  padding-top:calc(var(--header-h) + clamp(2.5rem,6vw,4.5rem));
  padding-bottom:clamp(3rem,7vw,5rem);
}
.hero__inner{
  display:grid;
  gap:clamp(2.5rem,6vw,4rem);
  align-items:center;
}
@media (min-width:900px){
  .hero__inner{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
}
.hero__intro{display:grid;justify-items:center;text-align:center;gap:clamp(1.25rem,3vw,1.75rem)}

.avatar{
  width:clamp(13rem,30vw,22.5rem);
  aspect-ratio:1;
  border-radius:50%;
  overflow:hidden;
  background:var(--orange);
}
.avatar img{width:100%;height:100%;object-fit:cover;object-position:center 12%}

.hero__name{
  font-size:clamp(2.5rem,8vw,4.5rem);
  font-weight:700;
  letter-spacing:-.03em;
  text-transform:uppercase;
  color:var(--grey);
  line-height:1;
}
.hero__tag{
  font-size:clamp(1.125rem,2.6vw,1.5rem);
  font-weight:400;
  letter-spacing:-.02em;
  color:var(--white);
  max-width:22ch;
  line-height:1.3;
}

.socials{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:clamp(.6rem,1.6vw,.9rem);
  margin-top:.25rem;
}
.socials a{
  display:grid;
  place-items:center;
  width:clamp(2.75rem,6.5vw,3.25rem);
  aspect-ratio:1;
  border:2px solid var(--line);
  border-radius:50%;
  color:var(--white);
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),transform .25s var(--ease);
}
.socials a:hover{
  background:var(--orange);
  border-color:var(--orange);
  color:var(--black);
  transform:translateY(-3px);
}
.socials svg{width:52%;height:52%}

.hero__nav{
  display:grid;
  gap:clamp(1rem,3vw,2.25rem);
  align-content:center;
  width:min(100%,20rem);
  justify-self:center;
}
.hero__nav .btn{width:100%;min-height:64px}

/* ---------- 6. PORTFOLIO ---------- */
.carousel{position:relative;margin-top:clamp(1rem,2vw,1.5rem)}
.carousel__viewport{
  display:flex;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  scrollbar-width:none;
  -ms-overflow-style:none;
  background:var(--panel);
  cursor:grab;
}
.carousel__viewport::-webkit-scrollbar{display:none}
.carousel__viewport.is-dragging{cursor:grabbing;scroll-behavior:auto;scroll-snap-type:none}
.carousel__viewport.is-dragging *{pointer-events:none}
@media (prefers-reduced-motion:reduce){.carousel__viewport{scroll-behavior:auto}}

.slide{
  flex:0 0 auto;
  width:clamp(15rem,42vw,26rem);
  scroll-snap-align:start;
  position:relative;
  background:var(--black);
}
.slide img{
  width:100%;
  height:clamp(20rem,52vw,34rem);
  object-fit:cover;
  transition:opacity .3s var(--ease);
}
.slide button{display:block;width:100%}
.slide:hover img{opacity:.88}

.c-arrow{
  position:absolute;
  top:50%;
  translate:0 -50%;
  z-index:3;
  width:clamp(3rem,5vw,4.25rem);
  height:clamp(3rem,5vw,4.25rem);
  display:grid;
  place-items:center;
  color:var(--white);
  filter:drop-shadow(0 2px 12px rgba(0,0,0,.75));
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
.c-arrow svg{width:100%;height:100%;stroke-width:2.6}
.c-arrow:hover{transform:translateY(-50%) scale(1.12)}
.c-arrow:disabled{opacity:.25;cursor:default}
.c-arrow:disabled:hover{transform:translateY(-50%)}
.c-arrow--prev{left:clamp(.25rem,1.5vw,1.25rem)}
.c-arrow--next{right:clamp(.25rem,1.5vw,1.25rem)}

.carousel__cap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding-top:1rem;
  font-size:clamp(1rem,2vw,1.25rem);
  color:var(--grey-2);
  letter-spacing:-.02em;
}
.carousel__count{font-variant-numeric:tabular-nums;color:var(--grey);white-space:nowrap}
.carousel__count b{color:var(--orange);font-weight:600}

/* ---------- 7. MUSIC ---------- */
.videos{
  display:grid;
  gap:clamp(1.25rem,3vw,2rem);
  padding:clamp(1.25rem,3vw,2rem);
  border:1px solid var(--line-soft);
  border-radius:var(--radius);
  background:var(--panel);
}
@media (min-width:760px){.videos{grid-template-columns:1fr 1fr}}

.video{display:grid;gap:.85rem}
.video__media{
  position:relative;
  border-radius:var(--radius-sm);
  overflow:hidden;
  background:var(--panel-2);
  aspect-ratio:16/9;
}
.video__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out),filter .3s var(--ease)}
.video:hover .video__media img{transform:scale(1.04);filter:brightness(1.08)}
.video__play{
  position:absolute;inset:0;
  display:grid;place-items:center;
  opacity:0;
  background:rgba(0,0,0,.35);
  transition:opacity .3s var(--ease);
}
.video:hover .video__play,.video:focus-within .video__play{opacity:1}
.video__play i{
  width:clamp(3.25rem,7vw,4.25rem);
  aspect-ratio:1;
  border-radius:50%;
  background:var(--orange);
  display:grid;place-items:center;
  transform:scale(.85);
  transition:transform .35s var(--ease-out);
}
.video:hover .video__play i{transform:scale(1)}
.video__play svg{width:42%;height:42%;fill:var(--black)}
.video__time{
  position:absolute;
  right:.6rem;bottom:.6rem;
  display:inline-flex;align-items:center;gap:.35rem;
  padding:.3rem .55rem;
  background:rgba(0,0,0,.78);
  border-radius:8px;
  font-size:.9375rem;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--white);
  font-variant-numeric:tabular-nums;
}
.video__time svg{width:.9em;height:.9em;fill:currentColor}
.video__title{
  font-size:clamp(1.0625rem,2.1vw,1.375rem);
  font-weight:600;
  letter-spacing:-.025em;
  transition:color .25s var(--ease);
}
.video:hover .video__title{color:var(--orange)}

/* ---------- 8. ABOUT ---------- */
.about{position:relative}
.about__card{
  display:grid;
  gap:clamp(1.5rem,4vw,2.75rem);
  padding:clamp(1.5rem,4vw,3rem);
  background:var(--white);
  color:var(--black);
  border-radius:var(--radius);
}
@media (min-width:820px){
  .about__card{grid-template-columns:minmax(0,.42fr) minmax(0,1fr);align-items:start}
}
.about__photo{
  border-radius:var(--radius-sm);
  overflow:hidden;
  aspect-ratio:4/5;
  background:#e9e9ec;
}
.about__photo img{width:100%;height:100%;object-fit:cover}
.about__text{display:grid;gap:1.25rem}
.about__text p{
  font-size:clamp(1rem,1.8vw,1.1875rem);
  line-height:1.5;
  letter-spacing:-.02em;
}
.about__text strong{font-weight:700}

.mission{
  margin-top:clamp(1.5rem,3.5vw,2.25rem);
  color:var(--orange);
  font-size:clamp(1.125rem,2.4vw,1.5rem);
  font-weight:700;
  line-height:1.35;
  letter-spacing:-.025em;
  max-width:62ch;
}

/* ---------- 9. SERVICES ---------- */
.price-grid{
  display:grid;
  gap:clamp(1.5rem,4vw,2.75rem) clamp(1.25rem,3vw,2.5rem);
  grid-template-columns:repeat(2,minmax(0,1fr));
}
@media (min-width:1000px){
  .price-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.price{display:grid;gap:.85rem;align-content:start}
.price__media{
  border-radius:var(--radius-sm);
  overflow:hidden;
  aspect-ratio:3/4;
  background:var(--panel-2);
}
.price__media img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease-out);
}
.price:hover .price__media img{transform:scale(1.05)}
.price__name{
  font-size:clamp(1.25rem,2.6vw,1.75rem);
  font-weight:700;
  letter-spacing:-.03em;
}
.price__cost{
  font-size:clamp(1rem,1.8vw,1.125rem);
  color:var(--grey-2);
  letter-spacing:-.02em;
}

.notes{
  display:grid;
  gap:clamp(.85rem,2vw,1.25rem);
  margin-top:clamp(2rem,5vw,3.5rem);
  max-width:70ch;
}
.notes li{
  font-size:clamp(1rem,1.9vw,1.1875rem);
  color:var(--grey-2);
  letter-spacing:-.02em;
  line-height:1.45;
}
.notes li strong{color:var(--white);font-weight:600}

/* ---------- 10. COURSES ---------- */
.courses__inner{display:grid;gap:clamp(1.5rem,4vw,2.25rem);justify-items:start}
.courses__note{
  font-size:clamp(1rem,2vw,1.1875rem);
  color:var(--grey-2);
  max-width:52ch;
  letter-spacing:-.02em;
}

/* ---------- 11. LEGAL ---------- */
.legal__card{
  background:var(--white);
  color:var(--black);
  border-radius:var(--radius);
  padding:clamp(1.75rem,4vw,3rem);
  min-height:clamp(16rem,30vw,22rem);
  display:grid;
  align-content:start;
  gap:1.25rem;
}
.legal__card h2{
  font-size:clamp(1.875rem,5vw,3.25rem);
  letter-spacing:-.035em;
}
.legal__soon{
  color:#6b6b70;
  font-size:clamp(1rem,1.8vw,1.125rem);
  letter-spacing:-.02em;
  max-width:52ch;
}

/* ---------- 12. FOOTER ---------- */
.footer{
  padding-block:clamp(2.5rem,5vw,3.5rem);
}
.footer__inner{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 2rem;
  align-items:center;
  justify-content:space-between;
}
.footer__links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem}
.footer__links a{color:var(--grey-2);transition:color .25s var(--ease)}
.footer__links a:hover{color:var(--orange)}
.footer__copy{color:var(--grey);font-size:.9375rem;letter-spacing:-.01em}

/* ---------- MODAL (updates signup + image viewer) ---------- */
.modal{
  position:fixed;inset:0;z-index:1000;
  display:grid;place-items:center;
  padding:clamp(1rem,4vw,2.5rem);
  background:rgba(0,0,0,.88);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  opacity:0;
  visibility:hidden;
  /* visibility must not be interpolated: flip it instantly on open,
     and delay it on close so the fade-out stays visible */
  transition:opacity .3s var(--ease),visibility 0s linear .3s;
}
.modal.is-open{
  opacity:1;
  visibility:visible;
  transition:opacity .3s var(--ease),visibility 0s linear 0s;
}
.modal__box{
  width:min(100%,32rem);
  background:var(--white);
  color:var(--black);
  border-radius:var(--radius);
  padding:clamp(1.75rem,4vw,2.5rem);
  display:grid;gap:1.25rem;
  transform:translateY(12px) scale(.98);
  transition:transform .35s var(--ease-out);
}
.modal.is-open .modal__box{transform:none}
.modal__box h2{font-size:clamp(1.5rem,4vw,2rem)}
.modal__box p{color:#5c5c61;letter-spacing:-.02em}
.modal__close{
  position:absolute;
  top:clamp(.75rem,3vw,1.5rem);right:clamp(.75rem,3vw,1.5rem);
  width:48px;height:48px;
  display:grid;place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:var(--white);
  transition:background .25s var(--ease),transform .25s var(--ease);
}
.modal__close:hover{background:var(--orange);color:var(--black);transform:scale(1.08)}
.modal__close svg{width:22px;height:22px}

.field{display:grid;gap:.5rem}
.field label{font-weight:600;font-size:.9375rem;letter-spacing:-.015em}
.field input{
  width:100%;
  padding:.95rem 1.1rem;
  border:2px solid #dcdce1;
  border-radius:12px;
  background:#fff;
  color:var(--black);
  letter-spacing:-.01em;
  transition:border-color .2s var(--ease);
}
.field input::placeholder{color:#9b9ba1}
.field input:focus{outline:none;border-color:var(--orange)}
.form__msg{font-size:.9375rem;font-weight:600;letter-spacing:-.015em;min-height:1.4em}
.form__msg.is-ok{color:#1a7f37}
.form__msg.is-err{color:#c02525}
.form__fine{font-size:.8125rem;color:#8a8a90;line-height:1.45}

/* image viewer */
.viewer__figure{
  display:grid;gap:1rem;justify-items:center;
  transform:scale(.97);transition:transform .35s var(--ease-out);
}
.modal.is-open .viewer__figure{transform:none}
.viewer__figure img{
  max-height:min(80svh,52rem);
  width:auto;
  border-radius:var(--radius-sm);
}
.viewer__cap{color:var(--grey-2);font-size:.9375rem;letter-spacing:-.01em}
.viewer__nav{
  position:absolute;top:50%;translate:0 -50%;
  width:clamp(2.75rem,5vw,3.75rem);height:clamp(2.75rem,5vw,3.75rem);
  display:grid;place-items:center;color:var(--white);
  transition:transform .25s var(--ease),opacity .25s;
}
.viewer__nav:hover{transform:translateY(-50%) scale(1.15)}
.viewer__nav svg{width:100%;height:100%;stroke-width:2.4}
.viewer__nav--prev{left:clamp(.5rem,2vw,2rem)}
.viewer__nav--next{right:clamp(.5rem,2vw,2rem)}
@media (max-width:600px){.viewer__nav{display:none}}

/* ---------- MOTION ---------- */
.reveal{opacity:0;transform:translateY(1.5rem)}
.reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .7s var(--ease-out) var(--rd,0s),transform .7s var(--ease-out) var(--rd,0s);
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    transition-duration:.01ms !important;
  }
  .reveal{opacity:1;transform:none}
}

@media print{
  .header,.modal,.c-arrow,.hero__nav{display:none !important}
  body{background:#fff;color:#000}
}

/* anchor targets must clear the fixed header */
section[id],[id="top"]{scroll-margin-top:calc(var(--header-h) + 16px)}

/* ---------- LEGAL PREVIEW CARDS (home page) ---------- */
/* keep .legal__card's grid — setting display:block here would kill its row gap */
.legal__card--link{
  transition:transform .3s var(--ease),box-shadow .3s var(--ease);
}
/* line-height 1.04 clips descenders; give card and document headings room */
.legal__card h2{line-height:1.12}
.legal__card--link:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 50px rgba(241,95,0,.18);
}
/* pulls the subtitle up under the title; the 1.25rem row gap keeps it clear */
.legal__meta{
  color:#6b6b70;
  font-size:.9375rem;
  letter-spacing:-.01em;
  margin-top:-.5rem;
}
.legal__preview{
  position:relative;
  max-height:11.5rem;
  overflow:hidden;
  color:#3d3d42;
}
.legal__preview p{
  font-size:clamp(.9375rem,1.6vw,1rem);
  line-height:1.55;
  letter-spacing:-.01em;
}
.legal__preview p + p{margin-top:.75rem}
.legal__preview::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:5rem;
  background:linear-gradient(to bottom,rgba(255,255,255,0),#fff 92%);
  pointer-events:none;
}
.legal__open{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  justify-self:start;
  padding:.85rem 1.6rem;
  background:var(--orange);
  color:var(--black);
  font-weight:700;
  font-size:1rem;
  letter-spacing:-.02em;
  border-radius:999px;
  transition:background .25s var(--ease);
}
.legal__card--link:hover .legal__open{background:var(--orange-hi)}
.legal__open svg{width:1em;height:1em}

/* ---------- LEGAL DOCUMENT PAGE ---------- */
.doc-page{
  padding-top:calc(var(--header-h) + clamp(1.25rem,3vw,2rem));
  padding-bottom:clamp(3rem,7vw,5rem);
}
.doc-bar{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  margin-bottom:clamp(1.25rem,3vw,2rem);
}
.back-link{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  padding:.8rem 1.5rem;
  border:2px solid var(--line);
  border-radius:999px;
  color:var(--white);
  font-weight:600;
  letter-spacing:-.02em;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.back-link:hover{background:var(--orange);border-color:var(--orange);color:var(--black)}
.back-link svg{width:1.05em;height:1.05em}

.doc{
  background:var(--white);
  color:#000;
  border-radius:var(--radius);
  padding:clamp(1.5rem,4vw,3.5rem);
}
.doc h1,.doc h2,.doc h3{line-height:1.15}
.doc h1{
  font-size:clamp(1.875rem,5vw,2.75rem);
  letter-spacing:-.035em;
  margin-bottom:.75rem;
}
.doc__updated{
  color:#7f7f7f;
  font-weight:600;
  font-size:.9375rem;
  letter-spacing:-.01em;
  margin-bottom:clamp(1.75rem,4vw,2.5rem);
}
.doc h2{
  font-size:clamp(1.125rem,2.4vw,1.375rem);
  letter-spacing:-.025em;
  margin:clamp(2rem,4vw,2.75rem) 0 .85rem;
  scroll-margin-top:calc(var(--header-h) + 1rem);
}
.doc h3{
  font-size:clamp(1rem,2vw,1.125rem);
  letter-spacing:-.02em;
  margin:1.75rem 0 .65rem;
}
.doc p{
  color:#595959;
  font-size:.9375rem;
  line-height:1.6;
  letter-spacing:-.005em;
  margin-bottom:.9rem;
}
.doc strong{color:#000;font-weight:700}
.doc em{font-style:italic}
.doc ul{margin:0 0 1.1rem 0;display:grid;gap:.55rem}
.doc ul li{
  position:relative;
  padding-left:1.4rem;
  color:#595959;
  font-size:.9375rem;
  line-height:1.6;
}
.doc ul li::before{
  content:"";
  position:absolute;
  left:.35rem;top:.6em;
  width:.35rem;height:.35rem;
  background:var(--orange);
  border-radius:1px;
}
.doc a{
  color:#3030f1;
  text-decoration:underline;
  text-underline-offset:.15em;
  word-break:break-word;
}
.doc a:hover{color:var(--orange)}
.doc hr{border:0;border-top:1px solid #e4e4e8;margin:clamp(2rem,4vw,3rem) 0}

.doc__toc{
  background:#f6f6f8;
  border-radius:var(--radius-sm);
  padding:clamp(1.25rem,3vw,1.75rem);
  margin:1.5rem 0;
}
.doc__toc ol,.doc__toc ul{
  list-style:none;
  counter-reset:toc;
  display:grid;
  gap:.5rem;
}
.doc__toc ol li{counter-increment:toc}
.doc__toc a{
  color:#3030f1;
  text-decoration:none;
  font-size:.9375rem;
  line-height:1.45;
  display:block;
}
.doc__toc ol a::before{content:counter(toc) ". ";color:#7f7f7f}
.doc__toc a:hover{text-decoration:underline}

.doc__summary{
  background:#fbf5f1;
  border-left:3px solid var(--orange);
  border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:clamp(1.25rem,3vw,1.75rem);
  margin:1.5rem 0;
}
.doc__summary p:last-child{margin-bottom:0}

.doc__table-wrap{overflow-x:auto;margin:1.25rem 0 1.5rem}
.doc table{
  width:100%;
  min-width:34rem;
  border-collapse:collapse;
  font-size:.875rem;
}
.doc th,.doc td{
  border:1px solid #d8d8dd;
  padding:.7rem .85rem;
  text-align:left;
  vertical-align:top;
  color:#595959;
  line-height:1.5;
}
.doc th{background:#f6f6f8;color:#000;font-weight:700}
.doc td:last-child,.doc th:last-child{text-align:center;white-space:nowrap;font-weight:600}

.doc__note{
  margin-top:clamp(2rem,4vw,3rem);
  padding-top:1.5rem;
  border-top:1px solid #e4e4e8;
  color:#8a8a90;
  font-size:.8125rem;
  line-height:1.5;
}
.doc__note a{color:#8a8a90}

.doc-foot{
  display:flex;
  flex-wrap:wrap;
  gap:1rem;
  align-items:center;
  justify-content:space-between;
  margin-top:clamp(1.5rem,4vw,2.5rem);
}