/* tpl-about-contact.css: GENERATED from prototype about.css, contact.css (same order as the prototype head). */
/* ---- about.css ---- */
/* ==========================================================================
   Atheer Care prototype — About page styles (owner: Designer 3)
   Requires ../tokens.css + styles.css (Designer 1). Shared components (header,
   hero shell, process, cards, buttons, form, sheet, sticky bar, footer) are NOT
   restyled here. Only About-specific components live in this file.
   Rules: tokens only · logical properties only · transform/opacity motion only ·
   content visible without JS · no letter-spacing on Arabic.
   STABLE API: the facts_* spec-sheet classes may be reused by other pages
   (Designer 5, sector pages). Do not rename them.
   ========================================================================== */

/* ---------- Breadcrumb bar ----------
   IDENTICAL to the two .section_breadcrumb rules in service.css (Designer 1).
   Duplicated here only because page CSS may not link another page's CSS.
   → Proposal for Designer 1: promote to styles.css and delete both copies. */
.section_breadcrumb { background: var(--bg-page); }
.section_breadcrumb .breadcrumb_list { min-block-size: 3rem; }

/* ---------- Opening (reuses .section_hero / .hero_component shell) ---------- */
.about-hero_descriptor {                                     /* entity descriptor: a <p> under the H1 (copy G.1 #4) */
  font-family: var(--font-heading); font-size: var(--font-size-h4); line-height: var(--lh-h4); font-weight: 600;
  color: var(--text-accent); margin-block-start: -0.5rem;
}
.about-hero_lead { color: var(--text-primary); }            /* answer-first paragraph reads as primary text */
/* PROTOTYPE-ONLY: [[TOKEN]] placeholders in the first viewport use a system font so they don't re-wrap the
   LCP paragraph when Readex Latin swaps in (measured CLS 0.27 at 768 px with tokens, 0.003 with real values).
   Real values render in the page font; delete this rule at build. */
.about-hero_disambiguation { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted); max-inline-size: 38rem; }
.about-hero_ids .hero_proof-item { max-inline-size: 100%; }
.about-hero_actions .button { flex: 1 1 auto; }
@media (min-width: 479px) { .about-hero_actions .button { flex: 0 0 auto; } }
.about-hero_visual { border-radius: var(--radius-large); overflow: hidden; }
.about-hero_visual .placeholder-media { aspect-ratio: 4 / 3; }
@media (min-width: 992px) { .about-hero_visual .placeholder-media { aspect-ratio: 4 / 5; } }

/* ---------- Shared small helpers (page-scoped) ---------- */
.about_center { justify-content: center; }
.about_links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 1.5rem; margin-block-start: 0.75rem; padding: 0; list-style: none; }
.about_hub-link { margin-block-start: 1rem; }

/* ---------- Why we exist + founder block ---------- */
.why_component { display: grid; gap: var(--space-large); align-items: start; }
@media (min-width: 992px) { .why_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xlarge); } }
.why_text h2 { margin-block-start: 0.75rem; }
.why_text .text-rich-text a { min-block-size: var(--touch-min); display: inline-flex; align-items: center; }
.founder_card {
  display: grid; overflow: hidden; background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-large); box-shadow: var(--shadow-small);
}
.founder_media .placeholder-media { aspect-ratio: 16 / 9; }
.founder_body { display: grid; gap: 0.75rem; padding: 1.25rem 1.5rem 1.5rem; }
.founder_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
.founder_quote { padding-inline-start: 1rem; border-inline-start: 2px solid var(--border-subtle); color: var(--text-primary); }
.founder_quote footer { margin-block-start: 0.25rem; font-size: var(--font-size-small); color: var(--text-muted); }

/* ---------- Commitments you can check (stack as cards on mobile, copy G.1 #7) ---------- */
.principles_list { display: grid; gap: var(--gutter); padding: 0; list-style: none; }
@media (min-width: 768px) { .principles_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .principles_list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.principles_item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.875rem; align-content: start;
  padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.principles_icon {
  inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center;
  border-radius: var(--radius-medium); background: var(--bg-accent-tint); color: var(--text-accent);
}
.principles_icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.principles_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); align-self: center; }
.principles_detail, .principles_verify { grid-column: 1 / -1; }
.principles_detail { color: var(--text-secondary); }
.principles_verify { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); padding: 0.75rem; background: var(--bg-alt); border-radius: var(--radius-medium); }
.principles_verify-label { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }

/* ---------- Team ---------- */
.team_component { display: grid; gap: var(--space-medium); align-items: start; }
@media (min-width: 992px) { .team_component { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-large); } }
.team-lead_card { padding: 0; overflow: hidden; gap: 0; }
.team-lead_media .placeholder-media { aspect-ratio: 4 / 3; border-radius: 0; }
.team-lead_body { display: grid; gap: 0.5rem; padding: 1.25rem 1.5rem 1.5rem; }
.team-lead_role { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-accent); }
.team-lead_line { color: var(--text-secondary); }
.team-lead_creds { padding-block-start: 0.5rem; border-block-start: 1px solid var(--border-subtle); color: var(--text-secondary); overflow-wrap: anywhere; }
.team-lead_creds-title { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-primary); }
.team-lead_card .card_footer { margin-block-start: 0.5rem; flex-wrap: wrap; }
.crew_block { display: grid; gap: 1rem; }
.crew_facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin: 0; }
.crew_fact { padding: 0.75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium); }
.crew_fact dt { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); }
.crew_fact dd { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.crew_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem 0.5rem; padding: 0; list-style: none; }
.crew_item { min-inline-size: 0; }
.crew_item figure { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.375rem; margin: 0; }
.crew_item code, .founder_media code, .team-lead_media code { overflow-wrap: anywhere; max-inline-size: 100%; }
.crew_item .placeholder-media { aspect-ratio: 4 / 3; border-radius: var(--radius-medium); font-size: 0.75rem; }
.crew_item figcaption { font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }
.safety_note {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; align-items: start;
  padding: 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large);
}
.safety_icon { inline-size: 2.75rem; block-size: 2.75rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500); }
.safety_icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
.safety_body { display: grid; gap: 0.5rem; color: var(--text-secondary); }

/* ---------- Equipment & materials (reuses .card-grid / .card / .card_icon) ---------- */
.equipment_list { display: grid; gap: 0.375rem; padding: 0; list-style: none; font-size: var(--font-size-small); overflow-wrap: anywhere; }
.equipment_spec { margin-block-start: auto; padding-block-start: 0.625rem; border-block-start: 1px dashed var(--border-subtle); font-size: var(--font-size-small); color: var(--text-muted); overflow-wrap: anywhere; }

/* ---------- Facts: procurement spec sheet (STABLE class names; reusable) ----------
   Reads as a printed supplier-data sheet on certificate paper: dark title strip,
   label/value rows with hairlines, Western digits, LTR isolation for IDs. */
.facts_component { display: grid; gap: var(--space-medium); align-items: start; max-inline-size: 56rem; }
.facts_sheet { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-large); overflow: hidden; }
.facts_head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.875rem 1.25rem; background: var(--bg-inverse); color: var(--text-inverse);
}
.facts_title { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 600; }
.facts_title .icon-embed-small { color: var(--amber-500); }
.facts_updated { font-size: var(--font-size-small); color: var(--steel-300); }
.facts_head .placeholder { color: var(--amber-500); background: var(--steel-800); border-color: var(--amber-500); }
.facts_list { margin: 0; }
.facts_row { display: grid; gap: 0.125rem; padding: 0.75rem 1.25rem; border-block-start: 1px solid var(--border-subtle); }
.facts_row:first-child { border-block-start: 0; }
.facts_row:nth-child(even) { background: var(--bg-alt); }
.facts_row dt { font-family: var(--font-heading); font-size: var(--font-size-small); font-weight: 600; color: var(--text-muted); line-height: var(--lh-small); }
.facts_row dd { color: var(--text-primary); overflow-wrap: anywhere; min-inline-size: 0; }
.facts_row dd a[href^="tel:"] { display: inline-flex; align-items: center; min-block-size: var(--touch-min); color: var(--text-primary); font-family: var(--font-heading); font-weight: 600; }
@media (min-width: 768px) {
  .facts_row { grid-template-columns: minmax(10rem, 3fr) minmax(0, 7fr); gap: 1rem; align-items: baseline; }
}
.facts_verify { display: inline-flex; align-items: center; gap: 0.25rem; min-block-size: var(--touch-min); font-size: var(--font-size-small); }
.facts_row.is-conditional { background: var(--bg-surface); outline: 1px dashed var(--border-control); outline-offset: -6px; }
.facts_conditional-tag { display: inline-block; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }
.facts_side { display: grid; gap: 1rem; }        /* optional aside next to the sheet (actions, notes) */
.facts_actions { display: grid; gap: 0.625rem; }
@media (min-width: 992px) { .facts_component.has-side { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--space-large); max-inline-size: none; } }

/* ---------- Who we serve: link lives in the card footer, whole card clickable ---------- */
.sector_link { text-decoration: none; min-block-size: var(--touch-min); }
.sector_link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* extended hit area */
.card.is-link:focus-within .sector_link:focus-visible { outline: none; }

/* ---------- Client logos (permission-gated) ---------- */
.logos_grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; padding: 0; list-style: none; }
@media (min-width: 768px) { .logos_grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.logos_item {
  display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 0.75rem;
  background: var(--bg-surface); border: 1px dashed var(--border-control); border-radius: var(--radius-medium);
}
/* Real logos (Webflow CMS image): grayscale is a static paint effect, never animated. */
.logos_item img { max-inline-size: 80%; max-block-size: 60%; object-fit: contain; filter: grayscale(1); opacity: 0.8; }
.logos_rule { margin-block-start: 1rem; display: flex; justify-content: center; }

/* ---------- For procurement: company profile ---------- */
.profile_component {
  display: grid; gap: 1rem 1.5rem; align-items: center; padding: 1.5rem;
  background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-large); box-shadow: var(--shadow-small);
}
@media (min-width: 768px) { .profile_component { grid-template-columns: auto minmax(0, 1fr); } }
@media (min-width: 992px) { .profile_component { grid-template-columns: auto minmax(0, 1fr) minmax(15rem, auto); padding: 2rem; } }
.profile_icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500); }
.profile_icon svg { inline-size: 2rem; block-size: 2rem; }
.profile_body { display: grid; gap: 0.5rem; min-inline-size: 0; }
.profile_meta { font-size: var(--font-size-small); color: var(--text-muted); overflow-wrap: anywhere; }
.profile_actions { display: grid; gap: 0.5rem; }
.profile_actions .button { inline-size: 100%; }
.profile_actions .button.is-text { justify-content: center; }
.profile_wa .icon-embed-small { color: var(--whatsapp-700); }
@media (min-width: 768px) and (max-width: 991px) { .profile_actions { grid-column: 1 / -1; grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---- contact.css ---- */
/* ==========================================================================
   Atheer Care prototype — /contact and /thank-you page styles (owner: Designer 3)
   Requires ../tokens.css + styles.css (Designer 1) + about.css (facts_*, profile_*,
   .section_breadcrumb). Page-specific components only. Tokens only · logical
   properties only · transform/opacity motion only · no letter-spacing on Arabic.
   ========================================================================== */

/* ---------- Hero grid: form above the fold on desktop, after the chooser on mobile ---------- */
.contact-hero_component {
  display: grid; gap: var(--space-large); align-items: start;
  grid-template-areas: "intro" "form" "next" "channels";
}
.contact-hero_intro { grid-area: intro; display: grid; gap: 1.25rem; min-inline-size: 0; }
.contact-hero_form { grid-area: form; min-inline-size: 0; }
.contact-hero_next { grid-area: next; min-inline-size: 0; }
.contact-hero_channels { grid-area: channels; min-inline-size: 0; }
@media (min-width: 992px) {
  .contact-hero_component {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-xlarge); row-gap: var(--space-large);
    grid-template-areas: "intro form" "next channels";
  }
}
.contact-hero_lead { color: var(--text-primary); }
.contact-side_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); margin-block-end: 1rem; }

/* ---------- Path chooser (A3): 2 real tabs + 1 link card ---------- */
.contact-path { display: grid; gap: 0.75rem; margin-block-start: 0.5rem; }
.contact-path_title { font-size: var(--font-size-h4); line-height: var(--lh-h4); }
html:not(.js) .contact-path_tabs { display: none; }   /* no JS = one long inspection form */
.contact-path_tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.625rem; }
.contact-path_tab {
  position: relative; display: grid; align-content: start; gap: 0.25rem; min-block-size: var(--touch-min);
  padding: 0.875rem 1rem; text-align: start; border-radius: var(--radius-large);
  background: transparent; border: 1.5px solid var(--border-control); color: var(--text-primary);
  transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) { .contact-path_tab:hover { background: var(--bg-chip-hover); } }
.contact-path_tab[aria-selected="true"] { border-color: var(--amber-500); background: var(--steel-800); }
.contact-path_tab-title { font-family: var(--font-heading); font-weight: 600; font-size: 1rem; line-height: 1.4; padding-inline-end: 1.5rem; }
.contact-path_tab-body { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted); }
.contact-path_check {                                        /* selected = check icon + border, never colour alone */
  position: absolute; inset-block-start: 0.75rem; inset-inline-end: 0.75rem; inline-size: 1.25rem; block-size: 1.25rem;
  color: var(--amber-500); opacity: 0; transform: scale(0.6);
  transition: opacity var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.contact-path_check svg { inline-size: 100%; block-size: 100%; }
.contact-path_tab[aria-selected="true"] .contact-path_check { opacity: 1; transform: none; }
@media (max-width: 478px) {                                  /* keep the form within ~1.5 screens at 375 px (copy D1 #6) */
  .contact-path_tab-body { display: none; }
  .contact-path_tab[aria-selected="true"] .contact-path_tab-body { display: block; }
  .contact-path_tabs { align-items: start; }
}

.contact-urgent {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.75rem; align-items: start;
  padding: 0.875rem 1rem; border-radius: var(--radius-large); border: 1px dashed var(--border-control);
}
.contact-urgent_icon { inline-size: 1.5rem; block-size: 1.5rem; color: var(--amber-500); margin-block-start: 0.125rem; }
.contact-urgent_icon svg { inline-size: 100%; block-size: 100%; }
.contact-urgent_title { font-family: var(--font-heading); font-weight: 600; }
.contact-urgent_body { display: grid; gap: 0.25rem; color: var(--text-secondary); }
.contact-urgent_actions { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
@media (min-width: 768px) {
  .contact-urgent { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .contact-urgent_actions { grid-column: auto; grid-template-columns: repeat(2, max-content); }
}

/* ---------- Form panel (tabpanel wrapper around the shared form) ---------- */
.contact-form_panel { display: grid; gap: 0.75rem; }
.contact-form_intro { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-secondary); padding: 0.75rem 1rem; border: 1px solid var(--steel-700); background: var(--steel-800); border-radius: var(--radius-medium); }
.contact-form_after { display: flex; flex-wrap: wrap; gap: 0 1.25rem; }
.contact-form_wa .icon-embed-small { color: var(--whatsapp-500); }
.contact-form_chain-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; padding: 0.5rem 0.75rem; background: var(--bg-accent-tint); border-radius: var(--radius-medium); color: var(--text-accent); }
.contact-form_chain-hint[hidden] { display: none; }
.contact-form_switch {
  min-block-size: 2.75rem; font-family: var(--font-heading); font-weight: 600; color: var(--text-accent);
  text-decoration: underline; text-underline-offset: 0.25em;
}

/* ---------- What happens next (A5): static vertical timeline ---------- */
.next-steps_list { position: relative; display: grid; gap: 1.25rem; padding: 0; margin: 0; list-style: none; }
.next-steps_list::before {                                   /* static connector (decorative, no motion) */
  content: ""; position: absolute; inset-inline-start: calc(1.125rem - 1px); inset-block: 1.25rem; inline-size: 2px; background: var(--border-subtle);
}
.next-steps_item { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.875rem; }
.next-steps_number {
  position: relative; z-index: 1; inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center;
  border-radius: var(--radius-round); background: var(--steel-800); color: var(--amber-500); border: 1.5px solid var(--amber-500);
  font-family: var(--font-heading); font-weight: 700; font-size: 1rem;
}
.next-steps_body { display: grid; gap: 0.25rem; color: var(--text-secondary); font-size: var(--font-size-small); line-height: var(--lh-small); }
.next-steps_title { font-size: 1.0625rem; line-height: 1.45; }
.next-steps_time { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; font-family: var(--font-heading); font-weight: 600; color: var(--text-accent); }

/* ---------- Direct channels (A6) ---------- */
.channels_list { display: grid; gap: 0.5rem; padding: 0; margin: 0; list-style: none; }
.channels_item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem 0.75rem; align-items: start;
  padding: 0.875rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium);
}
.channels_icon { inline-size: 2.25rem; block-size: 2.25rem; display: grid; place-items: center; border-radius: var(--radius-medium); background: var(--steel-900); color: var(--amber-500); }
.channels_icon.is-whatsapp { color: var(--whatsapp-500); }
.channels_icon svg { inline-size: 1.25rem; block-size: 1.25rem; }
.channels_body { display: grid; gap: 0.125rem; min-inline-size: 0; }
.channels_label { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.channels_value { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); overflow-wrap: anywhere; }
a.channels_value { display: inline-flex; align-items: center; min-block-size: var(--touch-min); text-decoration: underline; text-underline-offset: 0.25em; }
.channels_helper { font-size: var(--font-size-small); line-height: var(--lh-small); color: var(--text-muted); }
.channels_action { grid-column: 1 / -1; inline-size: 100%; }
@media (min-width: 479px) {
  .channels_item:has(.channels_action) { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .channels_action { grid-column: auto; inline-size: auto; }
}

/* ---------- Company details: map card beside the facts sheet ---------- */
.map_card { display: grid; gap: 0.5rem; margin: 0; }
.map_card .placeholder-media { aspect-ratio: 4 / 3; border-radius: var(--radius-large); }
.map_card img { inline-size: 100%; block-size: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-large); }

/* ---------- Trust strip (A8) ---------- */
.contact-trust_card { gap: 0.75rem; }
.contact-trust_card .card_footer { text-decoration: none; min-block-size: var(--touch-min); flex-wrap: wrap; }
.contact-trust_thumb .placeholder-media { aspect-ratio: 16 / 9; border-radius: var(--radius-medium); }
.contact-trust_reviews { margin-block-start: var(--gutter); }
@media (min-width: 992px) { .contact-trust_reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- FAQ footer line ---------- */
.contact-faq_more { max-inline-size: 52rem; margin: 1rem auto 0; color: var(--text-secondary); }
.contact-faq_more a { display: inline-flex; align-items: center; min-block-size: var(--touch-min); }

/* ==========================================================================
   /thank-you
   ========================================================================== */
.ty-hero_component { display: grid; gap: var(--space-large); align-items: start; }
@media (min-width: 992px) { .ty-hero_component { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-xlarge); } }
.ty-confirm { display: grid; gap: 1rem; }
.ty-confirm_icon { inline-size: 3.5rem; block-size: 3.5rem; display: grid; place-items: center; border-radius: var(--radius-round); background: var(--success-600); color: var(--white); }
.ty-confirm_icon svg { inline-size: 2rem; block-size: 2rem; }
.ty-confirm_ref { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-family: var(--font-heading); font-weight: 600; font-size: var(--font-size-large); }
.ty-confirm_ref bdi { padding: 0.125rem 0.625rem; border-radius: var(--radius-small); background: var(--steel-800); color: var(--amber-500); }
.ty-confirm_phone { color: var(--text-secondary); }
.ty-confirm_phone bdi { font-family: var(--font-heading); font-weight: 600; color: var(--text-primary); }
.ty-confirm_fix { font-size: var(--font-size-small); color: var(--text-muted); }
.ty-confirm_fix a { color: var(--text-accent); font-family: var(--font-heading); font-weight: 600; display: inline-flex; align-items: center; min-block-size: var(--touch-min); }
.ty-confirm_actions { display: grid; gap: 0.5rem; }
@media (min-width: 479px) { .ty-confirm_actions { grid-template-columns: max-content; } }
.ty-status { padding: 1.5rem; border-radius: var(--radius-large); background: var(--steel-800); border: 1px solid var(--steel-700); }
.ty-status_list { display: grid; gap: 1rem; padding: 0; margin: 0; list-style: none; }
.ty-status_item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start; color: var(--text-secondary); }
.ty-status_mark {
  inline-size: 1.75rem; block-size: 1.75rem; display: grid; place-items: center; border-radius: var(--radius-round);
  border: 1.5px solid var(--steel-600); color: var(--steel-300); font-family: var(--font-heading); font-weight: 700; font-size: 0.875rem;
}
.ty-status_item.is-done .ty-status_mark { background: var(--success-600); border-color: var(--success-600); color: var(--white); }
.ty-status_mark svg { inline-size: 1rem; block-size: 1rem; }
.ty-status_item.is-done { color: var(--text-primary); font-family: var(--font-heading); font-weight: 600; }
.ty-status_scope { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--steel-700); font-size: var(--font-size-small); color: var(--text-muted); }

.ty-prep_list { display: grid; gap: 0.625rem; padding: 0; margin: 0; list-style: none; counter-reset: prep; }
@media (min-width: 768px) { .ty-prep_list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ty-prep_item {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.75rem; align-items: start;
  padding: 1rem 1.25rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-medium);
}
.ty-prep_box { inline-size: 1.5rem; block-size: 1.5rem; margin-block-start: 0.2em; color: var(--steel-500); }
.ty-prep_box svg { inline-size: 100%; block-size: 100%; }

.ty-links { display: grid; gap: var(--gutter); }
@media (min-width: 768px) { .ty-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .ty-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ty-links .card_footer { text-decoration: none; min-block-size: var(--touch-min); flex-wrap: wrap; }
.ty-links .card_footer::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }