.detail-page { background: #121e2b; }
.detail-page h1, .detail-page h2, .detail-page h3 { text-wrap: balance; }
.detail-page p, .detail-page li, .detail-page dd, .detail-page figcaption { text-wrap: pretty; }
.detail-page .site-nav .current { color: var(--red); }
.detail-hero { padding: 160px 0 92px; background: var(--paper); border-bottom: 1px solid var(--line); }
.detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr); gap: clamp(48px, 8vw, 112px); align-items: end; }
.detail-kicker { margin: 0 0 24px; color: var(--red); font: 700 11px/1.4 var(--utility); letter-spacing: .18em; }
.detail-hero h1 { max-width: 820px; margin: 0; font-size: clamp(42px, 6vw, 76px); line-height: 1.25; letter-spacing: -.045em; }
.detail-hero h1 em { color: var(--red); font-style: normal; }
.detail-hero h1.line-service-title span, .detail-hero h1.line-service-title em { display: inline-block; white-space: nowrap; font-size: clamp(27px, 5.35vw, 68px); }
.detail-hero-lead { max-width: 720px; margin: 30px 0 0; color: #c2ccda; font-size: clamp(16px, 1.7vw, 19px); line-height: 2; }
.detail-summary { margin: 0; padding: 30px; border-top: 4px solid var(--red); background: #121e2b; box-shadow: 0 18px 48px rgba(0,0,0,.06); }
.detail-summary dt { margin-top: 18px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.detail-summary dt:first-child { margin-top: 0; }
.detail-summary dd { margin: 4px 0 0; font-weight: 700; line-height: 1.65; }
.detail-section { padding-block: clamp(76px, 9vw, 124px); }
.detail-section.alt { background: var(--paper); }
.detail-heading { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: clamp(36px, 7vw, 100px); align-items: start; }
.detail-heading h2 { margin: 0; font-size: clamp(31px, 4vw, 52px); line-height: 1.4; letter-spacing: -.035em; }
.detail-heading > div > p { max-width: 690px; margin: 0; color: var(--muted); font-size: 15px; line-height: 2; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 54px; border: 1px solid var(--line); background: var(--line); }
.detail-card { min-height: 250px; padding: clamp(25px, 3.2vw, 40px); background: #121e2b; }
.detail-card .card-label { margin: 0 0 25px; color: var(--red); font: 700 11px/1 var(--utility); letter-spacing: .14em; }
.detail-card h3 { margin: 0; font-size: 21px; line-height: 1.55; }
.detail-card p { margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.detail-card .works-result { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: baseline; margin-top: 24px; color: var(--ink); }
.works-result strong { color: var(--red); font: 700 clamp(27px, 3vw, 40px)/1 var(--utility); letter-spacing: -.04em; }
.works-result span { font-weight: 800; }
.detail-list { margin: 46px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.detail-list li { display: grid; grid-template-columns: minmax(200px, .75fr) minmax(0, 1.25fr); gap: 36px; padding: 25px 0; border-bottom: 1px solid var(--line); }
.detail-list strong { font-size: 17px; }
.detail-list span { color: var(--muted); }
.detail-boundary { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 52px; }
.detail-boundary article { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); }
.detail-boundary article:last-child { background: #192a3d; color: #fff; }
.detail-boundary h3 { margin: 0 0 20px; font-size: 23px; }
.detail-boundary ul { margin: 0; padding-left: 1.25em; }
.detail-boundary li + li { margin-top: 9px; }
.detail-boundary article:last-child li { color: #e5e5e2; font-weight: 600; }
.detail-placeholder { min-height: 390px; margin-top: 54px; display: grid; place-items: center; padding: 32px; border: 1px dashed #aaa; background: linear-gradient(135deg, #f5f5f2, #fff); color: var(--muted); text-align: center; }
.detail-placeholder b { display: block; color: var(--ink); font-size: 20px; }
.detail-placeholder span { display: block; margin-top: 9px; font-size: 13px; }
.detail-visual { margin: 54px 0 0; border: 1px solid var(--line); background: #121e2b; }
.detail-visual img { width: 100%; height: auto; }
.detail-visual-wide img { aspect-ratio: 2.2 / 1; object-fit: cover; }
.detail-visual figcaption { padding: 18px 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; font-weight: 600; text-align: center; }
.visual-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: visual-step; }
.visual-steps li { position: relative; padding: 7px 18px; color: var(--ink); counter-increment: visual-step; }
.visual-steps li::before { content: "0" counter(visual-step); display: block; margin-bottom: 4px; color: var(--red); font: 700 10px/1 var(--utility); letter-spacing: .12em; }
.visual-steps li:not(:last-child) { border-right: 1px solid var(--line); }
.visual-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 0 !important; background: var(--line); text-align: left !important; }
.visual-compare span { padding: 18px 24px; background: #121e2b; }
.visual-compare b { display: block; margin-bottom: 5px; color: var(--ink); font-size: 15px; }
.detail-sublog-screens { margin-top: 52px; }
.detail-heading .works-app-title { font-size: clamp(28px, 3.4vw, 46px); }
.works-app-title span { white-space: nowrap; }
.detail-price { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(36px, 7vw, 96px); align-items: center; }
.detail-price strong { display: block; font: 700 clamp(44px, 6vw, 74px)/1 var(--utility); letter-spacing: -.05em; }
.detail-price strong small { margin-left: 5px; font: 700 14px/1 var(--sans); letter-spacing: 0; }
.detail-price p { margin: 22px 0 0; color: var(--muted); }
.detail-cta { padding-block: clamp(76px, 9vw, 116px); background: var(--red); color: #fff; text-align: center; }
.detail-cta h2 { max-width: 780px; margin: 0 auto; font-size: clamp(32px, 4vw, 52px); line-height: 1.45; }
.detail-cta p { max-width: 650px; margin: 22px auto 30px; color: #f5dede; }
.detail-cta .button { border-color: #fff; background: #121e2b; color: var(--ink); }
.detail-cta .button:hover { border-color: var(--line); background: #192a3d; color: #fff; }
.breadcrumb { margin: 0 0 26px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; color: var(--muted); font-size: 12px; }
.breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 8px; color: #aaa; }
.detail-back { display: inline-flex; min-height: 48px; align-items: center; margin-top: 28px; padding: 12px 15px; border: 1px solid currentColor; background: #121e2b; font-weight: 700; text-decoration: none; }
.detail-plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 54px; border: 1px solid var(--line); background: var(--line); }
.detail-plan { position: relative; min-height: 450px; padding: clamp(28px, 3.2vw, 42px); background: #121e2b; }
.detail-plan.featured { background: #192a3d; color: #fff; }
.detail-plan-tag { margin: 0 0 24px; color: var(--red); font: 800 11px/1.4 var(--utility); letter-spacing: .1em; }
.detail-plan h3 { margin: 0; font-size: 24px; line-height: 1.5; }
.detail-plan-price { margin: 28px 0; font-size: 13px; font-weight: 700; }
.detail-plan-price strong { color: var(--red); font: 700 clamp(34px, 3.8vw, 52px)/1 var(--utility); letter-spacing: -.04em; }
.detail-plan.featured .detail-plan-price strong { color: #fff; }
.detail-plan ul { margin: 0; padding: 0; list-style: none; color: var(--muted); font-size: 13px; }
.detail-plan.featured ul { color: #ededeb; font-weight: 700; }
.detail-plan li { position: relative; padding-left: 18px; }
.detail-plan li + li { margin-top: 10px; }
.detail-plan li::before { position: absolute; left: 0; color: var(--red); content: "—"; }
.detail-small-note { margin: 24px 0 0; color: var(--muted); font-size: 12px; }

/* Website production: price-first comparison and original industry mockups. */
.website-plans-section { background: #121e2b; }
.website-plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 54px; }
.website-plan-card { display: flex; flex-direction: column; min-width: 0; padding: clamp(28px, 3.2vw, 40px); border: 1px solid var(--line); background: #121e2b; }
.website-plan-card.featured { border-top: 5px solid var(--red); padding-top: calc(clamp(28px, 3.2vw, 40px) - 4px); box-shadow: 0 20px 52px rgba(23,23,23,.08); }
.website-plan-label { margin: 0 0 16px; color: var(--red); font: 800 11px/1.4 var(--utility); letter-spacing: .08em; }
.website-plan-card h3 { margin: 0; font-size: clamp(22px, 2vw, 29px); line-height: 1.45; }
.website-plan-price { margin: 20px 0 0; font-size: 13px; font-weight: 700; }
.website-plan-price strong { margin-right: 4px; font: 700 clamp(36px, 3.6vw, 50px)/1 var(--utility); letter-spacing: -.045em; }
.website-plan-price-text strong { color: var(--red); font-size: clamp(30px, 3vw, 42px); }
.website-plan-copy { min-height: 8.3em; margin: 24px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.website-plan-facts { display: grid; grid-template-columns: 1fr 1fr; margin: 26px 0 0; padding: 18px 0; border-block: 1px solid var(--line); }
.website-plan-facts div { padding-inline: 18px; }
.website-plan-facts div:first-child { padding-left: 0; border-right: 1px solid var(--line); }
.website-plan-facts dt { color: var(--muted); font-size: 11px; font-weight: 700; }
.website-plan-facts dd { margin: 3px 0 0; font-size: 13px; font-weight: 700; line-height: 1.5; }
.website-plan-card > ul { flex: 1; margin: 26px 0 0; padding: 0; list-style: none; font-size: 13px; }
.website-plan-card > ul li { position: relative; padding-left: 20px; }
.website-plan-card > ul li + li { margin-top: 8px; }
.website-plan-card > ul li::before { position: absolute; left: 0; color: var(--red); content: "✓"; font-weight: 800; }
.website-plan-fit { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.75; }
.website-plan-fit strong { display: block; margin-bottom: 4px; }
.website-price-notes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin-top: 28px; border: 1px solid var(--line); background: var(--line); }
.website-price-notes article { padding: 22px 24px; background: var(--paper); }
.website-price-notes p { margin: 0 0 8px; color: var(--red); font: 800 10px/1.4 var(--utility); letter-spacing: .1em; }
.website-price-notes strong { display: block; font-size: 14px; }
.website-price-notes span { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.75; }

.website-sample-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; margin-top: 54px; }
.website-sample-card { overflow: hidden; border: 1px solid var(--line); background: #121e2b; }
.website-sample-preview { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--line); background: #111b29; }
.website-sample-preview img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .35s ease; }
.website-sample-preview span { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; gap: 12px; padding: 10px 14px; background: #192a3d; color: #fff; font-size: 11px; font-weight: 800; }
.website-sample-preview b { color: #fff; font-size: 15px; }
.website-sample-preview:hover img, .website-sample-preview:focus-visible img { transform: scale(1.025); }
.website-sample-preview:hover span { background: var(--red); }
.website-sample-body { padding: 27px 28px 30px; }
.website-sample-label { margin: 0 0 10px; color: var(--red); font: 800 10px/1.4 var(--utility); letter-spacing: .1em; }
.website-sample-body h3 { margin: 0; font-size: 23px; }
.website-sample-body > p:not(.website-sample-label) { margin: 16px 0 0; color: var(--muted); font-size: 14px; line-height: 1.9; }
.website-sample-body ul { margin: 22px 0 0; padding: 20px 0 0 1.2em; border-top: 1px solid var(--line); font-size: 13px; }
.website-sample-body li::marker { color: var(--red); }
.website-sample-note { margin: 24px 0 0; padding-left: 14px; border-left: 3px solid var(--red); color: var(--muted); font-size: 12px; }
@media (max-width: 820px) {
  .detail-hero { padding: 122px 0 70px; }
  .detail-hero-grid, .detail-heading, .detail-price { grid-template-columns: 1fr; }
  .detail-hero-grid { gap: 42px; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-card { min-height: auto; }
  .detail-list li { grid-template-columns: 1fr; gap: 8px; }
  .detail-boundary { grid-template-columns: 1fr; }
  .detail-plan-grid { grid-template-columns: 1fr; }
  .detail-plan { min-height: auto; }
  .detail-placeholder { min-height: 280px; }
  .website-plan-grid, .website-sample-grid { grid-template-columns: 1fr; }
  .website-plan-card { min-height: auto; }
  .website-plan-copy { min-height: auto; }
  .website-price-notes { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .detail-hero h1 { font-size: 39px; }
  .detail-summary { padding: 24px; }
  .detail-section { padding-block: 70px; }
  .detail-visual { margin-top: 38px; }
  .detail-visual-wide img { aspect-ratio: auto; object-fit: contain; }
  .visual-steps { grid-template-columns: 1fr 1fr; }
  .visual-steps li:nth-child(2) { border-right: 0; }
  .visual-steps li:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .visual-compare { grid-template-columns: 1fr; }
  .website-plan-grid, .website-sample-grid { margin-top: 38px; }
  .website-plan-card { padding: 26px 22px; }
  .website-plan-facts div { padding-inline: 12px; }
  .website-plan-facts div:first-child { padding-left: 0; }
  .website-sample-body { padding: 24px 22px 27px; }
}

/* Refero-inspired editorial system: Studio Yachiyo's existing white, black and red only. */
.detail-page { overflow-x: clip; }
.detail-page .wrap { width: min(1240px, calc(100% - 48px)); }
.detail-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(80px, 7vw, 104px) 0 clamp(80px, 9vw, 126px);
  border-top: 5px solid var(--red);
  border-bottom-color: var(--line);
  background: #121e2b;
}
.detail-hero::after {
  position: absolute;
  right: -0.04em;
  bottom: -0.28em;
  z-index: 0;
  color: rgba(23,23,23,.025);
  content: "SY";
  font: 800 clamp(190px, 30vw, 440px)/1 var(--utility);
  letter-spacing: -.1em;
  pointer-events: none;
}
.detail-hero .wrap { position: relative; z-index: 1; }
.breadcrumb { margin-bottom: clamp(34px, 5vw, 62px); }
.breadcrumb a { text-decoration-thickness: 1px; text-underline-offset: 4px; }
.detail-hero-grid {
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: clamp(42px, 7vw, 104px);
  align-items: stretch;
}
.detail-hero-grid > *,
.detail-heading > *,
.detail-price > * { min-width: 0; }
.detail-kicker { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px; }
.detail-kicker::before { width: 34px; height: 2px; background: currentColor; content: ""; }
.detail-hero h1 { max-width: 900px; overflow-wrap: anywhere; font-size: clamp(48px, 7vw, 92px); line-height: 1.12; letter-spacing: -.06em; }
.detail-hero h1 .detail-no-orphan { display: inline-block; }
.detail-hero h1.line-service-title span,
.detail-hero h1.line-service-title em { font-size: clamp(34px, 6vw, 78px); }
@media (min-width: 1000px) {
  .detail-hero-grid { column-gap: clamp(42px, 7vw, 104px); row-gap: clamp(26px, 3vw, 42px); }
  .detail-hero-intro { grid-column: 1 / -1; }
  .detail-hero-copy { grid-column: 1; }
  .detail-summary { grid-column: 2; align-self: stretch; }
  .detail-hero h1.detail-hero-title-single-line,
  .detail-heading h2.detail-heading-single-line { white-space: nowrap; }
  .detail-hero h1.detail-hero-title-single-line { max-width: none; font-size: clamp(42px, 3.8vw, 56px); }
  .detail-heading h2.detail-heading-single-line { font-size: clamp(24px, 2.2vw, 32px); }
}
.detail-hero-lead { max-width: 760px; margin-top: 36px; padding-left: 24px; border-left: 1px solid var(--line); }
.detail-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 30px; }
.detail-hero-actions .button { min-width: min(100%, 250px); }
.detail-hero-actions .detail-back { font-size: 13px; font-weight: 700; }
.detail-summary {
  display: grid;
  grid-template-columns: minmax(92px, .68fr) minmax(0, 1.32fr);
  align-self: end;
  padding: 0;
  border: 1px solid var(--line);
  border-top: 5px solid var(--red);
  box-shadow: none;
}
.detail-summary dt,
.detail-summary dd { margin: 0; padding: 16px 18px; border-top: 1px solid var(--line); }
.detail-summary dt { display: flex; align-items: center; background: var(--paper); }
.detail-summary dd { display: flex; align-items: center; border-left: 1px solid var(--line); font-size: 13px; }
.detail-summary dt:first-of-type,
.detail-summary dt:first-of-type + dd { border-top: 0; }

.detail-section { position: relative; padding-block: clamp(86px, 10vw, 144px); }
.detail-section.alt { background: #111b29; }
.detail-section > .wrap { position: relative; }
.detail-section[id] { scroll-margin-top: 92px; }
.detail-heading {
  position: relative;
  grid-template-columns: minmax(240px, .72fr) minmax(0, 1.28fr);
  padding-top: 28px;
  border-top: 2px solid var(--line);
}
.detail-heading h2 { max-width: 620px; font-size: clamp(34px, 4.6vw, 62px); line-height: 1.2; }
.detail-heading > div > p { position: relative; z-index: 1; max-width: 640px; font-size: 16px; }
.detail-grid {
  gap: 0;
  margin-top: clamp(54px, 7vw, 86px);
  border: 0;
  border-block: 1px solid var(--line);
  background: transparent;
}
.detail-card { min-height: 300px; padding: clamp(30px, 3.5vw, 48px); border-right: 1px solid var(--line); }
.detail-card:last-child { border-right: 0; }
.detail-card .card-label { display: flex; align-items: center; gap: 10px; margin-bottom: 38px; }
.detail-card .card-label::before { width: 8px; height: 8px; border-radius: 50%; background: var(--red); content: ""; }
.detail-card h3 { font-size: clamp(20px, 2vw, 27px); }
.detail-card p { line-height: 1.9; }
.detail-list { counter-reset: detail-item; margin-top: clamp(48px, 7vw, 78px); border-top-color: var(--line); }
.detail-list li {
  grid-template-columns: 52px minmax(190px, .68fr) minmax(0, 1.32fr);
  gap: clamp(18px, 3vw, 40px);
  align-items: start;
  padding: 30px 0;
  counter-increment: detail-item;
}
.detail-list li::before { color: var(--red); content: "0" counter(detail-item); font: 800 12px/1.5 var(--utility); letter-spacing: .08em; }
.detail-list strong { font-size: clamp(17px, 1.6vw, 21px); }
.detail-list span { line-height: 1.85; }
.detail-boundary { gap: 0; margin-top: clamp(50px, 7vw, 78px); border: 1px solid var(--line); }
.detail-boundary article { min-height: 330px; padding: clamp(34px, 4.5vw, 58px); border: 0; }
.detail-boundary article:first-child { border-top: 6px solid var(--red); }
.detail-boundary article:last-child { border-left: 1px solid var(--line); }
.detail-boundary h3 { padding-bottom: 20px; border-bottom: 1px solid currentColor; }
.detail-boundary ul { line-height: 1.85; }
.detail-visual { margin-top: clamp(52px, 7vw, 82px); border-color: var(--line); }
.detail-visual figcaption { border-top-color: var(--line); }
.visual-steps li { padding: 14px 20px; }
.visual-steps li::before { margin-bottom: 8px; }
.visual-compare { background: #192a3d; }
.visual-compare span { padding: 22px 28px; }
.detail-price {
  grid-template-columns: .85fr 1.15fr;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #192a3d;
  color: #fff;
}
.detail-price > div { min-height: 330px; padding: clamp(38px, 5vw, 70px); }
.detail-price > div:first-child { display: flex; flex-direction: column; justify-content: center; border-right: 1px solid #555; }
.detail-price > div:last-child { display: flex; flex-direction: column; justify-content: center; }
.detail-price-plan-name { margin: 0 0 18px; color: #fff; font-size: clamp(20px, 2.2vw, 28px); line-height: 1.35; }
.detail-price strong { color: var(--red); }
.detail-price h2 { margin: 0; color: #fff; font-size: clamp(29px, 3.5vw, 46px); }
.detail-price p { color: #ccc; }
.detail-price .detail-back { color: #fff; }
.detail-price .detail-back { border-color: #fff; background: transparent; }
.detail-price .detail-back:hover { border-color: #fff; background: #121e2b; color: var(--ink); }
.detail-cta { border-top: 5px solid var(--red); background: #192a3d; }
.detail-cta p { color: #ccc; }
.detail-cta .button { border-color: var(--red); background: var(--red); color: #fff; }
.detail-cta .button:hover { border-color: #fff; background: #121e2b; color: var(--ink); }
.detail-back { transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
.detail-back:hover { border-color: var(--red); background: #111b29; color: var(--red); }
.detail-back:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.detail-plan-grid { gap: 0; border-color: var(--line); background: #192a3d; }
.detail-plan { min-height: 490px; }
.detail-plan.featured { border-top: 6px solid var(--red); }
.website-plan-grid { gap: 0; border: 1px solid var(--line); }
.website-plan-card { border: 0; border-right: 1px solid var(--line); }
.website-plan-card:last-child { border-right: 0; }
.website-plan-card.featured { padding-top: clamp(28px, 3.2vw, 40px); border-top: 6px solid var(--red); box-shadow: none; }
.website-price-notes { border-color: var(--line); background: #192a3d; }
.website-sample-grid { gap: 0; border: 1px solid var(--line); }
.website-sample-card { overflow: visible; border: 0; border-right: 1px solid var(--line); }
.website-sample-card:last-child { border-right: 0; }
.website-sample-preview { aspect-ratio: 16 / 11; border-bottom-color: var(--line); }
.website-sample-preview span { background: var(--red); }
.website-sample-preview:hover span,
.website-sample-preview:focus-visible span { background: #192a3d; }
.website-sample-body { min-height: 390px; }
.website-sample-note { max-width: 780px; margin-top: 32px; }
.detail-sublog-screens { padding-block: 34px; border-block: 1px solid var(--line); }
.detail-related-links { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 30px; }
.detail-faq { margin-top: clamp(46px, 6vw, 72px); border-top: 1px solid var(--line); }
.detail-faq details { border-bottom: 1px solid var(--line); }
.detail-faq summary { position: relative; min-height: 64px; padding: 20px 58px 20px 48px; border: 1px solid var(--line); background: #121e2b; cursor: pointer; font-weight: 700; list-style: none; }
.detail-faq summary::-webkit-details-marker { display: none; }
.detail-faq summary::before { position: absolute; top: 20px; left: 17px; color: var(--red); content: "Q"; font: 800 12px/1.8 var(--utility); }
.detail-faq summary::after { position: absolute; top: 50%; right: 13px; display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid currentColor; content: "+"; font: 700 20px/1 var(--utility); transform: translateY(-50%); }
.detail-faq details[open] summary::after { content: "−"; }
.detail-faq summary:hover { border-color: var(--red); background: #111b29; color: var(--red); }
.detail-faq summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.detail-faq details p { max-width: 820px; margin: 0; padding: 0 48px 24px 36px; color: var(--muted); font-size: 14px; line-height: 1.9; }

.detail-page a:focus-visible,
.detail-page button:focus-visible { outline: 3px solid var(--red); outline-offset: 4px; }

@media (max-width: 820px) {
  .detail-page .wrap { width: min(100% - 36px, 1240px); }
  .detail-hero { padding: 120px 0 76px; }
  .detail-hero-grid { grid-template-columns: 1fr; }
  .detail-hero h1.detail-hero-title-single-line,
  .detail-heading h2.detail-heading-single-line { white-space: normal; }
  .detail-hero h1.detail-hero-title-single-line,
  .detail-hero h1.detail-hero-title-single-line-long { font-size: clamp(48px, 7vw, 92px); }
  .detail-heading h2.detail-heading-single-line { font-size: clamp(34px, 4.6vw, 62px); }
  .detail-summary { max-width: 620px; }
  .detail-heading { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .detail-card:last-child { border-bottom: 0; }
  .detail-list li { grid-template-columns: 44px 1fr; gap: 8px 14px; }
  .detail-list li span { grid-column: 2; }
  .detail-boundary { grid-template-columns: 1fr; }
  .detail-boundary article { min-height: auto; }
  .detail-boundary article:last-child { border-top: 1px solid var(--line); border-left: 0; }
  .detail-price { grid-template-columns: 1fr; }
  .detail-price > div { min-height: auto; }
  .detail-price > div:first-child { border-right: 0; border-bottom: 1px solid #555; }
  .website-plan-grid,
  .website-sample-grid { grid-template-columns: 1fr; }
  .website-plan-card,
  .website-sample-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .website-plan-card:last-child,
  .website-sample-card:last-child { border-bottom: 0; }
  .website-sample-body { min-height: auto; }
}

@media (max-width: 560px) {
  .detail-page .wrap { width: min(100% - 28px, 1240px); }
  .detail-hero h1 { font-size: clamp(36px, 10.5vw, 47px); line-height: 1.17; }
  .detail-hero h1.detail-hero-title-single-line.detail-hero-title-mobile-lines { font-size: clamp(32px, 10vw, 47px); }
  .detail-hero-title-mobile-lines > span,
  .detail-hero-title-mobile-lines > em { display: block; white-space: nowrap; }
  .detail-hero h1.detail-hero-title-single-line,
  .detail-hero h1.detail-hero-title-single-line-long { font-size: clamp(36px, 10.5vw, 47px); }
  .detail-hero h1.line-service-title span,
  .detail-hero h1.line-service-title em { white-space: normal; font-size: clamp(34px, 9.8vw, 45px); }
  .detail-hero-lead { padding-left: 16px; font-size: 15px; }
  .detail-summary { grid-template-columns: 86px minmax(0, 1fr); }
  .detail-summary dt,
  .detail-summary dd { padding: 14px 12px; }
  .detail-heading { padding-top: 22px; }
  .detail-hero-actions { align-items: stretch; flex-direction: column; }
  .detail-hero-actions .button { width: 100%; }
  .detail-hero-actions .detail-back { align-self: flex-start; }
  .detail-heading h2 { font-size: clamp(31px, 9.5vw, 43px); }
  .detail-heading h2.detail-heading-single-line { font-size: clamp(31px, 9.5vw, 43px); }
  .detail-card { padding: 32px 22px; }
  .detail-list li { padding: 24px 0; }
  .detail-price > div { padding: 34px 24px; }
  .detail-price strong { font-size: clamp(39px, 12vw, 57px); }
  .visual-steps { grid-template-columns: 1fr; }
  .visual-steps li { border-right: 0 !important; border-bottom: 1px solid var(--line); }
  .visual-steps li:last-child { border-bottom: 0; }
  .website-sample-preview { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .website-sample-preview img,
  .detail-back { transition: none; }
}

/* Latest HP production page, isolated from the other detail pages. */
.website-production-page .detail-hero { padding-top: clamp(120px, 10vw, 150px); }
.detail-hero h1.fixed-hero-title > span,
.detail-hero h1.fixed-hero-title > em,
.detail-hero h1.fixed-hero-title > em > span {
  display: block;
  width: fit-content;
  white-space: nowrap;
  font-size: inherit;
}
.website-showcase-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 18px; margin-top: 58px; }
.website-showcase-card { min-width: 0; }
.website-showcase-card > a { display: block; color: var(--ink); text-decoration: none; }
.website-showcase-frame { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--line); background: #111b29; }
.website-showcase-frame::after { position: absolute; inset: 0; border: 0 solid var(--red); content: ""; pointer-events: none; transition: border-width .18s ease; }
.website-showcase-frame iframe { position: absolute; inset: 0; width: 400%; height: 400%; border: 0; transform: scale(.25); transform-origin: left top; pointer-events: none; }
.website-showcase-meta { display: flex; min-height: 52px; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-top: 0; background: #121e2b; }
.website-showcase-meta strong { font-size: 15px; }
.website-showcase-meta small { color: var(--red); font: 800 10px/1.4 var(--utility); letter-spacing: .04em; white-space: nowrap; }
.website-showcase-card > a:hover .website-showcase-meta,
.website-showcase-card > a:focus-visible .website-showcase-meta { border-color: var(--red); background: #111b29; color: var(--red); }
.website-showcase-card a:hover .website-showcase-frame::after,
.website-showcase-card a:focus-visible .website-showcase-frame::after { border-width: 7px; }
.website-production-page main { display: flex; flex-direction: column; }
.website-production-page .detail-hero { order: 1; }
.website-production-page .website-profile-section { order: 2; }
.website-production-page .website-samples-section { order: 3; }
.website-production-page .website-plans-section { order: 4; }
.website-production-page .website-production-scope { order: 5; }
.website-production-page #website-faq { order: 6; }
.website-production-page .detail-cta { order: 7; }
.website-scope-divider { height: 1px; margin: 72px 0; background: var(--line); }
.website-local-note { margin: 18px 0 0; padding-left: 17px; border-left: 3px solid var(--red); font-weight: 700; line-height: 1.8; }
.website-price-example { margin: 26px 0 0; padding: 22px 24px; border: 1px solid var(--line); background: #121e2b; line-height: 1.9; }
.website-price-example strong { display: block; margin-bottom: 4px; color: var(--red); font: 800 11px/1.4 var(--utility); letter-spacing: .08em; }
.website-profile-section { background: var(--paper); }
.website-profile-card { display: grid; grid-template-columns: .8fr 1.2fr; border: 1px solid var(--line); }
.website-profile-card > div { padding: clamp(28px, 4vw, 52px); }
.website-profile-card h3,
.website-connected-support h3 { margin: 8px 0 16px; font-size: clamp(26px, 3vw, 40px); line-height: 1.2; }
.website-profile-copy p,
.website-connected-support > p { line-height: 1.9; }
.website-profile-card > div + div { border-left: 1px solid var(--line); }
.website-profile-location { margin: 0; color: var(--muted); font-weight: 700; }
.website-profile-copy p:first-child { margin-top: 0; }
.website-profile-copy .detail-back { display: inline-block; margin-top: 12px; }
.website-showcase-more { margin-top: 34px; }
.website-showcase-more summary { display: flex; min-height: 60px; align-items: center; justify-content: space-between; padding: 16px 18px; border: 1px solid var(--line); background: #121e2b; font-weight: 800; cursor: pointer; list-style: none; }
.website-showcase-more summary::-webkit-details-marker { display: none; }
.website-showcase-more summary span { color: var(--red); font-size: 24px; line-height: 1; transition: transform .18s ease; }
.website-showcase-more[open] summary span { transform: rotate(45deg); }
.website-showcase-more summary:hover { border-color: var(--red); background: #111b29; color: var(--red); }
.website-showcase-more summary:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.website-showcase-more .website-showcase-grid { margin-top: 24px; }
.website-connected-support { margin-top: 54px; padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line); background: var(--paper); }
.website-connected-support .detail-related-links { margin-top: 22px; }
.website-consultation-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.detail-cta .website-line-button { border-color: #06c755; background: #06c755; color: #071f0f; }
.detail-cta .website-line-button:hover,
.detail-cta .website-line-button:focus-visible { border-color: #fff; background: #121e2b; color: var(--ink); }
.website-consultation-note { margin: 18px auto 0; font-size: 13px; }

@media (min-width: 821px) and (max-width: 960px) {
  .detail-hero h1.website-hero-title { font-size: 6.7vw; }
}

@media (max-width: 820px) {
  .website-showcase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .website-profile-card { grid-template-columns: 1fr; }
  .website-profile-card > div + div { border-top: 1px solid var(--line); border-left: 0; }
}

@media (max-width: 560px) {
  .website-showcase-grid { grid-template-columns: 1fr; margin-top: 40px; }
  .website-showcase-meta { padding-top: 12px; }
  .website-showcase-more .website-showcase-grid { margin-top: 20px; }
  .website-consultation-actions { align-items: stretch; flex-direction: column; }
  .website-consultation-actions .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .website-showcase-frame::after,
  .website-showcase-more summary span { transition: none; }
}