/* =========================================================
   Clipio — the site shell
   ---------------------------------------------------------
   Shared by the home page (/) and every sub-page:
   base, tokens, the dark nav, buttons and the dark footer.
   Page styles layer on top: css/home.css for the home
   page, css/pages.css for the sub-pages.
   ========================================================= */

/* ---------- Base ---------- */
*, ::before, ::after{ box-sizing:border-box; }
*{ font-family:Inter, "SF Pro Display", "SF UI Text", "Helvetica Neue", Helvetica, Arial, sans-serif;
   -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
html{ -webkit-text-size-adjust:100%; line-height:1.15; overflow-x:clip; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
html [id]{ scroll-margin-top:100px; }
body{ margin:0; position:relative; overflow-x:clip; }
button, input{ margin:0; font-family:inherit; font-size:100%; line-height:1.15; }
b, strong{ font-weight:bolder; }
code{ font-family:ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace; font-size:1em; }
a{ text-decoration:none; }
img{ vertical-align:middle; }
svg{ outline:none; }


/* ---------- Tokens, buttons, nav ---------- */
:root{
/* brand — the only hue on the page */
--brand:        #1A84EF;
--brand-hover:  #1272D6;
--brand-press:  #0E62BC;
--brand-soft:   #EDF5FE;   /* flat tint, not an alpha wash */
--brand-soft-2: #DEEBFD;
--brand-line:   #C6DFFA;
--brand-ink:    #0B4C8F;   /* brand text that still passes contrast */

/* surfaces — a flat four-step light scale */
--page:         #FFFFFF;
--page-alt:     #F7F8FA;
--panel:        #F1F3F6;
--panel-2:      #E9ECF1;

/* ink */
--ink:          #0C1116;
--ink-2:        #4B5563;
--ink-3:        #7C8794;
--ink-4:        #A3ACB8;

/* lines */
--line:         #E6E9EE;
--line-strong:  #D6DBE3;

/* dark surface, used once (the closing panel) */
--dark:         #0C1116;
--dark-2:       #141A21;
--dark-line:    #232A33;
--dark-ink:     #FFFFFF;
--dark-ink-2:   #99A3AF;

/* radii */
--r-xs: 6px;
--r-sm: 10px;
--r-md: 14px;
--r-lg: 18px;
--r-xl: 24px;
--r-2xl: 32px;
--r-full: 999px;

--wrap: 1140px;
--ease: cubic-bezier(.22,1,.36,1);

/* hairlines only — see rule 2 above */
--shadow-sm: 0 1px 2px rgba(12,17,22,.05);
--shadow-md: 0 1px 3px rgba(12,17,22,.06);
--shadow-lg: 0 2px 8px rgba(12,17,22,.07);
}
/* ---------------- buttons ----------------
 Flat fills, no glow. The primary button's only depth is a
 1px darker border. */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:8px;
font-weight:560; font-size:14.5px; line-height:1; letter-spacing:-.011em;
padding:12px 18px; border-radius:var(--r-sm);
border:1px solid transparent; cursor:pointer;
transition:background .15s var(--ease), border-color .15s var(--ease), color .15s var(--ease);
white-space:nowrap;
}
.btn--primary{ background:var(--brand); border-color:var(--brand-hover); color:#fff; }
.btn--primary:hover{ background:var(--brand-hover); border-color:var(--brand-press); }
.btn--primary:active{ background:var(--brand-press); }

.btn--ghost{ background:var(--page); border-color:var(--line-strong); color:var(--ink); }
.btn--ghost:hover{ background:var(--page-alt); border-color:var(--ink-4); }

.btn--soft{ background:var(--panel); border-color:transparent; color:var(--ink); }
.btn--soft:hover{ background:var(--panel-2); }

.btn--sm{ padding:9px 14px; font-size:13.5px; border-radius:var(--r-xs); }
.btn--lg{ padding:14px 22px; font-size:15px; }

.btn__os{ flex:none; }
.btn__tag{
font-size:10px; font-weight:620; letter-spacing:.05em; text-transform:uppercase;
border:1px solid currentColor; border-radius:var(--r-full);
padding:2px 5px; margin-left:2px; opacity:.6;
}

.link-quiet{ font-size:14px; font-weight:500; color:var(--ink-2); }
.link-quiet:hover{ color:var(--ink); }

/* ---------------- nav ---------------- */
.nav{
position:sticky; top:0; z-index:60;
background:rgba(255,255,255,.78);
backdrop-filter:saturate(180%) blur(16px);
-webkit-backdrop-filter:saturate(180%) blur(16px);
border-bottom:1px solid transparent;
transition:border-color .2s var(--ease);
}
.nav.is-stuck{ border-bottom-color:var(--line); }
.nav__inner{ display:flex; align-items:center; gap:24px; height:62px; }
.nav__brand{ display:inline-flex; align-items:center; gap:8px; font-weight:640; font-size:16.5px; letter-spacing:-.026em; }
.nav__links{ display:flex; gap:2px; margin-inline:auto; }
.nav__links a{
font-size:14px; font-weight:500; color:var(--ink-2);
padding:7px 11px; border-radius:var(--r-xs);
transition:color .15s, background .15s;
}
.nav__links > a,
.nav__menubtn{
font-size:14px; font-weight:500; color:var(--ink-2);
padding:7px 11px; border-radius:var(--r-xs);
transition:color .15s, background .15s;
}
.nav__links > a:hover,
.nav__menubtn:hover{ color:var(--ink); background:var(--panel); }
.nav__actions{ display:flex; align-items:center; gap:14px; }

/* ---- Help dropdown ----
 A button, not a hover-only target: the panel opens on click and on focus,
 closes on Escape and on outside click, so it works from the keyboard and
 on touch. Hover just previews it on pointer devices (see js/main.js). */
.nav__menu{ position:relative; }
.nav__menubtn{
display:inline-flex; align-items:center; gap:5px;
border:0; background:transparent; cursor:pointer; font-family:inherit;
}
.nav__menubtn svg{
width:11px; height:11px; fill:none; stroke:currentColor;
stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
transition:transform .18s var(--ease);
}
.nav__menubtn[aria-expanded="true"]{ color:var(--ink); background:var(--panel); }
.nav__menubtn[aria-expanded="true"] svg{ transform:rotate(180deg); }

.nav__panel{
position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
width:330px; padding:6px;
background:var(--page); border:1px solid var(--line);
border-radius:var(--r-md); box-shadow:var(--shadow-lg);
display:flex; flex-direction:column; gap:2px;
}
/* Bridge the 10px gap between the button and the panel.
 The panel is absolutely positioned, so .nav__menu's own box is only as tall
 as the button — that gap belongs to no element, and dragging the pointer
 down through it fires mouseleave and shuts the menu before you reach an
 item. This invisible strip is a descendant of the panel, so crossing it
 counts as still being inside the group. */
.nav__panel::before{
content:''; position:absolute;
left:0; right:0; top:-11px; height:11px;
}
.nav__item{
display:flex; gap:11px; align-items:flex-start;
padding:10px 11px; border-radius:var(--r-sm);
transition:background .13s var(--ease);
}
.nav__item:hover{ background:var(--page-alt); }
.nav__item-ico{
flex:none; width:30px; height:30px; border-radius:8px;
display:grid; place-items:center;
background:var(--brand-soft); color:var(--brand);
}
.nav__item-ico svg{
width:15px; height:15px; fill:none; stroke:currentColor;
stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.nav__item b{ display:block; font-size:14px; font-weight:560; color:var(--ink); letter-spacing:-.012em; }
.nav__item span{ display:block; font-size:12.5px; line-height:1.45; color:var(--ink-3); margin-top:2px; }
/* The icon is a span too; keep the rule above from un-centring it. */
.nav__item .nav__item-ico{ display:grid; margin-top:0; }

.nav__burger{
display:none; width:38px; height:38px; align-items:center; justify-content:center;
background:none; border:1px solid var(--line); border-radius:var(--r-xs);
cursor:pointer; flex-direction:column; gap:4px;
}
.nav__burger span{ display:block; width:16px; height:1.5px; background:var(--ink); border-radius:2px; }

.nav__mobile{
border-top:1px solid var(--line); background:var(--page);
padding:12px 24px 20px; display:flex; flex-direction:column; gap:2px;
}
.nav__mobile > a{ padding:11px 0; font-size:15px; font-weight:500; color:var(--ink-2); }
.nav__mobile .btn{ margin-top:12px; }
.nav__mobile > a.btn--primary{ color:#fff; }   /* outranks the grey link colour above */
/* The Help group has nowhere to pop out to on a phone, so it renders inline
 as a labelled sub-list instead of a dropdown. */
.nav__mobile-group{ margin:8px 0 4px; padding-top:12px; border-top:1px solid var(--line); }
.nav__mobile-label{
font-size:11px; font-weight:620; letter-spacing:.06em; text-transform:uppercase;
color:var(--ink-4); margin-bottom:4px;
}
.nav__mobile-group a{ display:block; padding:9px 0; font-size:15px; font-weight:500; color:var(--ink-2); }

/* The site's global resets, scoped to the nav. :where() keeps them at
   element-level specificity, as on the site, so the nav's own class rules
   still win over them. */
:where(.nav) [hidden]{ display:none !important; }
:where(.nav), :where(.nav) *, :where(.nav) *::before, :where(.nav) *::after{ box-sizing:border-box; }
.nav{ font-family:Inter, system-ui, sans-serif; font-size:16px; line-height:1.6; color:var(--ink); }
:where(.nav) a{ color:inherit; text-decoration:none; }
:where(.nav) img{ display:block; height:auto; }
:where(.nav) img, :where(.nav) svg{ max-width:100%; }
:where(.nav) button{ font:inherit; margin:0; }
:where(.nav) p{ margin:0; }
.nav .wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:24px; }
@media (max-width:1000px){
  .nav__links{ display:none; }
  .nav__actions{ margin-left:auto; }
  .nav__actions .link-quiet{ display:none; }
  .nav__burger{ display:inline-flex; }
}

/* The nav is part of the hero, not sticky. It has the
   band's top colour, so the two read as one dark surface, and it scrolls
   away with the page. White links; the dropdown and phone menu keep their
   own light panels. */
.nav{ position:relative !important; background:#08080B !important; border-bottom-color:transparent !important;
      backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
.nav .nav__brand span, .nav .link-quiet{ color:#fff; }
.nav .nav__links > a, .nav .nav__menubtn{ color:rgba(255,255,255,.72); }
.nav .nav__links > a:hover, .nav .nav__menubtn:hover, .nav .nav__menubtn[aria-expanded="true"]{ color:#fff; background:rgba(255,255,255,.08); }
.nav .link-quiet:hover{ color:rgba(255,255,255,.8); }
.nav .nav__burger{ border-color:rgba(255,255,255,.18); } .nav .nav__burger span{ background:#fff; }
.nav .nav__mobile{ background:#08080B; border-top-color:rgba(255,255,255,.08); }
.nav .nav__mobile > a, .nav .nav__mobile-group a{ color:rgba(255,255,255,.78); }
.nav .nav__mobile-group{ border-top-color:rgba(255,255,255,.08); } .nav .nav__mobile-label{ color:rgba(255,255,255,.4); }
.nav .nav__mobile > a.btn--primary{ color:#fff; }

/* Pill buttons everywhere. */
.btn, .btn--sm, .btn--lg, .nav .btn, .tm-btn{ border-radius:999px !important; }

/* ---------- Buttons ----------
   Pills: blue for the main action, white on the dark hero. --soft is the
   rounded-rectangle variant used below the hero. */
.pill{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px;
       border:1px solid transparent; border-radius:999px; font-size:15px; font-weight:560; line-height:1; letter-spacing:-.011em;
       text-align:center; text-decoration:none; cursor:pointer; -webkit-user-select:none; user-select:none;
       transition:background .15s ease, border-color .15s ease, color .15s ease; }
.pill svg{ flex:none; fill:currentColor; }
.pill--soft{ border-radius:10px; }
.pill--blue{ background:#1A84EF; border-color:#1272D6; color:#fff; }
.pill--blue:hover{ background:#1272D6; border-color:#0E62BC; }
.pill--blue:active{ background:#0E62BC; }
.pill--white{ background:#fff; border-color:#fff; color:#0C0C0C; }
.pill--white:hover{ background:#E8E8EA; border-color:#E8E8EA; }
.pill:focus-visible{ outline:2px solid #1A84EF; outline-offset:2px; }


/* ---------- Footer ---------- */
.foot{ position:relative; overflow:hidden; background:#0C1116; }
.foot__in{ max-width:1344px; margin:0 auto; padding:20px; }

.foot__news{ display:flex; justify-content:space-between; align-items:center; padding:48px 0;
             border-top:1px solid #ffffff14; border-bottom:1px solid #ffffff14; }
.foot__news p{ margin:0; }
.foot__news-title{ color:#fff; font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.02em; }
.foot__news-text{ margin-top:4px !important; color:#ffffffb8; font-size:15px; font-weight:450; line-height:1.6; letter-spacing:.01em; }
.foot__news-side{ display:flex; align-items:center; gap:12px; max-width:457px; }
@media (max-width:1000px){
  .foot__news{ flex-direction:column; gap:40px; }
  .foot__news-copy, .foot__news-side{ width:100%; max-width:457px; }
}

.news{ position:relative; display:flex; flex-direction:column; align-items:center; gap:15px; }
.news__form{ display:flex; gap:12px; max-width:600px; margin:0 auto; }
.news__input{ width:330px; max-width:100%; height:48px; padding:0 18px; border:1px solid #ffffff3d; border-radius:16px; outline:none; appearance:none;
              background:transparent; color:#fff; font-size:15px; font-weight:450; line-height:1.6; letter-spacing:.01em; }
.news__input::placeholder{ color:#ffffffb8; }
.news__input:hover:not(:focus){ border-color:#ffffff61; }
.news__input:focus{ border-color:#5B7DE2; }
.news__btn{ flex:none; }
.news__note:empty{ display:none; }
.news__note{ color:#fff; font-size:14px; line-height:1.43; }
.news__fine{ color:#ffffffb8; font-size:13px; font-weight:450; line-height:1.23; letter-spacing:.01em; }
.news__fine a{ color:inherit; text-decoration:underline; }
@media (max-width:500px){
  .news__form{ flex-direction:column; align-items:stretch; width:100%; }
  .news__input{ width:100%; }
  .news__btn{ width:100%; }
}

.foot__cols{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; margin-top:48px; }
.foot__col{ flex:1; margin:0; padding:0; list-style:none; text-align:left; }
.foot__head{ margin-bottom:16px; color:#fff; font-size:14px; font-weight:550; line-height:1.43; letter-spacing:.01em; }
.foot__link{ display:flex; margin:8px 0; color:#ffffffb8; font-size:14px; font-weight:450; line-height:1.43; letter-spacing:.01em; transition:color .1s; }
.foot__col li:last-child .foot__link{ margin-bottom:0; }
.foot__link:hover{ color:#fff; }
@media (max-width:850px){
  .foot__cols{ gap:64px; padding:0 15px; }
  .foot__col{ min-width:120px; }
}

.foot__base{ display:flex; justify-content:space-between; align-items:center; padding:48px 0; }
.foot__base p{ margin:0; }
.foot__copy{ color:#ffffffb8; font-size:14px; font-weight:450; line-height:1.43; letter-spacing:.01em; }
.foot__platforms{ color:rgba(255,255,255,.6); line-height:1.15; }
@media (max-width:850px){ .foot__base{ align-items:flex-end; } }

/* The closing panel at the top of the footer. */
.cta{ display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1.05fr); gap:56px; align-items:center;
      margin:96px 0 88px; padding:56px; border:1px solid #232A33; border-radius:32px;
      background:#141A21 radial-gradient(70% 90% at 0% 0%, rgba(26,132,239,.16), transparent 70%);
      font-family:Inter, system-ui, sans-serif; color:#fff; text-align:left; }
.cta p{ margin:0; }
.cta__eyebrow{ display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border:1px solid rgba(26,132,239,.4); border-radius:999px;
               background:rgba(26,132,239,.12); color:#9CCBFB; font-size:13px; font-weight:560; line-height:1.2; }
.cta__dot{ width:7px; height:7px; border-radius:50%; background:#1A84EF; box-shadow:0 0 0 3px rgba(26,132,239,.25); }
.cta__title{ margin:20px 0 0; font-size:52px; font-weight:500; line-height:1.1; letter-spacing:-.03em; color:#fff; text-wrap:balance; }
.cta__sub{ margin-top:16px !important; max-width:30em; font-size:17px; line-height:1.6; color:#99A3AF; }
.cta__btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.cta__btns .btn svg{ flex:none; }
.cta .cta__ghost{ background:transparent; border-color:#2F3742; color:#fff; }
.cta .cta__ghost:hover{ background:#1B222B; border-color:#3A4450; }
.cta__facts{ display:flex; flex-direction:column; gap:10px; margin:28px 0 0; padding:24px 0 0; border-top:1px solid #232A33; list-style:none; }
.cta__facts li{ display:flex; align-items:center; gap:10px; font-size:14.5px; line-height:1.4; color:#C3CAD3; }
.cta__facts svg{ flex:none; width:18px; height:18px; padding:3px; border-radius:50%; background:rgba(26,132,239,.16);
                 fill:none; stroke:#5AA9F6; stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.cta__film{ position:relative; display:block; width:100%; aspect-ratio:1788 / 1006; padding:0; border:1px solid #2A323C; border-radius:20px;
            overflow:hidden; background:#000; cursor:pointer; box-shadow:0 30px 60px -30px rgba(0,0,0,.7); }
.cta__film img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.22,1,.36,1); }
.cta__film::after{ content:''; position:absolute; inset:0; background:linear-gradient(to top, rgba(12,17,22,.9), rgba(12,17,22,.35) 32%, transparent 55%); pointer-events:none; }
.cta__play{ position:absolute; z-index:1; left:50%; top:50%; display:grid; place-items:center; width:68px; height:68px; margin:-34px 0 0 -34px;
            border-radius:50%; background:#fff; color:#1A84EF; box-shadow:0 10px 30px rgba(0,0,0,.35); transition:transform .2s cubic-bezier(.22,1,.36,1); }
.cta__play svg{ width:26px; height:26px; margin-left:3px; fill:currentColor; }
.cta__cap{ position:absolute; z-index:1; left:20px; bottom:16px; display:flex; flex-direction:column; gap:2px; text-align:left; color:#fff; font-family:Inter, system-ui, sans-serif; }
.cta__cap b{ font-size:15px; font-weight:620; } .cta__cap span{ font-size:13px; color:rgba(255,255,255,.72); }
.cta__film:hover img{ transform:scale(1.03); } .cta__film:hover .cta__play{ transform:scale(1.08); }
.cta__film:focus-visible{ outline:2px solid #1A84EF; outline-offset:3px; }
@media (max-width:960px){
  .cta{ grid-template-columns:1fr; gap:36px; margin:48px 0 56px; padding:32px 24px; border-radius:24px; }
}
@media (max-width:760px){
  .cta__title{ font-size:34px; }
}
@media (max-width:500px){
  .cta__btns .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .cta__film img, .cta__play{ transition:none; } }

/* The image's own black is a shade off the footer's, so its sides and top
   fade out instead of meeting the footer at a hard edge. */
.foot-mark{ display:block; width:min(1440px, 100%); height:auto; margin:8px auto 0;
            -webkit-mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 30%);
            -webkit-mask-composite:source-in; mask-image:linear-gradient(to right, transparent, #000 12%, #000 88%, transparent), linear-gradient(to bottom, transparent, #000 30%);
            mask-composite:intersect; }

/* YouTube popup for the "Introducing Clipio" badge. */
.yt-pop{ width:min(1100px, 100vw - 32px); padding:0; border:0; border-radius:16px; background:#000; overflow:hidden; box-shadow:0 40px 120px -30px rgba(0,0,0,.6); }
.yt-pop::backdrop{ background:rgba(12,17,22,.72); backdrop-filter:blur(6px); }
.yt-pop__frame{ display:block; width:100%; aspect-ratio:16 / 9; border:0; }
.yt-pop__x{ position:fixed; top:16px; right:16px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:999px; background:rgba(255,255,255,.14); color:#fff; font-size:22px; line-height:1; cursor:pointer; }
.yt-pop__x:hover{ background:rgba(255,255,255,.24); }