/* ayaner.net v2 — high-key daylight: sky hero, pastel paper panels, sun accent */
@font-face{font-family:"Manrope";src:url(/fonts/manrope-latin.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url(/fonts/manrope-latin-ext.woff2) format("woff2");font-weight:200 800;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root{
  --ink:#0b1d3f;
  --ink-2:#2c4370;
  --sky:#1d4f9e;
  --sky-deep:#123a7a;
  --indigo:#0f2757;
  --paper-sky:#e0eaff;
  --paper-peach:#ffeddb;
  --paper-lav:#e3d9ff;
  --paper-mint:#daf3e6;
  --disc-sky:#c3d9ff;
  --disc-peach:#ffd5a8;
  --disc-lav:#d9ccff;
  --disc-mint:#b8e7d0;
  --line:rgba(11,29,63,.12);
  --line-light:rgba(255,255,255,.18);
  --sun:#f2a93b;
  --sun-hi:#f7c45a;
  --sun-ink:#3a2200;
  --on-navy:#eef3ff;
  --on-navy-2:#b9c8e8;
  --radius:28px;
  --radius-lg:clamp(26px,3vw,36px);
  --gutter:clamp(16px,4vw,40px);
  --max:1180px;
  --ease:cubic-bezier(.16,1,.3,1);
  color-scheme:light;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--sky) transparent}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;min-height:100vh;overflow-x:clip;padding:clamp(8px,1.1vw,16px);
  font:400 17px/1.6 "Manrope",system-ui,sans-serif;
  color:var(--ink);background:#fff;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  caret-color:var(--sun);
}

/* the page is one framed canvas: soft colour fields, no photograph. Blue and lavender at the top, a warm sunrise behind the hero window, peach at the foot */
.canvas{
  position:relative;isolation:isolate;overflow:clip;border-radius:clamp(26px,3vw,44px);
  background:
    radial-gradient(58% 700px at 10% 0,#c4d9ff 0,rgba(196,217,255,0) 72%),
    radial-gradient(52% 640px at 94% 4%,#dfd2ff 0,rgba(223,210,255,0) 72%),
    radial-gradient(46% 460px at 50% 760px,#ffe3c6 0,rgba(255,227,198,0) 74%),
    linear-gradient(180deg,#edf2ff 0,#eef1fd 30%,#f3eefb 56%,#faeff2 78%,#fff0e3 100%);
}

::selection{background:var(--sun);color:var(--sun-ink)}
img{display:block;max-width:100%;height:auto}
a{color:var(--sky);text-decoration-thickness:1px;text-underline-offset:.22em}
a:hover{color:var(--sky-deep)}
:focus-visible{outline:3px solid var(--sun);outline-offset:3px;border-radius:10px}
h1,h2,h3{margin:0;line-height:1.08;letter-spacing:-.025em;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
address{font-style:normal}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-60px;z-index:10;background:var(--sun);color:var(--sun-ink);padding:10px 16px;border-radius:999px;font-weight:700}
.skip:focus{top:16px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:46px;padding:0 22px;border-radius:999px;border:0;
  font:700 15px/1 "Manrope",system-ui,sans-serif;letter-spacing:-.005em;
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),background-color .25s;
}
.btn-sun{
  background:linear-gradient(180deg,var(--sun-hi),var(--sun));color:var(--sun-ink);
  box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 8px 22px -8px rgba(160,90,0,.55);
}
.btn-sun:hover{color:var(--sun-ink);transform:translateY(-1px);box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 14px 28px -10px rgba(160,90,0,.6)}
.btn-sun:active{transform:translateY(0)}
.btn-ink{background:var(--ink);color:#fff;box-shadow:0 10px 22px -10px rgba(6,24,64,.6)}
.btn-ink:hover{background:var(--indigo);color:#fff;transform:translateY(-1px)}
.btn-ink:active{transform:translateY(0)}

/* nav: a white pill floating on the sky */
.nav-wrap{position:sticky;top:0;z-index:5;padding:14px var(--gutter) 0}
.nav{
  max-width:var(--max);margin:0 auto;display:flex;align-items:center;gap:18px;
  padding:8px 8px 8px 20px;border-radius:999px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 0 0 1px rgba(255,255,255,.95) inset,0 0 0 1px rgba(11,29,63,.06),0 14px 34px -18px rgba(40,50,130,.4);
}
.brand{display:flex;align-items:center;gap:10px}
.brand-sun{height:30px;width:auto}
.brand-word{height:13px;width:auto}
.nav-links{display:flex;gap:2px;margin-left:auto}
.nav-links a{display:block;padding:10px 14px;border-radius:999px;color:var(--ink);text-decoration:none;font-weight:600;font-size:15px}
.nav-links a:hover{background:rgba(11,29,63,.07);color:var(--ink)}
.news{display:inline-flex;align-items:center;gap:8px;padding:0 6px 0 4px;color:var(--ink-2);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap}
.news b{padding:4px 9px;border-radius:999px;background:var(--sun);color:var(--sun-ink);font-size:11.5px;font-weight:800;letter-spacing:.02em}
.news:hover{color:var(--ink)}
@media (max-width:1080px){.news{display:none}}
@media (max-width:860px){.nav-links{display:none}.nav .btn{margin-left:auto}}
@media (max-width:420px){.nav{padding-left:14px;gap:10px}.brand-sun{height:26px}.brand-word{height:11px}.nav .btn{padding:0 16px;font-size:14px;min-height:42px}}

/* hero */
.hero{
  position:relative;max-width:var(--max);margin:0 auto;padding:clamp(56px,10vh,112px) var(--gutter) 0;
  text-align:center;color:var(--ink);
}
.hero h1{
  font-size:clamp(2.2rem,6.4vw,5.25rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;
}
.hero h1 span{display:block;text-wrap:balance}
.hero-lede{
  max-width:42ch;margin:22px auto 0;font-size:clamp(1.02rem,1.5vw,1.2rem);font-weight:500;
  color:var(--ink-2);
}
.ask{
  display:flex;gap:6px;max-width:540px;margin:34px auto 0;padding:6px;border-radius:999px;
  background:#fff;
  box-shadow:0 0 0 1px rgba(11,29,63,.09),0 18px 40px -20px rgba(40,50,130,.4);
}
.ask input{
  flex:1;min-width:0;border:0;background:transparent;color:var(--ink);padding:0 18px;
  font:500 16px/1 "Manrope",system-ui,sans-serif;
}
.ask input::placeholder{color:#5a6c93}
.ask input:focus{outline:none}
.ask:focus-within{box-shadow:0 0 0 2px var(--sun),0 18px 40px -20px rgba(40,50,130,.4)}
@media (max-width:520px){
  .ask{flex-direction:column;border-radius:24px;padding:8px}
  .ask input{min-height:48px;text-align:center}
}

/* the admin window: solid white, lifted off the colour field */
.window-stage{margin-top:clamp(48px,8vh,84px);perspective:1800px}
.window{
  margin:0 auto;max-width:1040px;text-align:left;color:var(--ink);border-radius:var(--radius);overflow:hidden;
  background:rgba(255,255,255,.94);
  box-shadow:0 0 0 1px rgba(11,29,63,.07),0 40px 80px -34px rgba(40,50,130,.5),0 12px 24px -14px rgba(40,50,130,.3);
  transform-origin:50% 0;
}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .window{animation:flatten linear both;animation-timeline:view();animation-range:entry 10% cover 42%}
    @keyframes flatten{
      from{transform:rotateX(22deg) scale(.92) translateY(30px)}
      to{transform:none}
    }
  }
}
.win-bar{display:flex;align-items:center;gap:7px;padding:13px 18px;border-bottom:1px solid rgba(11,29,63,.08)}
.win-bar span{width:11px;height:11px;border-radius:50%;background:rgba(11,29,63,.16)}
.win-bar b{margin:0 auto;padding:5px 14px;border-radius:999px;background:rgba(255,255,255,.7);font-size:12.5px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.win-body{display:grid;grid-template-columns:200px 1fr;min-height:340px}
.wp-side{display:flex;flex-direction:column;gap:2px;padding:18px 12px;border-right:1px solid rgba(11,29,63,.08)}
.wp-side span{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:12px;font-size:14px;font-weight:600;color:var(--ink-2)}
.wp-side svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wp-side .on{background:var(--ink);color:#fff}
.wp-main{padding:20px 24px 24px}
.wp-head{display:flex;align-items:center;gap:14px}
.wp-head strong{font-size:22px;letter-spacing:-.02em}
.wp-head em{font-style:normal;font-size:13px;font-weight:700;padding:7px 12px;border-radius:10px;color:var(--sky);box-shadow:0 0 0 1px rgba(29,79,158,.35) inset}
.wp-tabs{margin:10px 0 12px;font-size:13px;font-weight:600;color:var(--ink-2)}
.wp-tabs i{font-style:normal;opacity:.4;margin:0 6px}
.wp-rows li{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:14px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.7);margin-top:6px}
.wp-rows b{display:block;font-size:15px}
.wp-rows small{display:block;font-size:13px;color:var(--ink-2);line-height:1.45}
.chk{width:16px;height:16px;border-radius:5px;box-shadow:0 0 0 1.5px rgba(11,29,63,.3) inset}
.chk.on{background:var(--ink);box-shadow:none;position:relative}
.chk.on::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.state{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;background:rgba(29,79,158,.1);color:var(--sky)}
.wp-rows .yours{background:rgba(255,255,255,.34);outline:1.5px dashed rgba(11,29,63,.32);outline-offset:-1.5px}
.wp-rows .yours .state{background:var(--sun);color:var(--sun-ink)}
@media (max-width:760px){
  .win-body{grid-template-columns:1fr}
  .wp-side{flex-direction:row;overflow:hidden;border-right:0;border-bottom:1px solid rgba(11,29,63,.08);padding:10px}
  .wp-side span{flex:none;padding:7px 10px;font-size:13px}
  .wp-side span:not(.on):nth-child(n+3){display:none}
  .wp-main{padding:16px}
  .wp-rows li{grid-template-columns:1fr auto;padding:11px 12px}
  .wp-rows .chk{display:none}
  .win-bar b{font-size:11px}
}

/* shared headings */
.plugins h2,.panel h2{font-size:clamp(2rem,4vw,3.25rem);font-weight:700}
.panel h3,.group h3{font-size:1.15rem;font-weight:700;letter-spacing:-.01em}

/* plugins: four tinted paper panels, hairline rows, no cards in cards */
.plugins{margin-top:clamp(80px,10vw,140px)}
.sheet-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px 64px;align-items:end;padding:0 clamp(4px,1vw,12px)}
.sheet-head p{color:var(--ink-2);max-width:52ch}
@media (max-width:860px){.sheet-head{grid-template-columns:1fr}}
.groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2vw,22px);margin-top:clamp(28px,4vw,44px);align-items:start}
.gcol{display:grid;gap:clamp(14px,2vw,22px)}
/* two balanced columns (4+2 and 3+3 rows); on one column the story order is restored */
@media (max-width:900px){
  .groups{grid-template-columns:1fr}
  .gcol{display:contents}
  .g-sky{order:1}.g-peach{order:2}.g-lav{order:3}.g-mint{order:4}
}
.group{padding:clamp(22px,3vw,34px) clamp(14px,2vw,26px) clamp(14px,2vw,22px);border-radius:var(--radius-lg);background:var(--paper);box-shadow:0 0 0 1px rgba(255,255,255,.75) inset,0 22px 40px -32px rgba(40,30,120,.35)}
.group h3{padding:0 clamp(4px,1vw,10px) 14px;font-size:clamp(1.3rem,2vw,1.6rem);letter-spacing:-.02em;color:var(--ink)}
.g-sky{--paper:var(--paper-sky);--disc:var(--disc-sky)}
.g-peach{--paper:var(--paper-peach);--disc:var(--disc-peach)}
.g-lav{--paper:var(--paper-lav);--disc:var(--disc-lav)}
.g-mint{--paper:var(--paper-mint);--disc:var(--disc-mint)}
.rows li{border-top:1px solid rgba(11,29,63,.1)}
.rows a{
  display:grid;grid-template-columns:46px minmax(0,1fr) 20px;
  grid-template-areas:"disc name arr" "disc desc desc" "disc tag tag";
  column-gap:16px;row-gap:4px;align-items:center;
  padding:18px clamp(8px,1.2vw,14px);margin:0 -2px;border-radius:20px;color:var(--ink);text-decoration:none;
  transition:background-color .3s var(--ease),transform .4s var(--ease);
}
.rows a:hover{background:rgba(255,255,255,.6);color:var(--ink);transform:translateX(3px)}
.disc{grid-area:disc;align-self:start;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--disc)}
.ico{width:22px;height:22px;fill:none;stroke:var(--ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rows b{grid-area:name;font-size:1.05rem;font-weight:700;letter-spacing:-.01em}
.rows span{grid-area:desc;font-size:.95rem;color:var(--ink-2);line-height:1.5;max-width:56ch}
.rows .tag{grid-area:tag;justify-self:start;margin-top:8px}
.arr{grid-area:arr;width:20px;height:20px;fill:none;stroke:var(--ink-2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .4s var(--ease)}
.rows a:hover .arr{transform:translateX(3px)}
.tag{font-style:normal;font-size:12.5px;font-weight:700;white-space:nowrap;padding:6px 11px;border-radius:999px;color:var(--ink-2);background:rgba(255,255,255,.7)}
.tag-live{color:#0b5532;background:rgba(255,255,255,.85)}
.tag-live::before{content:"";display:inline-block;width:7px;height:7px;margin-right:7px;border-radius:50%;background:#1a9a5c;vertical-align:1px}
.tag-org{color:var(--sky-deep);background:rgba(255,255,255,.85)}
.tag-new{color:var(--sun-ink);background:rgba(242,169,59,.5)}

/* panels */
#custom,#apps{margin-top:clamp(14px,2vw,22px)}
.panel{border-radius:var(--radius-lg);padding:clamp(30px,5vw,64px)}
@media (max-width:520px){.panel{padding:28px 20px}}
.panel-indigo{background:var(--indigo);color:var(--on-navy)}
.panel-lav{background:var(--paper-lav);box-shadow:0 0 0 1px rgba(255,255,255,.75) inset,0 22px 40px -32px rgba(40,30,120,.35)}

/* custom */
.custom{display:grid;grid-template-columns:1.1fr .9fr;gap:48px 64px}
.custom h2{color:#fff}
.custom-intro p{margin-top:20px;color:var(--on-navy-2);max-width:48ch;font-size:1.06rem}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:30px}
.link-light{color:#fff;text-decoration:underline;text-decoration-color:rgba(255,255,255,.4);font-weight:600}
.link-light:hover{color:var(--sun-hi);text-decoration-color:var(--sun-hi)}
.custom-what h3{color:#fff;margin-bottom:14px}
.what li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line-light);color:var(--on-navy)}
.what li::before{content:"";position:absolute;left:4px;top:21px;width:10px;height:10px;border-radius:50%;background:var(--sun)}
.custom-what .more{margin-top:16px;font-size:.95rem;color:var(--on-navy-2)}
.path{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:0;counter-reset:step;border-top:1px solid var(--line-light);padding-top:32px}
.path li{counter-increment:step;position:relative;padding:0 24px 0 0}
.path li::before{
  content:counter(step);display:grid;place-items:center;width:36px;height:36px;margin-bottom:16px;border-radius:50%;
  font-weight:800;font-size:15px;color:var(--sun-ink);background:linear-gradient(180deg,var(--sun-hi),var(--sun));
}
.path li:not(:last-child)::after{content:"";position:absolute;left:46px;right:12px;top:18px;height:1px;background:linear-gradient(90deg,rgba(242,169,59,.7),rgba(255,255,255,.15))}
.path b{display:block;color:#fff;font-size:1.02rem}
.path span{display:block;margin-top:4px;color:var(--on-navy-2);font-size:.94rem}
@media (max-width:900px){
  .custom{grid-template-columns:1fr}
  .path{grid-template-columns:1fr 1fr;gap:28px 0}
  .path li:nth-child(2)::after{display:none}
}
@media (max-width:520px){.path{grid-template-columns:1fr}.path li::after{display:none}}

/* apps */
.apps{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:56px}
.phone{
  width:240px;height:480px;border-radius:44px;padding:12px;background:#fff;
  box-shadow:0 36px 60px -30px rgba(40,20,110,.45),0 10px 22px -12px rgba(40,20,110,.25);
}
.phone-screen{
  position:relative;height:100%;border-radius:34px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;
  background:linear-gradient(165deg,#1b4290,var(--indigo) 70%);
}
.phone-screen::before{content:"";position:absolute;top:10px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:999px;background:var(--ink)}
.phone-screen img{width:92px;height:92px;filter:drop-shadow(0 10px 24px rgba(160,90,0,.45))}
.phone-screen span{padding:8px 16px;border-radius:999px;font-weight:700;font-size:14px;color:#fff;background:rgba(10,27,62,.42);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.apps-copy p{margin:18px 0 28px;max-width:44ch;color:var(--ink-2);font-size:1.06rem}
@media (max-width:760px){
  .apps{grid-template-columns:1fr;gap:32px;justify-items:center;text-align:center}
  .phone{width:200px;height:400px}
  .apps-copy p{margin-left:auto;margin-right:auto}
}

/* faq: native <details>, no script */
#faq{margin-top:clamp(14px,2vw,22px)}
.panel-paper{background:rgba(255,255,255,.78);box-shadow:0 0 0 1px rgba(255,255,255,.9) inset,0 0 0 1px rgba(11,29,63,.05),0 22px 40px -32px rgba(40,30,120,.3)}
.faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:32px clamp(32px,6vw,80px);align-items:start}
.faq-head p{margin-top:16px;color:var(--ink-2);max-width:34ch}
.faq-list details{border-top:1px solid var(--line)}
.faq-list details:last-child{border-bottom:1px solid var(--line)}
.faq-list summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 4px;cursor:pointer;
  font-weight:700;font-size:1.08rem;letter-spacing:-.01em;list-style:none;border-radius:12px;
}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{
  content:"";flex:none;width:9px;height:9px;margin-right:6px;border:solid var(--ink-2);border-width:0 2px 2px 0;
  transform:translateY(-2px) rotate(45deg);transition:transform .35s var(--ease);
}
.faq-list details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.faq-list summary:hover{color:var(--sky-deep)}
.faq-list details p{padding:0 4px 22px;max-width:62ch;color:var(--ink-2)}
@media (max-width:860px){.faq{grid-template-columns:1fr}}

/* legal text pages */
.legal-wrap{padding-block:clamp(48px,8vw,96px) clamp(56px,8vw,110px)}
.legal{max-width:820px;margin-inline:auto}
.legal h1{font-size:clamp(2.2rem,5vw,3.4rem);font-weight:700;letter-spacing:-.035em}
.legal .lead{margin-top:18px;font-size:1.2rem;font-weight:600;color:var(--ink);max-width:52ch}
.legal h2{margin:40px 0 10px;font-size:1.3rem;font-weight:700;letter-spacing:-.015em}
.legal p,.legal address{max-width:68ch;color:var(--ink-2);margin-top:0}
.legal p + p{margin-top:12px}
.legal address{font-style:normal;line-height:1.7;margin-bottom:12px}
.legal code{font:600 .92em ui-monospace,SFMono-Regular,Menlo,monospace;padding:1px 6px;border-radius:6px;background:rgba(11,29,63,.07)}
.legal .fine{margin-top:36px;font-size:.9rem}

/* footer: a deep band that anchors the page */
.foot{margin-top:clamp(56px,8vw,100px);background:var(--ink);color:var(--on-navy);padding:clamp(40px,5vw,72px) var(--gutter) clamp(28px,3vw,40px)}
.foot-in{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1.1fr 1.2fr .9fr;gap:36px 48px;font-size:.95rem}
.foot-brand img{height:30px;width:auto}
.foot-brand p{margin-top:16px;color:var(--on-navy-2);max-width:34ch}
.foot-contact{display:flex;flex-direction:column;gap:10px;color:var(--on-navy)}
.foot-contact .legal{font-weight:700;font-size:.82rem;letter-spacing:.01em;line-height:1.45}
.foot-links li + li{margin-top:10px}
.foot-fine{grid-column:1/-1;padding-top:22px;border-top:1px solid var(--line-light);font-size:.8rem;color:var(--on-navy-2)}
.foot-fine a{color:var(--on-navy-2)}
.foot-fine a:hover{color:#fff}
@media (max-width:900px){.foot-in{grid-template-columns:1fr 1fr}.foot-brand{grid-column:1/-1}}
@media (max-width:560px){.foot-in{grid-template-columns:1fr}}