/* ==========================================================================
   RustedWax landing page
   Implemented to match the approved design at a 1024px page / 924px content
   grid. All desktop values are design pixels.
   ========================================================================== */

:root{
  --ink:            #0c0d0e;   /* dark section background            */
  --cream:          #fafbfc;   /* light section background           */
  --pink:           #fd5a9d;   /* buttons, source icons              */
  --pink-vivid:     #ff0f5d;   /* light-section feature icons        */
  --pink-soft-a:    #fe9ac9;   /* headline gradient, top             */
  --pink-soft-b:    #f2699f;   /* headline gradient, bottom          */

  --on-dark:        #ffffff;
  --on-dark-soft:   #cfd3d2;
  --on-dark-mute:   #b3b7b6;

  --on-light:       #0a0b0d;
  --on-light-soft:  #4e5a75;
  --on-light-mute:  #56617a;

  --hairline:       #e5eaf0;

  --font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica,
          "Segoe UI", Roboto, Arial, "Liberation Sans", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ background:var(--ink); }

body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--font);
  font-size:17px;
  line-height:1.4;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{ color:inherit; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

:focus-visible{
  outline:2px solid var(--pink);
  outline-offset:3px;
  border-radius:4px;
}

/* --- page column ---------------------------------------------------------- */
.wrap{
  width:100%;
  max-width:1024px;
  margin-inline:auto;
  padding-inline:50px;
}

/* --- shared type ---------------------------------------------------------- */
.eyebrow{
  margin:0;
  font-size:10px;
  font-weight:500;
  letter-spacing:.38em;
  text-transform:uppercase;
  color:#e8ecee;
}
.eyebrow-pink{ color:#f87ab0; letter-spacing:.32em; }

.h1{
  margin:0;
  font-size:62px;
  line-height:54px;
  font-weight:700;
  letter-spacing:-.012em;
  color:var(--on-dark);
}
.h1 .pink,
.h2 .pink{
  background:linear-gradient(180deg,var(--pink-soft-a) 0%,var(--pink-soft-b) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.h2{
  margin:0;
  font-size:36px;
  line-height:37px;
  font-weight:700;
  letter-spacing:-.022em;
  color:var(--on-light);
}
.h2-light{ color:var(--on-dark); line-height:35px; }

/* --- buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
.btn .ico{ width:20px; height:20px; flex:none; }

.btn-primary{
  height:49px;
  padding:0 26px;
  border-radius:13px;
  background:var(--pink);
  color:#0b0c0d;
  font-size:16px;
}
.btn-primary:hover{ background:#fe6ba7; }

.btn-ghost-dark{
  height:49px;
  padding:0 27px;
  border-radius:13px;
  background:#101113;
  border:1px solid rgba(255,255,255,.30);
  color:var(--on-dark);
  font-size:16px;
  font-weight:500;
}
.btn-ghost-dark:hover{ background:#191a1d; border-color:rgba(255,255,255,.5); }

.btn-outline{
  height:45px;
  padding:0 16px;
  border-radius:10px;
  border:1px solid #9aa2b6;
  color:#2e3a57;
  font-size:15px;
  font-weight:400;
  background:transparent;
}
.btn-outline:hover{ border-color:#5d6884; background:rgba(46,58,87,.04); }
.btn-outline .arrow{ font-size:17px; line-height:1; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position:relative;
  overflow:hidden;
  padding:18px 0 19px;
  background:var(--ink);
}

.glow{ position:absolute; inset:0; pointer-events:none; }
.glow span{ position:absolute; display:block; border-radius:50%; }
.glow-core{
  width:112px; height:300px;
  left:calc(50% + 148px); top:68px;
  transform:rotate(11deg);
  background:radial-gradient(closest-side,
              rgba(255,26,112,.78), rgba(255,26,112,.25) 56%, rgba(255,26,112,0) 80%);
  filter:blur(27px);
}
.glow-haze{
  width:560px; height:440px;
  left:calc(50% + 48px); top:39px;
  background:radial-gradient(closest-side,
              rgba(214,26,104,.26), rgba(214,26,104,.06) 56%, rgba(214,26,104,0) 78%);
  filter:blur(52px);
}

.hero-wrap{ position:relative; }

.hero-logo{ width:auto; height:92px; }

.hero-main .eyebrow{ margin-top:20px; }
.hero-main .h1{ margin-top:13px; }

.lede{
  margin:12px 0 0;
  font-size:20px;
  line-height:23px;
  color:#e9ecef;
  font-weight:400;
}

.actions{ display:flex; flex-wrap:wrap; gap:15px; margin-top:18px; }

.sources{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 38px;
  margin:17px 0 0;
  padding:0;
  list-style:none;
}
.sources li{ display:flex; align-items:center; }
.sources .src-link{ display:flex; align-items:center; text-decoration:none; }
.sources .src-link:hover span{ color:#e6e9e9; }
.src-ico{ width:27px; height:27px; flex:none; margin-right:13px; }
.sources span{ font-size:13px; color:#b0b3b3; }

/* right-hand rail */
.rail{
  position:absolute;
  top:162px;
  left:calc(50px + 775px);
  margin:0;
}
.rail p{ margin:0; text-transform:uppercase; }
.rail-top{
  font-size:11px;
  line-height:22.5px;
  letter-spacing:.26em;
  color:#e7e9ec;
  font-weight:400;
}
.rail-rule{
  display:block;
  width:34px; height:2px;
  margin:22px 0 40px;
  background:#e33a78;
}
.rail-bottom{
  font-size:8.5px;
  line-height:16.5px;
  letter-spacing:.24em;
  color:#b5b1b4;
}

/* ==========================================================================
   THE APP  (light panel)
   ========================================================================== */
.app{
  background:var(--cream);
  border-radius:28px;
  padding:27px 0 27px;
  color:var(--on-light);
}

.app-grid{
  display:grid;
  grid-template-columns:310px 1fr;
  gap:16px;
  align-items:start;
}

.app-copy{ padding-top:39px; }
.app-copy .h2{ margin-top:7px; }

.app-lede{
  margin:17px 0 0;
  font-size:17px;
  line-height:23.5px;
  color:var(--on-light-soft);
}
.app-lede-short{ margin-top:19px; }
.app-copy .btn-outline{ margin-top:20px; }

/* --- phones --------------------------------------------------------------- */
.phones{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.phone{
  margin:0;
  padding:3px;
  border-radius:22px;
  background:linear-gradient(145deg,#e3e6ea 0%,#b4b8be 26%,#8d9198 62%,#c6cad0 100%);
  box-shadow:0 10px 26px rgba(20,26,44,.16);
}
.phone img{
  width:100%;
  height:auto;
  border-radius:19px;
  background:#000;
}

.cross{
  margin:15px 0 0;
  text-align:center;
  font-size:15px;
  line-height:1.1;
  font-weight:700;
  color:var(--on-light);
}
.cross .x{ color:var(--pink-vivid); font-weight:700; }

.cross-sub{
  margin:2px 0 0;
  text-align:center;
  font-size:13px;
  line-height:1.15;
  color:var(--on-light-mute);
}

.shot-notes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin:18px 0 0;
  padding:0;
  list-style:none;
}
.shot-notes h3{
  margin:0;
  font-size:15px;
  line-height:19px;
  font-weight:700;
  color:var(--on-light);
  letter-spacing:-.01em;
}
.shot-notes p{
  margin:4px 0 0;
  font-size:13px;
  line-height:19px;
  color:var(--on-light-mute);
}

/* --- rule + features ------------------------------------------------------ */
.rule{
  height:1px;
  border:0;
  background:var(--hairline);
  margin:26px 0 0;
}

.features{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
  margin:22px 0 0;
  padding:0;
  list-style:none;
}
.feat-ico{
  width:43px; height:43px;
  color:var(--pink-vivid);
  display:block;
}
.features h3{
  margin:11px 0 0;
  font-size:15px;
  line-height:19px;
  font-weight:700;
  color:var(--on-light);
  letter-spacing:-.012em;
}
.features p{
  margin:8px 0 0;
  font-size:13px;
  line-height:18px;
  color:var(--on-light-mute);
}

/* ==========================================================================
   WHY  (dark)
   ========================================================================== */
.why{
  background:var(--ink);
  padding:21px 0 8px;
}

.why-grid{
  display:grid;
  grid-template-columns:1fr 440px;
  gap:44px;
  align-items:start;
}
.why-grid .h2{ margin-top:7px; }

.why-lede{
  margin:25px 0 0;
  font-size:14px;
  line-height:19.5px;
  color:var(--on-dark-soft);
}

.why-cards{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}
.why-cards li{
  min-height:101px;
  padding:3px 18px 6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.085);
  background:linear-gradient(160deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
}
.card-ico{ width:26px; height:26px; color:#fb2e7e; display:block; }
.why-cards h3{
  margin:6px 0 0;
  font-size:13.5px;
  line-height:17px;
  font-weight:700;
  color:var(--on-dark);
  letter-spacing:-.01em;
}
.why-cards p{
  margin:4px 0 0;
  font-size:13px;
  line-height:16px;
  color:var(--on-dark-mute);
}

/* --- colophon ------------------------------------------------------------- */
.colophon{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:2px;
  padding-bottom:8px;
}
.mark{
  display:flex;
  align-items:center;
  gap:16px;
  margin:0;
}
.mark img{ width:auto; height:51px; }
.mark span{ font-size:20px; font-weight:700; letter-spacing:-.015em; }

.tagline{
  position:relative;
  margin:0 0 0 auto;
  width:184px;
  padding-left:36px;
  font-size:8.5px;
  line-height:16.5px;
  letter-spacing:.24em;
  text-transform:uppercase;
  color:var(--on-dark-mute);
}
.tag-rule{
  position:absolute;
  left:0; top:3px;
  width:2px; height:33px;
  background:#e33a78;
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* tablets / small laptops: keep the desktop identity, relax the fixed rail */
@media (max-width:1023px){
  .rail{
    position:static;
    display:flex;
    align-items:flex-start;
    gap:30px;
    margin-top:28px;
  }
  .rail-rule{ margin:8px 0 0; }
  .app-grid{ grid-template-columns:300px 1fr; gap:18px; }
}

@media (max-width:860px){
  .wrap{ padding-inline:32px; }
  .app-grid{ grid-template-columns:1fr; gap:34px; }
  .app-copy{ padding-top:24px; }
  .why-grid{ grid-template-columns:1fr; gap:18px; }
  .why-lede{ margin-top:14px; }
  .features{ grid-template-columns:repeat(2,1fr); gap:26px 24px; }
  .why-cards{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:640px){
  .wrap{ padding-inline:22px; }
  .lb{ display:none; }

  .hero{ padding-top:22px; }
  .hero-logo{ height:76px; }
  .h1{ font-size:40px; line-height:38px; }
  .lede{ font-size:16px; line-height:22px; max-width:34em; }
  .actions .btn{ flex:1 1 auto; }
  .sources{ gap:14px 26px; }

  .app{ border-radius:20px; padding-top:34px; }
  .h2{ font-size:29px; line-height:32px; }
  .h2-light{ line-height:32px; }
  .app-lede{ font-size:16px; line-height:23px; }

  .phones{ gap:12px; }
  .shot-notes{ gap:12px; }
  .shot-notes h3{ font-size:14px; }
  .shot-notes p{ font-size:12px; line-height:17px; }

  .features{ grid-template-columns:1fr; gap:24px; }
  .why{ padding-top:30px; }
  .why-cards{ grid-template-columns:1fr; }
  .why-cards li{ min-height:0; }

  .colophon{ flex-direction:column; align-items:flex-start; gap:20px; margin-top:26px; }
}

@media (max-width:420px){
  .h1{ font-size:34px; line-height:33px; }
  .phones{ grid-template-columns:1fr; gap:22px; max-width:230px; margin-inline:auto; }
  .shot-notes{ grid-template-columns:1fr; gap:16px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}