/* TapMedical design system + motion. Loads last on every page, over catalog.css / experience.css.
   One radius scale, one button, one card, one status pill, one easing. Motion animates only
   transform and opacity; with reduced motion or "Pause motion" every page is fully static. */

:root{
  --bg:#0a0d12;--surface:#10151d;--surface-2:#151c26;
  --line:#ffffff16;--line-strong:#ffffff2b;
  --ink:#f3f5f8;--muted:#a7b3c3;--blue:#6cb8f0;--accent:#6cb8f0;--wash:#1d5fd1;
  --r-sm:12px;--r-md:20px;--r-lg:32px;--r-pill:999px;
  --ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1);
  --header-h:80px;
  --section-y:clamp(72px,9vw,120px);
  --card-bg:linear-gradient(180deg,#ffffff0b,#ffffff03 55%,transparent),var(--surface);
  --card-shadow:inset 0 1px 0 #ffffff0d,0 20px 40px -24px #000d;
  background:var(--bg);
}
.app-tapgi{--accent:#77c4f8;--wash:#1d63d6}
.app-tapim{--accent:#a6c8ff;--wash:#4d55d6}
.app-taprn{--accent:#7db8ff;--wash:#1688d9}
.app-tappa{--accent:#67e3d5;--wash:#0e8f8a}
.app-tapnp{--accent:#ffa38f;--wash:#c8503c}
.app-taprvu{--accent:#80d5ff;--wash:#11869f}
.app-tapor{--accent:#87d9b6;--wash:#1d8a63}

/* Page canvas: static ambient light + faint grid (no animation, no filters) */
html{scroll-padding-top:calc(var(--header-h) + 16px)}
body{background:var(--bg);isolation:isolate}
body:before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60vmax 42vmax at 10% -8%,#2563c24a,transparent 70%),
  radial-gradient(50vmax 40vmax at 100% 22%,#0f7a6626,transparent 70%),
  radial-gradient(60vmax 45vmax at 45% 112%,#4334a826,transparent 70%)}
body:after{content:"";position:fixed;inset:0 0 auto;height:100vh;z-index:-1;pointer-events:none;
  background-image:radial-gradient(#ffffff10 1px,transparent 1.2px);background-size:32px 32px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 72%);mask-image:radial-gradient(ellipse 70% 70% at 50% 0%,#000,transparent 72%)}
::selection{background:#6cb8f055;color:#fff}

/* Header */
.site-header{background:#0a0d12cc;-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px);border-bottom:1px solid transparent;transition:border-color .4s var(--ease),background-color .4s var(--ease)}
.tm-scrolled .site-header{border-bottom-color:var(--line);background:#0a0d12e8}
.nav-inner{min-height:var(--header-h)}
.brand{transition:opacity .3s}
.brand:hover{text-decoration:none;opacity:.85}
.site-header nav a{position:relative;transition:color .25s}
.site-header nav a:after{content:"";position:absolute;left:0;right:0;bottom:9px;height:1.5px;border-radius:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease-out)}
.site-header nav a:hover{text-decoration:none}
.site-header nav a:hover:after{transform:scaleX(1)}
.tm-progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:60;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#3d8bfd,#6cb8f0,#87d9b6);will-change:transform}

/* Type */
h1,h2,h3{letter-spacing:-.04em}
h2{font-size:clamp(2rem,4vw,3.15rem);line-height:1.08}
.eyebrow{display:inline-flex;align-items:center;gap:10px;color:var(--accent);font-size:.74rem;letter-spacing:.16em;font-weight:650}
.eyebrow:before{content:"";width:18px;height:1.5px;border-radius:2px;background:currentColor;flex:none}
.section-heading{margin-bottom:clamp(28px,4vw,48px);gap:32px}
.section-heading .eyebrow{margin-bottom:14px}
.section-heading>p{max-width:360px;font-size:.95rem;line-height:1.55}
.family-hero h1 span,.detail-statement span{background:linear-gradient(95deg,var(--accent) 10%,#d8ecff 90%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}

/* Buttons and links */
.button{min-height:48px;padding:12px 22px;border-radius:var(--r-pill);gap:10px;font-weight:600;filter:none;transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .25s,border-color .25s,color .25s}
.button:hover{filter:none;transform:translateY(-2px)}
.button:active{transform:translateY(0) scale(.98)}
.button.primary,.hero-cta .button{background:var(--accent);color:#06121e;box-shadow:0 10px 26px -12px var(--accent)}
.button.primary:hover,.hero-cta .button:hover{box-shadow:0 16px 34px -12px var(--accent)}
.button.secondary{background:#ffffff08;color:var(--ink);border-color:var(--line-strong)}
.button.secondary:hover{background:#ffffff10;border-color:var(--accent)}
.button span[aria-hidden],.text-link span[aria-hidden],.portal-cta span[aria-hidden]{display:inline-block;transition:transform .35s var(--ease)}
.button:hover span[aria-hidden],.text-link:hover span[aria-hidden]{transform:translateX(3px)}
.text-link{display:inline-flex;align-items:center;gap:8px;font-weight:550;color:var(--accent)}
.text-link:hover{text-decoration:none}
.back-link{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:4px 14px;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--muted);font-size:.85rem;transition:color .25s,border-color .25s}
.back-link:hover{text-decoration:none;color:var(--ink);border-color:var(--line-strong)}
.detail-hero .back-link{display:inline-flex}
.motion-toggle{border-radius:var(--r-pill);border-color:var(--line-strong)}

/* Status pill */
.status{position:relative;display:inline-flex;align-items:center;gap:7px;height:26px;padding:0 11px;border-radius:var(--r-pill);border:1px solid;font-size:.74rem;font-weight:600;line-height:1;letter-spacing:.01em}
.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.status.live{color:#9be6c4;background:#0d2620;border-color:#1f5443}
.status.live:before{background:#5ee6a8}
.status.live:after{content:"";position:absolute;left:11px;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#5ee6a8;animation:tm-ping 2.6s var(--ease-out) infinite}
.status.soon{color:#f3d08f;background:#251d10;border-color:#574325}
@keyframes tm-ping{0%{transform:scale(1);opacity:.7}70%,100%{transform:scale(3.2);opacity:0}}
.compare-card .status,.portal-top .status,.detail-identity .status{font-size:.72rem;padding:0 10px}
.detail-identity .status{margin-left:4px}

/* Cards: one surface, one radius scale. Clickable cards lift; static ones don't. */
.compare-card,.support-link,.more-app,.story-feature,.pricing-panel,.access-callout,.faq-list details{background:var(--card-bg);border:1px solid var(--line);box-shadow:var(--card-shadow)}
.compare-card,.story-feature,.access-callout,.faq-list details,.support-link,.more-app{border-radius:var(--r-md)}
.pricing-panel,.experience-product .pricing-panel{border-radius:var(--r-lg);border-color:var(--line-strong)}
.compare-card,.support-link,.more-app{position:relative;isolation:isolate;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
.compare-card:hover,.support-link:hover,.more-app:hover{transform:translateY(-4px);border-color:var(--line-strong);box-shadow:var(--card-shadow),0 30px 50px -30px #000}
.support-link:hover,.more-app:hover{text-decoration:none}
.tm-glow{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .4s;z-index:-1;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 16%,transparent),transparent 60%)}
.tm-glow:after{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--accent) 70%,transparent),transparent 70%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
*:hover>.tm-glow{opacity:1}
.compare-card dl,.price-pair>div,.utility-links{border-color:var(--line)}
.compare-identity:hover{text-decoration:none}
.compare-card .text-link{color:var(--accent)}
.support-link>span:last-child{color:var(--accent);transition:transform .35s var(--ease)}
.support-link:hover>span:last-child,.more-app:hover>span:last-child{transform:translateX(3px)}
.more-app>span:last-child{transition:transform .35s var(--ease)}
.access-callout{border-left:1px solid var(--line);background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 12%,transparent),transparent 55%),var(--surface)}
.story-feature{border-radius:var(--r-md)}
.feature-number{color:var(--accent);font-variant-numeric:tabular-nums}

/* FAQ: a stack of cards with a rotating plus */
.faq-list{border-top:0;display:grid;gap:10px}
.faq-list details{padding:0 24px;border-bottom:1px solid var(--line);transition:border-color .3s,background-color .3s}
.faq-list details[open]{border-color:var(--line-strong)}
.faq-list summary{padding:20px 40px 20px 0}
.faq-list summary:after{content:"+";top:50%;right:0;width:28px;height:28px;margin-top:-14px;display:grid;place-items:center;border-radius:50%;border:1px solid var(--line);color:var(--accent);font-size:1.1rem;line-height:1;transition:transform .45s var(--ease),border-color .3s}
.faq-list details[open] summary:after{content:"+";transform:rotate(45deg);border-color:var(--line-strong)}
.faq-list details>div{padding:0 40px 22px 0}

/* Section rhythm */
.comparison,.faq-section,.contact,.feature-story,.access-intro,.more-apps,.experience-home .faq-section,.experience-home .comparison{padding-block:var(--section-y) 0;border-top:0}
.contact{padding-bottom:var(--section-y)}
.privacy-summary{padding-block:var(--section-y) 0}
.more-apps{padding-bottom:var(--section-y)}
.experience-product>section:last-child{padding-bottom:var(--section-y)}
.comparison-note{margin-top:22px}
.contact-bottom a{color:var(--accent)}

.more-app-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr))}

/* Footer */
.site-footer{position:relative;border-top:1px solid var(--line)}
.site-footer:before{content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:linear-gradient(90deg,transparent,#6cb8f0aa,#87d9b6aa,transparent)}
.footer-grid a:not(.brand){transition:color .25s}
.footer-grid a:not(.brand):hover{color:var(--ink);text-decoration:none}

/* Home hero: TapGI at the hub, the other six evenly spaced on one orbit (desktop/tablet); 4 + 3 grid on phones */
.family-hero{position:relative}
.family-hero-copy,.family-hero-art{will-change:transform,opacity}
.family-hero-art{isolation:isolate}
.family-icon:hover{text-decoration:none}
.family-icon .app-icon{animation:tm-float 7s ease-in-out infinite;transition:box-shadow .4s}
.family-icon:hover .app-icon{box-shadow:0 25px 55px #0009,0 0 0 1px #ffffff2a,0 0 44px -6px var(--accent)}
@keyframes tm-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:700px){.family-icon .app-icon{animation:none}}
@media(min-width:701px){
  .family-hero-art{--icon:100px;--d:122px;--r:156px;display:block;position:relative;width:calc(var(--r) * 1.732 + var(--icon) + 40px);height:calc(var(--r) * 2 + var(--icon) + 64px);max-width:none;justify-self:end;transform:none}
  .family-hero-art:before{content:"";position:absolute;left:50%;top:calc(50% - 12px);width:calc(var(--d) * 4.4);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;pointer-events:none;background:radial-gradient(circle,#2d6fd659,#2d6fd61c 42%,transparent 66%)}
  .family-hero-art:after{content:"";position:absolute;left:50%;top:calc(50% - 12px);width:calc(var(--r) * 2);aspect-ratio:1;translate:-50% -50%;z-index:-1;border-radius:50%;pointer-events:none;border:1px dashed #a6c8ff33;animation:tm-orbit 90s linear infinite}
  .family-icon,.family-icon:nth-child(n){position:absolute;left:calc(50% + var(--x,0px));top:calc(50% - 12px + var(--y,0px));width:var(--icon);margin:calc(var(--icon) / -2) 0 0 calc(var(--icon) / -2);grid-column:auto;justify-self:auto;transform:none;gap:10px;white-space:nowrap}
  .family-icon:nth-child(n):hover{transform:translateY(-5px)}
  .family-icon .app-icon{width:var(--icon);height:var(--icon)}
  .family-icon span{transform:none}
  .family-icon:nth-child(1){--x:0px;--y:0px}
  .family-icon:nth-child(2){--x:0px;--y:calc(var(--r) * -1)}
  .family-icon:nth-child(3){--x:calc(var(--r) * .866);--y:calc(var(--r) * -.5)}
  .family-icon:nth-child(4){--x:calc(var(--r) * .866);--y:calc(var(--r) * .5)}
  .family-icon:nth-child(5){--x:0px;--y:var(--r)}
  .family-icon:nth-child(6){--x:calc(var(--r) * -.866);--y:calc(var(--r) * .5)}
  .family-icon:nth-child(7){--x:calc(var(--r) * -.866);--y:calc(var(--r) * -.5)}
  .tm-motion .family-hero-copy{opacity:calc(1 - var(--hero,0) * 1.15);transform:translate3d(0,calc(var(--hero,0) * -70px),0)}
  .tm-motion .family-hero-art{opacity:calc(1 - var(--hero,0) * .9);transform:translate3d(0,calc(var(--hero,0) * -150px),0) scale(calc(1 - var(--hero,0) * .08))}
}
@media(min-width:701px) and (max-width:1000px){.family-hero-art{--icon:66px;--d:92px;--r:116px}}
@keyframes tm-orbit{to{transform:rotate(360deg)}}

/* Load-in choreography (transform/opacity only) */
.tm-motion .family-hero-copy>*,.tm-motion .detail-hero>*{animation:tm-in 1s var(--ease-out) both}
.tm-motion .family-hero-copy>:nth-child(2),.tm-motion .detail-hero>:nth-child(3){animation-delay:.08s}
.tm-motion .family-hero-copy>:nth-child(3),.tm-motion .detail-hero>:nth-child(4){animation-delay:.16s}
.tm-motion .family-hero-copy>:nth-child(4),.tm-motion .detail-hero>:nth-child(5){animation-delay:.24s}
.tm-motion .detail-hero>:nth-child(n+6){animation-delay:.32s}
.tm-motion .family-icon{animation:tm-pop 1.1s var(--ease-out) both}
.tm-motion .family-icon:nth-child(1){animation-delay:.15s}
.tm-motion .family-icon:nth-child(2){animation-delay:.23s}
.tm-motion .family-icon:nth-child(3){animation-delay:.31s}
.tm-motion .family-icon:nth-child(4){animation-delay:.39s}
.tm-motion .family-icon:nth-child(5){animation-delay:.47s}
.tm-motion .family-icon:nth-child(6){animation-delay:.55s}
.tm-motion .family-icon:nth-child(7){animation-delay:.63s}
@keyframes tm-in{from{opacity:0;translate:0 26px}}
@keyframes tm-pop{from{opacity:0;scale:.82;translate:0 22px}}

/* Scroll reveals (added by tm.js to content below the fold; removed once shown) */
.tm-reveal{opacity:0;translate:0 30px;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out);transition-delay:calc(var(--i,0) * 80ms)}
.tm-reveal.is-in{opacity:1;translate:0 0}

/* ===== App tour (home). Default (no JS) = stacked cards; .is-tabs = one-screen showcase ===== */
.tour{--count:7;padding-top:var(--section-y)}
.tour-track{position:relative}
.tour-stage{position:relative}
.tour-washes,.tour-rail{display:none}
.tour-slides{display:grid;gap:20px;width:min(var(--max),calc(100% - 64px));margin-inline:auto}
.tour-slide{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:32px;min-height:520px;padding:clamp(28px,5vw,64px);border-radius:var(--r-lg);border:1px solid var(--line);
  background:radial-gradient(80% 90% at 85% 50%,color-mix(in srgb,var(--wash) 30%,transparent),transparent 70%),var(--card-bg);box-shadow:var(--card-shadow)}
.tour-meta{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.tour-meta .app-icon{width:56px;height:56px;box-shadow:0 0 0 1px #ffffff1c,0 14px 30px -10px #000}
.tour-copy .eyebrow{margin-bottom:12px}
.tour-copy h3{font-size:clamp(3rem,6.2vw,5.6rem);line-height:.98;letter-spacing:-.06em;font-weight:650;margin-bottom:18px}
.tour-line{font-size:clamp(1.15rem,1.7vw,1.45rem);color:#d3dce7;line-height:1.4;max-width:440px}
.tour-devices{margin:14px 0 30px;font-size:.88rem}
.tour-art{position:relative;height:clamp(360px,44vw,520px)}
.tour-phone{position:absolute;left:50%;top:50%;margin:0;width:clamp(170px,17vw,232px);aspect-ratio:.46;border-radius:clamp(22px,2.4vw,32px);overflow:hidden;background:#0b0f16;
  box-shadow:0 0 0 1px #ffffff1f,0 40px 70px -24px #000,0 0 70px -20px color-mix(in srgb,var(--wash) 70%,transparent)}
.tour-phone img{width:100%;height:100%;object-fit:cover;object-position:top}
.tour-phone.back{transform:translate3d(calc(-50% - 31%),-50%,0) rotate(-8deg) scale(.92);opacity:.9}
.tour-phone.front{transform:translate3d(calc(-50% + 30%),-46%,0) rotate(6deg)}
.tour-ghost{position:absolute;right:-2%;top:50%;translate:0 -50%;z-index:-1;font-size:clamp(9rem,20vw,18rem);font-weight:700;letter-spacing:-.07em;line-height:1;color:transparent;-webkit-text-stroke:1px #ffffff12;user-select:none;font-variant-numeric:tabular-nums}

/* Showcase mode (tm.js adds .is-tabs): one rounded stage, one app at a time, tabs below */
.tour.is-tabs .tour-stage{position:relative;width:min(var(--max),calc(100% - 64px));height:clamp(580px,calc(100vh - var(--header-h) - 48px),720px);margin-inline:auto;overflow:hidden;isolation:isolate;
  border-radius:var(--r-lg);border:1px solid var(--line);background:var(--card-bg);box-shadow:var(--card-shadow)}
.tour.is-tabs .tour-washes{display:block;position:absolute;inset:0;z-index:0}
.tour.is-tabs .tour-washes i{position:absolute;inset:0;opacity:0;transition:opacity 1s var(--ease);
  background:radial-gradient(70% 85% at 76% 46%,color-mix(in srgb,var(--wash) 40%,transparent),transparent 68%),radial-gradient(50% 60% at 6% 100%,color-mix(in srgb,var(--wash) 18%,transparent),transparent 70%)}
.tour.is-tabs .tour-washes i.is-active{opacity:1}
.tour.is-tabs .tour-slides{display:block;position:absolute;inset:0;width:auto;z-index:1}
.tour.is-tabs .tour-slide{position:absolute;inset:0 0 84px;min-height:0;padding:clamp(28px,4vw,56px) clamp(28px,5vw,64px) 0;border:0;border-radius:0;background:none;box-shadow:none;align-content:center;
  visibility:hidden;pointer-events:none;transition:visibility 0s linear .5s}
.tour.is-tabs .tour-slide.is-active{visibility:visible;pointer-events:auto;transition-delay:0s}
.tour.is-tabs .tour-art{height:100%;max-height:560px}
.tour.is-tabs .tour-phone{width:clamp(180px,17vw,244px)}
.tour.is-tabs .tour-copy>*,.tour.is-tabs .tour-phone,.tour.is-tabs .tour-ghost{opacity:0;transition:opacity .35s var(--ease),translate .45s var(--ease)}
.tour.is-tabs .tour-copy>*{translate:0 18px}
.tour.is-tabs .tour-phone.back{translate:0 50px}
.tour.is-tabs .tour-phone.front{translate:0 90px}
.tour.is-tabs .tour-ghost{translate:40px -50%}
.tour.is-tabs .is-active .tour-copy>*,.tour.is-tabs .is-active .tour-phone,.tour.is-tabs .is-active .tour-ghost{opacity:1;translate:0 0;transition:opacity .7s var(--ease-out),translate .9s var(--ease-out)}
.tour.is-tabs .is-active .tour-ghost{translate:0 -50%}
.tour.is-tabs .is-active .tour-phone.back{opacity:.9}
.tour.is-tabs .is-active .tour-copy>:nth-child(1){transition-delay:.1s}
.tour.is-tabs .is-active .tour-copy>:nth-child(2){transition-delay:.14s}
.tour.is-tabs .is-active .tour-copy>:nth-child(3){transition-delay:.18s}
.tour.is-tabs .is-active .tour-copy>:nth-child(4){transition-delay:.22s}
.tour.is-tabs .is-active .tour-copy>:nth-child(5){transition-delay:.26s}
.tour.is-tabs .is-active .tour-copy>:nth-child(6){transition-delay:.3s}
.tour.is-tabs .is-active .tour-phone.back{transition-delay:.12s}
.tour.is-tabs .is-active .tour-phone.front{transition-delay:.2s}
.tour.is-tabs .tour-rail{display:flex;position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;gap:4px;padding:6px;border-radius:var(--r-pill);background:#0b1017e6;border:1px solid var(--line);box-shadow:0 20px 40px -20px #000}
.tour-rail button{position:relative;display:flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--muted);font:inherit;font-size:.84rem;font-weight:550;cursor:pointer;overflow:hidden;transition:color .3s,background-color .3s}
.tour-rail button:hover{color:var(--ink)}
.tour-rail button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tour-rail button[aria-selected="true"]{color:var(--ink);background:#ffffff10}
.tour-rail .app-icon{width:24px;height:24px}
.tour-fill{position:absolute;left:14px;right:14px;bottom:3px;height:2px;border-radius:2px;background:var(--accent);transform-origin:left;transform:scaleX(0);opacity:0}
.tour-rail button[aria-selected="true"] .tour-fill{opacity:.9;transform:scaleX(1)}
.tour.is-auto .tour-rail button[aria-selected="true"] .tour-fill{animation:tm-fill var(--tour-ms,6000ms) linear both}
.tour.is-auto.is-held .tour-rail button[aria-selected="true"] .tour-fill{animation-play-state:paused}
@keyframes tm-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* Product pages */
.detail-hero{position:relative;isolation:isolate}
.detail-hero:before{content:"";position:absolute;left:50%;top:-80px;width:min(1200px,150vw);height:640px;translate:-50% 0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 50% 55% at 50% 40%,color-mix(in srgb,var(--wash) 30%,transparent),transparent 70%)}
.detail-identity .app-icon{box-shadow:0 0 0 1px #ffffff1c,0 10px 30px -8px color-mix(in srgb,var(--wash) 80%,transparent)}
.wordmark span:after{background:var(--accent)}
.product-subnav{background:#0a0d12d9;-webkit-backdrop-filter:saturate(150%) blur(18px);backdrop-filter:saturate(150%) blur(18px)}
.product-subnav>.wrap>div a{position:relative;transition:color .25s}
.product-subnav>.wrap>div a:hover{text-decoration:none}
.cinema{background:transparent}
.cinema-wash{background:radial-gradient(ellipse at 50% 62%,color-mix(in srgb,var(--wash) 34%,transparent),transparent 64%)!important}
.cinema-screens .motion-piece{border-radius:var(--r-lg);box-shadow:0 0 0 1px #ffffff1f,0 40px 70px -24px #000,0 0 70px -20px color-mix(in srgb,var(--wash) 70%,transparent)}

/* Support & legal pages share one reading layout */
.support-main,.legal-main{padding-block:clamp(36px,6vw,64px) var(--section-y);max-width:820px}
.support-main h1,.legal-main h1{font-size:clamp(2.2rem,4.6vw,3.4rem);line-height:1.06;letter-spacing:-.05em}
.legal-main>.tapgi-icon,.legal-main .privacy-product img,.support-main .identity .app-icon{width:64px;height:64px;border-radius:22%;box-shadow:0 0 0 1px #ffffff1c,0 14px 30px -10px #000}
.legal-main>.tapgi-icon{margin-bottom:6px}
.legal-main .privacy-product{display:inline-flex}
.legal-main .privacy-product:hover{text-decoration:none}
.legal-main h2{font-size:1.35rem;letter-spacing:-.03em;margin:44px 0 12px;padding-top:28px;border-top:1px solid var(--line)}
.legal-main>h1+p,.legal-main .updated{font-size:1.02rem}
.support-contact{margin-top:40px;padding:28px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--card-bg)}
.support-contact h2{font-size:1.5rem}

/* Seven apps: compare and support grids as 4 + 3 (centred) on desktop; 2 columns with the 7th card centred
   below 1001px; one column at 370px and under (as catalog.css) */
.experience-home .compare-grid,.experience-home .support-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.experience-home :is(.compare-grid,.support-grid)>*{grid-column:span 2}
.experience-home :is(.compare-grid,.support-grid)>:nth-child(7){grid-column:2 / span 2}
@media(min-width:1001px){
  .experience-home .compare-grid,.experience-home .support-grid{grid-template-columns:repeat(8,minmax(0,1fr))}
  .experience-home :is(.compare-grid,.support-grid)>:nth-child(5){grid-column:2 / span 2}
  .experience-home :is(.compare-grid,.support-grid)>:nth-child(7){grid-column:span 2}
}
@media(max-width:370px){
  .experience-home .compare-grid,.experience-home .support-grid{grid-template-columns:minmax(0,1fr)}
  .experience-home :is(.compare-grid,.support-grid)>:nth-child(n){grid-column:auto}
}

/* Small screens */
/* Seven tabs with names need ~710px, so the rail is icon-only (names stay for screen readers) below 821px */
@media(max-width:820px){
  .tour-rail button{padding:7px}
  .tour-rail button span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tour-rail .app-icon{width:28px;height:28px}
  .tour-fill{left:9px;right:9px;bottom:2px}
}
@media(max-width:1000px){.tour-slides{width:calc(100% - 48px)}.tour.is-tabs .tour-stage{width:calc(100% - 48px)}}
@media(max-width:700px){
  :root{--header-h:106px}
  .family-hero-art{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px 0;justify-items:center}
  .family-icon{grid-column:span 3}
  .family-icon:nth-child(n+5){grid-column:span 4}
  .tour-slides{width:calc(100% - 36px);gap:16px}
  .tour-slide{grid-template-columns:1fr;gap:8px;min-height:0;padding:28px 22px 0}
  .tour-copy h3{font-size:3rem}
  .tour-devices{margin-bottom:22px}
  .tour-art{height:330px;margin-inline:-22px}
  .tour-phone{width:150px}
  .tour-ghost{font-size:8rem;right:4%}
  .section-heading>p{max-width:none}
  .tour.is-tabs .tour-stage{width:calc(100% - 36px);height:700px}
  .tour.is-tabs .tour-slide{inset:0 0 72px;padding:26px 22px 0;align-content:start;gap:0}
  .tour.is-tabs .tour-meta{margin-bottom:16px}
  .tour.is-tabs .tour-copy h3{font-size:2.6rem;margin-bottom:10px}
  .tour.is-tabs .tour-line{font-size:1.05rem}
  .tour.is-tabs .tour-devices{margin:8px 0 18px}
  .tour.is-tabs .tour-art{height:250px;max-height:none;margin:6px -22px 0}
  .tour.is-tabs .tour-phone{width:118px;border-radius:18px}
  .tour.is-tabs .tour-rail{bottom:12px;gap:2px;padding:5px}
}
@media(max-width:380px){.tour-rail button{padding:5px}.tour-rail .app-icon{width:26px;height:26px}.tour-fill{left:7px;right:7px}}

/* Off switches */
@media(prefers-reduced-motion:reduce){
  .status.live:after,.family-hero-art:after,.family-icon .app-icon{animation:none!important}
  .tm-reveal{opacity:1;translate:none}
}
.motion-paused .status.live:after,.motion-paused .family-hero-art:after,.motion-paused .family-icon .app-icon{animation:none}
.motion-paused .tm-reveal{opacity:1;translate:none;transition:none}
.motion-paused .tour.is-tabs *{transition-duration:0s!important;transition-delay:0s!important}
@media(prefers-reduced-motion:reduce){.tour.is-tabs *{transition-duration:0s!important;transition-delay:0s!important}}
@media print{.tm-progress,.tm-glow,.tour-rail,.tour-washes,body:before,body:after{display:none}.tour-slide{break-inside:avoid}}