:root{
      --color_bg_card   : #ffffff;

      /* layout */
      --text_measure_wide         : 64ch;
      --main_padding_bottom_mobile : 22px;

      /* components */
      --button_gap       : var(--space_small);
      --button_padding_y : var(--space_small);
      --button_padding_x : var(--space_medium);

      --brand_text_size       : 46px;
      --brand_text_size_mobile : 36px;

      /* hero */
      --hero_margin_top       : var(--space_medium);
      --hero_margin_top_mobile  : var(--space_small);

      --face_size             : 12.96rem;
      --face_zoom             : 175%;
      --face_granny_zoom      : 190%;
      --face_margin           : 0px;
      --face_text_gap         : var(--space_medium);
      --face_hidden_ratio     : .3;
      --face_overhang         : calc(var(--layout_side_padding) + (var(--face_size) * var(--face_hidden_ratio)));
      --face_position_y       : 45%;
      --face_granny_position_y  : 35%;
      --face_granny_offset_y  : 0;
      --face_float_offset_y   : 0;

      /* drawer */
      --drawer_caret_size      : 44px;
      --drawer_shadow_top      : 140px;

      /* typography */
      --font_size_heading      : 32px;

      --font_weight_regular    : 400;

      --letter_spacing_brand   : -.2px;
      --letter_spacing_h2      : -.3px;
      --letter_spacing_h3      : -.2px;

      --brand_text_shadow       :
        -1px -1px  0   rgba(255,230,200,           var(--opacity_light)),
         0    1px  0   rgba(255,230,200,           var(--opacity_faint)),
         2px  2px  0   rgba(var(--color_rgb_black),var(--opacity_light)),
         0   10px 22px rgba(var(--color_rgb_black),var(--opacity_light));

      /* shadows */
      --shadow_soft     : 0 6px 12px rgba(var(--color_rgb_black),var(--opacity_faint));

      /* spacing */
      --radius_small    : 14px;

      /* motion */
      --motion_duration_fast   : .15s;

    }

    /* Desktop-only hero tweaks (keep touch/mobile layout unchanged). */
    @media (pointer: fine) and (min-width: 43.75rem){
      :root{
        /* Show more of the circles on desktop (less hidden off-screen). */
        --face_hidden_ratio    : .12;

        /* Pull the circles inward (less negative overhang). */
        --face_overhang        : calc((var(--layout_side_padding) * .00) + (var(--face_size) * var(--face_hidden_ratio)));

        /* Granny: move the photo DOWN within the cropping circle (the other way). */
        --face_granny_position_y : 32%;

        /* Move the entire circle UP on the page (layout-aware, so text wraps correctly). */
        --face_granny_lift     : 44px;
        --face_granny_offset_y : calc(-1 * var(--face_granny_lift));
      }

      /* Add room above the Granny circle so it never overlaps the preceding paragraph. */
      .hero_tagline + .note{
        margin-bottom     : calc(var(--space_medium) + var(--face_granny_lift));
    }

      /* "What happens next?" screenshot: larger on desktop. */
      #try details.try_see_how .start_image{
        width             : min(432px, 100%);
      }
    }
    html{
      overflow-x        : hidden;
    }
    body{
      overflow-x        : hidden;
    }
    header{
      position          : sticky;
      top               : 0;
      z-index           : var(--layer_header);
      background        : var(--color_header_bg);
      backdrop-filter   : none;
      border-bottom     : var(--border_default);
    }
    .bar{
      display           : flex;
      align-items       : center;
      justify-content   : space-between;
      padding           : var(--header_footer_padding_y) 0;
      gap               : var(--space_small);
      container-type    : inline-size;
    }
    .bar a{
      display           : inline-flex;
      align-items       : center;
      line-height       : 1;
    }
    .brand{
      display           : flex;
      align-items       : center;
      gap               : var(--space_small);
      text-decoration   : none;
      font-weight       : var(--font_weight_heavy);
      letter-spacing    : var(--letter_spacing_brand);
      white-space       : nowrap;
    }
    .brand_text{
      font-family       : "Snell Roundhand", "Apple Chancery", "Brush Script MT", "Segoe Script", cursive;
      font-weight       : var(--font_weight_heavy);
      font-size         : var(--brand_text_size);
      line-height       : 1;
      letter-spacing    : 0;
      color             : rgba(var(--color_rgb_white),var(--opacity_heavy));
      text-shadow       : var(--brand_text_shadow);
    }
    .cta{
      color             : rgba(var(--color_rgb_white),var(--opacity_heavy));
      background        : rgba(var(--color_rgb_black),var(--opacity_light));
      border-color      : rgba(var(--color_rgb_white),var(--opacity_faint)) !important;
      font-weight       : var(--font_weight_heavy);
    }
    .cta:hover{
      background        : rgba(var(--color_rgb_black),var(--opacity_light)) !important;
      border-color      : rgba(var(--color_rgb_white),var(--opacity_faint)) !important;
    }

    main{
      padding           : var(--main_padding_top) 0 var(--main_padding_bottom);
    }
    .hero{
      position          : relative;
      margin-top        : var(--hero_margin_top);
    }
    .hero_copy{
      position          : relative;
      z-index           : 2;
      text-align        : left;
      font-size         : var(--font_size_body);
    }
    .hero_face{
      position           : relative;
      width              : var(--face_size);
      height             : var(--face_size);
      border-radius      : 50%;
      border             : 1px solid rgba(var(--color_rgb_white),1);
      background-color   : rgba(var(--color_rgb_white),1);
      background-repeat  : no-repeat;
      background-position: 50% var(--face_position_y);
      background-size    : var(--face_zoom);
      box-shadow         : var(--shadow_soft);
      display            : block;
    }
    .hero_face_kid{
      width             : var(--face_size);
      border            : none;
      border-radius     : 50%;
      background        : transparent;
      box-shadow        : none;
      overflow          : hidden;
    }
    .hero_face_kid::before{
      content            : "";
      position           : absolute;
      top                : 0;
      left               : 0;
      width              : var(--face_size);
      height             : var(--face_size);
      border-radius      : 50%;
      border             : 1px solid rgba(var(--color_rgb_white),1);
      background-color   : rgba(var(--color_rgb_white),1);
      background-image   : url("images/kid.png");
      background-repeat  : no-repeat;
      background-position: 50% var(--face_position_y);
      background-size    : var(--face_zoom);
      box-shadow         : var(--shadow_soft);
    }
    .hero_face_granny{
      width             : var(--face_size);
      border            : none;
      border-radius     : 50%;
      background        : transparent;
      box-shadow        : none;
      overflow          : hidden;
    }
    .hero_face_granny::before{
      content            : "";
      position           : absolute;
      top                : 0;
      left               : 0;
      width              : var(--face_size);
      height             : var(--face_size);
      border-radius      : 50%;
      border             : 1px solid rgba(var(--color_rgb_white),1);
      background-color   : rgba(var(--color_rgb_white),1);
      background-image   : url("images/granny.png");
      background-repeat  : no-repeat;
      background-position: 50% var(--face_granny_position_y);
      background-size    : var(--face_granny_zoom);
      box-shadow         : var(--shadow_soft);
    }
    .hero_face_float_right{
      float             : right;
      margin            : var(--face_float_offset_y) calc(-1 * var(--face_overhang)) var(--face_margin) var(--face_text_gap);
    }
    .hero_face_float_left{
      float             : left;
      margin            : var(--face_float_offset_y) var(--face_text_gap) var(--face_margin) calc(-1 * var(--face_overhang));
      clear             : both;
    }

    /* On touch layouts, start the floats slightly lower so paragraph 1 can span full width. */
    @media (pointer: coarse){
      :root{
        --face_float_offset_y : 22px;
      }
    }
    .hero_face_granny.hero_face_float_left{
      margin-top        : var(--face_granny_offset_y);
    }
    .hero_copy::after{
      content           : "";
      display           : block;
      clear             : both;
    }
    .note{
      margin            : 0 0 var(--space_medium);
      color             : var(--color_text_muted);
      max-width         : var(--text_measure_wide);
      text-align        : left;
    }
    .note.hero_tagline{
      font-family       : ui-serif, Georgia, "Times New Roman", Times, serif;
      font-style        : italic;
      font-size         : 1.06em; /* +~20% */
      margin-top        : var(--space_small);
      margin-bottom     : var(--space_large);
    }
    .note b{
      color             : var(--color_text_primary);
    }
    .nowrap{
      white-space       : nowrap;
    }
    .button_row{
      display           : flex;
      gap               : var(--button_gap);
      flex-wrap         : wrap;
      margin            : var(--space_medium) 0 0;
    }
    #try .button_row,
    #help .button_row,
    #legal .button_row{
      justify-content   : center;
    }
    #try .button_row{
      margin-bottom     : var(--space_small);
    }
    #try .sms_disclaimer{
      margin            : 0;
      max-width         : min(var(--text_measure_wide), 44rem);
      padding           : 0;
      text-align        : left;
      color             : rgba(var(--color_rgb_black), .42);
      font-size         : .72em;
      line-height       : 1.45;
      background        : transparent;
      border            : 0;
      border-radius     : 0;
    }
    /* Make "See how" behave like a single FAQ row (full-width within the box). */
    #try details.try_see_how{
      border-top-left-radius  : 0;
      border-top-right-radius : 0;
      border-bottom-left-radius  : var(--radius_medium);
      border-bottom-right-radius : var(--radius_medium);
      overflow          : hidden;
      background        : rgba(var(--color_rgb_white),1);
      box-shadow        : none;
      border-top        : var(--border_default);
      padding           : 0;
      margin            : var(--space_small) calc(-1 * var(--space_medium)) 0;
    }
    #try details.try_see_how summary{
      border-top-left-radius : 0;
      border-top-right-radius: 0;
    }
    #try details.try_see_how .content ol.mini{
      margin             : 0;
      padding-left       : 0;
      list-style-position: inside;
    }
    #try details.try_see_how .drawer_note{
      margin            : calc(-1 * var(--space_small)) 0 var(--space_small);
      padding-left      : .9em;
      font-style        : italic;
      font-size         : .92em;
    }
    #try .try_disclaimer{
      border-top        : var(--border_default);
      margin            : 0 calc(-1 * var(--space_medium)) calc(-1 * var(--space_medium));
      padding           : var(--space_small) var(--space_medium) var(--space_medium);
    }
    #try details.try_see_how .start_image{
      width             : min(288px, 100%);
      margin-top        : 0;
    }

    /* Help email drawer (matches the "What happens next?" row style) */
    #help details.help_email{
      border-top-left-radius  : 0;
      border-top-right-radius : 0;
      border-bottom-left-radius  : var(--radius_medium);
      border-bottom-right-radius : var(--radius_medium);
      overflow          : hidden;
      background        : rgba(var(--color_rgb_white),1);
      box-shadow        : none;
      border-top        : var(--border_default);
      padding           : 0;
      margin            : var(--space_small) calc(-1 * var(--space_medium)) calc(-1 * var(--space_medium));
    }
    #help details.help_email summary{
      border-top-left-radius : 0;
      border-top-right-radius: 0;
    }
    .start_image{
      width             : 70%;
      height            : auto;
      display           : block;
      margin            : var(--space_medium) auto 0;
      border-radius     : var(--radius_medium);
      border            : none;
      box-shadow        : none; /* keep off; use drop-shadow to respect transparency */
      background        : transparent;
      filter            :
        drop-shadow(0 4px 7px rgba(var(--color_rgb_black),var(--opacity_light)))
        drop-shadow(0 1px 3px rgba(var(--color_rgb_black),var(--opacity_faint)));
    }

    /* SMS relay screenshot: remove the drop shadow while keeping other start images styled. */
    img.start_image[src$="sms_relay.png"]{
      filter            : none;
    }
    .btn{
      display           : inline-block;
      text-decoration   : none;
      font-size         : inherit;
      font-weight       : var(--font_weight_heavy);
      padding           : var(--button_padding_y) var(--button_padding_x);
      border-radius     : var(--radius_medium);
      border            : var(--border_default);
      background        : var(--background_neutral);
      box-shadow        : none;
    }
    button.btn{
      appearance        : none;
      -webkit-appearance: none;
      font-family       : inherit;
      color             : inherit;
      cursor            : pointer;
    }
    .btn:hover{
      background        : rgba(var(--color_rgb_white),var(--opacity_heavy));
    }
    .btn.primary{
      border-color      : rgba(0,0,0,.08);
      background        : #34c759; /* iOS Messages green */
      color             : rgba(var(--color_rgb_black),1);
    }
    .btn.primary:hover{
      background        : #2db84f;
    }
    .btn.primary:active{
      background        : #27a646;
    }
    #try .btn.primary{
      width             : min(22rem, 100%);
      text-align        : center;
    }
    #help .btn.primary{
      width             : min(22rem, 100%);
      text-align        : center;
    }
    /* "About, Terms & Privacy" buttons: stack and match the "Text Help" button width. */
    #about .button_row{
      flex-direction    : column;
      align-items       : center;
    }
    #about .btn{
      width             : min(22rem, 100%);
      text-align        : center;
    }

    section{
      padding           : var(--section_padding_y) 0;
      scroll-margin-top : var(--scroll_padding_top);
    }
    h2{
      margin            : 0 0 var(--space_small);
      font-size         : var(--font_size_heading);
      letter-spacing    : var(--letter_spacing_h2);
    }
    h3{
      margin            : var(--space_medium) 0 var(--space_xsmall);
      font-size         : inherit;
      font-weight       : var(--font_weight_heavy);
      letter-spacing    : var(--letter_spacing_h3);
    }
    .box{
      border            : var(--border_default);
      background        : var(--background_neutral);
      border-radius     : var(--radius_medium);
      padding           : var(--space_medium) var(--space_medium);
      margin-left       : calc(-1 * var(--space_medium));
      margin-right      : calc(-1 * var(--space_medium));
      box-shadow        : var(--shadow_card);
    }
    ol, ul{
      margin            : 0;
      padding-left      : var(--space_medium);
    }
    li{
      color             : var(--color_text_muted);
      margin            : var(--space_small) 0;
    }
    .mini{
      margin-top        : var(--space_small);
      color             : var(--color_text_muted);
    }
    .box .mini:first-child{
      margin-top        : 0;
    }

    .group_box{
      padding           : 0;
    }
    .box.group_box{
      background        : var(--color_bg_card);
      overflow          : hidden;
    }

    /* Drawer row: shared summary/content layout. */
    .drawer_row{
      border            : none;
      box-shadow        : none;
      padding           : 0;
    }
    .drawer_row summary{
      border-radius     : 0;
      padding           : var(--space_medium);
      margin            : 0;
      font-weight       : var(--font_weight_regular);
      background        : rgba(var(--color_rgb_white),1);
    }
    .drawer_row[open] summary{
      background        : rgba(var(--color_rgb_white),1);
      position          : relative;
      z-index           : 1;
      font-weight       : var(--font_weight_heavy);
    }
    .drawer_row .content{
      margin-top        : 0;
      padding           : 0 var(--space_medium) var(--space_medium);
    }
    .drawer_row[open] .content{
      padding-top       : var(--space_small);
    }

    .drawer_row summary b{
      font-weight       : inherit;
    }
    .drawer_row:hover{
      border-color      : var(--color_line);
      box-shadow        : none;
      transform         : none;
    }

    .drawer_group .drawer_row{
      border-radius     : 0;
      background        : transparent;
      margin            : 0;
    }
    .drawer_group .drawer_row + .drawer_row{
      border-top        : var(--border_default);
    }
    .drawer_group .drawer_row:first-of-type summary{
      border-top-left-radius : var(--radius_medium);
      border-top-right-radius: var(--radius_medium);
    }
    .faq_group .drawer_row[open]{
      background        : rgba(var(--color_rgb_white),1);
      box-shadow        : none;
    }
    .faq_group .drawer_row[open] + .drawer_row summary{
      position          : relative;
      z-index           : 2;
      box-shadow        : 0 calc(-1 * var(--drawer_shadow_top)) 190px -150px rgba(var(--color_rgb_black),var(--opacity_medium));
    }
    details{
      border            : var(--border_default);
      border-radius     : var(--radius_medium);
      background        : var(--background_neutral);
      box-shadow        : var(--shadow_soft);
      padding           : var(--space_small) var(--space_small);
      transition        :
        box-shadow   var(--motion_duration_fast) ease,
        border-color var(--motion_duration_fast) ease,
        transform    var(--motion_duration_fast) ease;
    }
    summary{
      border-radius     : var(--radius_medium);
      cursor            : pointer;
      padding           : var(--space_small);
      margin            : calc(-1 * var(--space_small));
      transition        : background var(--motion_duration_fast) ease;
      font-weight       : var(--font_weight_heavy);
      color             : var(--color_text_primary);
      list-style        : none;
      display           : flex;
      align-items       : center;
      justify-content   : flex-start;
      gap               : var(--space_medium);
    }
    .summary_text{
      flex              : 1 1 auto;
      min-width         : 0;
    }
    details:hover{
      border-color      : rgba(var(--color_rgb_black),var(--opacity_light));
      box-shadow        : var(--shadow_card);
      transform         : translateY(-1px);
    }
    @media (hover: hover) and (pointer: fine){
      details:not([open]):hover summary{
        background      : rgba(var(--color_rgb_black),var(--opacity_faint));
      }
    }
    summary::-webkit-details-marker{
      display           : none;
    }
    .caret{
      width             : var(--drawer_caret_size);
      height            : var(--drawer_caret_size);
      border-radius     : var(--radius_small);
      border            : var(--border_default);
      background        : rgba(var(--color_rgb_white),var(--opacity_medium));
      display           : grid;
      place-items       : center;
      color             : var(--color_text_muted);
      flex              : 0 0 auto;
      margin-left       : auto;
      transition        : var(--motion_duration_fast) ease;
      font-weight       : var(--font_weight_heavy);
    }
    details[open] .caret{
      transform         : rotate(90deg);
    }
    details .content{
      margin-top        : var(--space_small);
      color             : var(--color_text_muted);
    }
    details .content p{
      margin            : var(--space_small) 0;
    }
    details .content ul{
      margin            : var(--space_small) 0;
      padding-left      : var(--space_medium);
    }
    details .content li{
      margin            : var(--space_xsmall) 0;
    }

    .about_copy{
      margin            : 0;
      color             : var(--color_text_muted);
    }

    /* Contact form */
    .contact_form{
      display           : flex;
      flex-direction    : column;
      gap               : var(--space_small);
      margin-top        : var(--space_small);
    }
    .contact_field label{
      display           : block;
      margin            : 0 0 var(--space_micro);
      font-size         : .85em;
      color             : var(--color_text_muted);
    }
    .contact_field input,
    .contact_field textarea{
      width             : 100%;
      font-family       : inherit;
      font-size         : inherit;
      line-height       : inherit;
      padding           : var(--space_small) var(--space_small);
      border-radius     : var(--radius_medium);
      border            : var(--border_default);
      background        : var(--background_control);
      color             : inherit;
    }
    .contact_field textarea{
      min-height        : 9rem;
      resize            : vertical;
    }
    .contact_field input:focus,
    .contact_field textarea:focus{
      outline           : none;
      border-color      : rgba(0,0,0,.18);
      box-shadow        : 0 0 0 4px rgba(43,86,179,.14);
    }

    footer{
      border-top        : var(--border_default);
      padding           : var(--header_footer_padding_y) 0;
      background        : var(--color_header_bg);
    }
    .foot{
      display           : flex;
      align-items       : center;
      justify-content   : space-between;
      gap               : var(--space_medium);
      flex-wrap         : wrap;
      text-align        : left;
    }
    .copy{
      display           : flex;
      align-items       : center;
      column-gap        : .35em;
      line-height       : 1;
      color             : rgba(var(--color_rgb_white),var(--opacity_medium));
    }
    .foot_address{
      text-align        : right;
      line-height       : 1;
      color             : rgba(var(--color_rgb_white),var(--opacity_medium));
      white-space       : nowrap;
    }

    @media (max-width: 43.75rem){
      :root{
        --layout_side_padding   : 53px;
        --main_padding_bottom   : var(--main_padding_bottom_mobile);
        --scroll_padding_top    : var(--scroll_padding_top_mobile);

        --drawer_caret_size     : 36px;

        --font_size_body        : 22px;
        --font_size_heading      : 28px;

        --face_size             : 10.8rem;
      }
      .bar{
        padding         : var(--header_footer_padding_y) 0;
      }
      .brand{
        gap             : var(--space_small);
      }
      .hero{
        margin-top      : var(--hero_margin_top_mobile);
      }
      .brand_text{
        font-size       : var(--brand_text_size_mobile);
      }
      footer .foot{
        justify-content : center;
        text-align      : center;
      }
      .foot_address{
        text-align      : center;
        white-space     : normal;
      }

    }