/* MacSurf — landing-page components. Shared chrome (tokens, menubar) is in core.css (load first). */

  /* ---------- mac button ---------- */
  .btn{
    display:inline-flex;align-items:center;gap:9px;
    font-family:'Hanken Grotesk',sans-serif;font-weight:600;font-size:15px;
    text-decoration:none;cursor:pointer;border:none;
    padding:13px 22px;border-radius:11px;
    transition:transform .12s, box-shadow .12s;
  }
  .btn-primary{
    color:var(--white);
    background:linear-gradient(var(--ink-2),var(--ink));
    box-shadow:
      0 1px 0 rgba(255,255,255,.16) inset,
      0 8px 20px -8px var(--shadow);
  }
  .btn-primary::before{content:"";width:9px;height:9px;border-radius:50%;
    background:var(--yellow);box-shadow:0 0 0 1px var(--line);}
  .btn-ghost{
    color:var(--ink);
    background:linear-gradient(var(--white),#e7e3d6);
    box-shadow:0 0 0 1px var(--hair),0 1px 0 rgba(255,255,255,.7) inset,0 4px 12px var(--shadow);
  }
  .btn:hover{transform:translateY(-2px);}
  .btn:active{transform:translateY(1px);}

  /* ---------- mac window frame ---------- */
  .win{
    background:var(--platinum);
    border:1px solid var(--hair);
    border-radius:7px;
    box-shadow:0 0 0 1px rgba(255,255,255,.5) inset, 0 16px 34px var(--shadow);
  }
  .titlebar{
    display:flex;align-items:center;gap:8px;
    padding:6px 9px;border-bottom:1px solid var(--hair);
    background:
      repeating-linear-gradient(0deg,#f4f2ea 0 1px,#c4c0b3 1px 2px);
    border-radius:5px 5px 0 0;
  }
  .tb-box{
    width:13px;height:12px;border:1px solid var(--hair);border-radius:2.5px;
    background:linear-gradient(#fdfdfb,#c9c5b8);flex:none;
  }
  .tb-title{
    margin:0 auto;font-family:'IBM Plex Mono',monospace;font-size:10px;
    color:var(--ink);background:var(--platinum);padding:0 12px;
    white-space:nowrap;
  }
  .tb-right{display:flex;gap:6px;}
  .win-body{padding:20px;}

  /* ---------- hero ---------- */
  .hero{padding:62px 0 30px;}
  .hero-grid{display:grid;grid-template-columns:1.04fr .96fr;gap:54px;align-items:center;}
  .eyebrow{
    display:inline-flex;align-items:center;gap:9px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink);
    background:var(--white);border:1px solid var(--hair);
    padding:7px 12px;border-radius:20px;
    box-shadow:0 2px 8px rgba(22,34,60,.10);
  }
  .eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);
    box-shadow:0 0 0 3px rgba(196,112,58,.16);}
  h1.hero-title{
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
    font-size:clamp(2.7rem,5.4vw,4.35rem);line-height:1.02;
    letter-spacing:-.02em;margin:22px 0 0;
  }
  h1.hero-title em{font-style:normal;color:var(--orange);
    background:linear-gradient(transparent 66%, rgba(220,184,94,.34) 0);}
  .hero-sub{
    font-size:1.16rem;color:var(--ink-2);max-width:34ch;margin-top:20px;
  }
  .hero-sub b{color:var(--ink);font-weight:600;}
  .hero-cta{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap;}
  .specstrip{
    display:flex;gap:8px;flex-wrap:wrap;margin-top:30px;
  }
  .chip{
    font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--ink);
    background:var(--white);border:1px solid var(--hair);
    padding:7px 10px;border-radius:5px;
  }
  .chip b{color:var(--orange);}

  /* hero screenshot plate */
  .plate{
    background:var(--white);
    border:1px solid var(--hair);
    padding:10px;border-radius:9px;
    box-shadow:0 0 0 1px rgba(255,255,255,.6) inset, 0 24px 48px var(--shadow);
  }
  .plate img{border:1px solid var(--hair);border-radius:3px;}
  .hero-plate{transform:none;}
  .hero-stack{position:relative;}
  .hero-stack .float-badge{
    position:absolute;left:-34px;bottom:-30px;width:96px;height:96px;
    border-radius:50%;box-shadow:0 0 0 1px var(--hair),0 10px 22px -8px var(--shadow);
    background:var(--white);
  }
  .hero-stack .stamp{
    display:none;
    position:absolute;right:-18px;top:-22px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--white);
    background:var(--rust);border:1px solid var(--hair);
    padding:9px 12px;border-radius:7px;transform:rotate(7deg);
    box-shadow:0 6px 14px var(--shadow);text-align:center;line-height:1.5;
  }

  /* ---------- marquee ---------- */
  .marquee{
    display:none;
    margin-top:46px;border-top:1px solid var(--hair);
    border-bottom:1px solid var(--hair);
    background:var(--ink);overflow:hidden;
  }
  .marquee-track{
    display:flex;gap:34px;white-space:nowrap;
    padding:11px 0;width:max-content;
    animation:slide 26s linear infinite;
  }
  .marquee-track span{
    font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--yellow);
  }
  .marquee-track span i{color:#f3efe1;font-style:normal;}
  .marquee-track span::after{content:"✦";margin-left:34px;color:var(--orange);}
  @keyframes slide{to{transform:translateX(-50%);}}

  /* ---------- section scaffolding ---------- */
  section{padding:78px 0;}
  .sec-head{margin-bottom:40px;max-width:62ch;}
  .sec-kicker{
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--orange);
    display:block;margin-bottom:14px;
  }
  .sec-title{
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;
    font-size:clamp(2rem,3.6vw,2.9rem);line-height:1.05;letter-spacing:-.02em;
  }
  .sec-lead{margin-top:14px;color:var(--ink-2);font-size:1.08rem;}

  /* ---------- why (dark) ---------- */
  .why{
    background:var(--ink);color:#e9e6da;
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
    position:relative;overflow:hidden;
  }
  .why::after{display:none;}
  .why .sec-title{color:var(--white);}
  .why-grid{display:grid;grid-template-columns:1.5fr .9fr;gap:50px;align-items:center;}
  .why p{color:#bcc4d6;font-size:1.1rem;margin-top:18px;max-width:54ch;}
  .why p b{color:var(--yellow);font-weight:600;}
  .why .firstline{
    font-family:'Bricolage Grotesque',sans-serif;font-weight:700;
    font-size:1.5rem;color:#fff;line-height:1.3;margin-top:0;
  }
  .puffin-card{
    background:var(--paper-2);border:1px solid var(--platinum-d);border-radius:12px;
    padding:30px;text-align:center;
    box-shadow:0 10px 26px -10px rgba(0,0,0,.16);
  }
  .puffin-card img{width:100%;max-width:230px;margin:0 auto;}
  .puffin-card .cap{
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--rust);
    margin-top:18px;
  }
  .puffin-card .cap span{color:var(--ink-2);display:block;margin-top:7px;}

  /* ---------- box: component cards ---------- */
  .box-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
  .comp-body{display:flex;flex-direction:column;gap:12px;}
  .comp-lang{
    font-family:'IBM Plex Mono',monospace;font-size:12px;font-weight:600;
    color:var(--white);background:var(--ink-2);align-self:flex-start;
    padding:4px 9px;border-radius:5px;border:1px solid var(--hair);
  }
  .comp-name{
    font-family:'Bricolage Grotesque',sans-serif;font-weight:800;font-size:1.5rem;
    letter-spacing:-.01em;
  }
  .comp-name .tag{font-family:'IBM Plex Mono',monospace;font-size:.62em;
    color:var(--orange);font-weight:500;}
  .comp-desc{color:var(--ink-2);font-size:.99rem;}
  .comp-foot{
    margin-top:auto;font-family:'IBM Plex Mono',monospace;font-size:9px;
    color:var(--ink);border-top:1px dashed var(--platinum-d);padding-top:13px;
  }

  /* ---------- works: feature panels ---------- */
  .feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .feat{
    background:var(--white);border:1px solid var(--hair);border-radius:9px;
    padding:24px;box-shadow:0 12px 28px -12px var(--shadow);
  }
  .feat h3{
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink);
    padding-bottom:13px;margin-bottom:14px;
    border-bottom:1px solid var(--platinum-d);
    display:flex;align-items:center;gap:9px;
  }
  .feat h3 .pip{width:11px;height:11px;border-radius:2px;flex:none;
    border:1px solid var(--hair);}
  .feat ul{list-style:none;display:flex;flex-direction:column;gap:9px;}
  .feat li{
    font-size:.96rem;color:var(--ink-2);padding-left:24px;position:relative;
  }
  .feat li::before{
    content:"";position:absolute;left:0;top:.32em;
    width:13px;height:13px;border-radius:3px;
    background:var(--yellow);border:1px solid var(--hair);
  }
  .feat li::after{
    content:"";position:absolute;left:3.5px;top:.52em;
    width:4px;height:7px;border:solid var(--ink);border-width:0 2px 2px 0;
    transform:rotate(40deg);
  }
  .feat code{font-family:'IBM Plex Mono',monospace;font-size:.84em;
    background:var(--paper);padding:1px 5px;border-radius:4px;
    border:1px solid var(--platinum-d);color:var(--ink);}

  /* ---------- gallery (desktop) ---------- */
  .gallery{
    background:var(--paper-2);
    border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
    background-image:repeating-linear-gradient(0deg,rgba(22,34,60,.03) 0 1px,transparent 1px 5px);
  }
  .shots{display:grid;grid-template-columns:repeat(2,1fr);gap:34px;}
  .shot{transition:transform .16s;}
  .shot:nth-child(odd){transform:none;}
  .shot:nth-child(even){transform:none;}
  .shot:hover{transform:rotate(0) translateY(-5px) scale(1.012);z-index:2;position:relative;}
  .shot .cap{
    display:flex;align-items:baseline;gap:10px;margin-top:13px;
    font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--ink);
  }
  .shot .cap .num{
    color:var(--white);background:var(--orange);
    border:1px solid var(--hair);border-radius:4px;padding:3px 6px;flex:none;
  }
  .shot .cap .desc{color:var(--ink-2);font-family:'IBM Plex Mono',monospace;
    font-size:11px;font-weight:500;}
  .shot.wide{grid-column:1/-1;}
  .shot.wide,
  .shot.wide:nth-child(odd),
  .shot.wide:nth-child(even){transform:rotate(0);}
  .shot.wide:hover{transform:translateY(-5px);}

  /* ---------- constraints (dark mono) ---------- */
  .rules{background:var(--ink);color:#e9e6da;}
  .rules .sec-title{color:#fff;}
  .rules .sec-kicker{color:var(--yellow);}
  .rules .sec-lead{color:#aab3c8;}
  .rule-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:8px;}
  .rule{
    background:#1d2c4c;border:1px solid #3a4a72;border-radius:9px;
    padding:20px 22px;display:flex;gap:15px;align-items:flex-start;
  }
  .rule .idx{
    font-family:'IBM Plex Mono',monospace;font-size:13px;color:var(--ink);
    background:var(--yellow);border:1px solid var(--hair);border-radius:6px;
    padding:6px 8px;flex:none;
  }
  .rule h4{font-family:'IBM Plex Mono',monospace;font-size:.98rem;color:#fff;
    font-weight:600;margin-bottom:5px;}
  .rule p{font-size:.92rem;color:#aab3c8;}
  .rule p code{color:var(--yellow);font-family:'IBM Plex Mono',monospace;font-size:.92em;}

  /* ---------- getting started ---------- */
  .start-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;}
  .term{
    background:var(--ink);border-radius:0 0 5px 5px;
    padding:18px 20px;font-family:'IBM Plex Mono',monospace;font-size:13.5px;
    color:#e9e6da;line-height:1.85;
  }
  .term .c{color:#7f8ba8;}
  .term .p{color:var(--yellow);}
  .term .o{color:var(--orange);}
  .start-note{margin-top:16px;color:var(--ink-2);font-size:.97rem;}
  .start-note a{color:var(--orange);font-weight:600;text-decoration:none;
    border-bottom:1px solid rgba(173,72,47,.45);}
  .start-note a:hover{border-bottom-color:var(--orange);}

  /* ---------- footer ---------- */
  footer{
    background:var(--ink);color:#aab3c8;
    border-top:1px solid var(--hair);padding:56px 0 34px;
  }
  .foot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;
    align-items:flex-start;}
  .foot-brand{display:flex;gap:15px;align-items:center;}
  .foot-brand img{width:54px;height:54px;border-radius:50%;
    box-shadow:0 0 0 1px #3a4a72;}
  .foot-brand .word{font-family:'Silkscreen',monospace;font-size:18px;color:#fff;
    border-bottom:2px solid var(--orange);padding-bottom:2px;}
  .foot-brand p{font-size:.86rem;margin-top:7px;max-width:30ch;}
  .foot-cols{display:flex;gap:54px;flex-wrap:wrap;}
  .foot-col h5{font-family:'IBM Plex Mono',monospace;font-size:9px;color:var(--yellow);
    margin-bottom:13px;}
  .foot-col a{display:block;text-decoration:none;color:#aab3c8;font-size:.92rem;
    margin-bottom:8px;transition:.15s;}
  .foot-col a:hover{color:#fff;}
  .foot-bar{
    margin-top:42px;padding-top:22px;border-top:1px solid #3a4a72;
    display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
    font-family:'IBM Plex Mono',monospace;font-size:12px;color:#7f8ba8;
  }
  .foot-bar b{color:#e9e6da;font-weight:500;}
  .foot-bar .mpls-mark{display:inline-flex;align-items:center;gap:8px;
    text-decoration:none;color:#aab3c8;transition:.15s;}
  .foot-bar .mpls-mark:hover{color:#fff;}
  .foot-bar .mpls-mark img{display:block;opacity:.85;}
  .foot-bar .mpls-mark:hover img{opacity:1;}

  /* ---------- reveal animation ---------- */
  .rise{opacity:0;transform:translateY(20px);
    animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards;}
  @keyframes rise{to{opacity:1;transform:none;}}
  .d1{animation-delay:.05s}.d2{animation-delay:.14s}.d3{animation-delay:.23s}
  .d4{animation-delay:.32s}.d5{animation-delay:.41s}

  @media(max-width:880px){
    .hero-grid,.why-grid{grid-template-columns:1fr;gap:40px;}
    .box-grid,.feat-grid,.shots,.rule-list,.start-grid{grid-template-columns:1fr;}
    .menu-links a:not(.btn){display:none;}
    .clock{display:none;}
    .menubar .wrap{flex-wrap:nowrap;gap:12px;min-height:0;padding:10px 18px;}
    .menu-links{margin-left:auto;flex-wrap:nowrap;}
    .menu-links a.btn{padding:7px 12px;font-size:12px;white-space:nowrap;}
    .brand img{height:clamp(36px,9.5vw,52px);}
    .hero-stack .float-badge{width:72px;height:72px;left:-12px;}
    section{padding:58px 0;}
    .shot:nth-child(odd),.shot:nth-child(even){transform:none;}
  }
  @media(prefers-reduced-motion:reduce){
    .rise,.marquee-track{animation:none;}
    .rise{opacity:1;transform:none;}
  }