/* ---------- Fonts (self-hosted IBM Plex Sans Arabic: no request to Google Fonts) ---------- */
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-arabic-700-normal.woff2") format("woff2");
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face{
  font-family:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-latin-400-normal.woff2") format("woff2");
  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:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-latin-500-normal.woff2") format("woff2");
  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:"IBM Plex Sans Arabic";
  font-style:normal;
  font-weight:700;
  font-display:swap;
  src:url("../fonts/ibm-plex-sans-arabic-latin-700-normal.woff2") format("woff2");
  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;
}

  /* ==========================================================================
     Selective Brands homepage (RTL, Arabic-first)
     Palette: ivory #F7F5F0 / white #FFFFFF / ink #173441 / champagne #C8AA72 / line #E7DED0
     ========================================================================== */
  :root{
    --bg:#F7F5F0;
    --surface:#FFFFFF;
    --surface-soft:#FBF9F4;
    --ink:#173441;
    --ink-hover:#21495A;
    --ink-soft:#52646C;
    --gold:#C8AA72;
    --line:#E7DED0;

    /* Layout rhythm. The gutter and section gap grow with the viewport, within limits. */
    --container:1160px;
    --gutter:clamp(16px,4vw,40px);
    --section-gap:clamp(36px,5vw,64px);
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{overflow-x:hidden} /* safety net only; on <body> alone so iOS keeps normal page scrolling */
  html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* no automatic text inflation in landscape / in-app browsers */
  body{
    background:var(--bg);
    font-family:"IBM Plex Sans Arabic","Noto Kufi Arabic",system-ui,-apple-system,"Segoe UI",sans-serif;
    font-size:16px;
    line-height:1.6;
    color:var(--ink);
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }
  h1,h2,p{margin:0}
  .wrap{
    min-height:100svh;
    display:flex;
    flex-direction:column;
  }

  /* ---------- Masthead ---------- */
  /* The logo file has an opaque white background, so the masthead is a white surface: the
     logo sits on it seamlessly and the ivory page begins below the hairline. */
  .hero{
    --logo-w:clamp(236px,36vw,340px);
    position:relative;
    overflow-x:clip; /* soft glows behind the logo panel may reach past the screen edge on phones */
    padding:calc(clamp(28px,5vw,56px) + env(safe-area-inset-top)) var(--gutter) clamp(32px,5vw,56px);
    background:var(--surface);
    border-bottom:1px solid var(--line);
    text-align:center;
  }
  /* champagne marker where the masthead meets the page */
  .hero::after{
    content:"";
    position:absolute;
    bottom:-1px;
    left:50%;
    width:72px;
    height:2px;
    background:var(--gold);
    transform:translateX(-50%);
  }
  .hero-inner{
    position:relative;
    isolation:isolate;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:100%;
    max-width:640px;
    margin-inline:auto;
  }
  /* Crop frame that shows only the wordmark band of the square logo file (see index.tsx).
     It has no panel, border or shadow: the logo sits directly on the hero. */
  .hero-logo{
    position:relative;
    display:block;
    width:var(--logo-w);
    aspect-ratio:480 / 156;
    overflow:hidden;
    border-radius:22px;
  }
  .hero-logo img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 47.2%;
    /* The file's "white" is a hair off pure white (253-254). Multiplying it with the panel
       makes that white disappear into the hero behind it while the dark wordmark stays as
       it is. The logo file itself is never edited. */
    mix-blend-mode:multiply;
  }
  .hero-title{
    margin-top:clamp(14px,2vw,22px);
    font-size:clamp(23px,1.05rem + 1.4vw,36px);
    font-weight:700;
    line-height:1.4;
    color:var(--ink);
    text-wrap:balance;
  }
  .hero-lede{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    margin-top:10px;
    font-size:clamp(14px,.85rem + .25vw,16.5px);
    font-weight:400;
    color:var(--ink-soft);
  }
  .hero-lede::before,
  .hero-lede::after{
    content:"";
    width:28px;
    height:1px;
    background:var(--gold);
  }

  /* ---------- Page body ---------- */
  .main{
    width:100%;
    max-width:calc(var(--container) + 2 * var(--gutter));
    margin-inline:auto;
    padding:var(--section-gap) var(--gutter) 0;
  }
  .section{margin:0 auto var(--section-gap)}
  .brands-section{max-width:960px}
  .social-section{max-width:720px}

  /* Section heading: title centred between two hairlines that run to the section edges */
  .section-title{
    display:flex;
    align-items:center;
    gap:clamp(14px,2vw,24px);
    margin:0 0 clamp(20px,3vw,32px);
    font-size:clamp(19px,1rem + .6vw,24px);
    font-weight:700;
    line-height:1.4;
    color:var(--ink);
  }
  .section-title::before,
  .section-title::after{
    content:"";
    flex:1;
    height:1px;
    background:var(--line);
  }

  /* ---------- Brand directory ---------- */
  /* --u is the "optical unit": every logo size below is written in these units, so one value
     per breakpoint scales all logos together. */
  .brands-section{--u:1px}

  .brand-grid{
    display:grid;
    /* the page is RTL, so column 1 is the RIGHT-hand column */
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px;
  }
  .brand-card{
    position:relative;
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    color:var(--ink);
    text-decoration:none;
    box-shadow:0 1px 2px rgba(23,52,65,.04), 0 8px 22px -12px rgba(23,52,65,.14);
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  @media (hover:hover){
    .brand-card:hover{
      transform:translateY(-2px);
      border-color:var(--gold);
      box-shadow:0 1px 2px rgba(23,52,65,.05), 0 16px 30px -14px rgba(23,52,65,.24);
    }
    .brand-card:hover .brand-cta{background-color:var(--ink-hover)}
    .brand-card:hover .brand-cta-arrow{transform:translateX(-3px)}
  }
  .brand-card:active{
    transform:translateY(0);
    box-shadow:0 1px 2px rgba(23,52,65,.05), 0 6px 16px -10px rgba(23,52,65,.2);
  }
  .brand-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-color:var(--gold)}
  .brand-card[aria-disabled="true"]{opacity:.55}

  /* Logo stage: same size on every card, logo centred inside it */
  .brand-stage{
    display:flex;
    align-items:center;
    justify-content:center;
    height:calc(88 * var(--u));
    padding:calc(8 * var(--u)) calc(10 * var(--u));
    background:var(--surface-soft);
    border-radius:12px;
  }
  .brand-logo{
    display:block;
    width:auto;
    height:auto;
    max-width:min(calc(var(--lw,110) * var(--u)), 100%);
    max-height:calc(var(--lh,40) * var(--u));
    object-fit:contain;
  }
  /* Optical sizing: each logo gets a width cap and a height cap (in --u). The tighter one wins,
     so wide wordmarks are limited by width, the tall Make Up Factory logo by height, and the
     solid colour tiles (Hada Labo, Zeena) are kept smaller so they do not outweigh the
     wordmarks. Aspect ratios are never changed. */
  .brand-logo[data-brand="catrice"]{--lw:116;--lh:30}
  .brand-logo[data-brand="essence"]{--lw:112;--lh:46}
  .brand-logo[data-brand="artdeco"]{--lw:118;--lh:30}
  .brand-logo[data-brand="make-up-factory"]{--lw:56;--lh:72}
  .brand-logo[data-brand="gosh"]{--lw:90;--lh:34}
  .brand-logo[data-brand="beyu"]{--lw:110;--lh:26}
  .brand-logo[data-brand="hada-labo"]{--lw:54;--lh:48}
  .brand-logo[data-brand="zeena"]{--lw:86;--lh:38}
  /* text fallback if a logo file fails to load */
  .brand-stage .logo-fallback{
    font-size:20px;
    font-weight:700;
    line-height:1.2;
    text-align:center;
    color:var(--ink);
  }

  /* Button: identical height, padding, type and radius on every card.
     Arabic verb in the regular weight, Latin brand name in bold. */
  .brand-cta{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:48px;
    padding:0 12px;
    background:var(--ink);
    border-radius:12px;
    color:var(--bg);
    font-size:14px;
    font-weight:500;
    line-height:1.25;
    text-align:center;
    transition:background-color .2s ease;
  }
  .brand-cta-name{font-weight:700;white-space:nowrap}
  .brand-cta-arrow{
    width:16px;
    height:16px;
    flex:none;
    color:var(--gold);
    transition:transform .2s ease;
  }

  /* Phones: the longest label ("Make up Factory") must stay on one line, so the button gives
     up its arrow and side padding, and the type steps down slightly on the narrowest screens. */
  @media (max-width:599px){
    .brand-card{padding:10px}
    .brand-cta{padding:0 4px;font-size:13px}
    .brand-cta-arrow{display:none}
  }
  @media (max-width:399px){
    .brand-cta{font-size:12.5px}
  }
  @media (max-width:379px){
    .brands-section{--u:.86px}
    .brand-grid{gap:10px}
    .brand-card{gap:10px;padding:8px;border-radius:14px}
    .brand-cta{height:44px}
  }
  @media (max-width:359px){
    .brand-cta{font-size:12px}
  }
  @media (min-width:600px){
    .brands-section{--u:1.2px}
    .brand-grid{gap:16px}
    .brand-card{gap:14px;padding:16px;border-radius:20px}
  }
  @media (min-width:900px){
    .brands-section{--u:1.4px}
    .brand-grid{gap:24px}
    .brand-card{gap:16px;padding:20px}
    .brand-cta{width:min(100%,300px);margin-inline:auto;height:52px;font-size:15px}
  }

  /* ---------- Social ---------- */
  .social{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  .social-btn{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center; /* icon and label stay centred together */
    gap:12px;
    min-height:56px;
    padding:0 40px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:14px;
    box-shadow:0 1px 2px rgba(23,52,65,.04);
    color:var(--ink);
    text-decoration:none;
    font-size:15px;
    font-weight:500;
    transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
    -webkit-tap-highlight-color:transparent;
  }
  @media (hover:hover){
    .social-btn:hover{
      transform:translateY(-2px);
      border-color:var(--gold);
      box-shadow:0 1px 2px rgba(23,52,65,.05), 0 12px 24px -14px rgba(23,52,65,.22);
    }
  }
  .social-btn:active{transform:translateY(0)}
  .social-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-color:var(--gold)}
  .social-btn svg{width:20px;height:20px;flex:none}
  .social-btn .arrow{
    position:absolute;
    inset-inline-end:16px; /* at the end edge (left in RTL), like the brand buttons; never shifts the centred content */
    width:16px;
    height:16px;
    color:var(--gold);
  }
  @media (min-width:640px){
    .social{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
    .social-btn{padding:0 36px}
  }

  /* ---------- Footer ---------- */
  footer{
    position:relative;
    margin-top:auto;
    padding:22px var(--gutter) calc(26px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line);
    text-align:center;
  }
  footer .line{
    position:absolute;
    top:-1px;
    left:50%;
    width:72px;
    height:2px;
    background:var(--gold);
    transform:translateX(-50%);
  }
  footer p{
    font-size:12.5px;
    color:#6B6157;
    letter-spacing:.04em;
  }

  /* ---------- Glass finish ----------
     Frosted glass for the buttons, the logo panel in the masthead and the panels behind the
     brand logos. Everything above is already a complete solid design; this block only applies
     where backdrop-filter exists, so other browsers keep the solid surfaces.

     Recipe, kept the same on every surface: a translucent fill with a soft top-to-bottom sheen,
     a 1px light edge, a bright inner highlight on the top edge, a faint inner shade on the
     bottom edge, and a very soft outer shadow. The edge is drawn with inset shadows, so no
     element changes size. Text always sits on a clearly dark (teal buttons) or clearly light
     (everything else) surface. */
  @supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
    /* Faint ambient light behind the glass, so there is something for it to frost.
       Low opacity on purpose: the page still reads as ivory. */
    .wrap{
      background:
        radial-gradient(circle 460px at 92% 34%, rgba(200,170,114,.11), rgba(200,170,114,0)),
        radial-gradient(circle 520px at 6% 62%, rgba(23,52,65,.055), rgba(23,52,65,0));
    }
    .hero-inner::before,
    .hero-inner::after{
      content:"";
      position:absolute;
      z-index:-1;
      border-radius:50%;
      pointer-events:none;
    }
    .hero-inner::before{ /* champagne light behind the panel's upper corner */
      top:-70px;
      left:calc(50% + var(--logo-w) / 2 - 170px);
      width:260px;
      height:260px;
      background:radial-gradient(circle, rgba(200,170,114,.36) 0%, rgba(200,170,114,0) 68%);
    }
    .hero-inner::after{ /* cool teal shade behind the panel's lower corner */
      top:30px;
      left:calc(50% - var(--logo-w) / 2 - 110px);
      width:230px;
      height:230px;
      background:radial-gradient(circle, rgba(23,52,65,.11) 0%, rgba(23,52,65,0) 70%);
    }
    .brand-card{
      background:
        radial-gradient(85% 70% at 50% 28%, rgba(200,170,114,.27), rgba(200,170,114,0) 72%),
        var(--surface);
    }
    .social-section{position:relative;isolation:isolate}
    .social-section::before{
      content:"";
      position:absolute;
      z-index:-1;
      inset:44px -12px -26px -12px;
      /* closest-side: the glow reaches zero exactly at the box edges, so no hard edge shows */
      background:radial-gradient(ellipse closest-side at 50% 52%, rgba(200,170,114,.32), rgba(200,170,114,0));
      pointer-events:none;
    }

    /* Panels behind the brand logos */
    .brand-stage{
      position:relative;
      isolation:isolate;
      background-color:rgba(251,249,244,.34);
      background-image:linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.24) 55%, rgba(255,255,255,.44) 100%);
      -webkit-backdrop-filter:blur(8px) saturate(1.15);
      backdrop-filter:blur(8px) saturate(1.15);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.6),
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(23,52,65,.045),
        inset 0 0 22px rgba(255,255,255,.5),
        0 0 0 1px rgba(200,170,114,.2);
    }

    /* Brand buttons: deep-teal glass, still clearly dark so the ivory label keeps its contrast */
    .brand-cta{
      position:relative;
      isolation:isolate;
      background-color:rgba(23,52,65,.95);
      background-image:linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.03) 42%, rgba(8,24,32,.16) 100%);
      -webkit-backdrop-filter:blur(10px) saturate(1.3);
      backdrop-filter:blur(10px) saturate(1.3);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,.15),
        inset 0 1px 0 rgba(255,255,255,.3),
        inset 0 -1px 0 rgba(0,0,0,.24),
        inset 0 0 14px rgba(255,255,255,.05),
        0 1px 2px rgba(23,52,65,.18),
        0 8px 16px -8px rgba(23,52,65,.42);
      transition:background-color .25s ease, box-shadow .25s ease;
    }

    /* Social buttons: light frosted glass */
    .social-btn{
      isolation:isolate;
      background-color:rgba(255,255,255,.42);
      background-image:linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,.2) 55%, rgba(255,255,255,.34) 100%);
      border-color:rgba(255,255,255,.7);
      -webkit-backdrop-filter:blur(12px) saturate(1.2);
      backdrop-filter:blur(12px) saturate(1.2);
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,.95),
        inset 0 -1px 0 rgba(23,52,65,.05),
        inset 0 0 16px rgba(255,255,255,.45),
        0 0 0 1px rgba(200,170,114,.28),
        0 1px 2px rgba(23,52,65,.05),
        0 10px 18px -12px rgba(23,52,65,.22);
      transition:transform .2s ease, background-color .25s ease, border-color .2s ease, box-shadow .25s ease;
    }

    /* Hover layers: an extra highlight that fades in, for a slight rise in brightness */
    .brand-stage::before,
    .brand-cta::before,
    .social-btn::before{
      content:"";
      position:absolute;
      inset:0;
      z-index:-1;
      border-radius:inherit;
      pointer-events:none;
      opacity:0;
      transition:opacity .25s ease;
    }
    .brand-stage::before{background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 72%)}
    .brand-cta::before{background:linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 60%)}
    .social-btn::before{background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0) 70%)}

    @media (hover:hover){
      .brand-card:hover .brand-stage::before,
      .brand-card:hover .brand-cta::before,
      .social-btn:hover::before{opacity:1}
      .brand-card:hover .brand-cta{
        background-color:rgba(33,73,90,.95);
        box-shadow:
          inset 0 0 0 1px rgba(255,255,255,.22),
          inset 0 1px 0 rgba(255,255,255,.4),
          inset 0 -1px 0 rgba(0,0,0,.2),
          inset 0 0 18px rgba(255,255,255,.09),
          0 1px 2px rgba(23,52,65,.2),
          0 12px 20px -8px rgba(23,52,65,.5);
      }
      .social-btn:hover{
        background-color:rgba(255,255,255,.62);
        box-shadow:
          inset 0 1px 0 #FFFFFF,
          inset 0 -1px 0 rgba(23,52,65,.06),
          inset 0 0 18px rgba(255,255,255,.6),
          0 0 0 1px rgba(200,170,114,.45),
          0 2px 4px rgba(23,52,65,.06),
          0 16px 26px -14px rgba(23,52,65,.3);
      }
    }
  }
  /* People who ask for less transparency get the solid surfaces back */
  @media (prefers-reduced-transparency:reduce){
    .brand-stage,
    .brand-cta,
    .social-btn{-webkit-backdrop-filter:none;backdrop-filter:none}
    .brand-stage{background-color:var(--surface-soft);background-image:none}
    .brand-cta{background-color:var(--ink);background-image:none}
    .social-btn{background-color:var(--surface);background-image:none}
    @media (hover:hover){
      .brand-card:hover .brand-cta{background-color:var(--ink-hover)}
      .social-btn:hover{background-color:var(--surface)}
    }
  }

  /* ---------- Load animation ---------- */
  @keyframes rise{
    from{opacity:0;transform:translateY(10px)}
    to{opacity:1;transform:translateY(0)}
  }
  /* "backwards" (not "forwards"): once the entrance finishes, the element goes back to its
     normal styles. With "forwards" the animation keeps owning `transform` forever, which
     silently disables the hover lift and press effects. */
  .reveal{animation:rise .45s ease backwards}
  @media (prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none !important;transition:none !important}
  }


/* ==========================================================================
   Phone & in-app-browser polish (added)
   Everything above is the original design, unchanged. This block only tunes phones.
   ========================================================================== */

/* Links react instantly to a tap (no double-tap-zoom delay) */
a{touch-action:manipulation}

@media (max-width:599px){
  /* Frosted glass blur is costly on mid-range Android phones and inside in-app browsers
     (19 blurred layers on this page). The translucent fills stay, so the look is the same,
     but nothing has to be re-blurred while scrolling. */
  .brand-stage,
  .brand-cta,
  .social-btn{-webkit-backdrop-filter:none;backdrop-filter:none}

  /* Touch has no hover, so give the tap a visible press state */
  .brand-card:active,
  .social-btn:active{transform:scale(.98)}
}

/* Narrow phones (below 360px): the longest label, "Buy Make up Factory", must stay on one line.
   The type size follows the width of the button (a button is about half the screen wide). */
@media (max-width:359px){
  .brand-cta{font-size:clamp(10px, calc((50vw - 41px) / 10.2), 12.5px);gap:4px;padding:0 2px}
  .social-btn{padding:0 32px}
}

/* ---------- "Open in your browser" sheet — only inside TikTok's in-app browser (added) ---------- */
.sheet{position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet[hidden]{display:none}
.sheet-backdrop{position:absolute;inset:0;background:rgba(23,52,65,.42);animation:sheetFade .22s ease both}

.sheet-panel{
  position:relative;
  width:100%;
  max-width:460px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:14px;
  padding:58px 20px calc(18px + env(safe-area-inset-bottom));
  background:var(--surface);
  border-radius:28px 28px 0 0;
  box-shadow:0 -1px 0 rgba(200,170,114,.35), 0 -18px 50px -12px rgba(23,52,65,.28);
  text-align:center;
  animation:sheetUp .34s cubic-bezier(.22,1,.36,1) both;
}
.sheet-grabber{position:absolute;top:10px;left:50%;width:40px;height:5px;margin-left:-20px;border-radius:99px;background:var(--line)}

.sheet-close{
  position:absolute;top:14px;left:16px;
  width:34px;height:34px;
  display:grid;place-items:center;
  border:0;border-radius:50%;
  background:var(--surface-soft);
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink-soft);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sheet-close svg{width:16px;height:16px}
.sheet-close:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* Brand logo in the same ivory tile as the cards */
.sheet-brand{
  display:flex;align-items:center;justify-content:center;gap:10px;
  height:104px;
  margin:0 0 4px;
  padding:16px 24px;
  background:var(--surface-soft);
  border-radius:18px;
  box-shadow:inset 0 0 0 1px var(--line);
  color:var(--ink);
}
.sheet-brand img{display:block;width:auto;height:auto;max-width:min(210px,100%);max-height:58px;object-fit:contain}
.sheet-brand svg{width:28px;height:28px;flex:none}
.sheet-brand span{font-size:20px;font-weight:700}

/* Main action: same ink as the page buttons, gold accent, press-and-hold feedback */
.sheet-link{
  position:relative;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:12px;
  min-height:60px;
  padding:0 20px;
  border-radius:16px;
  background:linear-gradient(180deg,#21495A 0%,#173441 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 12px 24px -12px rgba(23,52,65,.65);
  color:var(--bg);
  text-decoration:none;
  font-size:17px;
  font-weight:700;
  -webkit-touch-callout:default;      /* keep the phone's own long-press menu */
  -webkit-tap-highlight-color:transparent;
}
.sheet-link::before{                  /* fills from the start side while the finger is held down */
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(200,170,114,.0),rgba(200,170,114,.28));
  transform:scaleX(0);
  transform-origin:right;
  transition:transform .12s ease;
}
.sheet-link:active::before{transform:scaleX(1);transition:transform .6s linear}
.sheet-label,.sheet-hand{position:relative}
.sheet-hand{
  width:30px;height:30px;
  display:grid;place-items:center;
  color:var(--gold);
}
.sheet-hand svg{width:24px;height:24px;animation:sheetPress 1.8s ease-in-out infinite}
.sheet-hand::after{                    /* soft ripple: "hold here" */
  content:"";
  position:absolute;left:50%;top:38%;
  width:14px;height:14px;margin:-7px 0 0 -7px;
  border-radius:50%;
  border:1.5px solid var(--gold);
  opacity:0;
  animation:sheetRipple 1.8s ease-out infinite;
}
.sheet-link.nudge{animation:sheetShake .42s ease}

/* Secondary action */
.sheet-copy{
  align-self:center;
  display:inline-flex;align-items:center;gap:8px;
  min-height:44px;
  padding:0 14px;
  border:0;border-radius:12px;
  background:none;
  color:var(--ink-soft);
  font:inherit;font-size:14px;font-weight:500;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sheet-copy svg{width:17px;height:17px}
.sheet-copy:active{background:var(--surface-soft)}
.sheet-copy:focus-visible,.sheet-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.sheet-done{margin:-10px 0 0;font-size:13px;font-weight:700;color:#2F7D4F}

body.sheet-open{overflow:hidden}

/* Wider screens (preview only): a floating card instead of a bottom sheet */
@media (min-width:600px){
  .sheet{align-items:center}
  .sheet-panel{border-radius:28px;padding-bottom:22px;animation-name:sheetPop}
  .sheet-grabber{visibility:hidden}
}

@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetPop{from{transform:translateY(16px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@keyframes sheetFade{from{opacity:0}to{opacity:1}}
@keyframes sheetPress{0%,55%,100%{transform:none}20%,40%{transform:translateY(2px) scale(.9)}}
@keyframes sheetRipple{0%,15%{transform:scale(.6);opacity:0}25%{opacity:.9}70%,100%{transform:scale(2.4);opacity:0}}
@keyframes sheetShake{0%,100%{transform:none}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){
  .sheet-panel,.sheet-backdrop,.sheet-hand svg,.sheet-hand::after,.sheet-link.nudge{animation:none}
}