/* Service intro (intro.html): an explanation page, not a dashboard. Tokens come from site.css; the choice cards and the warp layer from landing.css.
   Rhythm: one hero, then hairline-separated sections laid out like console channels (mono index left, content right). */

/* Hero: copy + CTA pair left, the page index right (desktop only). */
.ihero { padding-top: clamp(2.5rem, 6vw, 5rem); }
.ihero-grid { display: grid; gap: var(--s-7); }
.ihero h1 { font-size: var(--fs-display); letter-spacing: -0.035em; line-height: 1.02; max-width: 17ch; margin-bottom: var(--s-5); }
.ihero .lede { margin-bottom: var(--s-6); }
.ctas { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.ctas .btn { min-height: 52px; padding: 0 1.5rem; font-size: 1rem; }
.toc { display: none; }
@media (min-width: 960px) {
  .ihero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: end; }
  .toc { display: block; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
}
.toc ol { list-style: none; margin: 0; padding: 0; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a { display: grid; grid-template-columns: 2.5rem 1fr auto; align-items: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-5); color: var(--body); text-decoration: none; transition: background-color var(--fast) ease, color var(--fast) ease; }
.toc a::after { content: "↓"; font-family: var(--mono); color: var(--faint); }
.toc .ix { font: 500 var(--fs-sm) var(--mono); color: var(--faint); }
@media (hover: hover) { .toc a:hover { background: var(--surface-2); color: var(--text); } .toc a:hover::after { color: var(--accent); } }
.toc a:focus-visible { outline-offset: -3px; border-radius: 0; }

/* Sections: hairline on top, heading left (sticky on desktop), content right. */
.isec .wrap::before { content: ""; display: block; grid-column: 1 / -1; border-top: 1px solid var(--line); margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.vsec.isec { padding-top: 0; }
.isplit { display: grid; gap: var(--s-5); }
@media (min-width: 960px) { .isplit { grid-template-columns: 5fr 7fr; gap: 0 var(--s-8); } .isplit .ihead { position: sticky; top: calc(var(--header-h) + 2rem); align-self: start; } }
.ihead .kicker { margin-bottom: var(--s-2); }
.ihead h2 { font-size: var(--fs-xl); letter-spacing: -0.03em; }
.istart { margin-bottom: var(--s-6); }

/* What you can do: indexed rows, not a grid of equal cards. */
.ilist { list-style: none; margin: 0; padding: 0; }
.ilist li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--s-3); padding: var(--s-5) 0; border-top: 1px solid var(--line); }
.ilist li:first-child { border-top: 0; padding-top: 0; }
.ilist .ix { font: 500 var(--fs-sm) var(--mono); color: var(--faint); padding-top: .3rem; }
.ilist h3 { font-size: var(--fs-lg); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .6rem; }
.ilist p { margin-top: .4rem; color: var(--muted); max-width: 52ch; }
.ilist .soon h3 > span:first-child { color: var(--muted); }

/* Who it is for: three plain lines with the 1px dash marker used on the pricing plans. */
.iwho { list-style: none; margin: 0; padding: 0; }
.iwho li { position: relative; padding: var(--s-4) 0 var(--s-4) 1.6rem; border-top: 1px solid var(--line); color: var(--body); font-size: var(--fs-md); line-height: 1.5; max-width: 52ch; }
.iwho li:first-child { border-top: 0; padding-top: 0; }
.iwho li::before { content: ""; position: absolute; left: 0; top: calc(var(--s-4) + .75em); width: 10px; height: 1px; background: var(--muted); }
.iwho li:first-child::before { top: .75em; }

/* How it works reuses .steps from site.css; the steps here are static, so they need no reserved height. */
.isec .steps { min-height: 0; }

/* Plans teaser: names and prices come from the pricing copy. */
.iplans { display: grid; gap: var(--s-4); margin: 0 0 var(--s-5); }
@media (min-width: 640px) { .iplans { grid-template-columns: 1fr 1fr; } }
.iplans > div { padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--radius-lg); }
.iplans > .member { background: var(--surface); border-color: rgb(255 106 43 / .55); }
.iplans dt { font: 500 var(--fs-xs)/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.iplans dd { margin: 0; color: var(--muted); }
.iplans .iprice { margin: var(--s-2) 0 var(--s-3); font-size: 2.25rem; font-weight: 600; letter-spacing: -0.04em; line-height: 1; color: var(--text); }
.iplans .iprice small { font-size: .95rem; font-weight: 400; letter-spacing: 0; color: var(--muted); margin-left: .35rem; }

/* Choice cards sit in a normal section here (on the landing they filled a screen). */
#start .picks { margin-bottom: var(--s-4); }

:lang(ko) .ihero h1, :lang(ja) .ihero h1, :lang(zh-Hans) .ihero h1 { letter-spacing: -0.02em; line-height: 1.15; }
:lang(ja) .ihero h1, :lang(zh-Hans) .ihero h1 { line-break: strict; }

@media (max-width: 640px) {
  .ctas .btn { width: 100%; }
  .iwho li { font-size: var(--fs-base); }
}
@media (prefers-reduced-motion: reduce) { .toc a { transition: none; } }