/* Arceus X iOS guide — follows the site's dark cyan/blue visual system. */
.ios-guide-page main { background: var(--lp-bg); overflow: hidden; }
.ios-guide { color: var(--lp-text-2); }
.ios-guide .lp-container { max-width: var(--container); margin: 0 auto; padding: 0 var(--pad-x); }
.ios-narrow { width: min(840px, calc(100% - (var(--pad-x) * 2))); margin: 0 auto; }
.ios-guide h1, .ios-guide h2, .ios-guide h3 { color: var(--lp-text); font-family: var(--display); }
.ios-guide p, .ios-guide li, .ios-guide td, .ios-guide th { font-family: var(--body); }
.ios-guide p { line-height: 1.82; }

.ios-hero { position: relative; padding: clamp(78px, 9vw, 130px) 0 clamp(84px, 10vw, 142px); border-bottom: 1px solid var(--lp-border); background: radial-gradient(60% 85% at 78% 50%, rgba(34,211,238,.15), transparent 64%), radial-gradient(45% 65% at 10% 0%, rgba(59,130,246,.12), transparent 70%); }
.ios-hero::after { content: ''; position: absolute; width: 420px; height: 420px; right: -180px; bottom: -250px; border-radius: 50%; background: rgba(34,211,238,.08); filter: blur(10px); }
.ios-hero-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(480px, 1.2fr); align-items: center; gap: clamp(42px, 6vw, 90px); }
.ios-kicker, .ios-section-label { display: inline-flex; color: var(--neo-1); font-size: 12px; font-weight: 700; letter-spacing: .1em; line-height: 1.4; text-transform: uppercase; }
.ios-hero h1 { font-size: clamp(48px, 7vw, 86px); line-height: 1; letter-spacing: -.055em; margin: 16px 0 24px; }
.ios-hero h1 span { color: var(--neo-1); }
.ios-hero-copy > p { max-width: 620px; color: var(--lp-text-2); font-size: clamp(17px, 2vw, 20px); margin-bottom: 32px; }
.ios-download { display: inline-flex; align-items: center; justify-content: center; gap: 11px; min-height: 52px; padding: 0 25px; border-radius: var(--r-pill); background: var(--neo-gradient); box-shadow: 0 14px 38px rgba(34,211,238,.2); color: #fff !important; font-family: var(--body); font-size: 15px; font-weight: 700; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.ios-download:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(34,211,238,.3); opacity: 1; }
.ios-download svg { width: 18px; height: 18px; }
.ios-hero-visual { min-width: 0; justify-self: end; position: relative; width: min(100%, 700px); transform: perspective(1100px) rotateY(-4deg) rotateX(1deg); }
.ios-product-window { overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: #07080d; box-shadow: 0 38px 90px rgba(0,0,0,.58), 0 0 70px rgba(34,211,238,.12); }
.ios-product-window img { width: 100%; aspect-ratio: 1.55; object-fit: cover; object-position: center; }
.ios-window-bar { height: 42px; padding: 0 15px; display: flex; align-items: center; gap: 7px; background: rgba(255,255,255,.055); border-bottom: 1px solid var(--lp-border); }
.ios-window-bar span { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.22); }
.ios-window-bar span:first-child { background: #22d3ee; }
.ios-window-bar b { margin-left: 7px; color: var(--lp-text-3); font: 600 11px/1 var(--body); letter-spacing: .04em; }

.ios-app-bar { position: relative; z-index: 4; margin-top: -38px; }
.ios-app-bar-inner { min-height: 106px; display: grid; grid-template-columns: 1.1fr 1fr auto; align-items: center; gap: 34px; padding-top: 18px !important; padding-bottom: 18px !important; border: 1px solid var(--lp-border-h); border-radius: 22px; background: rgba(18,20,38,.88); backdrop-filter: blur(24px); box-shadow: 0 22px 60px rgba(0,0,0,.32); }
.ios-app-identity { display: flex; align-items: center; gap: 15px; }
.ios-app-identity img { width: 58px; height: 58px; border-radius: 15px; box-shadow: 0 8px 22px rgba(34,211,238,.2); }
.ios-app-identity strong, .ios-app-identity span { display: block; }
.ios-app-identity strong { color: var(--lp-text); font: 700 17px/1.25 var(--display); }
.ios-app-identity span { color: var(--lp-text-3); font-size: 12px; margin-top: 5px; }
.ios-app-meta { display: grid; grid-template-columns: repeat(3,1fr); margin: 0; }
.ios-app-meta div { padding: 0 20px; border-left: 1px solid var(--lp-border); }
.ios-app-meta dt { color: var(--lp-text-3); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
.ios-app-meta dd { margin: 5px 0 0; color: var(--lp-text); font-size: 13px; font-weight: 700; white-space: nowrap; }

.ios-intro { padding: clamp(80px, 9vw, 118px) 0; background: linear-gradient(180deg, rgba(34,211,238,.035), transparent); }
.ios-intro .ios-narrow { display: grid; grid-template-columns: repeat(3,1fr); gap: 30px; width: min(1120px, calc(100% - (var(--pad-x) * 2))); }
.ios-intro p { font-size: 15px; color: var(--lp-text-2); margin: 0; padding: 22px; border-radius: 16px; background: rgba(255,255,255,.025); }
.ios-intro p:first-child { background: rgba(34,211,238,.055); }

.ios-section { padding: clamp(72px, 9vw, 116px) 0; border-top: 1px solid var(--lp-border); }
.ios-section-head { max-width: 760px; margin: 0 auto clamp(36px, 5vw, 56px); text-align: center; }
.ios-section-head h2, .ios-copy-block h2, .ios-process-card h2, .ios-conclusion-section h2 { font-size: clamp(30px, 4vw, 46px); line-height: 1.15; letter-spacing: -.035em; margin: 14px 0 20px; }
.ios-section-head p { color: var(--lp-text-2); margin-bottom: 8px; }

.ios-overview { background: radial-gradient(45% 75% at 100% 50%, rgba(59,130,246,.08), transparent 75%); }
.ios-two-column { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.ios-copy-block { padding: clamp(28px, 4vw, 42px); border: 1px solid var(--lp-border); border-radius: var(--r-xl); background: var(--lp-card); }
.ios-copy-block h2 { font-size: clamp(26px, 3vw, 36px); }
.ios-availability { background: linear-gradient(145deg, rgba(34,211,238,.075), rgba(255,255,255,.025)); border-color: rgba(34,211,238,.18); }
.ios-overview-side { display: grid; gap: 20px; }
.ios-overview-shot { overflow: hidden; border: 1px solid var(--lp-border-h); border-radius: var(--r-xl); box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.ios-overview-shot img { display: block; width: 100%; aspect-ratio: 1.55; object-fit: cover; }
.ios-check-list { list-style: none; padding: 4px 0 0; margin: 0; }
.ios-check-list li { position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--lp-border); color: var(--lp-text-2); }
.ios-check-list li:last-child { border: 0; }
.ios-check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--neo-1); font-weight: 700; }

.ios-features-section { background: var(--lp-bg-2); }
.ios-feature-showcase { display: grid; gap: clamp(70px,9vw,120px); }
.ios-feature-app-layout { display: grid; grid-template-columns: minmax(360px,.9fr) minmax(0,1.1fr); gap: clamp(36px,6vw,76px); align-items: start; }
.ios-feature-main-shot { position: sticky; top: 110px; }
.ios-feature-copy-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 28px; }
.ios-feature-row { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(330px,.72fr); gap: clamp(40px,7vw,90px); align-items: center; }
.ios-feature-row-reverse .ios-screen-frame { order: 2; }
.ios-screen-frame { position: relative; overflow: hidden; padding: 9px; border: 1px solid var(--lp-border-h); border-radius: 24px; background: rgba(255,255,255,.035); box-shadow: 0 28px 70px rgba(0,0,0,.35); }
.ios-screen-frame::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(34,211,238,.12), transparent 30%); pointer-events: none; }
.ios-screen-frame img { display: block; width: 100%; aspect-ratio: 1.55; object-fit: cover; border-radius: 16px; }
.ios-feature-copy > .ios-section-label { margin-bottom: 10px; }
.ios-feature-copy section { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 24px; border-radius: 16px; background: rgba(255,255,255,.025); margin-bottom: 12px; }
.ios-feature-copy section:last-child { border: 0; }
.ios-feature-copy b { color: var(--neo-1); font-size: 11px; letter-spacing: .06em; padding-top: 5px; }
.ios-feature-copy h3 { font-size: 22px; margin: 0 0 10px; }
.ios-feature-copy p { font-size: 14px; line-height: 1.72; margin: 0; }

.ios-compatibility-section { background: radial-gradient(55% 80% at 0% 50%, rgba(34,211,238,.07), transparent 75%); }
.ios-table-wrap { border-radius: var(--r-lg); overflow-x: auto; }
.ios-table { width: 100%; min-width: 760px; border-collapse: separate; border-spacing: 0 8px; text-align: left; }
.ios-table th { padding: 10px 20px; color: var(--lp-text-3); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; }
.ios-table td { padding: 17px 20px; color: var(--lp-text-2); background: rgba(255,255,255,.035); font-size: 14px; }
.ios-table td:first-child { color: var(--lp-text); font-weight: 600; border-radius: 12px 0 0 12px; }
.ios-table td:last-child { border-radius: 0 12px 12px 0; }
.ios-table td span { display: inline-flex; padding: 5px 10px; border-radius: var(--r-pill); background: var(--neo-soft); color: var(--neo-1); font-size: 12px; white-space: nowrap; }

.ios-process-section { background: var(--lp-bg-2); }
.ios-process-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; align-items: start; }
.ios-process-card { padding: clamp(28px,4vw,44px); border: 1px solid var(--lp-border); border-radius: var(--r-xl); background: linear-gradient(145deg, rgba(34,211,238,.07), rgba(255,255,255,.02)); }
.ios-process-card-alt { background: linear-gradient(145deg, rgba(59,130,246,.09), rgba(255,255,255,.02)); }
.ios-process-card h2 { font-size: clamp(27px,3vw,36px); }
.ios-process-card > p { margin-bottom: 26px; }
.ios-steps { list-style: none; padding: 0; margin: 0; }
.ios-steps li { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; padding: 16px; margin-top: 9px; border-radius: 12px; background: rgba(255,255,255,.025); }
.ios-steps li > span { color: var(--neo-1); font-size: 12px; font-weight: 700; letter-spacing: .06em; padding-top: 5px; }
.ios-steps p { margin: 0; font-size: 14px; line-height: 1.72; }

.ios-troubleshooting-section { background: radial-gradient(50% 70% at 50% 100%, rgba(34,211,238,.065), transparent 75%); }
.ios-trouble-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.ios-trouble-grid section { padding: 30px; border: 1px solid var(--lp-border); border-top: 2px solid var(--neo-1); border-radius: 0 0 18px 18px; background: var(--lp-card); }
.ios-trouble-grid span { color: var(--lp-text-4); font-size: 12px; font-weight: 700; }
.ios-trouble-grid h3 { font-size: 19px; line-height: 1.35; margin: 24px 0 12px; }
.ios-trouble-grid p { margin: 0; font-size: 14px; line-height: 1.75; }

.ios-conclusion-section { padding: clamp(72px,9vw,110px) 0; text-align: center; border-top: 1px solid rgba(34,211,238,.18); border-bottom: 1px solid rgba(34,211,238,.18); background: radial-gradient(70% 120% at 50% 100%, rgba(8,145,178,.2), rgba(34,211,238,.035) 65%, transparent); }
.ios-conclusion-section p { font-size: 17px; margin: 0 auto 28px; }
.ios-conclusion-section .ios-download { min-width: 220px; }

.ios-faq-section { background: var(--lp-bg-2); }
.ios-faq-section .ios-section-head { margin-bottom: 24px; }
.ios-faq-list { border-top: 1px solid var(--lp-border); }
.ios-faq-item { border-bottom: 1px solid var(--lp-border); }
.ios-faq-item .faq-question { padding: 24px 2px; color: var(--lp-text); font-family: var(--display); font-size: 16px; }
.ios-faq-item .faq-answer-inner { color: var(--lp-text-2); }
.ios-faq-item .faq-answer-inner p { max-width: 720px; }
.ios-faq-item.open .faq-answer-inner { padding: 0 40px 22px 2px; }

@media (max-width: 900px) {
  .ios-hero-inner { grid-template-columns: minmax(0,.8fr) minmax(390px,1.2fr); gap: 34px; }
  .ios-app-bar-inner { grid-template-columns: 1fr auto; }
  .ios-app-meta { display: none; }
  .ios-feature-app-layout { grid-template-columns: 1fr; }
  .ios-feature-main-shot { position: static; }
  .ios-feature-row { grid-template-columns: 1fr; }
  .ios-feature-row-reverse .ios-screen-frame { order: 0; }
  .ios-trouble-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .ios-hero { text-align: center; padding-top: 68px; }
  .ios-hero-inner { grid-template-columns: 1fr; }
  .ios-hero-copy > p { margin-left: auto; margin-right: auto; }
  .ios-hero-visual { width: 100%; justify-self: center; order: -1; transform: none; }
  .ios-app-bar { margin-top: -28px; }
  .ios-app-bar-inner { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .ios-app-identity { justify-content: center; }
  .ios-app-bar .ios-download { width: 100%; }
  .ios-intro .ios-narrow { grid-template-columns: 1fr; gap: 22px; }
  .ios-feature-copy-grid { grid-template-columns: 1fr; }
  .ios-two-column, .ios-process-grid { grid-template-columns: 1fr; }
  .ios-table { display: block; min-width: 0; }
  .ios-table thead { display: none; }
  .ios-table tbody { display: grid; gap: 12px; }
  .ios-table tr { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 8px; border-radius: 16px; background: rgba(255,255,255,.035); }
  .ios-table td, .ios-table td:first-child, .ios-table td:last-child { padding: 10px; border-radius: 0; background: transparent; }
  .ios-table td:last-child { grid-column: 1 / -1; }
  .ios-table td::before { display: block; margin-bottom: 5px; color: var(--lp-text-4); font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
  .ios-table td:nth-child(1)::before { content: 'Device'; }
  .ios-table td:nth-child(2)::before { content: 'System'; }
  .ios-table td:nth-child(3)::before { content: 'Compatibility'; }
  .ios-table td:nth-child(4)::before { content: 'Key consideration'; }
}
@media (max-width: 480px) {
  .ios-download { width: 100%; }
  .ios-copy-block, .ios-process-card { padding: 24px 20px; border-radius: 20px; }
  .ios-trouble-grid section { padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) { .ios-download { transition: none; } }