/* ==========================================================================
   The Reef look: the look of the homepage at /new and of the feature pages, the
   features hub, the changelog and the rate page (html.skin-reef). Same pages, same
   copy, numbers and tracking as the clean look (?skin=clean or the Clean | Reef
   switch); only the look changes, in The Reef's own language (the underwater world
   of the Mako app).
   The page is a dive. It starts at the sunlit surface with light shafts and a
   school of fish, every section floats as a glass panel in the water, the water
   darkens as you go down (a depth gauge counts the metres) and the dive ends on
   the reef floor with kelp and coral. Fin is your guide in the bar at the bottom.
   The live homepage at / (the page test's control) does not load it.
   Tokens from frontend/src/reef/reef.css.
   ========================================================================== */

html.skin-reef{
  --reef-ink:#0b1b2b;
  --reef-ink-2:#46596d;
  --reef-ink-3:#7d8fa3;
  --reef-blue:#1fa6ff;
  --reef-blue-hover:#1597ec;
  --reef-foam:#2dd4bf;
  --reef-glass:rgba(255,255,255,.74);
  --reef-glass-strong:rgba(255,255,255,.9);
  --reef-glass-border:rgba(255,255,255,.7);
  --reef-hair:rgba(11,27,43,.08);
  --reef-shadow:0 18px 50px rgba(2,20,40,.28),0 4px 14px rgba(2,20,40,.16);
  --reef-deep-glass:rgba(6,26,48,.62);
  --reef-spring:cubic-bezier(.32,.72,0,1);
  --depth:0;
  /* the page's own tokens, tuned for glass on water */
  --gray:#eef7fb;
  --hair:var(--reef-hair);
  --ink:var(--reef-ink);
  --ink-2:var(--reef-ink-2);
  /* secondary text tinted like deep water: plain grey turns muddy on the turquoise surface */
  --muted:#2f5d7e;
  --soft:#557f9d;
  --reef-cta:linear-gradient(180deg,#2aa0ff 0%,#0a80f5 55%,#0071e3 100%);
  --reef-cta-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 1px 2px rgba(0,50,120,.2),0 12px 26px -10px rgba(0,90,200,.6);
  background:#010b17;
}

/* ---------- the water: sunlit at the top, the abyss at the bottom ---------- */
html.skin-reef body{
  color:var(--reef-ink);
  background:
    radial-gradient(120% 900px at 50% -160px,rgba(190,250,255,.75),transparent 62%),
    radial-gradient(70% 700px at 12% 0,rgba(94,231,255,.28),transparent 70%),
    linear-gradient(180deg,#d4f6ff 0,#8ee0f6 620px,#45c6ea 1300px,#1fa3d6 12%,#1279b6 30%,#0b5689 52%,#06345a 74%,#041d33 90%,#010b17 100%);
}
html.skin-reef main,html.skin-reef .foot{position:relative;z-index:1}

/* The ambient layer (reef-skin.js): light shafts and a shimmer near the surface,
   marine snow and bubbles all the way down. Fixed behind everything. */
.reef-fx{display:none}
html.skin-reef .reef-fx{display:block;position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.reef-rays{position:absolute;left:-25%;right:-25%;top:-12%;height:115vh;opacity:calc(.95 - var(--depth) * 2.4);
  background:repeating-linear-gradient(104deg,rgba(199,247,255,0) 0,rgba(199,247,255,0) 70px,rgba(199,247,255,.2) 104px,rgba(199,247,255,0) 150px,rgba(199,247,255,0) 250px);
  -webkit-mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 45%,transparent 88%);mask-image:linear-gradient(180deg,#000 0,rgba(0,0,0,.55) 45%,transparent 88%);
  mix-blend-mode:screen;filter:blur(5px);transform-origin:50% 0;animation:reef-rays 16s ease-in-out infinite alternate}
.reef-rays+.reef-rays{opacity:calc(.6 - var(--depth) * 2);animation-duration:23s;animation-direction:alternate-reverse;
  background:repeating-linear-gradient(99deg,rgba(199,247,255,0) 0,rgba(199,247,255,0) 130px,rgba(199,247,255,.14) 160px,rgba(199,247,255,0) 200px,rgba(199,247,255,0) 330px)}
@keyframes reef-rays{from{transform:skewX(-7deg) translateX(-2%)}to{transform:skewX(5deg) translateX(2%)}}
.reef-shimmer{position:absolute;left:0;right:0;top:0;height:70vh;opacity:calc(1 - var(--depth) * 4);mix-blend-mode:soft-light;
  background:radial-gradient(30% 40% at 20% 10%,rgba(255,255,255,.9),transparent 70%),radial-gradient(26% 34% at 70% 6%,rgba(255,255,255,.75),transparent 70%),radial-gradient(22% 30% at 45% 30%,rgba(255,255,255,.55),transparent 70%);
  animation:reef-shimmer 11s ease-in-out infinite alternate}
@keyframes reef-shimmer{from{transform:translate3d(-3%,0,0) scale(1)}to{transform:translate3d(3%,2%,0) scale(1.06)}}
.reef-snow{position:absolute;inset:0;width:100%;height:100%}

/* ---------- glass: the nav, the bar on top, every section a panel in the water ---------- */
html.skin-reef .promo-bar{background:#062033}
html.skin-reef .nav{background:var(--reef-glass);box-shadow:0 1px 0 rgba(255,255,255,.5),0 10px 30px -18px rgba(2,20,40,.35)}
html.skin-reef .hero{background:none}
html.skin-reef :is(.split,.section,.section.gray,.section.dark){background:none;padding:clamp(12px,1.6vw,22px) 0}
html.skin-reef :is(.section.gray,.section.dark)::before,html.skin-reef .section.dark::after{content:none}
html.skin-reef :is(.split,.section)>.wrap{position:relative;padding-top:clamp(52px,6.5vw,96px);padding-bottom:clamp(52px,6.5vw,96px);border-radius:28px;
  background:var(--reef-glass-strong);box-shadow:var(--reef-shadow),inset 0 1px 0 rgba(255,255,255,.9);outline:1px solid var(--reef-glass-border);outline-offset:-1px}
html.skin-reef .section.dark>.wrap{background:var(--reef-deep-glass);box-shadow:0 18px 50px rgba(0,8,20,.45),inset 0 1px 0 rgba(255,255,255,.12);outline-color:rgba(255,255,255,.1)}
html.skin-reef .section.dark.close>.wrap{background:none;box-shadow:none;outline:0}
@media (min-width:640px){
  html.skin-reef :is(.split,.section)>.wrap{width:calc(100% - 2 * var(--gutter));border-radius:36px}
}
@media (min-width:900px){
  /* frosted, but bright enough to stay white over the deep water (plain .74 glass turns grey down there) */
  html.skin-reef :is(.split,.section)>.wrap{background:rgba(248,252,255,.9);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
  html.skin-reef .section.dark>.wrap{background:var(--reef-deep-glass)}
}
/* the pinned story stage sits on the panel's own colour, so the steps slide under it cleanly */
html.skin-reef .split.how .how-pin{background:transparent}
@media (max-width:899px){
  html.skin-reef .split.how>.wrap{background:#f4fbff}
  html.skin-reef .split.how .how-pin{background:#f4fbff}
  html.skin-reef .split.how .how-pin::after{background:linear-gradient(#f4fbff,rgba(244,251,255,0))}
}
html.skin-reef .js .how-step:not(.on) .how-n{background:#f4fbff;box-shadow:inset 0 0 0 1.5px var(--reef-hair),0 0 0 6px #f4fbff}
html.skin-reef .how-n{box-shadow:0 0 0 6px #f4fbff,0 10px 24px -8px rgba(31,166,255,.5)}
html.skin-reef .how-step.you .how-n{box-shadow:0 0 0 6px #f4fbff,0 10px 24px -8px rgba(0,0,0,.35)}

/* ---------- type and controls in The Reef's voice ---------- */
html.skin-reef .eyebrow{padding:6px 12px 6px 10px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#0a6db3;background:rgba(31,166,255,.12);box-shadow:none}
html.skin-reef .dark .eyebrow{color:#9fdcff;background:rgba(159,220,255,.14)}
/* One solid, deep Mako blue for every call to action (the light Reef blue washes out on the
   turquoise water), as a pill like the one in the nav. */
html.skin-reef .btn-primary{border-radius:980px;background-color:#0a80f5;background-image:var(--reef-cta);box-shadow:var(--reef-cta-shadow)}
html.skin-reef .btn-primary::after{content:none}
html.skin-reef .btn-primary:hover{filter:brightness(1.06)}
html.skin-reef .cta-note{color:var(--muted)}
html.skin-reef .cta-note span+span::before{color:var(--soft)}
html.skin-reef .hero-app{background:var(--reef-glass);box-shadow:var(--reef-shadow);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
html.skin-reef .hero .hero-cta .mh-madlib .mh-ml-cta{border-radius:980px;background-color:#0a80f5;background-image:var(--reef-cta);box-shadow:var(--reef-cta-shadow)}
html.skin-reef .hero .hero-cta .mh-madlib .mh-ml-tok::before{background:rgba(11,27,43,.22)}
html.skin-reef .hero-claim,html.skin-reef .hero-guarantee,html.skin-reef .hero-proofs .hp-text{color:var(--reef-ink-2)}
html.skin-reef .hero-proofs li{padding:12px 8px 10px;border-radius:18px;background:rgba(255,255,255,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
html.skin-reef .hero-proofs{gap:10px}
@media (min-width:640px){html.skin-reef .hero-proofs{gap:0 12px}}
html.skin-reef .hero-stage .mac{box-shadow:var(--reef-shadow)}
html.skin-reef .gallery-note{color:var(--reef-ink-2)}

/* the bar at the bottom becomes Fin's guide bar, on every screen size */
html.skin-reef .sticky-cta{display:flex;left:50%;right:auto;bottom:max(12px,env(safe-area-inset-bottom));width:min(560px,calc(100% - 24px));gap:12px;padding:8px 8px 8px 8px;
  border-radius:24px;background:var(--reef-glass);box-shadow:var(--reef-shadow);outline:1px solid var(--reef-glass-border);outline-offset:-1px;transform:translate(-50%,160%);transition:transform .45s var(--reef-spring)}
html.skin-reef .sticky-cta.show{transform:translate(-50%,0)}
html.skin-reef .sticky-cta .t{flex:1;min-width:0}
html.skin-reef .sticky-cta .btn{border-radius:980px}
.reef-fin{display:none}
html.skin-reef .reef-fin{display:block;flex:none;width:44px;height:44px;border-radius:14px;overflow:hidden;background:#062033;box-shadow:0 8px 20px -8px rgba(31,166,255,.6)}
html.skin-reef .reef-fin img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- life near the surface: a school of fish crossing the hero ---------- */
.reef-school{display:none}
html.skin-reef .reef-school{display:block;position:absolute;left:calc(50% - 50vw);width:100vw;top:0;bottom:0;z-index:0;overflow:hidden;pointer-events:none}
/* the window, the phone and the stickers already sit at z-index 1 to 3 */
html.skin-reef .hero-stage{isolation:isolate}
.reef-school i{position:absolute;left:0;top:var(--y);width:var(--s);height:calc(var(--s) * .46);opacity:.55;
  background:linear-gradient(90deg,#0a6db3,#1fa6ff 60%,#7fe3ff);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 21'%3E%3Cpath d='M0 10.5 9 3.6v13.8zM8.5 10.5C12 3.5 21 0 29.5 0 38 0 44 5 46 10.5 44 16 38 21 29.5 21 21 21 12 17.5 8.5 10.5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 21'%3E%3Cpath d='M0 10.5 9 3.6v13.8zM8.5 10.5C12 3.5 21 0 29.5 0 38 0 44 5 46 10.5 44 16 38 21 29.5 21 21 21 12 17.5 8.5 10.5z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:reef-swim var(--d) linear var(--t) infinite}
.reef-school i.back{animation-name:reef-swim-back}
@keyframes reef-swim{
  0%{transform:translate3d(-12vw,0,0)}
  25%{transform:translate3d(24vw,-14px,0)}
  50%{transform:translate3d(56vw,6px,0)}
  75%{transform:translate3d(86vw,-10px,0)}
  100%{transform:translate3d(112vw,0,0)}
}
@keyframes reef-swim-back{
  0%{transform:translate3d(112vw,0,0) scaleX(-1)}
  50%{transform:translate3d(48vw,12px,0) scaleX(-1)}
  100%{transform:translate3d(-12vw,0,0) scaleX(-1)}
}

/* ---------- the depth gauge: how deep the dive is, and where you are ---------- */
.reef-depth{display:none}
@media (min-width:1180px){
  html.skin-reef .reef-depth{position:fixed;right:22px;top:50%;z-index:50;display:flex;flex-direction:column;align-items:center;gap:10px;width:64px;transform:translateY(-50%);pointer-events:none;
    font-size:11px;line-height:1.2;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-align:center;color:var(--reef-ink-2);transition:color .6s ease}
}
.reef-depth .rd-track{position:relative;width:2px;height:min(42vh,320px);border-radius:2px;background:rgba(255,255,255,.35)}
.reef-depth .rd-track::before{content:"";position:absolute;left:0;top:0;width:2px;height:calc(var(--depth) * 100%);border-radius:2px;background:linear-gradient(#7fe3ff,#1fa6ff)}
.reef-depth .rd-dot{position:absolute;left:50%;top:calc(var(--depth) * 100%);width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(31,166,255,.5),0 0 16px rgba(127,227,255,.9)}
.reef-depth .rd-m{font-size:15px;letter-spacing:0;font-variant-numeric:tabular-nums}
.reef-depth .rd-name{max-width:64px;font-size:10px;font-weight:600;letter-spacing:.04em;opacity:.85}

/* ---------- the end of the dive: the reef floor ---------- */
.reef-floor{display:none}
html.skin-reef .reef-floor{display:block;position:relative;z-index:1;height:clamp(150px,18vw,240px);margin-top:-40px;pointer-events:none}
html.skin-reef .reef-floor svg{position:absolute;left:0;bottom:0;width:100%;height:100%}
.reef-kelp{transform-box:fill-box;transform-origin:50% 100%;animation:reef-kelp var(--d,7s) ease-in-out var(--t,0s) infinite alternate}
@keyframes reef-kelp{from{transform:rotate(-4deg)}to{transform:rotate(5deg)}}
html.skin-reef .foot{background:#0a1c2c}
html.skin-reef .close .bubbles i{border-color:rgba(217,250,255,.7)}

/* ---------- feature pages, the features hub, the changelog ---------- */
html.skin-reef .fp-visual::before{opacity:.35}
html.skin-reef .fp-crumbs a{color:#0a6db3}
html.skin-reef .cl-hero .cl-count,html.skin-reef .cl-thanks{background:var(--reef-glass);box-shadow:var(--reef-shadow);outline:1px solid var(--reef-glass-border);outline-offset:-1px}

/* ---------- the rate page: one glass card in the water ---------- */
html.skin-reef .rate{background:none}
html.skin-reef .rate-card{padding:clamp(28px,5vw,48px);border-radius:28px;background:var(--reef-glass-strong);box-shadow:var(--reef-shadow);outline:1px solid var(--reef-glass-border);outline-offset:-1px}
@media (min-width:900px){
  html.skin-reef .rate-card{background:rgba(248,252,255,.9);-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%)}
}

/* ---------- comfort settings ---------- */
@media (prefers-reduced-motion:reduce){
  .reef-rays,.reef-shimmer,.reef-school i,.reef-kelp{animation:none}
  .reef-school{display:none!important}
  html.skin-reef .sticky-cta{transition:opacity .2s ease}
}
@media (prefers-reduced-transparency:reduce){
  html.skin-reef :is(.split,.section)>.wrap,html.skin-reef .nav,html.skin-reef .sticky-cta,html.skin-reef .hero-app{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
  html.skin-reef .section.dark>.wrap{background:#061a30}
}
@media (prefers-contrast:more){
  html.skin-reef :is(.split,.section)>.wrap{outline:1px solid var(--reef-ink-3)}
}