/* =========================================================
   TNOW-008 Smartphone Polish v1.0 Draft
   Smartphone First / cross-section polish layer
   ========================================================= */

:root{
  --tn-mobile-edge:14px;
  --tn-mobile-safe-bottom:env(safe-area-inset-bottom,0px);
  --tn-mobile-safe-top:env(safe-area-inset-top,0px);
  --tn-mobile-bar-height:74px;
}

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  scroll-padding-top:82px;
}

body{
  min-width:320px;
}

button,
a,
input,
select,
textarea{
  -webkit-tap-highlight-color:transparent;
}

button,
a{
  touch-action:manipulation;
}

:where(a,button,input,select,textarea):focus-visible{
  outline:2px solid #d7b474;
  outline-offset:3px;
}

.tnmobilebar{
  display:none;
}

/* Avoid content movement and preserve readable measures across sections. */
@media (max-width:767px){
  :root{
    --tn-mobile-edge:14px;
  }

  html{
    scroll-padding-top:74px;
  }

  body{
    padding-bottom:calc(var(--tn-mobile-bar-height) + var(--tn-mobile-safe-bottom));
    line-height:1.78;
  }

  .container,
  .tnservice .container,
  .tnpricing .container,
  .tnstrength .container,
  .tnflow .container,
  .tnfaq .container,
  .tncontact .container{
    width:auto !important;
    max-width:none;
    margin-right:var(--tn-mobile-edge);
    margin-left:var(--tn-mobile-edge);
  }

  .section{
    padding-top:72px;
    padding-bottom:72px;
  }

  /* Header and menu */
  .header-inner{
    height:calc(66px + var(--tn-mobile-safe-top));
    padding-top:var(--tn-mobile-safe-top);
  }

  .site-header.scrolled{
    background:rgba(247,243,235,.965);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
  }

  .brand{
    gap:8px;
  }

  .brand-logo{
    width:76px;
    height:46px;
  }

  .brand-copy{
    display:none;
  }

  .menu-button{
    display:grid;
    place-items:center;
    width:46px;
    height:46px;
    margin-right:-8px;
    border-radius:50%;
    font-size:1.35rem;
  }

  .mobile-menu{
    padding:
      calc(82px + var(--tn-mobile-safe-top))
      24px
      calc(32px + var(--tn-mobile-safe-bottom));
  }

  .mobile-menu nav{
    width:100%;
    max-width:360px;
    gap:0;
    align-items:stretch;
    font-family:Georgia,"Yu Mincho",serif;
    font-size:1.35rem;
  }

  .mobile-menu nav a{
    min-height:58px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,.10);
  }

  /* First view */
  .hero{
    min-height:100svh;
    padding:
      calc(90px + var(--tn-mobile-safe-top))
      0
      54px;
    align-items:flex-start;
  }

  .hero-grid{
    display:block;
  }

  .hero-brand-logo{
    width:min(180px,50vw);
    margin-bottom:18px;
  }

  .hero h1{
    margin:16px 0 22px;
    font-size:clamp(2.75rem,13.5vw,4rem);
    line-height:1.02;
    letter-spacing:-.045em;
  }

  .hero-copy{
    max-width:34em;
    font-size:.95rem;
    line-height:1.82;
  }

  .hero-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:28px;
  }

  .hero-actions .btn{
    width:100%;
    min-height:54px;
  }

  .hero-meta{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 18px;
    margin-top:28px;
    font-size:.72rem;
  }

  .hero-orbit{
    width:230px;
    height:230px;
    right:-88px;
    top:15%;
    opacity:.62;
  }

  .device-stage{
    display:none;
  }

  /* Trust strip: intentionally swipeable, with a visible next item. */
  .trust-strip{
    overflow:hidden;
  }

  .trust-inner{
    display:flex;
    width:auto;
    overflow-x:auto;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scrollbar-width:thin;
    padding:0 var(--tn-mobile-edge) 8px;
  }

  .trust-item{
    flex:0 0 min(76vw,270px);
    min-height:96px;
    display:grid;
    place-content:center;
    scroll-snap-align:start;
    border-right:1px solid var(--line);
    border-left:0;
    text-align:left;
  }

  /* Legacy/light content sections */
  .about-grid,
  .service-grid,
  .plan-grid,
  .support-grid,
  .simulator-grid{
    grid-template-columns:1fr !important;
    gap:16px;
  }

  .about-grid{
    gap:28px;
  }

  .about-visual{
    min-height:390px;
    padding:24px;
  }

  .about-visual blockquote{
    left:24px;
    right:24px;
    bottom:24px;
    font-size:clamp(1.5rem,7.5vw,2.2rem);
  }

  .section-title{
    margin-top:13px;
    margin-bottom:18px;
    font-size:clamp(2.15rem,10vw,3.05rem);
    line-height:1.14;
    letter-spacing:-.035em;
  }

  .lead{
    font-size:.9rem;
    line-height:1.82;
  }

  .service-card,
  .plan-card,
  .support-panel{
    min-height:0;
    padding:24px 20px;
  }

  /* Modern sections: typography and rhythm */
  .tnservice,
  .tnpricing,
  .tnstrength,
  .tnflow,
  .tnfaq,
  .tncontact{
    padding-top:72px;
    padding-bottom:72px;
  }

  .tnservice__header,
  .tnpricing__header,
  .tnstrength__header,
  .tnflow__header,
  .tnfaq__header,
  .tncontact__header{
    padding-bottom:28px;
  }

  .tnservice__eyebrow,
  .tnpricing__eyebrow,
  .tnstrength__eyebrow,
  .tnflow__eyebrow,
  .tnfaq__eyebrow,
  .tncontact__eyebrow{
    margin-bottom:14px;
    font-size:.61rem;
    letter-spacing:.16em;
  }

  .tnservice__title,
  .tnpricing__title,
  .tnstrength__title,
  .tnflow__title,
  .tnfaq__title,
  .tncontact__title{
    font-size:clamp(2.15rem,10.2vw,3.15rem);
    line-height:1.14;
    letter-spacing:-.042em;
    text-wrap:balance;
  }

  .tnservice__intro-row,
  .tnpricing__lead-row,
  .tnstrength__lead-row,
  .tnflow__lead-row,
  .tnfaq__lead-row,
  .tncontact__lead-row{
    margin-top:22px;
  }

  .tnservice__intro,
  .tnpricing__lead,
  .tnstrength__lead,
  .tnflow__lead,
  .tnfaq__lead,
  .tncontact__lead{
    font-size:.88rem;
    line-height:1.82;
  }

  /* Cards: consistent thumb-friendly geometry */
  .tnservice__card,
  .tnpricing__card,
  .tnstrength__card,
  .tnflow__card,
  .tnfaq__item,
  .tncontact__guide-card,
  .tncontact__form{
    border-radius:19px;
  }

  .tnpricing__card,
  .tnstrength__card{
    padding:20px;
  }

  .tnpricing__cards,
  .tnstrength__grid{
    gap:12px;
  }

  .tnpricing__card-link{
    min-height:52px;
  }

  /* Pricing */
  .tnpricing__price-main{
    font-size:clamp(3.55rem,17vw,4.8rem);
  }

  .tnpricing__compare-toggle,
  .tnpricing__cost-toggle{
    min-height:60px;
    padding-right:16px;
    padding-left:16px;
  }

  .tnpricing__table-wrap,
  .tnpricing__cost-scroll{
    margin-right:-14px;
    padding-right:14px;
  }

  .tnpricing__swipe-hint{
    min-height:30px;
    display:flex;
    align-items:center;
    justify-content:center;
  }

  .tnpricing__value{
    padding:24px 20px;
  }

  .tnpricing__saving strong{
    font-size:clamp(3.5rem,17vw,5.2rem);
  }

  /* Strength */
  .tnstrength__icon{
    height:100px;
  }

  .tnstrength__message{
    padding-top:32px;
    padding-bottom:32px;
  }

  .tnstrength__message-main{
    font-size:clamp(1.75rem,8.6vw,2.5rem);
    line-height:1.27;
    text-wrap:balance;
  }

  /* Flow */
  .tnflow__timeline{
    padding-left:32px;
  }

  .tnflow__progress{
    left:14px;
  }

  .tnflow__marker{
    left:-43px;
    width:40px;
    height:40px;
  }

  .tnflow__step{
    padding-bottom:16px;
  }

  .tnflow__card{
    padding:20px;
  }

  /* FAQ */
  .tnfaq__question{
    min-height:70px;
    grid-template-columns:30px minmax(0,1fr) 34px;
    padding:13px 12px;
  }

  .tnfaq__question-text{
    font-size:.98rem;
    line-height:1.46;
  }

  .tnfaq__answer{
    padding-right:13px;
    padding-bottom:18px;
    padding-left:52px;
  }

  /* Contact: prevent iOS auto-zoom and improve form completion */
  .tncontact__form{
    padding:18px;
  }

  .tncontact__field label{
    font-size:.72rem;
  }

  .tncontact__field input,
  .tncontact__field select,
  .tncontact__field textarea{
    min-height:52px;
    border-radius:13px;
    font-size:16px;
  }

  .tncontact__field textarea{
    min-height:148px;
  }

  .tncontact__consent{
    grid-template-columns:24px minmax(0,1fr);
    font-size:.72rem;
  }

  .tncontact__consent input{
    width:20px;
    height:20px;
  }

  .tncontact__submit{
    min-height:56px;
    font-size:.8rem;
  }

  /* Persistent mobile actions */
  .tnmobilebar{
    position:fixed;
    z-index:95;
    right:0;
    bottom:0;
    left:0;
    display:grid;
    grid-template-columns:.92fr 1.08fr;
    gap:8px;
    min-height:var(--tn-mobile-bar-height);
    padding:
      9px
      var(--tn-mobile-edge)
      calc(9px + var(--tn-mobile-safe-bottom));
    border-top:1px solid rgba(255,255,255,.12);
    background:rgba(12,13,16,.92);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    box-shadow:0 -14px 36px rgba(0,0,0,.18);
    transform:translateY(110%);
    transition:transform .34s cubic-bezier(.2,.8,.2,1);
  }

  .tnmobilebar.is-visible{
    transform:translateY(0);
  }

  .tnmobilebar__link{
    min-width:0;
    min-height:50px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding:0 15px;
    border-radius:999px;
    font-size:.75rem;
    font-weight:900;
  }

  .tnmobilebar__link--secondary{
    color:#f4ede3;
    border:1px solid rgba(255,255,255,.18);
    background:rgba(255,255,255,.055);
  }

  .tnmobilebar__link--primary{
    color:#17130d;
    background:linear-gradient(135deg,#e2c58f,#ad7f39);
  }

  .tnmobilebar__label{
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
  }
}

@media (max-width:380px){
  :root{
    --tn-mobile-edge:12px;
  }

  .hero h1,
  .tnservice__title,
  .tnpricing__title,
  .tnstrength__title,
  .tnflow__title,
  .tnfaq__title,
  .tncontact__title{
    font-size:clamp(2rem,10.5vw,2.55rem);
  }

  .tnmobilebar__link{
    padding-right:12px;
    padding-left:12px;
    font-size:.7rem;
  }
}

@media (prefers-reduced-motion:reduce){
  .tnmobilebar{
    transition:none;
  }
}