/* Base: reset, type, app shell */

*,*::before,*::after{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{
  margin:0;min-height:100vh;
  background:var(--paper);color:var(--ink);
  font-family:var(--font);font-size:var(--t-md);line-height:1.5;
  font-feature-settings:"ss01","ss02";
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,p{margin:0}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
del{color:var(--muted);text-decoration-thickness:1px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.i{
  width:18px;height:18px;flex:0 0 auto;
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{
  position:fixed;left:16px;top:-60px;z-index:200;padding:10px 14px;border-radius:var(--r-sm);
  background:var(--ink);color:var(--paper);font-size:var(--t-sm);font-weight:600;text-decoration:none;
  transition:top var(--dur) var(--ease);
}
.skip-link:focus{top:12px}
#main:focus{outline:0}

/* Text roles */
.label{
  display:block;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.01em;
  color:var(--muted);
}

/* Shell */
.main-shell{min-height:100vh}
.topbar{
  position:sticky;top:0;z-index:30;
  height:var(--topbar);padding:0 var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:var(--s-6);
  background:var(--paper);border-bottom:1px solid var(--line);
}
.top-brand{border:0;background:none;padding:0;display:flex;align-items:center;gap:10px}
.brand-mark{
  width:30px;height:30px;display:block;flex:0 0 auto;
  background:url("../assets/mark.svg") center/contain no-repeat;
}
:root[data-theme="dark"] .brand-mark{background-image:url("../assets/mark-dark.svg")}
.brand-wordmark{font-size:19px;font-weight:700;letter-spacing:-.045em;line-height:1}
/* The signature: the name is the logo. In the interface the dot is drawn a touch larger (r 6.3 instead of 5.6)
   so it holds at 24–30px — the usual optical correction for small sizes.
   The signature — its own "w" is the mark (assets/brand, labs/brand/guidelines.html).
   Geometry and spacing are fixed; never set this name in plain type. */
.brand-sig{display:inline-flex;align-items:baseline;font-weight:800;font-size:28px;letter-spacing:-.056em;line-height:1;color:var(--ink);white-space:nowrap}
.brand-sig .brand-w{width:.87em;height:.645em;margin:0 -.005em 0 .02em;overflow:visible;color:currentColor}
/* The dot lives inside a reused SVG symbol, so it is styled through inherited custom properties:
   --brand-dot (colour) and --dot-y (the hop, animated on any ancestor with .is-cheer). */
@property --dot-y{syntax:"<length>";inherits:true;initial-value:0px}
.brand-dot{fill:var(--brand-dot,var(--accent));transform:translateY(var(--dot-y))}
.is-cheer{animation:brandHop .9s ease-in-out}
@keyframes brandHop{0%,100%{--dot-y:0px}40%{--dot-y:-7px}70%{--dot-y:0px}82%{--dot-y:-2px}}

.top-nav{display:flex;align-items:center;gap:30px}
.top-nav button,.quiet-link{
  position:relative;border:0;background:none;padding:8px 0;
  color:var(--muted);font-size:var(--t-sm);font-weight:500;
  transition:color var(--dur) var(--ease);
}
.top-nav button:hover,.quiet-link:hover,.top-nav button.active{color:var(--ink)}
.nav-count{
  display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;
  border-radius:var(--r-pill);background:var(--accent);color:#fff;
  font-size:11px;font-weight:700;vertical-align:1px;font-variant-numeric:tabular-nums;
}
.top-nav button.active::after{
  content:"";position:absolute;left:0;right:0;bottom:calc((var(--topbar) - 36px) / -2);
  height:1px;background:var(--ink);
}
.topbar-actions{display:flex;align-items:center;gap:var(--s-3)}
.profile-chip{border:0;background:none;padding:3px;border-radius:var(--r-pill);display:flex;align-items:center;gap:9px;text-align:left}
.profile-chip-copy{display:grid;line-height:1.25}
.profile-chip-copy strong{font-size:var(--t-xs);font-weight:600}
.profile-chip-copy small{font-size:var(--t-xs);color:var(--muted)}

.theme-sun{display:none}
:root[data-theme="dark"] .theme-sun{display:block}
:root[data-theme="dark"] .theme-moon{display:none}

.view-stack{max-width:1540px;margin:0 auto;padding:42px var(--gutter) var(--s-10)}
.view{display:none}
.view.active{display:block;animation:viewIn .35s var(--ease)}
@keyframes viewIn{from{opacity:.2;transform:translateY(4px)}to{opacity:1;transform:none}}

/* Page headings */
.page-head{display:flex;justify-content:space-between;align-items:end;gap:var(--s-5);margin:18px 0 42px}
.page-head h1,.pricing-head h1{
  margin:10px 0;font-size:var(--t-2xl);font-weight:500;line-height:1;letter-spacing:-.045em;
}
.page-head p,.pricing-head p{max-width:720px;color:var(--muted);line-height:1.7}
.section-heading{display:flex;justify-content:space-between;align-items:end;gap:var(--s-4);margin:0 0 26px}
.section-heading h2{margin-top:6px;font-size:var(--t-xl);font-weight:600;letter-spacing:-.04em;line-height:1.1}
.section-heading.compact{margin-bottom:var(--s-3)}

/* Mobile navigation */
.mobile-nav{display:none}

/* The full bar needs about 1280px (Turkish labels are the longest). Below that the avatar stays and its
   caption goes; below 1180px the Host link goes too, as it already does on tablets and phones. */
@media (max-width:1279px){
  .profile-chip-copy{display:none}
}
@media (max-width:1179px){
  .quiet-link{display:none}
}
@media (max-width:1120px){
  .top-nav{gap:18px}
}
/* Tablets: the five destinations move to the bottom bar a little earlier than the phone layout,
   so the top bar never wraps or scrolls sideways between 821 and 1023px. */
@media (min-width:821px) and (max-width:1023px){
  .top-nav,.quiet-link{display:none}
  .view-stack{padding-bottom:104px}
  .mobile-nav{
    position:fixed;z-index:70;left:50%;bottom:12px;width:min(520px,calc(100% - 24px));transform:translateX(-50%);
    display:grid;grid-template-columns:repeat(5,1fr);padding:6px;
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:0 14px 40px rgba(28,25,20,.12);
  }
  .mobile-nav button{border:0;background:none;color:var(--muted);display:grid;place-items:center;gap:2px;padding:4px;border-radius:var(--r-sm)}
  .mobile-nav button.active{color:var(--ink)}
  .mobile-nav button>span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%}
  .mobile-nav .i{width:19px;height:19px}
  .mobile-nav small{font-size:var(--t-xs)}
  .mobile-talk span{background:var(--action);color:var(--on-action)}
}
@media (max-width:820px){
  :root{--topbar:64px}
  .top-nav,.quiet-link,.profile-chip-copy{display:none}
  .view-stack{padding:28px 16px 104px}
  .page-head{flex-direction:column;align-items:flex-start;margin-bottom:32px}
  .section-heading{flex-direction:column;align-items:flex-start}
  .mobile-nav{
    position:fixed;z-index:70;left:10px;right:10px;bottom:10px;
    display:grid;grid-template-columns:repeat(5,1fr);padding:6px;
    background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(18px);
    border:1px solid var(--line);border-radius:var(--r-lg);
    box-shadow:0 14px 40px rgba(28,25,20,.12);
  }
  .mobile-nav button{border:0;background:none;color:var(--muted);display:grid;place-items:center;gap:2px;padding:4px;border-radius:var(--r-sm)}
  .mobile-nav button.active{color:var(--ink)}
  .mobile-nav button>span{width:32px;height:32px;display:grid;place-items:center;border-radius:50%}
  .mobile-nav .i{width:19px;height:19px}
  .mobile-nav small{font-size:var(--t-xs)}
  .mobile-talk span{background:var(--action);color:var(--on-action)}
}
@media (max-width:520px){
  .topbar{gap:8px}
  .topbar-actions{gap:4px}
  .topbar .top-start{display:none}
  .brand-mark{width:28px;height:28px}
  .brand-wordmark{font-size:18px}
  .brand-sig{font-size:25px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}