@layer reset, tokens, base, layout, components, utilities, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { color-scheme: light; }
  body, h1, h2, h3, p, figure, dl, dd { margin: 0; }
  button, summary, a { -webkit-tap-highlight-color: transparent; }
  button { font: inherit; }
  img { display: block; max-width: 100%; }
  a { color: inherit; }
}

@layer tokens {
  :root {
    --paper: #fff;
    --wash: #f8f8f8;
    --ink: #333;
    --blue: #005691;
    --line: #ccc;
    --warm: #ffa500;
    --green: #00ff00;
    --cyan: #00ffff;
    --deep: #000;
    --gap: clamp(4rem, 8vw, 8rem);
    --ease: .3s ease-in-out;
    --shadow: 0 2px 5px rgb(0 0 0 / .06);
    --sans: "Open Sans", Arial, sans-serif;
    --mono: "JetBrains Mono", "Courier New", monospace;
  }
}

@layer base {
  html { scroll-behavior: smooth; scroll-padding-top: 2rem; }
  body { color: var(--ink); background: var(--paper); font: 400 1rem/1.6 var(--sans); }
  a { color: var(--blue); text-underline-offset: .2em; text-decoration-thickness: 1px; }
  a:hover { text-decoration-thickness: 2px; }
  a, button, summary { touch-action: manipulation; }
  :focus-visible { outline: 3px solid var(--blue); outline-offset: 5px; }
  button, summary { cursor: pointer; }
  h1, h2, h3 { color: var(--ink); font-family: var(--sans); font-weight: 700; }
  h1 { font-size: 2.25rem; letter-spacing: -.055em; line-height: 1.16; text-wrap: balance; }
  h2 { font-size: 1.5rem; letter-spacing: -.03em; line-height: 1.3; text-wrap: balance; }
  h3 { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.4; }
  p, li, dd, dt, figcaption { font-size: 1rem; }
  p { max-width: 72ch; }
  p + p { margin-top: 1rem; }
  ul { padding-left: 1.25rem; }
  li + li { margin-top: .75rem; }
  ::selection { color: var(--deep); background: #c6f3f3; }
}

@layer layout {
  .wr { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 1.5rem; }
  .gr { display: grid; }
  .hd { display: flex; justify-content: space-between; align-items: center; min-height: 104px; gap: 1.5rem; border-bottom: 1px solid var(--line); }
  .hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); padding-block: clamp(3rem, 5vw, 5rem) var(--gap); }
  .hero.home { min-height: 680px; }
  .hero.home h1 { font-size: clamp(2.5rem, 5vw, 4rem); max-width: 12ch; }
  .ht { min-width: 0; }
  .ht h1 { margin-top: 1.5rem; }
  .hero .lead { font-size: 1.125rem; margin-top: 1.5rem; max-width: 46ch; }
  .hero .btn { margin-top: 2rem; }
  .row { grid-template-columns: minmax(0, 1.35fr) minmax(0, .85fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); padding-block: 2rem; margin-bottom: var(--gap); }
  .row .copy { min-width: 0; max-width: 72ch; }
  .copy > h2 { margin-bottom: 1.5rem; }
  .rev .copy { order: 2; }
  .rev .ask { order: 1; }
  .sectop { margin-bottom: 2rem; max-width: 60ch; }
  .sectop h2 { margin-top: .75rem; }
  .branches, .routes { margin-bottom: var(--gap); }
  .routegrid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; }
  .next { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2.5rem; border-radius: 8px; color: var(--paper); background: var(--deep); margin-block: 0 2rem; }
  .next h2 { color: var(--paper); margin-top: .75rem; max-width: 34ch; }
  .next .btn { flex-shrink: 0; }
  .ft { margin-top: var(--gap); padding-block: 2rem; border-top: 1px solid var(--line); }
  .fttop { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
  .fttop nav { display: flex; gap: 1rem; flex-wrap: wrap; }
  .ft p { margin-top: 1.5rem; }
}

@layer components {
  .skip { position: absolute; left: 1.5rem; top: -6rem; z-index: 100; background: var(--paper); border: 1px solid var(--blue); border-radius: 8px; min-height: 48px; padding: .75rem 1rem; }
  .skip:focus { top: .5rem; }
  .brand { display: flex; gap: 1rem; align-items: center; text-decoration: none; min-height: 56px; color: var(--ink); font-weight: 700; font-size: 1.125rem; }
  .brand-sub { display: block; font-size: 1rem; font-weight: 400; }
  .mark { display: block; width: 40px; height: 40px; position: relative; flex: 0 0 40px; }
  .mark::before, .mark::after { content: ""; position: absolute; width: 30px; height: 2px; background: var(--blue); left: 5px; top: 19px; transform: rotate(45deg); }
  .mark::after { transform: rotate(-45deg); }
  .mark i { position: absolute; width: 10px; height: 10px; border: 2px solid var(--blue); background: var(--paper); z-index: 1; }
  .mark i:nth-child(1) { left: 0; top: 0; }
  .mark i:nth-child(2) { right: 0; top: 0; }
  .mark i:nth-child(3) { left: 15px; bottom: 0; background: var(--warm); }
  .menu { position: relative; z-index: 20; }
  .menu > summary { display: flex; align-items: center; gap: 1rem; list-style: none; min-height: 52px; padding: .75rem 1rem; border: 1px solid var(--line); border-radius: 8px; font-size: 1rem; font-weight: 500; background: var(--paper); }
  .menu > summary::-webkit-details-marker { display: none; }
  .plus { font-size: 1.5rem; line-height: 1; color: var(--blue); transition: transform var(--ease); }
  .menu[open] .plus { transform: rotate(45deg); }
  .menu nav { position: absolute; right: 0; top: calc(100% + .75rem); width: min(400px, calc(100vw - 3rem)); padding: .5rem; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 12px 32px rgb(0 0 0 / .1); }
  .menu nav a { display: grid; grid-template-columns: 1fr auto; column-gap: 1rem; padding: 1rem; min-height: 80px; text-decoration: none; border-bottom: 1px solid var(--line); transition: background var(--ease); }
  .menu nav a:last-child { border-bottom: 0; }
  .menu nav a .nv { font-weight: 700; grid-column: 1; }
  .menu nav a > span:nth-child(2) { grid-column: 1; color: var(--ink); }
  .menu nav .arr { grid-column: 2; grid-row: 1 / 3; align-self: center; font-size: 1.5rem; }
  .menu nav a:hover { background: var(--wash); }
  .menu nav a[aria-current] { background: #eef6fb; }
  .menu nav a[aria-current] .arr { color: var(--deep); background: var(--green); border-radius: 4px; padding: 0 .3rem; }
  .btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 56px; padding: .875rem 1.25rem; border: 1px solid var(--ink); border-radius: 8px; text-decoration: none; font-weight: 600; font-size: 1rem; box-shadow: var(--shadow); transition: background var(--ease), box-shadow var(--ease); }
  .btn > span { font-size: 1.25rem; }
  .warm { color: var(--ink); background: var(--warm); border-color: var(--warm); }
  .btn:hover { background: #ffbc42; box-shadow: 0 4px 12px rgb(0 0 0 / .12); text-decoration: none; }
  .art { position: relative; aspect-ratio: 10 / 9; min-width: 0; background: #f1f3f3; border-radius: 8px; box-shadow: var(--shadow); overflow: hidden; }
  .art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
  .artbase { position: absolute; inset: 0; z-index: 0; background: linear-gradient(145deg, #fafafa, #ebeeee); }
  .cut { position: absolute; filter: drop-shadow(0 4px 3px rgb(0 0 0 / .06)); }
  .cta { left: 6%; top: 10%; width: 75%; height: 62%; background: white; clip-path: polygon(4% 0, 94% 3%, 100% 95%, 64% 100%, 59% 91%, 41% 99%, 3% 96%, 0 36%); transform: rotate(-8deg); }
  .ctb { right: -3%; top: 20%; width: 73%; height: 47%; background: #d8dedf; clip-path: polygon(0 46%, 25% 12%, 32% 32%, 58% 0, 100% 60%, 100% 100%, 0 100%); transform: rotate(6deg); }
  .ctc { right: 5%; top: 47%; width: 79%; height: 29%; background: #e6ebec; clip-path: polygon(0 47%, 35% 8%, 72% 25%, 100% 0, 100% 100%, 0 92%); transform: rotate(-6deg); }
  .flow { position: absolute; z-index: 2; width: 55%; height: 23%; border: 2px solid var(--blue); border-left: 0; border-bottom: 0; border-radius: 0 24px 0 0; }
  .fa { left: 12%; top: 57%; transform: rotate(-14deg); }
  .fb { left: 29%; top: 39%; transform: rotate(30deg); }
  .flow::after { content: ""; position: absolute; top: -4px; left: 15%; width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 7px var(--cyan); animation: traffic 6s linear infinite; }
  .pin { position: absolute; z-index: 2; width: 32px; height: 32px; border-radius: 50%; border: 5px solid var(--paper); background: var(--warm); box-shadow: var(--shadow); }
  .pa { left: 10%; top: 61%; }
  .pb { left: 34%; top: 40%; }
  .pc { right: 18%; top: 54%; background: var(--blue); }
  .art figcaption { display: flex; flex-direction: column; gap: .25rem; position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.5rem; z-index: 3; padding: 1rem; background: rgb(255 255 255 / .94); border-radius: 8px; border-bottom: 1px solid var(--line); }
  .ask { position: relative; border-top: 2px solid var(--blue); border-bottom: 1px solid var(--line); padding: 1.5rem 1.5rem 2rem; border-radius: 0 0 8px 8px; background: var(--wash); box-shadow: var(--shadow); }
  .askq { margin-top: .75rem; font-weight: 600; font-size: 1.25rem; line-height: 1.5; }
  .ask > p:last-of-type:not(.askq) { margin-top: 1rem; }
  .node { display: block; position: absolute; width: 12px; height: 12px; right: 1.5rem; bottom: -6px; border: 2px solid var(--blue); border-radius: 50%; background: var(--warm); }
  .branch { position: relative; display: grid; grid-template-columns: 176px minmax(0, 1fr) 16px; align-items: start; gap: 2rem; padding: 2rem 0; border-bottom: 1px solid var(--line); }
  .branch h3 { margin-bottom: 1rem; }
  .branch > div { max-width: 72ch; }
  .branch-dot { display: block; width: 14px; height: 14px; border: 2px solid var(--blue); background: var(--paper); border-radius: 50%; margin-top: .5rem; transition: background var(--ease), box-shadow var(--ease); }
  .branch:hover .branch-dot { background: var(--green); box-shadow: 0 0 0 5px #eef6fb; }
  .route-tag { font-family: var(--mono); font-size: 1rem; color: var(--blue); padding-top: .25rem; }
  .routecard { display: flex; flex-direction: column; padding: 2rem; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: var(--shadow); text-decoration: none; transition: border-color var(--ease), box-shadow var(--ease); }
  .routecard h3 { margin: 1rem 0; font-size: 1.5rem; }
  .routecard p { color: var(--ink); max-width: 50ch; }
  .routecard:hover { border-color: var(--blue); box-shadow: 0 4px 14px rgb(0 86 145 / .12); text-decoration: none; }
  .routecard.blue { background: #eef6fb; }
  .rcend { display: flex; justify-content: space-between; align-items: center; gap: 1rem; min-height: 48px; border-top: 1px solid var(--line); margin-top: 2rem; padding-top: 1rem; font-weight: 600; }
  .fold { position: relative; justify-self: end; width: min(100%, 456px); padding: 3rem 2rem; background: #f0f3f4; border-radius: 8px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); transform: rotate(2deg); }
  .fold::after { content: ""; position: absolute; top: 0; right: 0; width: 32px; height: 32px; background: linear-gradient(45deg, #ccc 49%, #fff 50%); }
  .foldpin { position: absolute; top: -12px; left: 2rem; width: 32px; height: 32px; border-radius: 50%; background: var(--warm); border: 6px solid white; box-shadow: var(--shadow); }
  .foldq { font-size: 2rem; line-height: 1.25; letter-spacing: -.045em; font-weight: 700; margin-block: 1.5rem; }
  .fold .mono { display: block; margin-top: 2rem; color: var(--blue); }
  .riskfold { background: #fff1d9; transform: rotate(-2deg); }
  .receipt { width: min(100%, 456px); justify-self: end; border-radius: 8px; background: var(--deep); color: var(--paper); box-shadow: var(--shadow); padding: 2rem; position: relative; }
  .receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 12px; background: linear-gradient(135deg, black 25%, transparent 25%) -12px 0, linear-gradient(225deg, black 25%, transparent 25%) -12px 0; background-size: 24px 24px; }
  .rhead { display: flex; gap: .75rem; align-items: center; }
  .rnode { width: 8px; height: 8px; background: var(--green); border-radius: 50%; }
  .rq { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 1rem; }
  .receipt dl > div { display: flex; justify-content: space-between; gap: 1rem; padding-block: 1rem; border-bottom: 1px solid #666; }
  .receipt dd { font-family: var(--mono); }
  .rtotal { margin-top: 1.5rem; display: flex; flex-direction: column; gap: .5rem; font-weight: 600; }
  .rtotal > span { font-size: 1.5rem; color: var(--warm); }
  .ql { margin-block: 1.5rem; padding-left: 1.5rem; max-width: 70ch; }
  .ql li { padding-left: .25rem; }
  .ql li::marker { color: var(--blue); }
  .ln, .sl { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 52px; padding: .75rem 0; font-size: 1rem; }
  .ln { width: fit-content; max-width: 100%; margin-top: 1rem; font-weight: 600; }
  .ln > span, .sl > span { flex: 0 0 auto; }
  .sl { border-bottom: 1px solid var(--line); text-decoration: none; }
  .sl:hover { text-decoration: underline; }
  .complaints .ln { width: 100%; border-bottom: 1px solid var(--line); margin: 0; }
  .complaints { margin-top: 1.5rem; }
  .urgent { margin-bottom: var(--gap); padding: 2rem; border-left: 4px solid var(--warm); background: #fff8eb; border-radius: 0 8px 8px 0; }
  .urgent h2 { margin-block: .75rem 1.5rem; }
  .ev { border: 1px solid var(--line); border-radius: 8px; margin-bottom: 2rem; background: var(--paper); }
  .src { display: flex; justify-content: space-between; align-items: center; list-style: none; min-height: 64px; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 600; color: var(--blue); }
  .src::-webkit-details-marker { display: none; }
  .src > span { font-size: 1.5rem; line-height: 1; }
  .ev[open] > .src { border-bottom: 1px solid var(--line); }
  .evb { padding: 1.5rem; }
  .evb > h2 { margin-bottom: 1.5rem; }
  .srcl { margin-top: 1.5rem; }
  .drawer { position: fixed; inset: 0 0 0 auto; margin: 0; width: min(560px, 100%); max-width: none; height: 100dvh; max-height: 100dvh; padding: 0; color: var(--ink); background: white; border: 0; border-left: 1px solid var(--line); box-shadow: -8px 0 32px rgb(0 0 0 / .12); overflow: auto; }
  .drawer::backdrop { background: rgb(0 0 0 / .36); }
  .dh { position: sticky; top: 0; z-index: 1; display: flex; gap: 1.5rem; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); }
  .dh p { font-weight: 600; }
  .close { min-height: 48px; min-width: 48px; padding: .5rem 1rem; border-radius: 8px; border: 1px solid var(--line); background: var(--wash); color: var(--blue); font-size: 1rem; }
  .close:hover { background: #eef6fb; }
  .drawer .evb { padding: 2rem 1.5rem; }
  .fttop a { display: inline-flex; align-items: center; min-width: 44px; min-height: 48px; gap: 1rem; padding-block: .5rem; font-size: 1rem; }
  .ftname { font-weight: 600; }
  .missing { padding-block: var(--gap); max-width: 72ch; min-height: 55vh; }
  .missing h1 { margin-block: 1.5rem; }
  .missing .btn { margin-top: 2rem; }
}

@layer utilities {
  .ey { font-size: 1rem; font-weight: 500; }
  .mono { font-family: var(--mono); font-size: 1rem; font-weight: 400; }
}

@layer motion {
  @keyframes rise { from { transform: translateY(8px); opacity: .93; } to { transform: translateY(0); opacity: 1; } }
  @keyframes traffic { from { left: 6%; } to { left: 82%; } }
  @keyframes slide { from { transform: translateX(24px); opacity: .93; } to { transform: translateX(0); opacity: 1; } }
  .ht { animation: rise 420ms ease-out; }
  .drawer[open] { animation: slide 420ms ease-out; }
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }
}

@layer layout {
  @media (max-width: 860px) {
    .hero { grid-template-columns: 1fr 1fr; gap: 2rem; }
    .hero.home { min-height: auto; }
    .row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 2rem; }
    .next { align-items: flex-start; flex-direction: column; }
  }
  @media (max-width: 640px) {
    .hd { flex-wrap: wrap; padding-block: 1rem; gap: 1rem; }
    .hero { grid-template-columns: minmax(0, 1fr); gap: 3rem; padding-top: 2.5rem; }
    .hero.home h1 { font-size: clamp(2.5rem, 9vw, 3.25rem); max-width: 13ch; }
    .hero .lead { font-size: 1rem; }
    .row { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 0; }
    .rev .copy { order: 0; }
    .rev .ask { order: 1; }
    .routegrid { grid-template-columns: minmax(0, 1fr); }
    .next { padding: 1.5rem; gap: 1.5rem; }
    .fttop { display: block; }
    .fttop nav { flex-direction: column; gap: 0; margin-top: 1rem; }
  }
}

@layer components {
  @media (max-width: 860px) {
    .branch { grid-template-columns: 144px minmax(0, 1fr) 14px; gap: 1.5rem; }
    .fold, .receipt { padding: 2rem 1.5rem; }
    .foldq { font-size: 1.75rem; }
  }
  @media (max-width: 640px) {
    .brand { gap: .75rem; }
    .menu { width: 100%; }
    .menu > summary { justify-content: space-between; }
    .menu nav { width: 100%; top: calc(100% + .5rem); }
    .art { width: 100%; }
    .branch { grid-template-columns: minmax(0, 1fr) 14px; gap: 1rem; padding-block: 2rem; }
    .branch .route-tag { grid-column: 1; }
    .branch > div { grid-column: 1; }
    .branch-dot { grid-column: 2; grid-row: 1; }
    .routecard { padding: 1.5rem; }
    .fold { transform: none; width: 100%; }
    .receipt { width: 100%; }
    .next .btn { width: 100%; }
    .fttop nav a { border-bottom: 1px solid var(--line); width: 100%; }
    .urgent { padding: 1.5rem; }
    .art figcaption { left: 1rem; right: 1rem; bottom: 1rem; }
    .foldq { font-size: 1.75rem; }
    .ln { width: 100%; }
  }
}

@layer base {
  @media print {
    body { background: white; }
    .menu, .skip, .art, .next, .fttop, .src { display: none; }
    .hero, .row, .routegrid { display: block; }
    .hero { padding-block: 2rem; }
    .row, .branches, .routes, .urgent { margin-bottom: 2rem; break-inside: avoid; }
    .ask, .fold, .receipt { margin-top: 1.5rem; }
    .ev .evb { display: block; }
    .ev { border: 0; }
    .artbase, .ht { animation: none; }
  }
}