/* CyanDesk landing page — loaded after styles.css and product.css. Everything is scoped to body.cyandesk, so no other page changes. */

body.cyandesk { --orange: #0e7490; --orange-dark: #0b5f75; --cyan: #0891b2; --cyan-bright: #22d3ee; --cyan-50: #ecfafd; }
.cyandesk .hero h1 em { color: var(--cyan); }
.cyandesk .feature .tag, .cyandesk .tier .level { color: var(--orange); }
.cyandesk .step::before { background: var(--cyan); }
.cyandesk .week { border-top-color: var(--cyan); }
.cyandesk .card-icon.is-cyan { background: var(--cyan-50); color: var(--cyan); }
.cyandesk .card-icon.is-cyan svg { stroke: currentColor; }
.cyandesk .stat b i { color: var(--cyan-bright); }
.cyandesk .callout { background: var(--cyan-50); border-color: #bfeaf4; }
.cyandesk .callout strong { color: var(--orange); }
.cyandesk .product-mark-lg { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.cyandesk .product-mark-lg img { width: 52px; height: 52px; border-radius: 12px; box-shadow: var(--shadow); }
.cyandesk .product-mark-lg span { font: 700 22px var(--font-display); color: var(--navy-900); letter-spacing: -.01em; }

/* ---------- device frames ---------- */
.dev-laptop { position: relative; width: 100%; }
/* A Googlebook-style laptop (modelled on the HP Googlebook 14c): dark blue anodised aluminium lid and deck, very thin black bezels, webcam in the top bezel. */
.dev-laptop .screen { position: relative; background: #04080a; border: 1px solid #4f6c86; border-radius: 12px 12px 3px 3px; padding: 7px 7px 9px; box-shadow: var(--shadow-lg); }
.dev-laptop .screen::before { content: ""; position: absolute; top: 2px; left: 50%; width: 4px; height: 4px; transform: translateX(-50%); border-radius: 50%; background: #1c2a33; box-shadow: inset 0 0 0 1px #0d161c; }
.dev-laptop .screen img { display: block; width: 100%; height: auto; border-radius: 3px; background: #fff; }
/* the base: a slim slab in atmospheric blue with a shallow front lip, seen edge-on */
.dev-laptop .base { height: 15px; margin: 0 -2.5%; border-radius: 0 0 14px 14px / 0 0 9px 9px; position: relative;
  background: linear-gradient(#5d7c97 0, #3f5d78 38%, #2b445b 100%); box-shadow: 0 12px 26px rgba(8,27,35,.22), inset 0 1px 0 rgba(255,255,255,.28); }
.dev-laptop .base::before { content: ""; position: absolute; left: 50%; top: 0; width: 12%; height: 4px; transform: translateX(-50%); background: linear-gradient(#26394a, #36506a); border-radius: 0 0 6px 6px; }
.dev-laptop .base::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: 3px; height: 1px; background: rgba(255,255,255,.12); }

/* A Galaxy Tab S12+-style tablet (landscape): flat silver aluminium frame, even black bezels, front camera in the top bezel, power and volume keys on the top edge.
   Radii are percentages (horizontal / vertical) so the corners stay round at any width. */
.dev-tablet { position: relative; background: #05090b; border: 9px solid #05090b; border-radius: 4.2% / 6.8%; box-shadow: 0 0 0 2px #c3c9ce, 0 0 0 3px #7e8a93, var(--shadow-lg); }
.dev-tablet::before { content: ""; position: absolute; top: -6px; left: 50%; width: 5px; height: 5px; transform: translateX(-50%); border-radius: 50%; background: #0f1a22; box-shadow: 0 0 0 1px #1c2a33, inset 0 0 0 1px rgba(90,120,150,.4); }
.dev-tablet::after { content: ""; position: absolute; top: -13px; right: 11%; width: 26%; height: 3px; border-radius: 2px; background: linear-gradient(to right, #aab2b8 0 24%, transparent 24% 36%, #aab2b8 36% 100%); }
.dev-tablet img { display: block; width: 100%; height: auto; border-radius: 2.2% / 3.6%; background: #fff; }

/* a Pixel 10-style phone (body 72 x 152.8 mm, screen 20:9): flat rounded frame, thin even bezel, centred punch-hole camera, power and volume keys on the right.
   Radii are percentages (horizontal / vertical) so the corners stay round at any width. */
.dev-phone { position: relative; container-type: inline-size; background: #05090b; border-radius: 12% / 5.6%; box-shadow: var(--shadow-lg); }
/* the bezel and metal edge are drawn on the screenshot itself in cqw (a share of the phone's own width), so the frame looks identical at every size; the px values are the fallback */
.dev-phone img { display: block; width: 100%; height: auto; aspect-ratio: 72 / 152.8; object-fit: contain; object-position: center top; background: #15181e;
  border: 5px solid #05090b; border: 4.4cqw solid #05090b; border-radius: 12% / 5.6%;
  box-shadow: 0 0 0 2px #59646a, 0 0 0 3px #2a3236; box-shadow: 0 0 0 0.9cqw #59646a, 0 0 0 1.4cqw #2a3236; }
.dev-phone::before { content: ""; position: absolute; z-index: 2; top: 1.5%; left: 50%; width: 4.6%; min-width: 5px; aspect-ratio: 1; transform: translateX(-50%); border-radius: 50%; background: #000; box-shadow: 0 0 0 1px rgba(255,255,255,.1), inset 0 0 0 1px rgba(80,110,140,.35); }
.dev-phone::after { content: ""; position: absolute; right: -3.4%; top: 14%; width: max(2px, 1.2%); height: 34%; border-radius: 2px;
  background: linear-gradient(to bottom, transparent 0 4%, #59646a 4% 22%, transparent 22% 40%, #59646a 40% 100%); }

/* the hero group: a laptop with a tablet and a phone in front of it */
.device-stack { position: relative; width: 100%; max-width: 640px; margin: 0 auto; padding-bottom: 40px; }
.device-stack .dev-tablet { position: absolute; width: 46%; left: -6%; bottom: 0; z-index: 2; }
.device-stack .dev-phone { position: absolute; width: 12.5%; right: -1%; bottom: 8px; z-index: 3; }

/* a row of the three */
.trio { display: grid; grid-template-columns: 3.2fr 2.6fr 0.95fr; gap: 28px; align-items: end; }
.trio .cap, .shot-cap { display: block; margin-top: 14px; font: 600 14px var(--font-display); color: var(--navy-900); text-align: center; }
.trio .cap small, .shot-cap small { display: block; font: 400 13.5px var(--font-sans); color: var(--ink-mute); margin-top: 2px; }

/* text beside a screenshot */
.showcase { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; align-items: center; }
.showcase.flip { grid-template-columns: 1.35fr 1fr; }
.showcase.flip .showcase-copy { order: 2; }
.showcase + .showcase { margin-top: 96px; }
.showcase-copy h3 { margin: 0 0 14px; font: 700 clamp(24px, 2.6vw, 32px)/1.2 var(--font-display); color: var(--navy-900); letter-spacing: -.015em; }
.showcase-copy p { color: var(--ink-soft); margin: 0 0 16px; }
.showcase-copy .checks { margin-top: 18px; }

/* Google services */
.g-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.g-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 26px 24px; display: flex; flex-direction: column; gap: 6px; }
.g-card .g-top { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.g-card .g-dot { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--cyan-50); color: var(--cyan); }
.g-card .g-dot svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.g-card h3 { margin: 0; font: 600 18px var(--font-display); color: var(--navy-900); }
.g-card p { margin: 0; font-size: 15.5px; color: var(--ink-soft); }
.privacy-band { background: radial-gradient(700px 300px at 90% 0%, rgba(34,211,238,.28), transparent 70%), var(--navy-900); color: var(--white); border-radius: 22px; padding: 44px 48px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; margin-top: 44px; }
.privacy-band h3 { margin: 0 0 10px; font: 700 clamp(24px, 2.6vw, 32px)/1.2 var(--font-display); color: var(--white); }
.privacy-band p { margin: 0; color: #c3d4da; font-size: 17px; }
.flow { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; }
.flow .node { padding: 12px 18px; border-radius: 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); font: 600 14px var(--font-display); text-align: center; }
.flow .node.you { background: var(--cyan); border-color: var(--cyan); }
.flow .arrow { color: var(--cyan-bright); font-size: 20px; }
.flow .node.off { opacity: .55; text-decoration: line-through; }

/* FAQ */
.faq { max-width: 820px; margin: 0 auto; display: grid; gap: 12px; }
.faq details { background: var(--white); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; }
.faq summary { cursor: pointer; font: 600 17px var(--font-display); color: var(--navy-900); list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 22px; line-height: 1; color: var(--cyan); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 12px 0 0; color: var(--ink-soft); font-size: 16px; }


@media (max-width: 980px) {
  .trio { grid-template-columns: 1fr 1fr; }
  .trio > :first-child { grid-column: 1 / -1; }
  .trio .dev-phone { max-width: 170px; margin: 0 auto; }
  .showcase, .showcase.flip { grid-template-columns: 1fr; gap: 32px; }
  .showcase.flip .showcase-copy { order: 0; }
  .showcase + .showcase { margin-top: 64px; }
  .g-grid { grid-template-columns: 1fr 1fr; }
  .privacy-band { grid-template-columns: 1fr; padding: 32px 26px; }
  .device-stack { max-width: 520px; }
}
@media (max-width: 620px) {
  .g-grid { grid-template-columns: 1fr; }
  .trio { grid-template-columns: 1fr; }
  .device-stack { padding-bottom: 0; }
  .device-stack .dev-tablet { display: none; }
  .device-stack .dev-phone { width: 22%; right: 4%; bottom: -10px; }
}

/* CyanDesk's own header and footer brand */
.cyandesk .cd-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.cyandesk .cd-brand img { width: 38px; height: 38px; border-radius: 9px; margin: 0; flex: none; }
.cyandesk .cd-brand span { font: 700 21px/1 var(--font-display); color: var(--navy-900); letter-spacing: -.01em; }
.cyandesk .cd-foot-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.cyandesk .cd-foot-brand img { width: 36px; height: 36px; border-radius: 9px; margin: 0; flex: none; }   /* margin: 0 cancels the footer logo's 18px bottom margin, which pushed the icon above the text */
.cyandesk .cd-foot-brand span { font: 700 21px/1 var(--font-display); color: var(--white); }
.cyandesk .site-footer .footer-grid a:hover { color: var(--cyan-bright); }

/* ---------- the "Taurine Apps" band on the dealer home page (not scoped: the home page is not a .cyandesk page) ---------- */
.btn-cyan { background: #0e7490; color: #fff; }
.btn-cyan:hover { background: #0b5f75; }
.apps-band { background: linear-gradient(135deg, #ecfafd 0%, #ffffff 55%, #e4f5fa 100%); border-top: 1px solid #bfeaf4; border-bottom: 1px solid #bfeaf4; padding: 96px 0; }
.apps-band .eyebrow { color: #0e7490; }
.apps-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; }
.apps-title { display: flex; align-items: center; gap: 16px; margin: 6px 0 16px; }
.apps-title img { width: 56px; height: 56px; border-radius: 13px; box-shadow: var(--shadow); }
.apps-title h2 { margin: 0; font: 700 clamp(32px, 4vw, 46px)/1.1 var(--font-display); color: var(--navy-900); letter-spacing: -.02em; }
.apps-lead { font-size: 18px; color: var(--ink-soft); margin: 0 0 14px; }
.apps-note { font-size: 15.5px; color: var(--ink-mute); margin: 0 0 26px; }
.apps-band .device-stack { max-width: 560px; }
.apps-band .device-stack .dev-phone { width: 14%; right: -1%; }
@media (max-width: 980px) { .apps-grid { grid-template-columns: 1fr; gap: 40px; } .apps-band { padding: 64px 0; } .apps-art { order: -1; } }

/* "coming soon" in place of a download button until the Play Store listing is live */
.cyandesk .cd-soon { cursor: default; user-select: none; }
.cyandesk .btn-primary.cd-soon:hover { background: var(--orange); }
.cyandesk .btn-light.cd-soon:hover { background: var(--white); }
.cyandesk .btn:active.cd-soon { transform: none; }