/* qareef marketing site — shared styles
   "applyreef" palette: light, airy sea theme. Fraunces + Manrope + JetBrains Mono. */

:root{
  --bg1:#f9fcff;      /* page background */
  --bg2:#eef9ff;      /* alternating section background */
  --bg3:#e3f2fb;      /* deepest light background — header, highlight sections, footer */
  --line:#d5e3ee;

  --ocean:#0998e0;        /* brand primary — icons, active-state pills, decorative accents */
  --ocean-strong:#0a6a99; /* solid button fill + link text — AA-safe against white/foam */
  --navy:#1a4b69;         /* headings, nav text on light backgrounds */

  --pink:#ff5c8a;          /* accent — hover states, highlights, decorative */
  --pink-strong:#c7486c;   /* solid pink button fill w/ white text — AA-safe */
  --pink-deep:#b33a5c;     /* pink text on a pink-tinted background — AA-safe */

  --lime:#d4e108;          /* badges, used sparingly, paired with navy text */

  --coral-logo:#ff5c8a;      /* brand logo mark — the applyreef branching coral, stroke #ff5c8a */
  --coral-logo-dark:#c7486c; /* darker coral for small text / solid fills — AA-safe with white */
  --coral-text:#b8362b;      /* coral-family text on a light tinted background — AA-safe */

  --success:#7ee787;       /* success tint background */
  --success-deep:#1f7a3d;  /* success text on a success-tinted background — AA-safe */

  --ink:#3a4048;    /* body text */
  --mut:#5c657a;    /* muted / secondary text — use for hints and small print */

  --card:#ffffff;
  --radius:14px;
  --maxw:1120px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  font:16px/1.6 Manrope,system-ui,-apple-system,Segoe UI,sans-serif;
  color:var(--ink);
  background:var(--bg1);
}
h1,h2,h3,h4{
  font-family:Fraunces,Georgia,serif;
  letter-spacing:.1px;
  line-height:1.15;
  margin:0 0 .5em;
  color:var(--navy);
}
h1{font-size:clamp(2rem,4.2vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.5rem,2.6vw,2.1rem);font-weight:700}
h3{font-size:1.2rem;font-weight:600}
p{margin:0 0 1em}
a{color:var(--ocean-strong)}
a:not(.btn):hover{text-decoration-thickness:2px}
code,pre,.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
pre{background:var(--navy);color:#e3f2fb;border-radius:12px;padding:16px;overflow-x:auto;font-size:.85rem;line-height:1.55}
code{background:var(--bg2);color:var(--ink);border-radius:4px;padding:.1em .35em;font-size:.9em}
pre code{background:none;color:inherit;padding:0}
img{max-width:100%;display:block}
ul,ol{padding-left:1.3em}
li{margin:.35em 0}
hr{border:none;border-top:1px solid var(--line);margin:2.5em 0}

/* focus visibility */
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--pink);
  outline-offset:2px;
  border-radius:4px;
}

.skip-link{
  position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:10px 16px;z-index:100;border-radius:0 0 8px 0;
}
.skip-link:focus{left:0}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- header ---------- */
.site-header{
  background:var(--bg3);
  color:var(--navy);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.site-header .wrap{display:flex;align-items:center;gap:8px;min-height:64px;flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
.brand{
  font-family:Fraunces,serif;font-weight:700;font-size:1.35rem;color:var(--navy);
  display:flex;align-items:center;gap:10px;text-decoration:none;margin-right:8px;
}
.brand:hover{text-decoration:none}
.main-nav{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
.main-nav a{
  color:var(--navy);text-decoration:none;padding:8px 12px;border-radius:8px;font-weight:600;font-size:.95rem;
}
.main-nav a:hover,.main-nav a:focus-visible{background:rgba(9,152,224,.09)}
.main-nav a[aria-current="page"]{background:rgba(9,152,224,.16);color:var(--ocean-strong)}
.header-cta{margin-left:auto;display:flex;gap:8px;align-items:center}
.nav-toggle{display:none}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  border:1px solid var(--ocean-strong);background:var(--ocean-strong);color:#fff;
  border-radius:10px;padding:11px 20px;font-weight:700;font-size:.98rem;
  cursor:pointer;font-family:inherit;text-decoration:none;line-height:1.2;
}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:#fff;color:var(--ocean-strong);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--ocean-strong)}
.btn.coral{background:var(--pink-strong);border-color:var(--pink-strong);color:#fff}
.btn.coral:hover{filter:brightness(1.08)}
.btn.on-dark{background:transparent;border-color:var(--line);color:var(--navy)}
.btn.on-dark:hover{background:rgba(9,152,224,.08);border-color:var(--ocean-strong)}
.btn.sm{padding:7px 13px;font-size:.85rem}
.btn.block{width:100%}

/* ---------- hero ---------- */
.hero{padding:64px 0 56px;background:
  radial-gradient(1100px 420px at 85% -10%,rgba(9,152,224,.14),transparent 60%),
  var(--bg1);
}
.hero .kicker{
  display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono',monospace;
  font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--ocean-strong);
  background:var(--bg2);border:1px solid var(--line);padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
.hero p.lead{font-size:1.15rem;color:var(--mut);max-width:56ch}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-note{margin-top:14px;font-size:.85rem;color:var(--mut)}

/* mock browser chrome, echoes the product UI */
.chrome-mock{
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--navy);
  box-shadow:0 20px 50px -20px rgba(26,75,105,.25);
}
.chrome-mock .bar{display:flex;gap:8px;align-items:center;padding:10px 12px;background:#fff;border-bottom:1px solid var(--line)}
.chrome-mock .dot{width:9px;height:9px;border-radius:50%;background:var(--line)}
.chrome-mock .bar input{flex:1;border:1px solid var(--line);border-radius:18px;padding:6px 12px;font:.8rem/1 Manrope;color:var(--mut);background:var(--bg1)}
.chrome-mock .rec{background:var(--pink);color:#fff;font-weight:800;font-size:10px;padding:3px 8px;border-radius:999px;letter-spacing:.06em;display:inline-flex;align-items:center;gap:5px}
.chrome-mock .rec::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff}
.chrome-mock .body{padding:16px;display:flex;flex-direction:column;gap:8px}
.step-mock{background:#fff;border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;display:flex;gap:9px;align-items:center;color:var(--ink)}
.step-mock .k{color:var(--ocean-strong);font-weight:800;min-width:16px;font-family:'JetBrains Mono',monospace}
.step-mock.agent{border-color:#bfe0f7;background:var(--bg2)}
.step-mock small{display:block;color:var(--mut);font-size:11px;font-family:'JetBrains Mono',monospace}

/* ---------- sections ---------- */
section{padding:56px 0}
section.alt{background:var(--bg2)}
section.deep{background:var(--bg3)}
section.deep h2,section.deep h3{color:var(--navy)}
section.deep p{color:var(--ink)}
section.deep a:not(.btn){color:var(--ocean-strong)}
.section-head{max-width:66ch;margin-bottom:36px}
.section-head p{color:var(--mut);font-size:1.05rem}
section.deep .section-head p{color:var(--mut)}
.eyebrow{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;
  color:var(--ocean-strong);display:block;margin-bottom:10px;font-weight:600;
}
section.deep .eyebrow{color:var(--ocean-strong)}

/* ---------- grids / cards ---------- */
.grid{display:grid;gap:20px}
/* grid/flex children default to min-width:auto, so one long <pre> line pushes the page wider than the viewport */
.grid>*,.footer-grid>*{min-width:0}
pre{max-width:100%;overflow-x:auto}
pre code{white-space:pre}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-4{grid-template-columns:repeat(4,1fr)}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;box-shadow:0 1px 0 rgba(26,75,105,.04);
}
.card h3{margin-bottom:.4em}
.card p{color:var(--mut);margin-bottom:0;font-size:.96rem}
.card .icon{
  width:40px;height:40px;border-radius:10px;background:var(--bg2);color:var(--ocean-strong);
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:14px;
}
section.deep .card{background:#fff;border-color:var(--line)}
section.deep .card p{color:var(--mut)}

/* ---------- loop / how it works ---------- */
.loop{display:flex;flex-wrap:wrap;gap:0;counter-reset:step;margin-top:8px}
.loop-step{flex:1 1 180px;position:relative;padding:20px 18px 18px;border:1px solid var(--line);background:var(--card);border-radius:var(--radius)}
.loop-step + .loop-step{margin-left:16px}
.loop-step .num{
  counter-increment:step;font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--ocean-strong);
  font-size:.85rem;margin-bottom:8px;display:block;
}
.loop-step .num::before{content:"0" counter(step)}
.loop-arrow{align-self:center;color:var(--mut);font-size:1.3rem;padding:0 4px;display:flex;align-items:center}

/* ---------- tags / pills ---------- */
.tag{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.78rem;font-weight:700}
.tag.reef{background:#dbf8dd;color:var(--success-deep)}
.tag.coral{background:#ffe8ef;color:var(--pink-deep)}
.tag.amber{background:#f2f6b5;color:var(--navy)}
.tag.mut{background:var(--line);color:var(--ink)}

/* ---------- FAQ ---------- */
details.faq{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:6px 18px;margin-bottom:10px}
details.faq summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center;color:var(--navy)}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+";font-size:1.3rem;color:var(--ocean-strong);font-weight:400;flex:none}
details.faq[open] summary::after{content:"–"}
details.faq p{padding-bottom:16px;color:var(--mut)}

/* ---------- tables ---------- */
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:12px;background:#fff}
table{width:100%;border-collapse:collapse;min-width:560px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);font-size:.92rem;vertical-align:top}
th{color:var(--mut);font-weight:700;font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;background:var(--bg2)}
tr:last-child td{border-bottom:none}
td.yes{color:var(--success-deep);font-weight:700}
td.no{color:var(--mut)}

/* ---------- forms ---------- */
.field{margin-bottom:16px}
.field label{display:block;font-weight:700;font-size:.9rem;margin-bottom:6px;color:var(--navy)}
.field input,.field textarea{
  width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 12px;font:inherit;background:var(--bg1);color:var(--ink);
}
.field .hint{color:var(--mut);font-size:.82rem;margin-top:4px}
.hint{font-size:.88rem;margin-top:10px;padding:10px 12px;border-radius:8px}
.hint.success{background:#e4f9e6;color:var(--success-deep)}
.hint.error{background:#fff0eb;color:var(--coral-text)}
.form-card{max-width:520px}
.todo-banner{
  font-family:'JetBrains Mono',monospace;font-size:.78rem;background:#f9fbdc;color:#5c6300;
  border:1px solid #e3e88a;border-radius:8px;padding:8px 12px;margin-bottom:16px;
}

/* ---------- footer (deep water; sea decorations appended in the SEA THEME block below) ---------- */
.site-footer{position:relative;color:#9fb2c5;padding:72px 0 250px;margin-top:88px;background:linear-gradient(180deg,var(--teal-deep) 0%,var(--deep) 42%,var(--abyss) 100%)}
.site-footer a{color:#dbeaf5}
.footer-grid{display:grid;grid-template-columns:1.1fr repeat(4,1fr);gap:24px;margin-bottom:32px}
.footer-grid h4{color:#fff;font-family:Manrope,sans-serif;font-weight:700;font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.footer-grid ul{list-style:none;padding:0;margin:0}
.footer-grid li{margin:6px 0}
.footer-grid a{text-decoration:none;font-size:.92rem;color:#dbeaf5}
.footer-grid a:hover{color:#fff;text-decoration:underline}
.footer-brand{display:flex;align-items:center;gap:9px;font-family:Fraunces,serif;font-weight:700;color:#fff;font-size:1.15rem;margin-bottom:10px}
.footer-bottom{border-top:1px solid rgba(207,237,233,.16);padding-top:20px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:.82rem;color:#9fb2c5}
.footer-bottom a{color:#9fb2c5}

/* illustrative / TBD pill — used on privacy, terms and any sample content (index.html has its own copy) */
.badge-ill{display:inline-flex;align-items:center;gap:6px;background:#f9fbdc;color:#5c6300;border:1px solid #e3e88a;border-radius:999px;padding:3px 10px;font:700 11px/1.4 "JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase;vertical-align:middle}
.ill-banner{display:flex;gap:12px;align-items:flex-start;background:#fdfee9;border:1px solid #e3e88a;border-radius:12px;padding:12px 16px;margin:0 0 18px;font-size:.92rem;color:#4a4f00}

/* ---------- misc ---------- */
.center{text-align:center}
.mt0{margin-top:0}
.small{font-size:.85rem;color:var(--mut)}
.callout{
  border:1px solid var(--line);background:var(--bg2);border-radius:12px;padding:18px 20px;
}
.callout.coral{border-color:#f3c3d3;background:#fff3f6}
.page-hero{padding:52px 0 40px;background:var(--bg1)}
.byline{color:var(--mut);font-size:.9rem;margin-bottom:0}
article.post{max-width:72ch;margin:0 auto}
article.post h2{margin-top:1.6em}
article.post h3{margin-top:1.3em}
.post-list{display:flex;flex-direction:column;gap:18px}
.post-card{display:block;text-decoration:none;color:inherit;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.post-card:hover{border-color:var(--ocean-strong)}
.post-card h3{color:var(--navy);margin-bottom:6px}
.post-card p{margin-bottom:8px}
.breadcrumb{font-size:.85rem;color:var(--mut);margin-bottom:18px}
.breadcrumb a{color:var(--mut)}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr}
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr 1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .loop{flex-direction:column}
  .loop-step + .loop-step{margin-left:0;margin-top:16px}
  .loop-arrow{transform:rotate(90deg);align-self:flex-start;padding:6px 0 6px 18px}
}
@media (max-width:640px){
  .grid.cols-2,.grid.cols-3,.grid.cols-4{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .main-nav{display:none;width:100%;flex-direction:column;align-items:stretch;gap:2px;order:3}
  .main-nav.open{display:flex}
  .nav-toggle{
    display:inline-flex;margin-left:auto;background:#fff;border:1px solid var(--line);
    color:var(--navy);border-radius:8px;padding:8px 12px;font-weight:700;cursor:pointer;font:inherit;
  }
  .header-cta{margin-left:0;order:2}
  .site-header .wrap{justify-content:space-between}
}

/* =====================================================================
   SEA THEME — the applyreef language: surface (foam) at the top of the page,
   light shafts + rising bubbles, foam wave dividers, strata (scanline) fish,
   and a deep-water reef footer with a real seabed. Decorative DOM is injected
   by /assets/sea.js; everything below is aria-hidden and pointer-events:none.
   ===================================================================== */
:root{
  --abyss:#07222e;      /* applyreef abyss */
  --deep:#0b3040;       /* applyreef deep */
  --teal-deep:#124f60;  /* applyreef teal */
  --tide:#2e8c9e;       /* applyreef tide */
  --foam:#cfede9;       /* applyreef foam (text on deep water) */
  --sand:#e9dfc8;
  --grain:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html{overflow-x:clip}

/* brand mark: the applyreef branching coral on a white chip (matches the favicon) */
.brand .mark,.footer-brand .mark{width:30px;height:30px;flex:none;background:#fff;border-radius:8px;padding:3px;box-shadow:0 0 0 1px var(--line),0 2px 6px rgba(255,92,138,.22)}
.footer-brand .mark{width:26px;height:26px;box-shadow:0 0 0 1px rgba(207,237,233,.25),0 0 14px rgba(255,92,138,.35)}

/* ---------- the strata canvas sea.js appends to a decorated section ---------- */
.sea-canvas{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.sea-canvas canvas{display:block;width:100%;height:100%}

/* ---------- light shafts — applyreef's .shafts i, verbatim technique ---------- */
.sea-shafts{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;opacity:.2}
.sea-shaft{position:absolute;top:-20%;height:150%;
  background:linear-gradient(180deg,rgba(207,237,233,.6),transparent 72%);
  transform:skewX(-12deg);filter:blur(7px);animation:shaft 14s ease-in-out infinite}
/* shallow water: rays read as sunlight on foam, so they are blue and much fainter */
.sea-shafts.light{opacity:.5}
.sea-shafts.light .sea-shaft{background:linear-gradient(180deg,rgba(9,152,224,.2),rgba(9,152,224,.05) 45%,transparent 78%);filter:blur(11px)}
@keyframes shaft{0%,100%{opacity:.35;transform:skewX(-12deg) translateX(-2vw)}50%{opacity:.85;transform:skewX(-12deg) translateX(2vw)}}

/* ---------- surface: the page hero is the shallows ---------- */
.page-hero{position:relative;overflow:hidden;padding:60px 0 64px;
  background:radial-gradient(900px 380px at 50% -140px,#d7effc 0%,rgba(215,239,252,0) 70%),linear-gradient(180deg,var(--bg3),var(--bg2))}
.page-hero>.wrap{position:relative;z-index:2}
/* his caustic / film-grain wash, dialled right down for a light surface */
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.16;
  mix-blend-mode:multiply;background-image:var(--grain);background-size:170px 170px}
/* foam wave at the water line */
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:46px;z-index:3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 34C180 2 360 66 540 50S900 2 1080 18s270 32 360 24V64H0z' fill='%23f9fcff'/%3E%3Cpath d='M0 46C220 14 420 62 720 46S1240 14 1440 40V64H0z' fill='%23f9fcff' fill-opacity='.55'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* shallows: alternating sections get a faint caustic wash */
section.alt,section.deep{position:relative;background-image:radial-gradient(600px 220px at 12% 0%,rgba(255,255,255,.55),transparent 70%),radial-gradient(700px 260px at 88% 100%,rgba(9,152,224,.08),transparent 70%)}

/* ---------- deep water footer: wave crest at the water line, grain, reef ---------- */
.site-footer{overflow:visible;padding:72px 0 320px}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:-54px;height:56px;pointer-events:none;z-index:4;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 40C200 8 440 56 720 44S1240 8 1440 36V64H0z' fill='%23124f60'/%3E%3Cpath d='M0 40C200 8 440 56 720 44S1240 8 1440 36' fill='none' stroke='%23cfede9' stroke-opacity='.6' stroke-width='3'/%3E%3Cpath d='M0 52C240 24 480 60 720 50S1200 26 1440 48V64H0z' fill='%23124f60'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
/* his film grain, over the reef but under the copy */
.site-footer::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.26;mix-blend-mode:overlay;
  background-image:var(--grain);background-size:180px 180px}
.site-footer .wrap{position:relative;z-index:3}
.site-footer .footer-grid p{color:#a9c3d6!important}

/* ---------- the jellyfish: exactly ONE, parked bottom-right of the viewport.
   It pulses and drifts in place and leans a little toward the pointer.
   It never travels, and nothing else on the site follows the mouse. ---------- */
.jelly{position:fixed;right:20px;bottom:16px;width:108px;z-index:60;pointer-events:none;
  transform:rotate(var(--tilt,0deg));transition:transform 1.1s cubic-bezier(.2,.7,.2,1);transform-origin:50% 26%;
  filter:drop-shadow(0 0 16px rgba(255,92,138,.42)) drop-shadow(0 6px 12px rgba(7,34,46,.2))}
.jelly svg{width:100%;height:auto;display:block;overflow:visible}
.jelly-float{animation:jelly-float 5.4s ease-in-out infinite alternate}
@keyframes jelly-float{from{transform:translate(0,0)}to{transform:translate(-7px,-14px)}}
.jelly-bell{transform-box:fill-box;transform-origin:50% 22%;animation:jelly-pulse 3.2s ease-in-out infinite}
@keyframes jelly-pulse{0%,100%{transform:scale(1,1)}45%{transform:scale(.9,1.1)}70%{transform:scale(1.07,.94)}}
.jelly-t path{transform-box:fill-box;transform-origin:50% 0;animation:tentacle var(--d,3.2s) ease-in-out infinite alternate}
.jelly-arms path{animation-name:oral-arm}
@keyframes tentacle{from{transform:rotate(-6deg)}to{transform:rotate(6deg)}}
@keyframes oral-arm{from{transform:rotate(-3.5deg) scaleY(.97)}to{transform:rotate(3.5deg) scaleY(1.03)}}

@media(max-width:640px){
  .jelly{width:66px;right:10px;bottom:10px}
  .site-footer{padding-bottom:250px}
}
@media(prefers-reduced-motion:reduce){
  /* no motion anywhere: sea.js never starts its rAF loop, and the CSS art holds still */
  .jelly,.jelly *,.sea-shaft,.page-hero::before{animation:none!important;transition:none!important}
}